/* =========================================================================
   KLINICKÁ LOGOPEDIE — TEMPLATE STYLESHEET
   =========================================================================
   How this file is organized (search for these dashed headers to jump
   around — they appear in the same top-to-bottom order as the page):

     1.  :root                → design tokens (colors, fonts, spacing...)
     2.  Reset                → browser default overrides
     3.  Base typography      → h1-h4, p, links, buttons (global defaults)
     4.  Buttons               → .btn and its color variants
     5.  Placeholder media     → the dashed gray "replace me" boxes
     6.  Header                → the fixed top bar + logo + nav + burger
     7.  Hero                  → the big full-screen intro banner
     8.  Sections (generic)    → shared layout used by every content block
     9.  About                 → "O nás" two-column bio block
     9b. Advantages            → "Proč si vybrat nás" 6-tile grid
     10. Team                  → "Náš tým" photo grid
     11. Specialisation tags   → the pill/chip list of disorders
     12. Accreditation         → certificate cards + self-pay price list
     13. Contact                → contact cards + map placeholder
     14. Footer                 → dark bottom bar
     15. Back to top            → floating round button, bottom-right
     16. Modal                  → the "Více informací" popup window
     17. Cookie banner          → the consent bar pinned to the bottom
     18. Reveal-on-scroll       → fade/slide-in animation on scroll
     19. Responsive             → breakpoints that adapt everything above
   ========================================================================= */


/* =========================================================================
   1. DESIGN TOKENS (CSS custom properties / "variables")
   =========================================================================
   Every color, spacing value, radius and shadow used anywhere in this file
   is defined ONCE here and then referenced everywhere else as var(--name).
   This is the single place to edit if you want to re-brand the whole site
   (e.g. change --color-primary and every button/link/icon updates together).
   ========================================================================= */
:root {

  /* ---- Brand color (teal/cyan) ----
     Used for: buttons, links, active nav state, icons, headings accent
     word, tag pills, focus rings.
     NOTE: #0e7490 was chosen (instead of the lighter #0891b2 seen on the
     original site) because it reaches ~5.4:1 contrast against white,
     which passes the WCAG AA accessibility minimum (4.5:1) for normal
     text and button labels — the lighter shade only reached ~3.7:1. */
  --color-primary: #0e7490;       /* main brand teal — buttons, links, icons */
  --color-primary-dark: #0b5566;  /* darker teal — hover/active states */
  --color-primary-light: #ecfeff; /* pale teal wash — icon badge backgrounds, tag pill fill */
  --color-primary-tint: #cffafe;  /* light teal text — used ON DARK backgrounds (hero nav, footer links) */

  /* ---- Hero name accent (violet) — one of the 4 logo icon colors, used
     only for "PaedDr. Mária Jancíková" in the hero H1. Regular teal
     (--color-primary) is too close in tone to the dark hero overlay to
     read clearly there; violet doesn't appear in either rotating hero
     background (interior room, exterior building), so it stays legible
     against both instead of blending in like teal did. Light tint, same
     reasoning as --color-primary-tint above — needs to pop on near-black. */
  --color-hero-accent: #d8b4fe;

  /* ---- Notice/callout (amber) — the Kontakt cancellation-policy box.
     Kept separate from the teal brand scale on purpose: this needs to
     read as "please note this", distinct from the brand color used
     for ordinary buttons/links/icons everywhere else. */
  --color-notice-bg: #fffbeb;
  --color-notice-border: #fde68a;
  --color-notice-text: #92400e;

  /* ---- Text colors ---- */
  --color-text: #0f172a;        /* near-black — headings, body default */
  --color-text-muted: #475569;  /* gray — paragraph copy */
  --color-text-soft: #64748b;   /* lighter gray — captions, placeholder labels */

  /* ---- Surface / background colors ---- */
  --color-bg: #ffffff;          /* default page background */
  --color-bg-alt: #f8fafc;      /* very light gray — used to alternate section backgrounds
                                    (see .section-alt) so sections visually separate
                                    without needing borders/lines */
  --color-border: #e2e8f0;      /* hairline borders on cards, contact boxes, dividers */

  --color-white: #ffffff;

  /* ---- Fonts ----
     Heading font = elegant serif (matches the reference site's logo/H1 style)
     Body font    = clean sans-serif for readability at small sizes */
  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ---- Spacing scale ----
     A fixed set of steps (roughly 4px/8px multiples) used for every
     margin/padding/gap in the file instead of ad-hoc numbers. Keeps
     vertical rhythm consistent across the whole page. Higher number =
     more space. --space-9 (96px) is the big gap between page sections. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Corner radius ---- */
  --radius-sm: 6px;   /* buttons, icon badges, small chips */
  --radius-md: 12px;  /* cards, photo placeholders, modal */
  --radius-lg: 20px;  /* reserved for larger rounded panels */

  /* ---- Drop shadows (subtle → strong) ---- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);   /* resting cards, scrolled header */
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);  /* hovered cards, back-to-top button */
  --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.14); /* the "Více informací" modal */

  --container-w: 1180px; /* max width of page content (.container) before it centers with side gaps */
  --header-h: 76px;      /* height of the fixed header; hero padding-top uses this so
                             content never sits underneath the fixed bar */

  --transition: 200ms ease; /* the one shared speed for hover/color/transform transitions,
                                so every interactive element feels consistent */
}

/* =========================================================================
   2. RESET — small normalizations applied to every element
   ========================================================================= */

/* box-sizing: border-box means padding/border are counted INSIDE an
   element's declared width, so width:100% never overflows its container. */
*, *::before, *::after { box-sizing: border-box; }

/* Makes clicking a nav link (e.g. "O nás") glide-scroll to that section
   instead of jumping instantly. scroll-padding-top reserves space equal
   to the fixed header's height, so an anchor target lands just below
   the header instead of partly hidden underneath it — this was masked
   everywhere anchors used to land (nav links land inside a section's
   own top padding, which is taller than the header), but became a real
   visible clip once the "Proč si vybrat nás" tiles started linking
   straight to individual cards inside Služby, which have no such
   padding of their own above them. */
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

