/* ============================================================
   Stomatološka ambulanta NE-GO — ujednačavanje osam sekcija.

   Učitava se POSLJEDNJI, poslije svih `section.css` i `brend.css`.
   Radi tako što svakoj sekciji PREPISUJE TOKENE (--c-*, --ff-*,
   --r-*, --sh-*, --fs-*), a ne njenu geometriju: nijedno pravilo
   ispod ne dira `display`, `grid-template-*`, `grid-area`,
   `flex-direction`, `order`, `position`, `top/right/bottom/left`,
   `align-*`, `justify-*` ni `text-align` nad klasama sekcija.

   Paleta je izmjerena iz logotipa ambulante (plakat u
   images/gallery/2bcbaaa0…): tamnoplava #012F52 i mint #70B6AA.
   Mint je za tekst i dugmad potamnjen na #2A7264 zbog kontrasta.
   ============================================================ */

:root {
  /* Četiri vrijednosti koje `brend.css` traži (UPUTA.md, „Boje i tokeni"). */
  --primary: #012F52;
  --primary-fg: #ffffff;
  --accent: #2A7264;
  --accent-fg: #ffffff;
  --accent-strong: #1F6659;
  --accent-soft: #E6F1EE;

  /* Vlastite nijanse sajta. */
  --nego-mint: #70B6AA;
  --nego-mint-lt: #9ED2C9;
  --nego-navy-2: #01243D;
  --nego-navy-3: #093A61;
  --nego-navy-4: #0C4770;

  --nego-bg: #F7F9FA;
  --nego-bg-alt: #EDF2F4;
  --nego-surface: #FFFFFF;
  --nego-tint: #E7EEF4;

  --nego-ink: #0C2033;
  --nego-text: #22384A;
  --nego-muted: #566E80;
  --nego-line: rgba(1, 47, 82, 0.13);
  --nego-line-strong: rgba(1, 47, 82, 0.26);
  --nego-on-dark: #E9F1F4;
  --nego-on-dark-mu: rgba(233, 241, 244, 0.76);
  --nego-on-dark-lo: rgba(233, 241, 244, 0.52);
  --nego-line-dark: rgba(233, 241, 244, 0.2);
  --nego-star: #C79A3E;

  --nego-ff-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --nego-ff-body: 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--nego-bg);
  color: var(--nego-text);
  font-family: var(--nego-ff-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip, ne hidden: hidden pravi scroll kontejner i lomi ljepljive elemente */
  overflow-x: clip;
}

img, video, svg { max-width: 100%; }

