/* ============================================================
   Dental studio „Osmijeh“ — sloj teme.
   Učitava se POSLIJE svih `section.css` i `brend.css` i samo ih
   nadjačava. Raspored (`display`, `grid-*`, `flex-direction`,
   `order`, `position`, `inset`, poravnanja) se ovdje NE dira —
   to je u `section.css` i tamo ostaje.

   Šta ovaj fajl radi:
     1. jedno pismo na cijelom sajtu — Figtree
     2. jedna paleta — neutrali svih deset sekcija svedeni na isti niz
     3. jedan jezik oblika — radijusi, sjenke, ivice, dugmad
     4. telefon: padding-block 45px, kontejner 80% bez bočnog paddinga
   ============================================================ */

/* ---------- 1. PISMO ---------- */

@font-face {
  font-family: 'Figtree Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('fonts/figtree-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Figtree Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('fonts/figtree-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- 2. STRANICA ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: #22312c;
  font-family: 'Figtree Variable', Figtree, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  font-synthesis-weight: none;
}
main { display: block; }
.band { margin: 0; }

/* ---------- 3. JEDNA PALETA I JEDNO PISMO ZA SVIH DESET ---------- */
/* Imena tokena po sekciji su iz `sekcije/TOKENI.md`. Boje vezane za
 * brend (`--c-accent*`, `--c-primary*`) dolaze iz `brend.css` i ovdje
 * se NE diraju — mijenjaju se u `tokens.css`. */

.sec-nordlicht-header,
.sec-nordlicht-hero,
.sec-sightline-services,
.sec-housecall-referenzen,
.sec-atelier-parallax,
.sec-atelier-about,
.sec-haven-results,
.sec-radix-faq,
.sec-haven-cta,
.sec-sonnenschein-footer {
  --ff-display: 'Figtree Variable', Figtree, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --ff-body: 'Figtree Variable', Figtree, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

  --ls-tight: -0.025em;
  --ls-label: 0.12em;
  --lh-snug: 1.16;
  --lh-body: 1.65;

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-panel: 26px;
  --r-img: 20px;
  --r-gallery: 16px;

  --sh-xs: 0 1px 2px rgba(22, 36, 31, 0.05);
  --sh-sm: 0 2px 10px -4px rgba(22, 36, 31, 0.14);
  --sh-md: 0 14px 32px -18px rgba(22, 36, 31, 0.28);
  --sh-lg: 0 26px 56px -26px rgba(22, 36, 31, 0.34);
  --sh-xl: 0 40px 80px -34px rgba(22, 36, 31, 0.40);

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

/* Svijetle sekcije */
.sec-sightline-services,
.sec-housecall-referenzen,
.sec-atelier-parallax,
.sec-atelier-about,
.sec-haven-results,
.sec-haven-cta {
  --c-bg: #ffffff;
  --c-bg-alt: #f3f8f7;
  --c-white: #ffffff;
  --c-surface: var(--accent-soft);
  --c-surface-warm: #f3f8f7;
  --c-text: #22312c;
  --c-text-muted: #5c6e68;
  --c-text-invert: #eef5f3;
  --c-ink: var(--primary);
  --c-ink-soft: #22312c;
  --c-ink-70: rgba(22, 36, 31, 0.70);
  --c-ink-12: rgba(22, 36, 31, 0.12);
  --c-ink-06: rgba(22, 36, 31, 0.06);
  --c-on-dark: #eef5f3;
  --c-on-dark-mu: rgba(238, 245, 243, 0.78);
  --c-line: rgba(22, 36, 31, 0.10);
  --c-line-strong: rgba(22, 36, 31, 0.20);
  --c-line-dark: rgba(238, 245, 243, 0.22);
  --c-line-invert: rgba(238, 245, 243, 0.20);
  --ring-c: rgba(238, 245, 243, 0.10);
}

/* Ritam traka: bijelo → blago zeleno → bijelo → blago zeleno, da se dvije
 * svijetle sekcije jedna za drugom ne slijepe u jednu dugu bijelu ploču. */
.sec-housecall-referenzen,
.sec-haven-results { --c-bg: #f3f8f7; }

/* Tamne sekcije: zaglavlje + hero (jedno platno) */
.sec-nordlicht-header,
.sec-nordlicht-hero {
  --c-canvas: var(--primary);
  --c-canvas-lt: #1f3a32;
  --c-canvas-dp: #0d1714;
  --c-panel: #ffffff;
  --c-panel-alt: #f3f8f7;
  --c-white: #ffffff;
  --c-surface: var(--accent-soft);
  --c-text: #22312c;
  --c-text-muted: #5c6e68;
  --c-on-canvas: #eef5f3;
  --c-on-canvas-mu: rgba(238, 245, 243, 0.76);
  --c-line: rgba(22, 36, 31, 0.10);
  --c-line-strong: rgba(22, 36, 31, 0.20);
  --c-line-canvas: rgba(238, 245, 243, 0.18);
}

/* Tamna sekcija: pitanja */
.sec-radix-faq {
  --c-canvas: var(--primary);
  --c-canvas-2: #0f1c18;
  --c-surface: #1f3a32;
  --c-surface-2: #26463c;
  --c-white: #ffffff;
  --c-sand: var(--accent-soft);
  --c-on-canvas: #eef5f3;
  --c-on-canvas-mu: rgba(238, 245, 243, 0.76);
  --c-on-canvas-lo: rgba(238, 245, 243, 0.52);
  --c-light: #ffffff;
  --c-ink: var(--primary);
  --c-ink-mu: #5c6e68;
  --c-line: rgba(238, 245, 243, 0.16);
  --c-line-strong: rgba(238, 245, 243, 0.30);
  --c-line-dark: rgba(22, 36, 31, 0.12);
}

/* Podnožje: bilo je koralno-žuto, sada je brend */
.sec-sonnenschein-footer {
  --c-bg: #ffffff;
  --c-bg-alt: #f3f8f7;
  --c-white: #ffffff;
  --c-coral: var(--accent);
  --c-coral-dk: var(--accent-strong);
  --c-coral-soft: var(--accent-soft);
  --c-sun: #7fd4c4;
  --c-sun-soft: var(--accent-soft);
  --c-mint: var(--accent);
  --c-mint-soft: rgba(238, 245, 243, 0.10);
  --c-text: #22312c;
  --c-text-muted: #5c6e68;
  --c-text-invert: #ffffff;
  --c-line: rgba(22, 36, 31, 0.10);
  --c-line-strong: rgba(22, 36, 31, 0.20);
}

/* ---------- 4. TIPOGRAFSKA SKALA ---------- */
/* Ujednačava se PISMO, ne skala — hero smije biti krupniji od
 * naslova pitanja. Ali korak između veličina je isti svuda. */

.sec-nordlicht-hero {
  --fs-h1: clamp(2.35rem, 4.6vw + 1rem, 4.15rem);
  --fs-lg: clamp(1.075rem, 0.5vw + 0.95rem, 1.25rem);
}
.sec-sightline-services,
.sec-housecall-referenzen,
.sec-atelier-parallax,
.sec-atelier-about,
.sec-haven-results,
.sec-radix-faq,
.sec-haven-cta,
.sec-sonnenschein-footer {
  --fs-h2: clamp(1.75rem, 2.4vw + 1.1rem, 2.85rem);
  --fs-h3: clamp(1.2rem, 0.8vw + 1rem, 1.5rem);
  --fs-h4: clamp(1.1rem, 0.55vw + 1rem, 1.3rem);
}

.sec-nordlicht-header h1, .sec-nordlicht-header h2, .sec-nordlicht-header h3, .sec-nordlicht-header h4,
.sec-nordlicht-hero h1, .sec-nordlicht-hero h2, .sec-nordlicht-hero h3, .sec-nordlicht-hero h4,
.sec-sightline-services h1, .sec-sightline-services h2, .sec-sightline-services h3, .sec-sightline-services h4,
.sec-housecall-referenzen h1, .sec-housecall-referenzen h2, .sec-housecall-referenzen h3, .sec-housecall-referenzen h4,
.sec-atelier-parallax h1, .sec-atelier-parallax h2, .sec-atelier-parallax h3, .sec-atelier-parallax h4,
.sec-atelier-about h1, .sec-atelier-about h2, .sec-atelier-about h3, .sec-atelier-about h4,
.sec-haven-results h1, .sec-haven-results h2, .sec-haven-results h3, .sec-haven-results h4,
.sec-radix-faq h1, .sec-radix-faq h2, .sec-radix-faq h3, .sec-radix-faq h4,
.sec-haven-cta h1, .sec-haven-cta h2, .sec-haven-cta h3, .sec-haven-cta h4,
.sec-sonnenschein-footer h1, .sec-sonnenschein-footer h2, .sec-sonnenschein-footer h3, .sec-sonnenschein-footer h4 {
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* Sitne oznake iznad naslova — jedan izgled na svih deset sekcija */
.sec-sightline-services .u-label,
.sec-housecall-referenzen .u-label,
.sec-haven-results .u-label,
.sec-radix-faq .u-label,
.sec-haven-cta .u-label,
.sec-nordlicht-hero .u-kicker,
.sec-atelier-parallax .u-marker,
.sec-atelier-about .u-marker {
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- 5. DUGMAD ---------- */

.sec-nordlicht-header .u-btn,
.sec-nordlicht-hero .u-btn,
.sec-haven-cta .u-btn,
.sec-sonnenschein-footer .u-btn {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.sec-nordlicht-header .u-btn--accent,
.sec-nordlicht-hero .u-btn--accent {
  --btn-bg: var(--accent);
  --btn-fg: #ffffff;
}
.sec-nordlicht-header .u-btn--accent:hover,
.sec-nordlicht-hero .u-btn--accent:hover { --btn-bg: var(--accent-strong); }

.sec-nordlicht-hero .u-btn--ghost {
  --btn-fg: #eef5f3;
  --btn-bd: rgba(238, 245, 243, 0.34);
}
.sec-nordlicht-hero .u-btn--ghost:hover {
  --btn-bg: rgba(238, 245, 243, 0.08);
  --btn-bd: rgba(238, 245, 243, 0.62);
}

/* CTA stoji na akcentu: bijelo dugme je glavno, drugo je obrubljeno
 * (bilo je WhatsApp zeleno — klasa ostaje, boja je brendova). */
.sec-haven-cta .u-btn--white {
  --btn-bg: #ffffff;
  --btn-fg: var(--accent-strong);
}
.sec-haven-cta .u-btn--white:hover { --btn-bg: var(--accent-soft); }
.sec-haven-cta .u-btn--wa {
  --btn-bg: transparent;
  --btn-fg: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.42);
  box-shadow: none;
}
.sec-haven-cta .u-btn--wa:hover {
  --btn-bg: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.75);
}

/* Podnožje: „sun“ dugme je bilo žuto */
.sec-sonnenschein-footer .u-btn--sun {
  background: var(--accent);
  color: #ffffff;
}
.sec-sonnenschein-footer .u-btn--sun:hover { background: var(--accent-strong); color: #ffffff; }

/* ---------- 6. ZAGLAVLJE ---------- */

.sec-nordlicht-header .site-head { border-bottom: 1px solid rgba(238, 245, 243, 0.10); }
.sec-nordlicht-header .brand__mark { color: var(--accent); }
.sec-nordlicht-header .brand__text strong { letter-spacing: -0.03em; }
.sec-nordlicht-header .brand__text small { letter-spacing: 0.04em; opacity: 0.7; }
.sec-nordlicht-header .head-cta { min-height: 46px; padding: 12px 24px; font-size: 0.95rem; }
.sec-nordlicht-header .mobile-bar { background: rgba(22, 36, 31, 0.95); }
.sec-nordlicht-header .mobile-bar__i--cta { background: var(--accent); color: #ffffff; }

/* ---------- 6b. MENI NA TELEFONU ---------- */
/* Bilo je: sadržaj menija je viši od ekrana, a list je centriran, pa je
 * pregledač odsjekao GORNJI kraj — prva stavka je završila ispod
 * logotipa i dugmeta za zatvaranje.
 *
 * Rješenje bez diranja rasporeda: automatske margine na prvom i
 * posljednjem djetetu. Dok ima slobodnog prostora one ga podijele i
 * meni je centriran kao i do sada; kad ga nema, padnu na nulu, pa
 * sadržaj kreće ISPOD zaglavlja i može se skrolati. */
.sec-nordlicht-header .gmenu__sheet {
  padding: calc(var(--header-h) + 20px) 10% calc(24px + env(safe-area-inset-bottom));
  gap: 24px;
  overscroll-behavior: contain;
}
.sec-nordlicht-header .gmenu__sheet > :first-child { margin-top: auto; }
.sec-nordlicht-header .gmenu__sheet > :last-child { margin-bottom: auto; }

/* Uže stavke, da meni od šest redova stane na jedan ekran. */
.sec-nordlicht-header .gmenu__grid { gap: 8px; }
.sec-nordlicht-header .gmenu__grid a {
  min-height: 62px;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 1.0625rem;
}
.sec-nordlicht-header .gmenu__foot { gap: 8px; }
.sec-nordlicht-header .gmenu__tel { font-size: 1.3rem; padding: 4px; }

/* Zaglavlje stoji IZNAD lista (veći z-index). Dok je meni otvoren
 * dobija punu podlogu, pa logotip i „X“ ne lebde nad sadržajem. */
.sec-nordlicht-header:has(.gmenu.is-open) .site-head {
  background: var(--primary);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 rgba(238, 245, 243, 0.10);
}

@media (max-width: 620px) {
  .sec-nordlicht-header .gmenu__grid a { min-height: 58px; }
}
@media (max-height: 700px) {
  .sec-nordlicht-header .gmenu__sheet { gap: 16px; }
  .sec-nordlicht-header .gmenu__grid a { min-height: 52px; padding: 10px 16px; }
  .sec-nordlicht-header .gmenu__tel { font-size: 1.15rem; }
}

/* ---------- 7. HERO ---------- */

/* Okvir prati omjer snimka (16:9) — lice u kadru se ne siječe ni na
 * jednoj širini (UPUTA → „Okvir se prilagođava slici“). */
.sec-nordlicht-hero .hero__frame {
  aspect-ratio: 16 / 9;
  border-radius: 26px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.65);
}
.sec-nordlicht-hero .hero h1 { letter-spacing: -0.035em; }
.sec-nordlicht-hero .hero__lead { max-width: 46ch; }
.sec-nordlicht-hero .hero__rating { border-color: rgba(238, 245, 243, 0.20); }
.sec-nordlicht-hero .hero__avatars i { border-color: var(--primary); }
.sec-nordlicht-hero .hero__stat { border-radius: 14px; }
.sec-nordlicht-hero .hero__stat strong { color: var(--accent-strong); }
.sec-nordlicht-hero .hero__trust li { border-right-color: rgba(238, 245, 243, 0.18); }

/* ---------- 8. USLUGE ---------- */

.sec-sightline-services .plan-t__in {
  border-radius: 20px;
  border: 1px solid var(--c-line);
  background: #ffffff;
  box-shadow: var(--sh-xs);
  transition: box-shadow 260ms var(--ease), transform 260ms var(--ease-out), border-color 260ms var(--ease);
}
.sec-sightline-services .plan-t:hover .plan-t__in {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  box-shadow: var(--sh-md);
}
.sec-sightline-services .plan-t__ic {
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.sec-sightline-services .plan-t h3 { letter-spacing: -0.02em; }
.sec-sightline-services .price__in {
  border-radius: 26px;
  background: var(--primary);
  border: 0;
}
.sec-sightline-services .price__label { color: rgba(238, 245, 243, 0.62); }
.sec-sightline-services .price__main strong { color: #ffffff; font-weight: 700; }
.sec-sightline-services .price__main p { color: rgba(238, 245, 243, 0.78); }
.sec-sightline-services .price__no li {
  border-left-color: var(--accent);
  color: rgba(238, 245, 243, 0.78);
}
.sec-sightline-services .price__no strong { color: #ffffff; }

/* ---------- 9. RECENZIJE ---------- */

.sec-housecall-referenzen .rev {
  padding: 26px;
  border-radius: 20px;
  border: 1px solid var(--c-line);
  background: #ffffff;
  box-shadow: var(--sh-xs);
}
/* DVIJE RECENZIJE PO REDU (traženo). Sekcija je crtana za tri u redu;
 * ovo je jedina izmjena geometrije u cijelom sajtu. */
.sec-housecall-referenzen .revs__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 920px;
  margin-inline: auto;
}
@media (max-width: 700px) {
  .sec-housecall-referenzen .revs__list { grid-template-columns: 1fr; }
}

.sec-housecall-referenzen .rev { position: relative; padding-top: 30px; }
.sec-housecall-referenzen .rev__tx { color: #3c4b45; }
.sec-housecall-referenzen .rev::before {
  content: "";
  display: block;
  width: 30px;
  height: 24px;
  margin-bottom: 14px;
  background: currentColor;
  color: color-mix(in srgb, var(--accent) 42%, transparent);
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24'%3E%3Cpath d='M0 24V13.2C0 5.9 4.2 1 11.4 0l1.2 3.6c-3.9 1.1-5.9 3.4-6 6.6H13V24Zm17 0V13.2C17 5.9 21.2 1 28.4 0l1.2 3.6c-3.9 1.1-5.9 3.4-6 6.6H30V24Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24'%3E%3Cpath d='M0 24V13.2C0 5.9 4.2 1 11.4 0l1.2 3.6c-3.9 1.1-5.9 3.4-6 6.6H13V24Zm17 0V13.2C17 5.9 21.2 1 28.4 0l1.2 3.6c-3.9 1.1-5.9 3.4-6 6.6H30V24Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.sec-housecall-referenzen .revs__score strong { color: var(--primary); font-weight: 700; }
.sec-housecall-referenzen .revs__score a { color: var(--accent-strong); }
.sec-housecall-referenzen .u-stars { color: var(--c-star); }

/* Sažimanje duge recenzije — kartice ostaju iste visine.
 * Dugme „Prikaži cijelu recenziju“ dodaje `assets/site.js`. */
.sec-housecall-referenzen .rev__tx.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sec-housecall-referenzen .rev__more {
  margin-top: 12px;
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--accent-strong);
  border-bottom: 1px solid currentColor;
  line-height: 1.4;
}
.sec-housecall-referenzen .rev__more:hover { color: var(--primary); }

/* Strelice: vide se SAMO kad recenzija ima više od tri (site.js) */
.sec-housecall-referenzen .revs__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
}
.sec-housecall-referenzen .revs__nav[hidden] { display: none; }
.sec-housecall-referenzen .revs__arrow {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--c-line-strong);
  background: #ffffff;
  color: var(--primary);
  box-shadow: var(--sh-xs);
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease-out);
}
.sec-housecall-referenzen .revs__arrow svg { width: 22px; height: 22px; }
.sec-housecall-referenzen .revs__arrow:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  transform: translateY(-2px);
}
.sec-housecall-referenzen .revs__arrow:disabled { opacity: 0.35; cursor: default; }
.sec-housecall-referenzen .revs__pg {
  min-width: 4.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ---------- 10. PARALAKS ---------- */

/* Pozadina je snimak. Zatamnjenje je jako tamo gdje stoji tekst, a
 * slabo na desnoj strani — snimak se i dalje vidi kao snimak
 * (UPUTA → „Fotografija mora ostati fotografija“). */
.sec-atelier-parallax .plx { background: var(--primary); }
.sec-atelier-parallax .plx__bg :is(img, video) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sec-atelier-parallax .plx__scrim {
  background:
    linear-gradient(100deg, rgba(11, 20, 17, 0.93) 0%, rgba(11, 20, 17, 0.74) 46%, rgba(11, 20, 17, 0.34) 100%),
    linear-gradient(180deg, rgba(11, 20, 17, 0.55) 0%, transparent 30%, transparent 66%, rgba(11, 20, 17, 0.58) 100%);
}
/* Ispod panela još jedan sloj gustine — samo tu, ne preko cijelog kadra. */
.sec-atelier-parallax .plx__panel {
  padding: clamp(24px, 3vw, 44px);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(11, 20, 17, 0.72), rgba(11, 20, 17, 0.44));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(238, 245, 243, 0.12);
}
.sec-atelier-parallax .plx__lead { color: rgba(255, 255, 255, 0.90); }
.sec-atelier-parallax .plx__title { letter-spacing: -0.035em; }
.sec-atelier-parallax .u-em { color: #7fd4c4; }
.sec-atelier-parallax .plx__lead { max-width: 52ch; }
.sec-atelier-parallax .plx__sig-name { font-weight: 700; }

/* ---------- 11. O NAMA ---------- */

/* Grupna fotografija: okvir dobija omjer same fotografije, da ivica
 * ne odsiječe nikoga sa strane ni odozgo. */
.sec-atelier-about .abt__frame { aspect-ratio: 1360 / 1000; border-radius: 24px; }
.sec-atelier-about .abt__strip :is(img, video) { border-radius: 18px; }
.sec-atelier-about .u-em { color: var(--accent); }
.sec-atelier-about .abt__v-no {
  color: var(--accent);
  font-weight: 700;
  font-style: normal;
}
.sec-atelier-about .abt__values h3 { font-weight: 700; letter-spacing: -0.02em; }
.sec-atelier-about .abt__values li::before { background: var(--accent); }

/* ---------- 12. PRIJE / POSLIJE ---------- */

.sec-haven-results .bimg :is(img, video) { border-radius: 16px; }
.sec-haven-results .bcase__tx h3 { letter-spacing: -0.02em; }
.sec-haven-results .bcase__toggle button { border-radius: 999px; font-weight: 700; }

/* ---------- 13. PITANJA ---------- */

.sec-radix-faq .faq { background: var(--primary); }

/* Pitanja su kartice, ne linije.
 * Prije: `.qa` je imao samo `border-bottom`, a zaobljenje je tu liniju
 * savijalo u kukicu na krajevima — otud „čudne ivice“. Sada je svaka
 * kartica zatvoren oblik sa svojom podlogom, a tekst ima uvlaku, pa
 * naslov više ne stoji priljubljen uz lijevu ivicu. */
.sec-radix-faq .faq__list {
  gap: 12px;
  border-top: 0;
}
.sec-radix-faq .qa {
  border: 1px solid rgba(238, 245, 243, 0.13);
  border-radius: 16px;
  background: rgba(238, 245, 243, 0.045);
  overflow: hidden;
  transition: border-color 220ms var(--ease), background-color 220ms var(--ease);
}
.sec-radix-faq .qa:hover { border-color: rgba(238, 245, 243, 0.26); }
.sec-radix-faq .qa.is-open {
  border-color: color-mix(in srgb, var(--accent) 46%, transparent);
  background: rgba(238, 245, 243, 0.07);
}
.sec-radix-faq .qa__q button {
  padding: 20px 24px;
  gap: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.sec-radix-faq .qa__t { font-weight: 700; }
.sec-radix-faq .qa__in { padding-inline: 24px; }
.sec-radix-faq .qa__in > p:last-child { padding-bottom: 12px; }

/* Napomena: bila je gola linija sa strane; sada je uokviren blok. */
.sec-radix-faq .qa__note {
  padding: 12px;
  border-left: 0;
  border-radius: 12px 12px 0 0;
  background: rgba(22, 124, 107, 0.16);
  color: var(--c-on-canvas) !important;
}
.sec-radix-faq .qa__note a,
.sec-radix-faq .qa__in a { color: #7fd4c4; border-bottom: 1px solid currentColor; }
.sec-radix-faq .faq__more a { color: #7fd4c4; }

@media (max-width: 767px) {
  .sec-radix-faq .qa__q button { padding: 18px; gap: 16px; }
  .sec-radix-faq .qa__in { padding-inline: 18px; }
}

/* ---------- 14. CTA ---------- */

/* Poziv na akciju stoji na snimku; ispod snimka je brend gradijent, da
 * sekcija ima boju i dok se video ne učita. */
.sec-haven-cta .cta {
  background: linear-gradient(135deg, #18886f 0%, var(--accent) 42%, var(--accent-strong) 100%);
}
.sec-haven-cta .cta__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
}
.sec-haven-cta .cta__bg :is(img, video) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* Zatamnjenje u brend boji: tekst je čitljiv, a snimak se i dalje vidi. */
.sec-haven-cta .cta__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(9, 40, 34, 0.72) 0%, rgba(9, 40, 34, 0.58) 45%, rgba(9, 40, 34, 0.78) 100%),
    linear-gradient(120deg, rgba(16, 93, 80, 0.62) 0%, rgba(22, 124, 107, 0.34) 100%);
}
.sec-haven-cta .cta h2 {
  letter-spacing: -0.03em;
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}
.sec-haven-cta .cta__copy p { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.38); }
.sec-haven-cta .cta__copy p { color: rgba(255, 255, 255, 0.86); }
.sec-haven-cta .u-dark .u-label { color: rgba(255, 255, 255, 0.80); }
.sec-haven-cta .u-rings { --ring-c: rgba(255, 255, 255, 0.13); }

/* ---------- 15. PODNOŽJE ---------- */

.sec-sonnenschein-footer .ftr { background: #0f1c18; color: rgba(238, 245, 243, 0.78); }
.sec-sonnenschein-footer .ftr h3 { color: #ffffff; }
.sec-sonnenschein-footer .ftr__logo strong { color: #ffffff; letter-spacing: -0.025em; }
.sec-sonnenschein-footer .ftr__blurb { color: rgba(238, 245, 243, 0.68); max-width: 34ch; }
.sec-sonnenschein-footer .ftr__hours th,
.sec-sonnenschein-footer .ftr__hours td { color: rgba(238, 245, 243, 0.80); }

/* Ugrađena Google karta umjesto praznog okvira. */
.sec-sonnenschein-footer .ftr__mapembed {
  width: 100%;
  aspect-ratio: 8 / 5;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(238, 245, 243, 0.16);
  background: rgba(238, 245, 243, 0.05);
}
.sec-sonnenschein-footer .ftr__mapembed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Karta je svijetla, podnožje tamno — blago prigušenje da se uklopi. */
  filter: saturate(0.85) brightness(0.94);
}
.sec-sonnenschein-footer .ftr__map { margin-top: 10px; }
.sec-sonnenschein-footer .ftr__map span { color: #7fd4c4; }

/* Na telefonu Google-ova kartica sa adresom pokrije skoro cijeli okvir,
 * pa okvir dobija više visine — vidi se i kartica i ulica. */
@media (max-width: 767px) {
  .sec-sonnenschein-footer .ftr__mapembed { aspect-ratio: auto; height: 280px; }
}
.sec-sonnenschein-footer .ftr__bar { border-top-color: rgba(238, 245, 243, 0.14); }
.sec-sonnenschein-footer .ftr__top { color: rgba(238, 245, 243, 0.80); }

/* ============================================================
   16. TELEFON — mjera, ne ispravka.
   Sekcije: padding-block 45px. Kontejneri: širina 80%, bez
   bočnog paddinga. Prelomne tačke u `section.css` se ne diraju —
   ovo je vlastito pravilo pod `max-width`.
   ============================================================ */

@media (max-width: 767px) {

  .sec-nordlicht-header,
  .sec-nordlicht-hero,
  .sec-sightline-services,
  .sec-housecall-referenzen,
  .sec-atelier-parallax,
  .sec-atelier-about,
  .sec-haven-results,
  .sec-radix-faq,
  .sec-haven-cta,
  .sec-sonnenschein-footer {
    --section-y: 45px;
    --gutter: 0px;
    --pad: 0px;
  }

  /* Kontejner: 80% širine, bez bočnog paddinga */
  .sec-nordlicht-header .site-head__inner,
  .sec-nordlicht-hero .u-inner,
  .sec-nordlicht-hero .hero__band,
  .sec-sightline-services .u-container,
  .sec-housecall-referenzen .u-container,
  .sec-atelier-parallax .u-container,
  .sec-atelier-about .u-container,
  .sec-haven-results .u-container,
  .sec-radix-faq .u-container,
  .sec-haven-cta .u-container,
  .sec-sonnenschein-footer .u-container {
    width: 80%;
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
  }

  /* Vertikalni ritam: 45px gore i dolje na svakoj sekciji */
  .sec-sightline-services .u-section,
  .sec-housecall-referenzen .u-section,
  .sec-atelier-about .u-section,
  .sec-haven-results .u-section,
  .sec-radix-faq .u-section { padding-block: 45px; }

  .sec-nordlicht-header { padding-bottom: 0; }

  .sec-nordlicht-hero .hero {
    padding-top: calc(var(--header-h) + 45px);
    padding-bottom: 45px;
  }
  .sec-atelier-parallax .plx { padding-block: 45px; min-height: 0; }
  .sec-haven-cta .cta { padding-block: 45px; }
  .sec-sonnenschein-footer .ftr { padding-top: 45px; padding-bottom: 84px; }
  .sec-sonnenschein-footer .ftr__grid { padding-bottom: 45px; }

  /* „Stranice“: DVIJE STAVKE PO REDU (traženo). Šest linkova stane u
   * tri reda umjesto šest, pa podnožje ne bude dugačak spisak. */
  .sec-sonnenschein-footer .ftr__col ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 16px;
  }

  /* Hero na telefonu: naslov i jedno dugme iznad pregiba.
   * Uvod je kratak, drugo dugme je lakše, traka je jedan stubac
   * (sve to već radi `section.css` ispod 620px — ovdje se samo
   * skida višak visine). */
  .sec-nordlicht-hero .hero h1 { font-size: clamp(2.1rem, 9.5vw, 2.9rem); }
  .sec-nordlicht-hero .hero__lead { font-size: 1.0625rem; }
  .sec-nordlicht-hero .hero__copy > * + * { margin-top: 18px; }
  .sec-nordlicht-hero .hero__band { margin-top: 32px; }

  /* Traka sa podacima: DVA PODATKA PO REDU (traženo).
   * Četiri podatka daju 2×2 — bez usamljenog reda na kraju, što je i
   * ono što UPUTA zabranjuje („nikad prelom u 2+1“). */
  .sec-nordlicht-hero .hero__trust {
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 32px;
    gap: 22px 0;
  }
  .sec-nordlicht-hero .hero__trust li {
    width: 50%;
    padding-inline: 8px;
  }
  .sec-nordlicht-hero .u-btn--lg { min-height: 56px; padding: 16px 28px; }

  .sec-sightline-services .plan-t__in { padding: 22px; }
  .sec-sightline-services .price__in { padding: 26px; }
  .sec-housecall-referenzen .rev { padding: 22px; }
  .sec-housecall-referenzen .revs__nav { margin-top: 22px; }
  .sec-atelier-about .abt__figure { margin-top: 32px; }
}

/* Vrlo uski ekrani: 80% od 320px je 256px — tekst tada ima premalo
 * mjesta, pa se procenat blago diže. */
@media (max-width: 340px) {
  .sec-nordlicht-header .site-head__inner,
  .sec-nordlicht-hero .u-inner,
  .sec-nordlicht-hero .hero__band,
  .sec-sightline-services .u-container,
  .sec-housecall-referenzen .u-container,
  .sec-atelier-parallax .u-container,
  .sec-atelier-about .u-container,
  .sec-haven-results .u-container,
  .sec-radix-faq .u-container,
  .sec-haven-cta .u-container,
  .sec-sonnenschein-footer .u-container { width: 88%; }
}