/* Amodent – centrum zubní péče. Tokens come from design-system/index.html. */

/* ───────── Tokens ───────── */
:root {
  --ivory: #F6F3EC;
  --pine: #1C2A22;
  --green: #3D8553;

  --white: #FFFFFF;
  --ivory-deep: #ECE7DC;
  --line: #D6CEBE;
  --pine-soft: #4A574F;
  --green-deep: #2E6A41;
  --green-tint: #E1ECE2;
  --on-dark-soft: #C9CFC6;

  --font: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-head: "Newsreader", Georgia, serif;   /* headings; body and numbers stay in Figtree */
  --w-head: 500;

  --fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  --fs-h1: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-h3: 1.375rem;
  --fs-lead: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem);
  --fs-body: 1.125rem;
  --fs-small: 1rem;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
  --radius: 4px;
  --measure: 62ch;
  --gutter: 20px;
  --max: 1200px;
  --tap: 48px;
  --t: 150ms ease-out;
}
@media (min-width: 768px) { :root { --gutter: 40px; } }

/* ───────── Base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s5); }
body {
  overflow-x: clip;
  margin: 0; background: var(--ivory); color: var(--pine);
  font: 400 var(--fs-body)/1.6 var(--font);
  font-variant-numeric: tabular-nums;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, .hours caption, .tile-title { font-family: var(--font-head); }
h1, h2, h3 { font-weight: var(--w-head); line-height: 1.15; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); letter-spacing: -0.015em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
p, ul, ol, dl, blockquote, figure { margin: 0; }
p { max-width: var(--measure); }
a { color: var(--green-deep); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--pine); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--ivory); }
strong { font-weight: 700; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 10;
  background: var(--pine); color: var(--ivory); padding: var(--s3) var(--s4); font-weight: 700; border-radius: var(--radius);
}
.skip:focus { top: var(--s4); }

/* ───────── Buttons and links ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  min-height: 56px; padding: 0 var(--s5);
  font: 700 1.1875rem/1.2 var(--font);   /* 19 px bold counts as large text: white on #3D8553 is 4.49:1 */
  border-radius: var(--radius); border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--t), color var(--t), border-color var(--t);
}
.btn svg { width: 22px; height: 22px; flex: none; }
.btn-primary { background: var(--green); color: var(--white); }
.btn-primary:hover { background: var(--green-deep); }
.btn-secondary { background: transparent; color: var(--pine); border-color: var(--pine); }
.btn-secondary:hover { background: var(--pine); color: var(--ivory); }
.on-dark .btn-secondary { color: var(--ivory); border-color: var(--ivory); }
.on-dark .btn-secondary:hover { background: var(--ivory); color: var(--pine); }
.num { letter-spacing: 0.02em; white-space: nowrap; }

.btn-sm { min-height: var(--tap); padding: 0 var(--s5); font-size: 1rem; font-weight: 600; gap: var(--s2); }
.btn-sm svg { width: 18px; height: 18px; transition: transform var(--t); }
.btn-sm:hover svg { transform: translateX(2px); }

/* ───────── Notice + header ───────── */
.notice { background: var(--green-tint); font-size: var(--fs-small); }
.notice .wrap { padding-top: var(--s3); padding-bottom: var(--s3); }

.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: var(--s4); min-height: 88px; }
.logo { flex: none; display: block; padding: var(--s2) 0; }
.logo img { width: 170px; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: flex; align-items: center; min-height: var(--tap); padding: 0 8px;
  color: var(--pine); text-decoration: none; white-space: nowrap;
}
/* Hover and current-page bars sit inside each link, inset from its edges, so neighbouring bars never touch */
.site-nav a, .lang a { position: relative; }
.site-nav a::after, .lang a::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 3px; border-radius: 2px;
  background: transparent; transition: background-color var(--t);
}
.site-nav a:hover::after, .lang a:hover::after { background: var(--line); }
.site-nav a[aria-current="page"] { font-weight: 700; }
.site-nav a[aria-current="page"]::after, .lang a[aria-current="true"]::after { background: var(--green); }
.header-tools { display: flex; align-items: center; gap: var(--s4); }
.header-phone { display: flex; flex-direction: column; line-height: 1.25; color: var(--pine); text-decoration: none; white-space: nowrap; }
.header-phone small { font-size: .9375rem; color: var(--pine-soft); }
.header-phone .num { font-weight: 700; }
.header-phone:hover .num { text-decoration: underline; }