/* Accessibility: if the visitor's OS has "reduce motion" turned on,
   kill smooth scrolling and shrink all animations/transitions to
   near-zero so nothing moves for people who find motion uncomfortable. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: 16px;     /* the baseline text size the whole site scales from */
  line-height: 1.6;    /* comfortable line spacing for paragraphs */
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; } /* images/placeholders never overflow their box */
ul { margin: 0; padding: 0; list-style: none; } /* remove default bullets/indent everywhere;
                                                    lists that DO want bullets restyle themselves */
a { color: inherit; text-decoration: none; } /* links take on their parent's text color and
                                                 lose the default underline; each link component
                                                 below re-adds its own hover/color styling */
button { font: inherit; cursor: pointer; }

/* =========================================================================
   3. BASE TYPOGRAPHY — default look of headings/paragraphs site-wide
   ========================================================================= */
h1, h2, h3, h4 {
  font-family: var(--font-heading); /* the serif "Playfair Display" everywhere titles appear */
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}
/* clamp(min, preferred, max) = fluid font size: it scales with the
   viewport width (the middle "vw" value) but never shrinks below the
   first number or grows past the last — this is why headings resize
   smoothly between mobile and desktop instead of jumping at breakpoints. */
h1 { font-size: clamp(2.1rem, 4.5vw, 3.6rem); } /* used once: the big hero title */
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }   /* used for every section heading
                                                    ("Naše hodnoty", "O nás", "Náš tým"...) */
h3 { font-size: 1.25rem; margin-bottom: var(--space-2); } /* card titles, contact card labels */
p { margin: 0 0 var(--space-4); color: var(--color-text-muted); } /* default paragraph gray */

/* .container centers content and caps its width so lines of text don't
   stretch edge-to-edge on very wide monitors. Every section wraps its
   content in <div class="container"> — this is the single place that
   controls the page's overall left/right margins. */
.container {
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* The small uppercase teal label above most section headings, e.g.
   "LOGOPEDICKÁ AMBULANCE" in the hero, "NAŠE HODNOTY", "O NÁS", etc. */
.eyebrow {
  font-family: var(--font-body); /* explicit: every other eyebrow is a <p> so this happens
    automatically, but "Výhody naší praxe" is an <h3> — without this it would keep the
    serif heading font from the shared h1-h4 rule and still read as a second headline. */
  color: var(--color-primary);
  font-weight: 600;
  letter-spacing: 0.06em; /* slightly spaced-out letters = a common "label" style cue */
  text-transform: uppercase;
  font-size: 0.82rem;
  margin-bottom: var(--space-2);
}

/* Used on the single highlighted word inside the hero H1:
   "Klinická logopedie <span class="accent">[Název] s.r.o</span>" */
.accent { color: var(--color-primary); }

/* ---- Skip link (accessibility) ----
   Hidden off-screen until a keyboard user presses Tab, at which point it
   becomes the very first focusable element — letting them jump straight
   to <main> instead of tabbing through the whole nav on every page load. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; } /* slides into view only while focused */

/* ---- Keyboard focus ring ----
   Applies to every link/button on the site when reached via Tab (not
   when clicked with a mouse) — a visible outline is required for
   keyboard/screen-reader users to know where they are on the page. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================================================
   4. BUTTONS
   =========================================================================
   One shared .btn base class + modifier classes for each color style.
   Appears on: hero ("Kontaktujte nás" / "Naše služby"), service cards
   ("Více informací" — actually uses .link-more, see below), accreditation
   ("Pokyny ke stáži" / "Přihláška ke stáži"), and the cookie banner
   ("Přijmout" / "Odmítnout" / "Nastavení"). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.98rem;
  border: 1.5px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  min-height: 44px; /* meets the 44px minimum touch-target size recommended for mobile taps */
}
.btn:active { transform: translateY(1px); } /* tiny "press down" feedback on click */

/* Solid teal button — the main call-to-action style, e.g. "Kontaktujte nás" */
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); }

/* White button with a teal outline/text — secondary emphasis,
   e.g. "Přihláška ke stáži" in the accreditation section */
.btn-outline { background: #fff; color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary-light); }

/* Neutral/transparent button with a plain gray border — lowest emphasis,
   e.g. "Naše služby" in the hero, "Pokyny ke stáži" */
.btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Smaller sizing modifier — used for the nav's "Objednat se" button and
   the three cookie-banner buttons, which sit in a tighter space */
.btn-sm { padding: 9px 18px; font-size: 0.9rem; min-height: 38px; }

/* =========================================================================
   5. PLACEHOLDER MEDIA
   =========================================================================
   The dashed, diagonally-striped gray boxes standing in for real photos
   until you add your own images. Appears in: hero background, each team
   member's photo, and the contact section's map ("O nás" no longer has
   a photo slot — see section 9 — and the pricing section no longer
   uses this either, it's a plain price list now, see section 12). To
   replace one: delete the
   <div class="placeholder-media">...</div> in index.html and put an
   <img> (or a CSS background-image) in its place — the surrounding
   layout (aspect ratio, rounded corners) is controlled separately by
   each section below (e.g. .team-photo). */
.placeholder-media {
  position: relative;
  background:
    repeating-linear-gradient(135deg, #eef2f6, #eef2f6 10px, #e4e9ef 10px, #e4e9ef 20px);
  border: 1px dashed #c7d0da;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-text-soft);
}
/* The little pill-shaped caption ("Foto", "Fotografie ambulance...") that
   floats on top of each placeholder box explaining what should go there. */
.placeholder-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-soft);
  background: rgba(255, 255, 255, 0.85);
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  text-align: center;
  max-width: 80%;
}

/* =========================================================================
   6. HEADER
   =========================================================================
   The bar fixed to the very top of the viewport at all times, containing
   the logo (left), nav links + "Objednat se" button (right, desktop),
   and the hamburger icon (right, mobile only). */
.site-header {
  position: fixed;   /* stays pinned while the page scrolls underneath it */
  inset-inline: 0;   /* shorthand for left:0; right:0 */
  top: 0;
  height: var(--header-h);
  z-index: 500;      /* sits above page content, below the modal/cookie-banner/menu */
  display: flex;
  align-items: center;
  background: transparent; /* transparent at the top of the page, so the hero
                               photo shows through behind the logo/nav */
  transition: background var(--transition), box-shadow var(--transition), height var(--transition);
}
/* Pages with no hero photo (e.g. ochrana-osobnich-udaju.html) have nothing
   dark behind the header for the white pre-scroll logo/nav text to sit on
   — a plain white section right at the top makes it unreadable. Give
   those pages' header the same dark navy as the footer instead, so the
   white text still has the contrast it needs. .is-scrolled still takes
   over normally once they scroll, same as every other page. */