::selection { background: var(--accent); color: #fff; }

/* Trake sastavljača ne crtaju vlastitu pozadinu — svaka sekcija nosi svoju. */
.band { background: transparent; }

/* ============================================================
   1. ZAJEDNIČKI TOKENI — ista skala u svih osam sekcija
   ============================================================ */

.sec-atelier-header,
.sec-terra-hero,
.sec-sonnenschein-services,
.sec-sightline-about,
.sec-radix-referenzen,
.sec-rowan-faq,
.sec-quiet-hours-cta,
.sec-sightline-footer {
  /* pismo */
  --ff-display: var(--nego-ff-display);
  --ff-body: var(--nego-ff-body);

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: clamp(1.05rem, 0.35vw + 0.98rem, 1.2rem);
  --fs-h4: clamp(1.06rem, 0.6vw + 0.92rem, 1.28rem);
  --fs-h3: clamp(1.22rem, 0.9vw + 1.02rem, 1.6rem);
  --fs-h2: clamp(1.72rem, 2.6vw + 1.05rem, 2.85rem);
  --fs-h1: clamp(2.15rem, 4.4vw + 1.05rem, 4rem);
  --fs-metric: clamp(1.9rem, 2.4vw + 1.2rem, 2.9rem);

  --lh-tight: 1.08;
  --lh-snug: 1.2;
  --lh-body: 1.65;
  --ls-tight: -0.015em;
  --ls-label: 0.16em;

  /* razmaci i ritam */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
  --sp-7: 64px;
  --sp-8: 92px;
  --sp-9: 124px;
  --section-y: clamp(56px, 7vw, 104px);
  --gutter: clamp(20px, 5vw, 40px);
  --maxw: 1180px;
  --maxw-narrow: 780px;
  --header-h: 76px;
  --tap: 44px;

  /* zaobljenja — jedna skala za cijeli sajt */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-2xl: 34px;
  --r-pill: 999px;
  --r-circle: 50%;
  --r-gallery: 14px;
  --r-img: 20px;
  --r-card: 18px;
  --r-card-lg: 26px;
  --r-squircle: 26px;
  --r-shoulder: 26px;
  --r-shoulder-br: 26px;
  --r-shoulder-sm: 16px;
  --r-arch: 999px;

  /* sjenke — sve tonirane u plavo iz znaka */
  --sh-xs: 0 1px 2px rgba(1, 47, 82, 0.06);
  --sh-sm: 0 4px 14px -8px rgba(1, 47, 82, 0.24);
  --sh-md: 0 14px 34px -18px rgba(1, 47, 82, 0.28);
  --sh-lg: 0 26px 56px -26px rgba(1, 47, 82, 0.32);
  --sh-xl: 0 42px 88px -36px rgba(1, 47, 82, 0.36);

  --c-star: var(--nego-star);
  --c-whatsapp: var(--accent);
  --c-whatsapp-dk: var(--accent-strong);
}

/* ============================================================
   2. BOJE PO SEKCIJI — neutrali koje `brend.css` ne dira
   ============================================================ */

.sec-atelier-header {
  --c-bg: var(--nego-bg);
  --c-bg-alt: var(--nego-bg-alt);
  --c-surface: var(--nego-tint);
  --c-surface-warm: var(--nego-bg-alt);
  --c-white: #ffffff;
  --c-ink: var(--nego-ink);
  --c-ink-soft: var(--nego-text);
  --c-ink-70: rgba(12, 32, 51, 0.72);
  --c-ink-12: rgba(12, 32, 51, 0.12);
  --c-ink-06: rgba(12, 32, 51, 0.06);
  --c-text: var(--nego-text);
  --c-text-muted: var(--nego-muted);
  --c-text-invert: #F4F8F9;
  --c-line: var(--nego-line);
  --c-line-strong: var(--nego-line-strong);
  --c-line-invert: rgba(244, 248, 249, 0.22);
}

.sec-terra-hero {
  --c-bg: var(--nego-bg);
  --c-bg-alt: var(--nego-bg-alt);
  --c-white: #ffffff;
  --c-surface: var(--nego-tint);
  --c-ink: var(--nego-ink);
  --c-text: var(--nego-text);
  --c-text-muted: var(--nego-muted);
  --c-on-dark: var(--nego-on-dark);
  --c-on-dark-mu: var(--nego-on-dark-mu);
  --c-line: var(--nego-line);
  --c-line-strong: var(--nego-line-strong);
  --c-line-dark: var(--nego-line-dark);
  --lframe: 14px;
}

.sec-sonnenschein-services {
  --c-bg: var(--nego-bg);
  --c-bg-alt: var(--nego-bg-alt);
  --c-white: #ffffff;
  --c-text: var(--nego-text);
  --c-text-muted: var(--nego-muted);
  --c-text-invert: #F4F8F9;
  --c-line: var(--nego-line);
  --c-line-strong: var(--nego-line-strong);
  /* Tri tona kartica svedena su na jednu porodicu: mint i plavo iz znaka. */
  --c-coral: var(--primary);
  --c-coral-dk: var(--primary);
  --c-coral-soft: var(--nego-tint);
  --c-sun: var(--nego-mint);
  --c-sun-soft: #E9F3F1;
  --c-mint: var(--accent);
  --c-mint-soft: var(--accent-soft);
}

.sec-sightline-about {
  --c-bg: var(--nego-bg-alt);
  --c-bg-alt: var(--nego-bg);
  --c-white: #ffffff;
  --c-surface: var(--nego-tint);
  --c-text: var(--nego-text);
  --c-text-muted: var(--nego-muted);
  --c-on-dark: var(--nego-on-dark);
  --c-on-dark-mu: var(--nego-on-dark-mu);
  --c-line: var(--nego-line);
  --c-line-strong: var(--nego-line-strong);
  --c-line-dark: var(--nego-line-dark);
  --mount: 14px;
}

.sec-radix-referenzen {
  --c-canvas: var(--primary);
  --c-canvas-2: var(--nego-navy-2);
  --c-surface: var(--nego-navy-3);
  --c-surface-2: var(--nego-navy-4);
  --c-white: #ffffff;
  --c-sand: var(--nego-mint-lt);
  --c-on-canvas: var(--nego-on-dark);
  --c-on-canvas-mu: var(--nego-on-dark-mu);
  --c-on-canvas-lo: var(--nego-on-dark-lo);
  --c-light: var(--nego-bg);
  --c-ink: var(--nego-ink);
  --c-ink-mu: var(--nego-muted);
  --c-line: rgba(233, 241, 244, 0.16);
  --c-line-strong: rgba(233, 241, 244, 0.3);
  --c-line-dark: rgba(12, 32, 51, 0.14);
  --tick-c: rgba(233, 241, 244, 0.2);
  --c-accent-lt: var(--nego-mint);
}

.sec-rowan-faq {
  --c-bg: var(--nego-bg-alt);
  --c-bg-alt: var(--nego-bg);
  --c-white: #ffffff;
  --c-surface: var(--nego-tint);
  --c-text: var(--nego-text);
  --c-text-muted: var(--nego-muted);
  --c-on-dark: var(--nego-on-dark);
  --c-on-dark-mu: var(--nego-on-dark-mu);
  --c-line: var(--nego-line);
  --c-line-strong: var(--nego-line-strong);
  --c-line-dark: var(--nego-line-dark);
}

.sec-quiet-hours-cta {
  --c-bg: var(--nego-bg);
  --c-bg-alt: var(--nego-bg-alt);
  --c-white: #ffffff;
  --c-surface: var(--nego-tint);
  --c-text: var(--nego-text);
  --c-text-muted: var(--nego-muted);
  --c-on-dark: var(--nego-on-dark);
  --c-on-dark-mu: var(--nego-on-dark-mu);
  --c-line: var(--nego-line);
  --c-line-strong: var(--nego-line-strong);
  --c-line-dark: var(--nego-line-dark);
}

.sec-sightline-footer {
  --c-bg: var(--nego-bg);
  --c-bg-alt: var(--nego-bg-alt);
  --c-white: #ffffff;
  --c-surface: var(--nego-navy-3);
  --c-text: var(--nego-text);
  --c-text-muted: var(--nego-muted);
  --c-on-dark: var(--nego-on-dark);
  --c-on-dark-mu: var(--nego-on-dark-mu);
  --c-line: var(--nego-line);
  --c-line-strong: var(--nego-line-strong);
  --c-line-dark: var(--nego-line-dark);
}

/* ============================================================
   3. TIPOGRAFIJA — jedno pismo kroz cijeli sajt
   ============================================================ */

.sec-atelier-header, .sec-terra-hero, .sec-sonnenschein-services,
.sec-sightline-about, .sec-radix-referenzen, .sec-rowan-faq,
.sec-quiet-hours-cta, .sec-sightline-footer {
  font-family: var(--ff-body);
  font-synthesis-weight: none;
}

.sec-terra-hero h1,
.sec-sonnenschein-services h2,
.sec-sightline-about h2,
.sec-radix-referenzen h2,
.sec-rowan-faq h2,
.sec-quiet-hours-cta h2 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 42;
  letter-spacing: -0.018em;
}