.lang ul { display: flex; list-style: none; margin: 0; padding: 0; }
.lang a {
  display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 44px; min-height: var(--tap); padding: 0 4px;
  font-size: .9375rem; font-weight: 700; color: var(--pine-soft); text-decoration: none; letter-spacing: 0.04em;
}
.lang .flag { width: 26px; height: 18px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(28, 42, 34, .18); }
.lang a:hover, .lang a[aria-current="true"] { color: var(--pine); }

.menu-btn { display: none; }

@media (max-width: 1080px) {
  .site-header .wrap { flex-wrap: wrap; gap: 0 var(--s4); min-height: 76px; }
  .logo img { width: 160px; }
  .js .menu-btn {
    display: inline-flex; align-items: center; gap: var(--s2); margin-left: auto;
    min-height: var(--tap); padding: 0 var(--s4);
    font: 700 1rem var(--font); color: var(--pine); background: none;
    border: 2px solid var(--pine); border-radius: var(--radius); cursor: pointer;
  }
  .menu-btn svg { width: 20px; height: 20px; }
  .menu-btn .close { display: none; }
  .menu-btn[aria-expanded="true"] .open { display: none; }
  .menu-btn[aria-expanded="true"] .close { display: block; }
  .site-nav, .header-tools { flex-basis: 100%; margin: 0; }
  .js .site-nav, .js .header-tools { display: none; }
  .js .site-header.is-open .site-nav, .js .site-header.is-open .header-tools { display: block; }
  .site-nav ul { flex-direction: column; padding: var(--s2) 0; border-top: 1px solid var(--line); }
  .site-nav a { padding: 0; min-height: 52px; font-size: 1.25rem; }
  .site-nav a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--green); padding-left: var(--s4); }
  .site-nav a::after { display: none; }
  .header-tools { display: flex; justify-content: space-between; padding: var(--s3) 0 var(--s5); border-top: 1px solid var(--line); }
  .js .site-header.is-open .header-tools { display: flex; }
}

/* ───────── Sections ───────── */
.section { padding: var(--s8) 0; }
.section + .section { border-top: 1px solid var(--line); }
.band { background: var(--ivory-deep); border-top: 0 !important; }
.band + .section { border-top: 0; }
.section-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s4) var(--s6); margin-bottom: var(--s6); }
.section-bar p { margin-top: var(--s3); color: var(--pine-soft); }
.section-head { display: grid; gap: var(--s3); margin-bottom: var(--s6); }
.section-head p { color: var(--pine-soft); }
.split { display: grid; gap: var(--s7); }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; column-gap: var(--s8); }
  .split-4-8 { grid-template-columns: 4fr 8fr; }
}

/* Page heading on subpages */
.page-head { padding: var(--s8) 0 var(--s7); }
.page-head p { margin-top: var(--s4); font-size: var(--fs-lead); color: var(--pine-soft); }

/* ───────── Hero ───────── */
/* The team photo sits behind the hero and fades into the page on the side where the text is,
   so every team member stays visible. On phones it sits on top and fades downwards. */
/* Hero: the team photo in a wide frame with the motto set on it.
   Phones: photo edge to edge, text below it on the page background. */
.hero { padding: 0 0 var(--s7); }
.hero .wrap { display: grid; }
.frame-media { position: relative; margin: 0 calc(-1 * var(--gutter)); }
.frame-media > img { width: 100%; aspect-ratio: 800 / 550; object-fit: cover; }
.frame-text { padding: var(--s5) var(--gutter) 0; }
.hero h1 { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.02em; }
.hero h1 em { font-style: italic; color: var(--green-deep); }
.hero .motto { margin-top: var(--s3); font-size: var(--fs-lead); color: var(--pine-soft); }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s5); }