body.page-no-hero .site-header:not(.is-scrolled) { background: #0b1220; }
/* JS (script.js) adds this class once the user scrolls past 40px — see
   the "Header scroll state" block in script.js — swapping the header
   from transparent-over-hero to a solid frosted-white bar with a shadow,
   and shrinking it slightly (76px → 68px). */
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px); /* frosted-glass blur behind the bar */
  box-shadow: var(--shadow-sm);
  height: 68px;
}
.header-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo pinned left, nav pinned right */
}

/* The logo: round icon bubble + wordmark "[Název]Logopedie" */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
}
/* While the header is still transparent (top of page, over the dark
   hero photo), the logo text needs to be white instead of near-black
   to stay readable — this rule only applies when .is-scrolled is absent. */
.site-header:not(.is-scrolled) .logo { color: var(--color-white); }
.logo-mark { /* the round pale-teal circle behind the speech-bubble icon */
  display: inline-flex;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.logo-text strong { color: var(--color-primary); font-weight: 700; } /* the "Logopedie" half of the wordmark */

/* Header logo mark: the 4 pictogram icons (voice/speech/cognition/hearing)
   tight together, plus a two-line name block sized to sit within their
   own height rather than growing past what a navbar should hold. */
.logo-icons { display: flex; gap: 3px; flex-shrink: 0; }
.logo-icons img { width: 34px; height: 34px; border-radius: 7px; display: block; }
.logo-name-block { display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.logo-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.1;
  white-space: nowrap;
}
/* Tracked out with letter-spacing to span the exact same width as
   .logo-name above it (measured against the real rendered header, not
   guessed) — the "boxed" look where both lines line up edge to edge.
   opacity (not a separate color) keeps it a muted version of whatever
   .logo's own color currently is — white pre-scroll, dark after — so it
   doesn't need its own light/dark override. */
.logo-tag {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 3.07px;
  opacity: 0.65;
  white-space: nowrap;
}

/* Desktop nav: the row of links + CTA button, wrapped together so they
   can be repositioned as one unit into a dropdown panel on mobile
   (see the 720px breakpoint near the bottom of this file). */
.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.main-nav ul {
  display: flex;
  gap: var(--space-5);
}
.nav-link { /* Domů / O nás / Náš tým / Služby / Kontakt */
  font-weight: 500;
  padding: var(--space-2) var(--space-1);
  color: var(--color-text);
  position: relative; /* anchors the ::after underline below */
  transition: color var(--transition);
}
.site-header:not(.is-scrolled) .nav-link { color: var(--color-white); } /* white links over the hero photo */

/* A thin teal underline that grows in from the left on hover, and stays
   fully grown for whichever link is "active". The ".is-active" class is
   toggled by the scroll-spy logic in script.js as the user scrolls past
   each section, so the nav always shows which part of the page you're on. */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);   /* collapsed by default */
  transition: transform var(--transition);
}
.nav-link:hover, .nav-link.is-active { color: var(--color-primary); }
/* Over the dark hero photo, use the paler tint instead of the regular
   teal so hovered/active links stay legible against the dark overlay. */
.site-header:not(.is-scrolled) .nav-link:hover,
.site-header:not(.is-scrolled) .nav-link.is-active { color: var(--color-primary-tint); }
.nav-link.is-active::after, .nav-link:hover::after { transform: scaleX(1); } /* underline expands */
.nav-cta { white-space: nowrap; } /* keeps "Objednat se" from wrapping onto two lines */

/* The hamburger icon (3 horizontal bars). display:none on desktop —
   the 720px breakpoint below turns it on and hides the inline nav list. */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;   /* 44x44 = comfortable tap target on touchscreens */
  height: 44px;
  background: transparent;
  border: none;
  padding: 0;
}
.menu-toggle span { /* each of the 3 bars */
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  transition: transform var(--transition), opacity var(--transition), background var(--transition);
}
.site-header:not(.is-scrolled) .menu-toggle span { background: var(--color-white); }
/* When script.js sets aria-expanded="true" on the button (menu open),
   these three rules morph the 3 bars into an "X": top bar rotates down
   into a diagonal, middle bar fades out, bottom bar rotates up to meet
   the top one. */
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================================
   7. HERO
   =========================================================================
   The full-viewport-height intro banner at the very top of the page:
   photo placeholder background + dark overlay + headline/subtext/buttons
   on top, plus a bouncing "scroll down" chevron at the bottom edge. */
.hero {
  position: relative;   /* anchors the absolutely-positioned bg/overlay children */
  min-height: 100vh;    /* fills the whole screen height on load */
  display: flex;
  align-items: center;  /* vertically centers .hero-content */
  overflow: hidden;
  color: var(--color-white);
}
/* The hero background: 3 layers (video + 2 photos) stacked exactly on
   top of each other, stretched to fill the entire hero (inset:0) and
   sitting BEHIND everything else via normal DOM order (painted first).
   Only one layer is visible at a time — script.js toggles .is-active,
   and the opacity transition below is what makes that a crossfade
   instead of a hard cut. */
.hero-bg {
  position: absolute;
  inset: 0;
}
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-media.is-active { opacity: 1; }
/* Reduced-motion: no video, no crossfade rotation — just hero_clinic as
   a plain static image, same philosophy as the reveal/counter animations
   elsewhere on the site. script.js also skips starting the rotation. */
@media (prefers-reduced-motion: reduce) {
  #heroVideo { display: none; }
  #heroPhoto1 { opacity: 1; transition: none; }
}