.sec-sonnenschein-services h3,
.sec-sightline-about .about__sign-in strong,
.sec-rowan-faq .faq__group {
  font-family: var(--ff-display);
  font-weight: 500;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 20;
}

/* Sitni natpisi iznad naslova — isti u svih osam sekcija. */
.sec-terra-hero .u-label,
.sec-sightline-about .u-label,
.sec-radix-referenzen .u-label,
.sec-rowan-faq .u-label,
.sec-quiet-hours-cta .u-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}

.sec-radix-referenzen .u-label,
.sec-quiet-hours-cta .cta__band .u-label { color: var(--nego-mint); }

/* Prsten fokusa — isti svuda. */
.sec-atelier-header :is(a, button):focus-visible,
.sec-terra-hero :is(a, button):focus-visible,
.sec-sonnenschein-services :is(a, button):focus-visible,
.sec-sightline-about :is(a, button):focus-visible,
.sec-radix-referenzen :is(a, button):focus-visible,
.sec-rowan-faq :is(a, button):focus-visible,
.sec-quiet-hours-cta :is(a, button):focus-visible,
.sec-sightline-footer :is(a, button):focus-visible {
  outline: 3px solid var(--nego-mint);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ============================================================
   4. ZAGLAVLJE
   ============================================================ */

/* Znak ambulante umjesto nacrtanog luka iz templata. */
.sec-atelier-header .brand__arch {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 0;
  background: none;
}
.sec-atelier-header .brand__arch img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sec-atelier-header .site-head:not(.is-stuck) .brand__arch img { filter: brightness(0) invert(1); }
.sec-atelier-header .brand:hover .brand__arch { transform: translateY(-2px); }
.sec-atelier-header .brand__text strong { letter-spacing: 0.1em; font-weight: 500; }
.sec-atelier-header .brand__text small { opacity: 0.7; }

.sec-atelier-header .site-head__pill { border-radius: var(--r-pill); }
.sec-atelier-header .site-head__tel { font-weight: 600; letter-spacing: 0.01em; }

/* Sekcija zaglavlja je `position: fixed` i sama nema visinu; padding koji
   template dodaje ispod 760 px zato pravi praznu traku između zaglavlja i
   heroja. Prostor za ljepljivu traku uzima podnožje (--foot-gap). */
@media (max-width: 620px) {
  .sec-atelier-header { padding-bottom: 0; }
}

/* ============================================================
   5. HERO
   ============================================================ */

/* Fotografija mora ostati fotografija: zatamnjenje ide u gradijent ispod
   samog teksta, a ne ravnomjerno preko cijele slike. */
.sec-terra-hero .hero__scrim {
  background:
    linear-gradient(to bottom,
      rgba(1, 26, 46, 0.82) 0%,
      rgba(1, 26, 46, 0.62) 30%,
      rgba(1, 26, 46, 0.26) 58%,
      rgba(1, 26, 46, 0.42) 100%),
    linear-gradient(to right, rgba(1, 26, 46, 0.58) 0%, rgba(1, 26, 46, 0.12) 62%, rgba(1, 26, 46, 0) 100%);
}
.sec-terra-hero .hero__media :is(img, video) { object-position: 62% 42%; }

/* Terra računa da je zaglavlje U TOKU stranice; ovdje je `position: fixed`,
   pa hero mora sam ostaviti prostor za njega — inače natpis i uspravna
   traka prolaze ispod trake sa menijem. */
.sec-terra-hero .hero { padding-top: calc(var(--header-h) + clamp(20px, 3.5vw, 52px)); }

/* Traka sa podacima je crtana tako da „ispadne" iz sekcije (--bar-drop: 64px),
   ali je sekcija klipuje po obje ose, pa joj se drugi red natpisa odsijeca.
   Klip ostaje samo vodoravno; okomito traka smije preći ivicu. */
.sec-terra-hero { overflow: visible; }

/* Sekcija ispod heroja je pozicionirana (dekorativne mrlje), pa dolazi u DOM-u
   kasnije i crta se PREKO trake koja visi. Traka heroja zato ide iznad — na
   omotaču sastavljača, ne na klasi sekcije. */
.band[data-band="2"] { position: relative; z-index: 3; }
.sec-terra-hero .hero__copy .u-label { color: var(--nego-mint-lt); }

.sec-terra-hero .hero__lead { max-width: 46ch; }
.sec-terra-hero .hero__rail-tx { letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.68rem; }

.sec-terra-hero .hbar {
  background: var(--nego-surface);
  border: 1px solid var(--nego-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
}
.sec-terra-hero .hbar__i strong {
  font-family: var(--ff-display);
  font-weight: 500;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 24;
  color: var(--primary);
}
.sec-terra-hero .hbar__i span { color: var(--nego-muted); }
.sec-terra-hero .hbar__i--go a { color: var(--accent); font-weight: 600; }
.sec-terra-hero .hbar__i--go a:hover { color: var(--accent-strong); }

/* Rečenica koja na telefonu pravi šesti red uvoda — širem ekranu ostaje. */
.nego-sire { display: none; }
@media (min-width: 641px) {
  .nego-sire { display: inline; }
}

/* ============================================================
   6. USLUGE
   ============================================================ */

.sec-sonnenschein-services .u-chip {
  --chip-bg: var(--accent-soft);
  --chip-fg: var(--accent-strong);
  --chip-dot: var(--accent);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 600;
}

.sec-sonnenschein-services .bento {
  border-radius: var(--r-xl);
  border: 1px solid var(--nego-line);
  box-shadow: var(--sh-sm);
}
.sec-sonnenschein-services .bento:hover { box-shadow: var(--sh-md); }
.sec-sonnenschein-services .bento h3 { letter-spacing: -0.01em; }
.sec-sonnenschein-services .bento p { color: var(--nego-muted); }
.sec-sonnenschein-services .bento--hero {
  background: linear-gradient(150deg, var(--primary) 0%, #06426E 62%, #0B5A75 100%);
  border-color: transparent;
  box-shadow: var(--sh-lg);
}
.sec-sonnenschein-services .bento--hero p,
.sec-sonnenschein-services .bento--hero .bento__list li { color: var(--nego-on-dark-mu); }
.sec-sonnenschein-services .bento--hero h3 { color: #fff; }
.sec-sonnenschein-services .bento--hero .bento__ic {
  background: rgba(233, 241, 244, 0.14);
  color: var(--nego-mint-lt);
}
.sec-sonnenschein-services .bento--hero .bento__go { color: var(--nego-mint-lt); font-weight: 600; }
.sec-sonnenschein-services .bento--mint { background: var(--accent-soft); }
.sec-sonnenschein-services .bento--sun { background: #E9F3F1; }
.sec-sonnenschein-services .bento--coral { background: var(--nego-tint); }
.sec-sonnenschein-services .bento__ic { border-radius: var(--r-md); }

/* ============================================================
   7. O AMBULANTI
   ============================================================ */

.sec-sightline-about .about__lead { color: var(--nego-text); }

/* Okvir se prilagođava fotografiji. Template traži okvir visok do 500 px, a
   fotografija je položena 3:2; u zadanom kadru (sredina) stomatologu je glava
   odsječena gornjom ivicom. Kadar je zato pomjeren na pacijentkinju — ona je
   u kadru cijela, a od stomatologa ostaju ruke i rad. */
.sec-sightline-about .about__media :is(img, video) {
  height: auto;
  aspect-ratio: 4 / 5;
  object-position: 70% 36%;
}
@media (max-width: 940px) {
  .sec-sightline-about .about__media :is(img, video) { aspect-ratio: 4 / 3; }
}

/* Portret u potpisu: fotografija je kvadratna i cijela figura je na njoj, pa
   bi u krugu od 72 px lice ostalo veličine slova. Krug je okvir, a slika se
   u njemu uvećava i pomjera na lice. */
.sec-sightline-about .nego-portret {
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: var(--r-circle);
  overflow: hidden;
  background: var(--nego-tint);
}
.sec-sightline-about .nego-portret img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(2.5);
  transform-origin: 50% 27%;
}
.sec-sightline-about .about__points li svg { color: var(--accent); }
.sec-sightline-about .about__points strong { color: var(--primary); }
.sec-sightline-about .u-card { border-radius: var(--r-card); }
.sec-sightline-about .u-card--lg { border-radius: var(--r-card-lg); }
.sec-sightline-about .about__sign-in { box-shadow: var(--sh-md); }
.sec-sightline-about .about__sign-in img { border-radius: var(--r-circle); }
.sec-sightline-about .about__sign-in span { color: var(--nego-muted); }

/* ============================================================
   8. UTISCI
   ============================================================ */

.sec-radix-referenzen .mcard { border-radius: var(--r-xl); }
.sec-radix-referenzen .mcard__to { color: var(--nego-mint-lt); }
.sec-radix-referenzen .mcard__unit { color: var(--nego-on-dark-mu); }
.sec-radix-referenzen .mcard__tx p { color: var(--nego-on-dark); }
.sec-radix-referenzen .mcard__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  color: var(--nego-mint);
  font-weight: 600;
}
.sec-radix-referenzen .mcard__link:hover { color: #fff; }
.sec-radix-referenzen .revs__score a { color: var(--nego-mint); }

/* ============================================================
   9. PITANJA
   ============================================================ */

.sec-rowan-faq .qa { border-radius: var(--r-lg); }
.sec-rowan-faq .qa button { font-family: var(--ff-body); }
.sec-rowan-faq .qa__p a { color: var(--accent-strong); font-weight: 600; }
.sec-rowan-faq .faq__group { color: var(--primary); }

/* ============================================================
   10. KONTAKT
   ============================================================ */

.sec-quiet-hours-cta .cta__band {
  background: linear-gradient(155deg, var(--primary) 0%, #04355C 55%, #0A4A6B 100%);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-xl);
}
.sec-quiet-hours-cta .crow {
  border-radius: var(--r-lg);
  background: rgba(233, 241, 244, 0.07);
  border: 1px solid rgba(233, 241, 244, 0.16);
}
.sec-quiet-hours-cta .crow:hover {
  background: rgba(233, 241, 244, 0.12);
  border-color: var(--nego-mint);
}
.sec-quiet-hours-cta .crow__ic { color: var(--nego-mint); background: rgba(112, 182, 170, 0.14); }
.sec-quiet-hours-cta .crow__tx strong { font-family: var(--ff-body); letter-spacing: 0.01em; }
.sec-quiet-hours-cta .cta__facts li { color: var(--nego-on-dark-mu); }
.sec-quiet-hours-cta .cta__facts svg { color: var(--nego-mint); }

/* ============================================================
   11. PODNOŽJE
   ============================================================ */

.sec-sightline-footer .foot { background: var(--primary); }
.sec-sightline-footer .foot__logo .brand__mark img { width: 190px; height: auto; }
.sec-sightline-footer .foot__blurb { color: var(--nego-on-dark-mu); }
.sec-sightline-footer .foot__col h3 { color: var(--nego-mint); }
.sec-sightline-footer .foot__note { color: var(--nego-on-dark-mu); font-size: var(--fs-sm); }
.sec-sightline-footer .foot__links a { color: var(--nego-on-dark-mu); }
.sec-sightline-footer .foot__links a:hover { color: #fff; }
.sec-sightline-footer .foot__map { border-radius: var(--r-xl); background: var(--nego-navy-3); }
.sec-sightline-footer .foot__map-tx { border-radius: var(--r-md); }
.sec-sightline-footer .foot__map-tx strong { color: var(--primary); }
.sec-sightline-footer .foot__map :is(img, video) { height: clamp(210px, 17vw, 240px); }

/* Podnožje nosi tri bloka umjesto četiri: telefon, radno vrijeme i adresa
   stoje u sekciji iznad i ovdje se ne ponavljaju (UPUTA.md, „Podnožje ostaje
   jednostavno"). Da zadnji stubac ne ostane prazan, prvi zauzima dva. */
@media (min-width: 1041px) {
  .sec-sightline-footer .foot__brand { grid-column: span 2; }
}

/* ============================================================
   12. TELEFON — odluke donesene na 375 px
   ============================================================ */

@media (max-width: 640px) {
  /* Iznad pregiba stoje naslov i jedno dugme: glavno je puno, drugo lakše. */
  .sec-terra-hero .hero__act .u-btn--ghost {
    border-color: rgba(233, 241, 244, 0.5);
    background: transparent;
    font-weight: 500;
  }
  .sec-terra-hero .hero__lead { font-size: 1rem; max-width: 34ch; }

  /* Traka sa podacima: jedan stubac, nikad prelom u 2+1. */
  .sec-terra-hero .hbar { border-radius: var(--r-lg); }
  .sec-terra-hero .hbar__i strong { font-size: 1.32rem; }

  .sec-sonnenschein-services .bento { border-radius: var(--r-lg); }
  .sec-quiet-hours-cta .cta__band { border-radius: var(--r-xl); }
  .sec-radix-referenzen .mcard { border-radius: var(--r-lg); }
}