.facts { margin-top: var(--s6); }
.facts div { display: grid; grid-template-columns: 10rem 1fr; gap: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.facts div:last-child { border-bottom: 1px solid var(--line); }
.facts dt { color: var(--pine-soft); }
.facts dd { margin: 0; font-weight: 700; }
.facts dd a { color: inherit; }

@media (min-width: 1000px) {
  .hero { padding: var(--s7) 0 var(--s8); }
  .frame-media { margin: 0; border-radius: 8px; overflow: hidden; }
  /* 16:9 crop taken from the floor, so the logo on the wall stays in shot */
  .frame-media > img { aspect-ratio: 16 / 9; object-position: 50% 30%; }
  .frame-media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(18, 28, 22, .9) 0%, rgba(18, 28, 22, .6) 26%, transparent 52%);
  }
  .frame-text {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: var(--s7);
    display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: var(--s7);
  }
  .frame-text h1 { color: var(--white); font-size: clamp(2.5rem, 1.5rem + 2.6vw, 4.25rem); grid-column: 1; }
  .frame-text h1 em { color: #CFE5D4; }
  .frame-text .motto { color: #E4E8E2; grid-column: 1; }
  .frame-text .actions { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .frame-text .btn-secondary { color: var(--white); border-color: var(--white); }
  .frame-text .btn-secondary:hover { background: var(--white); color: var(--pine); }

  /* Facts as a three-column strip under the photo */
  .facts-row { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--s5); border-bottom: 1px solid var(--line); }
  .facts-row div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: var(--s5) var(--s5) var(--s5) 0; border-top: 0; border-bottom: 0 !important; }
  .facts-row div + div { padding-left: var(--s5); border-left: 1px solid var(--line); }
  .facts-row dd { font-size: 1.25rem; }
}

/* ───────── People ───────── */
.people { display: grid; gap: var(--s6) var(--s5); grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; padding: 0; }
@media (min-width: 900px) { .people { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.person { display: grid; gap: var(--s3); align-content: start; }
.person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 15%; background: var(--white); border-radius: 6px; margin-bottom: var(--s2); transition: transform 300ms cubic-bezier(.2, .7, .2, 1); }
.person a:hover img { transform: translateY(-3px); }
.person .title { font-size: var(--fs-small); color: var(--pine-soft); }
.person h3 { font-size: 1.375rem; }
.person .status { font-size: var(--fs-small); color: var(--pine-soft); }
.person a { color: inherit; text-decoration: none; }
.person a:hover h3 { text-decoration: underline; }

/* Doctor profile (Tým page) */
.doctor { display: grid; gap: var(--s5); padding: var(--s7) 0; border-top: 1px solid var(--line); scroll-margin-top: var(--s5); }
.doctor:last-of-type { border-bottom: 1px solid var(--line); }
.doctor img { width: 100%; max-width: 320px; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 15%; }
.doctor .title { color: var(--pine-soft); }
.doctor h3 { font-size: var(--fs-h2); }
.doctor ul { margin-top: var(--s5); padding-left: 1.1em; max-width: var(--measure); }
.doctor li + li { margin-top: var(--s2); }
.doctor .status { margin-top: var(--s4); display: inline-block; background: var(--green-tint); padding: var(--s1) var(--s3); font-size: var(--fs-small); }
.motto-quote { margin-top: var(--s5); padding-left: var(--s4); border-left: 3px solid var(--green); max-width: var(--measure); }
.motto-quote p { font-size: var(--fs-lead); line-height: 1.45; }
.motto-quote footer { margin-top: var(--s1); font-size: var(--fs-small); color: var(--pine-soft); }
@media (min-width: 760px) { .doctor { grid-template-columns: 280px 1fr; column-gap: var(--s7); align-items: start; } }

/* ───────── Services ───────── */
.services { list-style: none; padding: 0; counter-reset: s; }
.services > li { counter-increment: s; display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s4); padding: var(--s5) 0; border-top: 1px solid var(--line); }
.services > li:last-child { border-bottom: 1px solid var(--line); }
.services > li::before { content: counter(s); font-size: 1.5rem; font-weight: 600; line-height: 1.2; color: var(--green); }
.services h3 { font-size: 1.25rem; }
.services p { margin-top: var(--s1); color: var(--pine-soft); }
.services ul { margin-top: var(--s2); padding-left: 1.1em; color: var(--pine-soft); }
.services ul li + li { margin-top: var(--s1); }