/* A dark gradient painted on top of the background photo so the white
   headline text stays readable regardless of how bright the real photo
   ends up being once you swap it in. */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 20, 30, 0.72) 0%, rgba(6, 20, 30, 0.55) 55%, rgba(6, 20, 30, 0.8) 100%);
}
/* The actual text/button content, raised above the photo+overlay with
   z-index. padding-top pushes it down below the fixed header so the
   headline doesn't start underneath the logo/nav bar. */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding-top: var(--header-h);
}
.hero .eyebrow { color: var(--color-primary-tint); } /* "LOGOPEDICKÁ AMBULANCE" label — pale teal so it reads on the dark photo */
.hero .accent { color: var(--color-hero-accent); } /* name in the H1 — overrides the sitewide teal .accent just here */
.hero h1 { color: var(--color-white); }
.hero-lead { /* the paragraph under the H1 */
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.88);
  max-width: 600px;
}
.hero-actions { /* wraps the two hero buttons */
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}
/* The hero's "Naše služby" button needs its own ghost-button colors
   (white instead of the usual dark gray) since it sits on a dark photo,
   not the default white page background. */
.hero .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.hero .btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

/* The small downward chevron near the bottom of the hero that gently
   bobs up and down to hint "scroll for more" — clicking it jumps to
   the "Naše hodnoty" section. */
.scroll-cue {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  z-index: 2;
  animation: bob 2.2s ease-in-out infinite;
  border-radius: 50%;
  padding: var(--space-2);
}
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* =========================================================================
   8. SECTIONS (generic/shared layout)
   =========================================================================
   Reusable building blocks used by EVERY content section after the hero:
   "Naše hodnoty", "O nás", "Náš tým", "Služby", "Ceník",
   "Kontakt". Instead of each section defining its own spacing/heading
   layout, they all share these classes so the rhythm stays consistent. */
.section { padding-block: var(--space-8); } /* vertical breathing room above/below each section — sized down from space-9 so the gap under the fixed header, and between sections, doesn't read as empty dead space */
.section-alt { background: var(--color-bg-alt); } /* the light-gray tint used to alternate every
                                                       other section (O nás, Služby, Kontakt) so
                                                       they read as visually distinct blocks without
                                                       needing a hard divider line */
.section-head { max-width: 680px; margin-bottom: var(--space-7); } /* the eyebrow+H2+intro paragraph
                                                                        combo at the top of a section,
                                                                        capped in width for readability */
.section-lead { font-size: 1.05rem; } /* the intro paragraph under a section's H2 */

/* Generic responsive grid helpers — .grid-3 powers the pillar cards,
   service cards, and accreditation cards (3 columns); .grid-5 powers
   the team photo grid (5 columns on wide screens, fewer on smaller ones
   via the breakpoints at the bottom of the file). */
.grid { display: grid; gap: var(--space-5); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

/* The white bordered box used for: pillar cards (Respekt/Spolupráce/
   Úspěch), team member cards, service cards, and accreditation cards.
   Lifts slightly with a bigger shadow on hover for a subtle "clickable"
   feel even where the card itself isn't a link. */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.section-alt .card { background: var(--color-white); } /* cards stay white even inside a gray .section-alt background */

/* The small rounded-square icon tile at the top of pillar/service/
   accreditation cards (pale teal background, teal icon). */
.icon-badge {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

/* Služby cards (Děti / Dospělí / Ortodoncie / EEG Biofeedback /
   Ergoterapie) — flex-column so content stacks naturally even though
   card text length varies a lot between them (some have a 5-item
   highlight list, others are still just a placeholder paragraph).
   padding/icon-badge overrides below are scoped to .service-card only
   (more specific than, and declared after, the shared .card/.icon-badge
   rules) — they trim this one section's height a bit without touching
   the pillar/team/accreditation cards that reuse those same base
   classes elsewhere on the page. */
.service-card { display: flex; flex-direction: column; padding: var(--space-5); }
.service-card .icon-badge { margin-bottom: var(--space-3); }

/* Flexbox instead of the shared .grid/.grid-3 used elsewhere: with 5
   cards that means a row of 3 then a row of 2, and flex-wrap naturally
   CENTERS that shorter last row (something CSS Grid can't do without
   extra hacks) instead of leaving it hanging left with an empty gap. */
.service-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.service-grid > .card {
  flex: 1 1 320px; /* grow/shrink, but prefer ~320px — yields 3 per row on desktop */
  max-width: 360px;
}

/* Bullet highlights inside a service card (e.g. the Děti card's list of
   specific disorders/methods) — small teal dot instead of a browser
   default bullet, matching the site's accent color. */
.service-highlights {
  margin-top: var(--space-2);
  display: grid;
  gap: 6px;
}
.service-highlights li {
  position: relative;
  padding-left: 16px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.service-highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

.link-more { /* the "Více informací →" text-button that opens a modal — currently
                unused by the Služby cards (they show details inline instead)
                but kept generic/reusable for any future card that wants it */
  margin-top: auto; /* pushes this to the bottom of a flex-column card */
  align-self: flex-start;
  background: none;
  border: none;
  padding: var(--space-2) 0;
  font-weight: 600;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px; /* touch-target size */
}
.link-more:hover { color: var(--color-primary-dark); gap: var(--space-2); } /* arrow nudges right on hover */
.link-more span { transition: transform var(--transition); }

/* =========================================================================
   9. ABOUT ("O nás")
   =========================================================================
   Two-column layout: short headline on the left, bio text + signature
   on the right (stacks to one column on tablets/phones — see the
   1024px breakpoint below). No big portrait column here by design —
   the hero carries the clinic's exterior/interior photos, and a full
   photo of the therapist would just duplicate what her LinkedIn
   profile already shows (linked from the signature below). The
   signature does have a small circular avatar next to it though — see
   .signature-avatar further down — that's a lighter "byline" pattern,
   not the portrait column this section deliberately skips.

   The "O nás" eyebrow sits ABOVE .about-grid (a plain sibling <p> in
   the container, not inside .about-heading) — same pattern every other
   section uses (eyebrow above the content, not nested inside one
   column of it). Nesting it inside the left column previously made the
   h2 land lower than the paragraph beside it, since the left column
   then had 2 stacked items (eyebrow + h2) while the right column's
   first item was the paragraph itself — this way both columns' first
   real content (h2, paragraph) line up on the same row. */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-8);
  align-items: start; /* top-align the two columns — centering made sense
                          when the left column was a tall photo, not another
                          text block starting at the same point as the right */
  margin-top: var(--space-5); /* breathing room under the now-standalone eyebrow */
}
.about-heading h2 { margin-bottom: 0; }
/* Author-byline layout: small circular photo next to the name + role,
   like a blog post's author credit — a lighter, different pattern from
   the full-column portrait O nás deliberately doesn't have (see the
   section-9 note above), so this isn't really "the photo we skipped"
   coming back, just a small trust cue right at the personal sign-off. */
.about-content .signature {
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.signature-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%; /* circular, unlike every other placeholder-media on the site */
  flex-shrink: 0;
  object-fit: cover;
  display: block;
}
.about-content .signature-link { /* "Mgr. [Jméno Příjmení]" — the name itself */
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-text);
}
/* The name doubles as a link out to the therapist's LinkedIn profile —
   icon pairs with the text so it reads as "this goes somewhere" rather
   than relying on color/underline alone (same reasoning as every other
   icon+link pairing on the site). href is a placeholder "#" until the
   real profile URL is added. */