.equipment { columns: 2 300px; column-gap: var(--s7); padding-left: 1.1em; }
.equipment li { break-inside: avoid; padding: var(--s1) 0; }

.photos { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: var(--s7); }
.photos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.photos figcaption, .figure figcaption { margin-top: var(--s2); font-size: var(--fs-small); color: var(--pine-soft); }
.figure img { width: 100%; }
@media (max-width: 899px) {
  /* Side photos would push the lists down on narrow screens */
  .figure.aside-only { display: none; }
  .split .figure { max-width: 260px !important; }
}

/* ───────── Hours ───────── */
.hours { border-collapse: collapse; width: 100%; max-width: 440px; }
.hours caption { text-align: left; font-size: var(--fs-h3); font-weight: 600; padding-bottom: var(--s3); }
.hours caption small { display: block; font-size: var(--fs-small); font-weight: 400; color: var(--pine-soft); margin-top: var(--s1); }
.hours th, .hours td { text-align: left; padding: var(--s3); border-top: 1px solid var(--line); }
.hours tbody tr:last-child th, .hours tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.hours th { font-weight: 400; }
.hours td { text-align: right; white-space: nowrap; }
.hours tr.today { background: var(--green-tint); }
.hours tr.today th, .hours tr.today td { font-weight: 700; }
.hours tr.today th::after { content: " · dnes"; font-weight: 400; color: var(--green-deep); }
.hours-grid { display: grid; gap: var(--s7); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ───────── Contact ───────── */
.contact { display: grid; gap: var(--s5); font-style: normal; }
.contact div { display: grid; gap: 2px; }
.contact dt, .contact .label { color: var(--pine-soft); font-size: var(--fs-small); }
.contact dd { margin: 0; font-size: 1.25rem; }
.contact dd a { color: var(--pine); font-weight: 700; }

/* Hygienists */
.hygienists { list-style: none; padding: 0; }
.hygienists > li { display: grid; gap: var(--s4); padding: var(--s6) 0; border-top: 1px solid var(--line); }
.hygienists > li:last-child { border-bottom: 1px solid var(--line); }
.hygienists h3 { font-size: 1.5rem; }
.hygienists .phone { margin-top: var(--s2); }
.hygienists .phone a { font-weight: 700; }
.hygienists .hours caption { font-size: var(--fs-small); font-weight: 700; }
@media (min-width: 860px) { .hygienists > li { grid-template-columns: 1fr 1fr; column-gap: var(--s7); align-items: start; } }

/* Price lists */
.docs { list-style: none; padding: 0; max-width: 720px; }
.docs li { border-top: 1px solid var(--line); }
.docs li:last-child { border-bottom: 1px solid var(--line); }
.docs a {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s4); align-items: center;
  padding: var(--s5) 0; color: var(--pine); text-decoration: none;
}
.docs .tag { grid-row: span 2; font-size: .875rem; font-weight: 700; padding: 6px 8px; border: 1.5px solid var(--pine); border-radius: 2px; letter-spacing: 0.03em; }
.docs .name { font-size: 1.25rem; font-weight: 700; color: var(--green-deep); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.docs a:hover .name { text-decoration-thickness: 2px; }
.docs .meta { font-size: var(--fs-small); color: var(--pine-soft); }

/* ───────── Emergency ───────── */
.on-dark { background: var(--pine); color: var(--ivory); }
.on-dark a { color: var(--ivory); }
.on-dark .muted { color: var(--on-dark-soft); }
.emergency { padding: var(--s8) 0; }
.emergency .wrap { display: grid; gap: var(--s6); }
.emergency h2 { font-size: var(--fs-h2); }
.emergency .muted { margin-top: var(--s4); }
.emergency dl div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--s4); padding: var(--s2) 0; border-top: 1px solid rgba(246, 243, 236, .2); }
.emergency dt { color: var(--on-dark-soft); }
.emergency dd { margin: 0; font-weight: 700; }
.emergency .btn { margin-top: var(--s5); }
@media (min-width: 900px) { .emergency .wrap { grid-template-columns: 1fr 1fr; column-gap: var(--s8); align-items: start; } }

/* ───────── Footer ───────── */
.site-footer { background: var(--ivory-deep); padding: var(--s7) 0 var(--s6); font-size: var(--fs-small); }
.site-footer .wrap { display: grid; gap: var(--s6); }
.site-footer .name { font-size: 1.125rem; font-weight: 700; }
.site-footer address { font-style: normal; margin-top: var(--s2); line-height: 1.7; }
.site-footer address a { color: var(--pine); }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 0 var(--s5); grid-template-columns: repeat(2, max-content); }
.site-footer ul a { display: inline-flex; align-items: center; min-height: 44px; color: var(--pine); }
.site-footer .legal { color: var(--pine-soft); padding-top: var(--s5); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .site-footer .wrap { grid-template-columns: 1fr auto; } .site-footer .legal { grid-column: 1 / -1; } }

/* ───────── Homepage: services + tiles ───────── */
.services-intro { display: grid; gap: var(--s5) var(--s8); margin-bottom: var(--s7); }
.services-intro p { margin-top: var(--s3); color: var(--pine-soft); }
.services-compact { list-style: none; padding: 0; counter-reset: s; display: grid; gap: 0 var(--s6); }
.services-compact li { counter-increment: s; display: flex; gap: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--line); font-weight: 600; }
.services-compact li::before { content: counter(s); color: var(--green); min-width: 1.25rem; }
@media (min-width: 900px) {
  .services-intro { grid-template-columns: 4fr 8fr; }
  .services-compact { grid-template-columns: 1fr 1fr; align-content: start; }
}

.tiles { display: grid; gap: var(--s5); }
@media (min-width: 760px) { .tiles { grid-template-columns: 1fr 1fr; } }
.tile {
  position: relative; display: block; overflow: hidden; border-radius: 6px; min-height: 360px;
  color: var(--white); text-decoration: none; background: var(--pine); isolation: isolate;
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 400ms cubic-bezier(.2, .7, .2, 1); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(20, 31, 25, .92) 0%, rgba(20, 31, 25, .55) 45%, rgba(20, 31, 25, .05) 80%); }
.tile:hover img { transform: scale(1.04); }
.tile-body { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s5); align-items: end; padding: var(--s6); }
.tile-title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: var(--w-head); line-height: 1.15; }
.tile-text { grid-column: 1; max-width: 46ch; color: #E4E8E2; font-size: var(--fs-small); }
.tile-go {
  grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--green); transition: background-color var(--t);
}
.tile-go svg { width: 22px; height: 22px; }
.tile:hover .tile-go { background: var(--green-deep); }
.tile:focus-visible { outline-offset: 4px; }
@media (min-width: 1000px) { .tile { min-height: 420px; } }