.signature-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  transition: color var(--transition);
}
.signature-link:hover { color: var(--color-primary); }
.signature-link .linkedin-icon { flex-shrink: 0; }
.about-content .signature span { /* the smaller job-title line under the name, e.g. "Vedoucí klinická logopedka" */
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--color-text-soft);
  margin-top: 2px;
}

/* =========================================================================
   9b. ADVANTAGES ("Proč si vybrat nás")
   =========================================================================
   Lives inside the SAME <section> as "O nás" (see index.html) — its own
   .container sits right below the about-grid one, so the two share one
   section's top/bottom padding instead of stacking two full sections'
   worth of it. Reuses the shared .grid/.grid-3 layout (section 8) — 3
   columns on desktop, collapsing the same way every other .grid-3 does
   at the 860px/720px breakpoints — but the 6 tiles are deliberately NOT
   .card: no border/shadow/background, just icon + text, matching the
   "deboxed" treatment already used for Kontakt and the price list
   rather than adding 6 more boxed cards to an already card-heavy page.
   Each tile still fades in on scroll via .reveal like everything else. */
/* Deliberately NOT an eyebrow+h2 pair like every top-level section on
   the site uses (Hero, O nás, Služby, Ceník, Kontakt) — that combo
   is the site's visual signal for "a new section starts here", and
   repeating it right under O nás's own h2 made this read as a second,
   separate section instead of a continuation of the same one. A single
   plain h3 (the same weight used for in-section sub-headings elsewhere,
   e.g. "Naše specializace") reads as "still part of O nás" instead. */
.advantages-head { margin-top: var(--space-6); max-width: 680px; }
.advantages-head h3 { margin-bottom: 0; }
.advantage-grid { margin-top: var(--space-6); }
/* Icon sits beside the heading/text instead of stacked above it — a
   compact row instead of a tall block, so 6 of these take noticeably
   less vertical space. */
.advantage {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  margin: calc(var(--space-3) * -1); /* cancels the padding out so icon/text stay in the exact same spot at rest — only the hover background gets the extra room */
  border-radius: var(--radius-sm);
  transition: background-color 200ms ease;
  /* Grid items stretch to fill their row's height by default (rows size
     to the tallest card in them — e.g. ones with a "Více →" link are
     taller than ones without). Without this, align-items:center above
     would then center each card's icon+text inside that full stretched
     height, so a shorter card's heading visibly sits lower than its
     taller row-mates'. align-self:start keeps every card pinned to the
     top of its row instead, so headings line up regardless of how much
     text/links a given card has below them. */
  align-self: start;
}
.advantage:hover { background-color: var(--color-border); } /* one step darker than the section's own gray background — same "slightly darker" step already used sitewide for borders/dividers */
.advantage .icon-badge {
  width: 64px;
  height: 64px;
  margin-bottom: 0;
  flex-shrink: 0;
}
.advantage-body { min-width: 0; } /* lets long text wrap instead of forcing the row wider */
.advantage h3 { font-size: 1.05rem; margin-bottom: 2px; }
.advantage-body p { margin-bottom: 0; }
/* "Více →" link under EEG Biofeedback / Ortodoncie / Ergoterapie — sits
   close under its paragraph (small explicit margin, not the
   auto-margin .link-more normally uses to push itself to the bottom of
   a flex-column card) while still keeping a real touch target
   (min-height:44px is already set on the shared .link-more rule). */
.advantage-body .link-more { margin-top: 0; }
/* Inline brand-name links inside the "Pomůcky a vybavení" tile's
   paragraph (Kousák/Novafon/Vitalstim) — plain body text links would
   otherwise be invisible as links since `a { color: inherit }` is the
   sitewide default. */
.advantage p a { color: var(--color-primary); font-weight: 600; }
.advantage p a:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* =========================================================================
   10. TEAM ("Náš tým")
   =========================================================================
   A grid of team-member cards, each with a square photo, name, and role.
   Uses the shared .card/.grid-5 classes from section 8 above, plus these
   team-specific tweaks. */
.team-photo { aspect-ratio: 1 / 1; width: 100%; margin-bottom: var(--space-4); border-radius: var(--radius-md); }
.team-card { text-align: center; }
.team-card .role { color: var(--color-primary); font-weight: 600; font-size: 0.92rem; margin: 0; } /* e.g. "Logopedka" */

/* =========================================================================
   11. SPECIALISATION TAGS
   =========================================================================
   The pill-shaped list of communication disorders shown under the
   service cards inside "Služby". Now just 5 pills (the terms not
   already named in the cards above), so the top margin is a size down
   from before — the old space-8 gap was sized for a much bigger,
   3-row block and looked oversized floating above this smaller one. */
.specialisation { margin-top: var(--space-7); text-align: center; }
.specialisation h3 { max-width: 640px; margin-inline: auto; }
.tag-list {
  display: flex;
  flex-wrap: wrap; /* pills wrap onto multiple lines on narrow screens */
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-5);
}
.tag-list li { /* each individual pill, e.g. "Dysfonie" */
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  border: 1px solid var(--color-primary-tint);
  padding: var(--space-2) var(--space-4);
  border-radius: 999px; /* fully rounded ends = pill shape */
  font-weight: 500;
  font-size: 0.92rem;
}

/* =========================================================================
   12. PRICING ("Ceník")
   =========================================================================
   The "Přehled plateb a úhrad" price list — sits directly under the
   standard .section-head (same pattern as Kontakt's .contact-grid),
   no separate wrapper or heading of its own. */