/* ───────── Homepage: equipment mosaic ───────── */
.equipment-home { display: grid; gap: var(--s7); align-items: center; }
.equipment-short { list-style: none; padding: 0; margin: var(--s5) 0; }
.equipment-short li { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.equipment-short li:last-child { border-bottom: 1px solid var(--line); }
.mosaic { display: grid; gap: var(--s4); grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mosaic figure { position: relative; overflow: hidden; border-radius: 6px; margin: 0; }
.mosaic .m-tall { grid-row: span 2; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; min-height: 160px; }
.mosaic figcaption {
  position: absolute; left: var(--s3); bottom: var(--s3); padding: 4px 10px; border-radius: 3px;
  background: var(--pine); color: var(--ivory); font-size: .9375rem; font-weight: 600;
}
@media (min-width: 900px) { .equipment-home { grid-template-columns: 4fr 7fr; column-gap: var(--s8); } .mosaic { min-height: 480px; } }

/* ───────── Homepage: where to find us ───────── */
.find-us { display: grid; gap: var(--s7); }
.find-us-info { display: grid; gap: var(--s6); align-content: start; }
.map { display: grid; gap: var(--s3); align-content: start; }
.map iframe { width: 100%; height: 420px; border: 0; border-radius: 6px; background: var(--ivory-deep); filter: saturate(.85); }
@media (min-width: 900px) {
  .find-us { grid-template-columns: 5fr 7fr; column-gap: var(--s8); }
  .find-us .map iframe { height: 100%; min-height: 560px; }
  .find-us .map { grid-template-rows: 1fr auto; }
}

/* ───────── Background motifs ───────── */
/* Bands get a soft "smile" curve on their top edge */
.band { position: relative; }
.band::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: clamp(24px, 4vw, 56px); pointer-events: none;
  background: var(--ivory-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0Q50 20 100 0V10H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0Q50 20 100 0V10H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.has-motif { overflow-x: clip; }
.has-motif > .wrap { position: relative; }


/* Mosaic captions on phones */
@media (max-width: 700px) { .mosaic figcaption { font-size: .8125rem; left: 8px; bottom: 8px; right: 8px; width: fit-content; } }


/* Header at medium desktop widths: drop the "Recepce" phone (it's in the hero and footer) before anything overflows */
@media (min-width: 1081px) and (max-width: 1179px) { .header-phone { display: none; } }

/* Price-list PDFs */
.docs a { grid-template-columns: auto 1fr auto; }
.docs .go { grid-column: 3; grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--green-deep); }
.docs .go svg { width: 22px; height: 22px; }

/* Amorek: the cupid from the clinic's wall, as a quiet figure in the background of the contact section */
.site-footer .wrap { position: relative; }
.motif-amorek {
  position: absolute; right: var(--gutter); bottom: 0; width: 110px;
  opacity: .5; filter: grayscale(.3); transform: scaleX(-1); pointer-events: none; mix-blend-mode: multiply;
}
.site-footer .legal { max-width: none; padding-right: 140px; margin-top: var(--s6); min-height: 86px; }
@media (max-width: 899px) { .site-footer .legal { padding-right: 120px; } }

/* Subpage heading with a photo (Dentální hygiena) */
.page-head-photo .wrap { display: grid; gap: var(--s6); align-items: end; }
.page-head-photo figure { margin: 0; }
.page-head-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; }
@media (min-width: 900px) { .page-head-photo .wrap { grid-template-columns: 1fr 1fr; column-gap: var(--s8); } }

/* ───────── Doodles, shapes and frames (decorative only) ───────── */
.deco, .hero { position: relative; overflow-x: clip; }
.deco > .wrap, .hero > .wrap, .has-motif > .wrap { position: relative; z-index: 1; }

/* Equipment: circle behind the mosaic, sparkles, and an outline frame offset from the photos */
.mosaic { position: relative; }
@media (min-width: 900px) {
  .mosaic::before {
    content: ""; position: absolute; inset: 18px -18px -18px 18px; z-index: -1;
    border: 1.5px solid var(--green); border-radius: 8px; opacity: .4;
  }
}

/* Keep decorations from spilling over the header */
.site-header { position: relative; z-index: 5; background: var(--ivory); }
.page-head.deco { overflow: clip; }

/* ───────── One decorative system: the smile ───────── */
/* 1. A short green smile curve under every section heading ("úsměv" from the motto, green from the logo) */
.section h2:not(.visually-hidden):not(.hygienists h2), .page-head h1, .emergency h2 { position: relative; padding-bottom: 22px; }
.section h2:not(.visually-hidden):not(.hygienists h2)::after, .page-head h1::after, .emergency h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 12px; background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 12'%3E%3Cpath d='M2 2.5C14 12 42 12 54 2.5' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 12'%3E%3Cpath d='M2 2.5C14 12 42 12 54 2.5' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.emergency h2::after { background: #8FC39E; }
/* 2. Shaded sections open with the same smile curve along their top edge (.band::before)
   3. Main photos get a thin green outline frame offset behind them (hero, equipment, hygiene photo) */
.page-head-photo figure { position: relative; }
@media (min-width: 900px) {
  .page-head-photo figure::before {
    content: ""; position: absolute; inset: 18px -18px -18px 18px; z-index: -1;
    border: 1.5px solid var(--green); border-radius: 8px; opacity: .45;
  }
  .page-head-photo .wrap { position: relative; z-index: 1; }
}
.frame-outline { display: none; }
@media (min-width: 1000px) {
  .hero .wrap { position: relative; }
  .frame-outline {
    display: block; position: absolute; z-index: -1; pointer-events: none;
    left: calc(var(--gutter) + 18px); right: calc(var(--gutter) - 18px); top: 18px; aspect-ratio: 16 / 9;
    border: 1.5px solid var(--green); border-radius: 8px; opacity: .45;
  }
}