/* Only 4 short rows of content, nowhere near enough to fill the same
   96px/96px breathing room every other (much longer) section gets —
   at that padding it read as a mostly-empty section stranded between
   Služby and Kontakt. Tighter padding makes it look like a deliberately
   compact section instead of a stretched-out short one. */
#cenik { padding-block: var(--space-7); }

/* Flat list instead of a card grid — the same "deboxed" pattern already
   used for the Kontakt info rows (icon + text, hairline divider, no
   per-item border/shadow/background) so pricing doesn't add to the
   page's card count. 2 columns instead of 1 so 4 items form a compact
   2×2 block rather than one long single-file list. Spans the full
   container width (like the card grids elsewhere) instead of being
   capped narrow — 10% column-gap means each column works out to 45%,
   45%/10%/45%. */
.price-list {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10%;
}
.price-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}
/* Removes the divider from the bottom row specifically (the last 2 DOM
   items, since the grid is 2 columns) rather than :last-child, which
   would only clear it from one of the two bottom-row items. NOTE: this
   assumes an even item count — if a 5th price ever gets added, this
   selector needs revisiting (the last row would only have 1 item). */
.price-row:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
.price-row .icon-badge { width: 44px; height: 44px; margin-bottom: 0; flex-shrink: 0; } /* smaller than the default 52px card icon — this is a compact row, not a card */
.price-row .price-title { /* service name, e.g. "Logopedické vyšetření a terapie" —
                              same treatment as the Kontakt row labels (h3, shrunk to 1rem) */
  flex: 1 1 auto;
  margin: 0;
  font-size: 1rem;
}
.price-row .price-value { /* price, e.g. "400 Kč" + "/ 30 minut" stacked underneath, right-aligned */
  flex-shrink: 0;
  margin: 0;
  text-align: right;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-primary);
}
.price-row .price-value span {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--color-text-soft);
}

/* =========================================================================
   13. CONTACT ("Kontakt")
   =========================================================================
   Two-column layout: a stack of small info cards (phone/email/addresses/
   hours) on the left, one larger map placeholder on the right. Stacks to
   a single column on tablets/phones (see the 860px breakpoint below). */

/* The dismissible cancellation-policy callout, above .contact-grid.
   Fades in via the site's existing .reveal/IntersectionObserver setup
   like everything else — not a separate scroll-trigger mechanism. */
.policy-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--color-notice-bg);
  border: 1px solid var(--color-notice-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  position: relative; /* anchors .policy-notice-close */
}
.policy-notice[hidden] { display: none; } /* script.js sets this once dismissed */
.policy-notice .icon-badge {
  width: 40px;
  height: 40px;
  margin-bottom: 0;
  flex-shrink: 0;
  background: var(--color-notice-border);
  color: var(--color-notice-text);
}
.policy-notice p {
  margin: 0;
  padding-right: var(--space-6); /* keeps text clear of the close button */
  color: var(--color-notice-text);
  font-size: 0.95rem;
}
.policy-notice-close { /* round × button, same corner treatment as .modal-close */
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-notice-text);
  flex-shrink: 0;
}
.policy-notice-close:hover { background: rgba(146, 64, 14, 0.1); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: stretch; /* the map placeholder stretches to match the height of the card stack */
}
.contact-cards { display: grid; gap: var(--space-5); align-content: start; }
/* Deliberately NOT a bordered/shadowed .card like the rest of the site —
   phone/email/address/hours are short text snippets, so a plain
   icon+text row (with a hairline divider between rows) reads cleaner
   here than another white box, and breaks up the page's card-grid
   rhythm right before the footer. */
.contact-card {
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.contact-card:last-child { padding-bottom: 0; border-bottom: none; }
.contact-card h3 { font-size: 1rem; margin-bottom: 4px; }
.contact-card p { margin-bottom: 2px; font-size: 0.95rem; }
.contact-card a:hover { color: var(--color-primary); } /* phone/email links turn teal on hover */
.contact-map {
  min-height: 320px;
  height: 100%;
  border-radius: var(--radius-md); /* .placeholder-media used to give this — now needed directly since the real map embed replaced it */
  overflow: hidden; /* clips the iframe to the rounded corners */
}
.contact-map iframe { display: block; }

/* Opening-hours list ("Provozní doba"): one row per day of the week.
   script.js finds the <li> matching today's date (data-day, 0=Sunday
   like JS's Date.getDay()), adds .is-today to highlight it, and injects
   a live .hours-status (dot + label) into just that row — see the
   "Opening hours" block in script.js. The other 6 rows stay static. */
.hours-list {
  margin-top: 6px;
  display: grid;
  gap: 2px;
}
.hours-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 0.9rem;
  padding: 3px 0;
}
.hours-list .hours-day { color: var(--color-text-muted); }
.hours-list .hours-time { color: var(--color-text-soft); }
/* Today's row: soft teal pill instead of a border/shadow box, matching
   the "deboxed" look of the rest of this section. */
.hours-list li.is-today {
  background: var(--color-primary-light);
  border-radius: var(--radius-sm);
  padding: 4px var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
}
.hours-list li.is-today .hours-day { color: var(--color-text); font-weight: 600; }
.hours-list li.is-today .hours-time { color: var(--color-text-muted); }

/* Live status chip (dot + word) appended only to today's row */
.hours-status { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 0.8rem; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.hours-status--open .status-dot { background: #16a34a; }
.hours-status--open { color: #15803d; }
.hours-status--soon .status-dot { background: #d97706; }
.hours-status--soon { color: #b45309; }
.hours-status--closed .status-dot { background: #dc2626; }
.hours-status--closed { color: #b91c1c; }

/* =========================================================================
   14. FOOTER
   =========================================================================
   The dark bottom bar of the site: logo+blurb column, nav-link column,
   contact-info column, then a thin copyright bar underneath. */
.site-footer {
  background: #0b1220; /* near-black navy, distinct from the rest of the (light) page */
  color: #cbd5e1;
  padding-top: var(--space-8);
}
/* Footer logo: the "badge" layout (icons stacked above the name) rather
   than the header's horizontal lockup — icons centered as a row, then
   3 centered text lines, each tracked with letter-spacing to span the
   exact same width as the icon row (measured live, not guessed — see
   the header's .logo-tag comment for why). */
.footer-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: max-content;
}
.footer-logo-icons { display: flex; gap: 4px; margin-bottom: 5px; }
.footer-logo-icons img { width: 40px; height: 40px; border-radius: 8px; display: block; }
.footer-logo-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  white-space: nowrap;
}
.footer-logo-tag, .footer-logo-years {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  color: #94a3b8;
  white-space: nowrap;
}
.footer-logo-tag { letter-spacing: 3.09px; }
.footer-logo-years { letter-spacing: 12.21px; }
.footer-grid { /* the 3-column layout: brand / navigation / contact */
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-7);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* faint divider above the copyright bar */
}
.footer-brand p { color: #94a3b8; margin-top: var(--space-3); max-width: 320px; }
.site-footer h3 { /* the "NAVIGACE" / "KONTAKT" column titles */
  color: #fff;
  font-family: var(--font-body); /* deliberately NOT the serif heading font — reads as a small label, not a title */
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-4);
}
.footer-nav ul { display: grid; gap: var(--space-2); }
.footer-nav a, .footer-contact a { color: #94a3b8; }
.footer-nav a:hover, .footer-contact a:hover { color: var(--color-primary-tint); }
.footer-contact p { display: flex; align-items: center; gap: var(--space-2); color: #94a3b8; margin-bottom: var(--space-2); }
.footer-contact-icon { flex-shrink: 0; color: #64748b; } /* quieter than the footer's own text color — a small mark, not something competing with the phone/email/hours text next to it */

/* "Uložit do kontaktů" — downloads kontakt.vcf (a vCard file at the
   project root). Clicking it triggers the browser/OS's native contact-
   save flow (e.g. iOS Safari shows an "Add Contact" preview) — no JS
   needed, the browser handles .vcf files on its own via the `download`
   attribute. Reuses .link-more (same look as the "Více →" links
   elsewhere) rather than .btn, since it sits right in the deboxed
   contact-card list — see the HTML comment above it in index.html for
   why it's placed exactly where it is (filling otherwise-empty space,
   zero added section height). The two overrides below undo
   .link-more's flex-card-specific positioning (margin-top:auto,
   align-self:flex-start), which don't apply usefully here since this
   sits directly in .contact-cards' grid, not inside a flex-column card. */
.contact-vcard-link {
  align-self: start;
  /* Pull it in closer to "Provozní doba" above than the grid's normal
     --space-5 gap between cards — negative margin, so this is the only
     gap that shrinks, the spacing between the other contact-cards is
     untouched. */
  margin-top: calc(var(--space-3) - var(--space-5));
}
/* The hours card would otherwise regain its divider line once something
   follows it (:last-child no longer matches) — same effect .contact-card
   already relies on elsewhere, just switched off here on purpose, since
   a full divider made this read as a new section starting rather than a
   small extra action under the card stack. */
#oteviraci-doba { border-bottom: none; padding-bottom: 0; }
.footer-bottom { /* the thin final row: "© 2026 ... Všechna práva vyhrazena." */
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-block: var(--space-5);
  font-size: 0.85rem;
  color: #64748b;
}
.footer-bottom p { margin: 0; color: inherit; }
.footer-note { font-style: italic; } /* the "obsah webu je zástupný (dummy)" reminder line */
.footer-legal-link a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer-legal-link a:hover { color: var(--color-primary-tint); }

/* =========================================================================
   14b. LEGAL PAGE (ochrana-osobnich-udaju.html)
   =========================================================================
   The standalone GDPR/privacy-policy page — reuses the same header/footer
   as index.html, but has no hero, so its first section needs its own top
   padding to clear the fixed header (the hero normally handles this via
   .hero-content's own padding-top instead). */
.legal-page { padding-top: calc(var(--header-h) + var(--space-8)); }
.legal-content { max-width: 720px; }
.legal-content .section-head h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); } /* the sitewide h1 is sized for the one-time hero headline — too big for a document title here */
.legal-content h2 { font-size: 1.4rem; margin-top: var(--space-7); margin-bottom: var(--space-3); }
.legal-content h2:first-of-type { margin-top: var(--space-6); }
.legal-content p { line-height: 1.7; }

/* =========================================================================
   14c. BOOKING PAGE (objednat-se.html)
   =========================================================================
   Same no-hero pattern as the legal page — reuses .section-head for the
   title, then the Microsoft Bookings iframe fills a fixed generous
   height below it. Bookings doesn't auto-resize to its content, so the
   iframe gets its own internal scrollbar rather than trying to match
   the page's height exactly. */
.booking-page { padding-top: calc(var(--header-h) + var(--space-8)); }
.booking-page .section-head h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.booking-embed {
  margin-top: var(--space-6);
  height: 850px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.booking-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.booking-fallback {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-notice-bg);
  border: 1px solid var(--color-notice-border);
  border-radius: var(--radius-md);
  color: var(--color-notice-text);
}
.booking-fallback a { color: var(--color-notice-text); font-weight: 600; text-decoration: underline; }

/* =========================================================================
   15. BACK TO TOP
   =========================================================================
   The round floating teal button pinned to the bottom-right corner of
   the viewport. Hidden by default; script.js adds .is-visible once the
   user has scrolled down more than 500px, and clicking it smooth-scrolls
   back to the very top of the page. */
.back-to-top {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition), background var(--transition);
  z-index: 400;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } /* fades/slides in */
.back-to-top:hover { background: var(--color-primary-dark); }

/* =========================================================================
   16. MODAL ("Více informací" popup)
   =========================================================================
   A centered white dialog box over a dark full-screen overlay, opened by
   script.js when a "Více informací" link (or the accreditation/cookie
   "Nastavení" buttons) is clicked. Markup lives at the bottom of
   index.html as <div id="modalOverlay" hidden>...</div>. */
.modal-overlay {
  position: fixed;
  inset: 0; /* covers the entire viewport */
  background: rgba(15, 23, 42, 0.55); /* dark scrim behind the dialog */
  display: flex;
  align-items: center;
  justify-content: center; /* centers the .modal box both ways */
  padding: var(--space-5); /* keeps the modal off the screen edges on small viewports */
  z-index: 900; /* above the header/back-to-top, below the cookie banner (950) */
}
.modal-overlay[hidden] { display: none; } /* script.js toggles the "hidden" HTML attribute to show/hide */
.modal { /* the white dialog box itself */
  position: relative; /* anchors the absolutely-positioned close (×) button */
  background: #fff;
  border-radius: var(--radius-md);
  max-width: 560px;
  width: 100%;
  padding: var(--space-7);
  box-shadow: var(--shadow-lg);
  max-height: 85vh;   /* long modal text scrolls instead of overflowing the viewport */
  overflow-y: auto;
}
.modal-close { /* the round × button, top-right of the dialog */
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: var(--color-bg-alt);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}
.modal-close:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }

/* Amber "attention" variant — script.js adds this only for the header
   "Objednat se" button's limited-hours notice (see modalContent in
   script.js); every other use of this modal (cookie settings, future
   "Více informací" content) stays the plain white dialog above. Reuses
   the same amber tokens as .policy-notice / .booking-fallback so all the
   site's "heads up" messaging reads consistently. */
.modal--notice { border-top: 4px solid var(--color-notice-border); }
.modal--notice #modalTitle { color: var(--color-notice-text); }

/* =========================================================================
   17. COOKIE BANNER
   =========================================================================
   The consent bar pinned to the bottom of the viewport on first visit
   (script.js shows it after a short delay unless a choice was already
   saved in localStorage). Contains a short message plus 3 buttons:
   Přijmout / Odmítnout / Nastavení. */
.cookie-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 950; /* highest z-index on the page — should sit above even the modal if both were ever open */
  background: #fff;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08); /* shadow cast UPWARD since the bar sits at the bottom */
  padding: var(--space-5);
  transform: translateY(0);
  transition: transform var(--transition);
}
.cookie-banner[hidden] { display: none; } /* script.js sets the "hidden" attribute once a choice is made */
.cookie-inner {
  max-width: var(--container-w);
  margin-inline: auto;
  display: flex;
  gap: var(--space-6);
  align-items: center;
  flex-wrap: wrap; /* buttons drop below the text on narrow screens instead of squeezing */
}
.cookie-text { flex: 1 1 380px; } /* text block grows to fill space but won't shrink below 380px before wrapping */
.cookie-text h3 { font-size: 1.05rem; margin-bottom: var(--space-1); }
.cookie-text p { margin: 0; font-size: 0.9rem; }
.cookie-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* =========================================================================
   18. REVEAL-ON-SCROLL ANIMATION
   =========================================================================
   Any element with class="reveal" in the HTML starts invisible and
   shifted down slightly; script.js uses an IntersectionObserver to add
   ".is-visible" the moment that element scrolls into view, which
   triggers the fade+slide-up transition below. Used on: pillar cards,
   the about photo/text, team cards, service cards, and accreditation
   cards. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* =========================================================================
   19. RESPONSIVE — breakpoints, largest screens down to smallest
   =========================================================================
   Each media query below OVERRIDES rules defined earlier in the file for
   viewports at or narrower than the given width. Read them top-to-bottom
   as "tablet-ish" → "large phone" → "phone" → "small phone". */

/* ---- ≤1024px (tablets / small laptops) ----
   Team grid drops from 5 to 3 columns; the "O nás" two-column layout
   collapses to a single column (headline, then bio text, stacked). */
@media (max-width: 1024px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .about-grid { grid-template-columns: 1fr; }
}

/* ---- ≤860px (large phones / narrow tablets) ----
   3-column card grids (pillars/services/accreditation) drop to 2 columns;
   the contact section's two columns stack into one; the footer's 3
   columns become 2, with the brand column spanning the full width on top. */
@media (max-width: 860px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---- ≤720px (phones) — THE MOBILE-MENU BREAKPOINT ----
   This is where the header switches from "inline desktop nav" to
   "hamburger + dropdown panel" mode: */
@media (max-width: 720px) {
  .main-nav {
    position: fixed;             /* the nav becomes an overlay panel instead of an inline row */
    top: var(--header-h);        /* sits directly under the header bar */
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;      /* links stack vertically instead of side-by-side */
    align-items: stretch;
    padding: var(--space-5);
    gap: var(--space-5);
    box-shadow: var(--shadow-md);
    transform: translateY(-12px); /* hidden state: nudged up + faded out */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  /* script.js toggles this class on the hamburger click, sliding the
     panel down into view. */
  .main-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .main-nav ul { flex-direction: column; gap: var(--space-1); }
  .nav-link { display: block; padding: var(--space-3) var(--space-2); color: var(--color-text) !important; } /* force dark text — the panel has a white background even over the hero */
  .nav-cta { width: 100%; } /* "Objednat se" becomes full-width inside the stacked panel */
  .menu-toggle { display: flex; } /* the hamburger icon only appears at this breakpoint and below */
  /* The 4-icon logo + two-line name block is sized for a roomy desktop
     header — at this width it collides with the hamburger button, so it
     needs real (layout-affecting) size reductions here, not just a
     visual transform:scale, which wouldn't shrink the box the header's
     flex layout reserves for it. */
  .logo-icons img { width: 26px; height: 26px; border-radius: 6px; }
  .logo-name { font-size: 0.8rem; }
  .logo-tag { font-size: 0.5rem; letter-spacing: 2.49px; }

  /* Everything below here is unrelated to the nav — general mobile
     layout squeezing for the rest of the page: */
  .grid-3, .grid-5 { grid-template-columns: 1fr; } /* all card grids become a single column */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }               /* hero buttons stack and go full-width */
  /* Price list: 2 columns is too cramped for titles like "Logopedické
     vyšetření a terapie" at phone widths, so it drops to 1 column —
     which means the divider logic also needs to flip back from
     "clear the bottom ROW (last 2 items)" to "clear just the last
     ITEM", since in 1 column every item is its own row. */
  .price-list { grid-template-columns: 1fr; }
  .price-row:nth-last-child(-n+2) { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-4); }
  .price-row:last-child { border-bottom: none; padding-bottom: 0; }
  .footer-grid { grid-template-columns: 1fr; }      /* footer columns fully stack */
  .cookie-inner { flex-direction: column; align-items: stretch; }
  .cookie-actions { justify-content: stretch; }
  .cookie-actions .btn { flex: 1; }                 /* the 3 cookie buttons share the row equally */
}

/* ---- ≤420px (small phones) ----
   Just tightens the page's outer side padding a bit further so content
   doesn't feel cramped against the screen edges on the narrowest devices. */
@media (max-width: 420px) {
  .container { padding-inline: var(--space-4); }
}