/* Stomatološka ordinacija dr Slađana Simić — homepage: tokens (from the design system's tokens.json) + Navbar & Hero composition. */

:root {
  /* Color */
  --porcelain: #fbfaf7;
  --sage: #edf2ec;
  --charcoal: #242824;
  --fresh-green: #60b358;
  --warm-gray: #454945;
  --deep-green: #397749;
  --peach: #f3e7de;
  --white: #ffffff;
  --hairline: rgba(36, 40, 36, 0.12);
  --control-border: rgba(36, 40, 36, 0.32);
  --disabled-fill: rgba(36, 40, 36, 0.08);
  --disabled-ink: rgba(36, 40, 36, 0.42);
  --surface-page: var(--porcelain);
  --surface-alt: var(--sage);
  --surface-card: var(--white);
  --surface-kids: var(--peach);
  --text-heading: var(--charcoal);
  --text-body: var(--warm-gray);
  --accent: var(--fresh-green);
  --cta-bg: var(--fresh-green);
  --cta-bg-hover: var(--deep-green);
  --cta-text: var(--white);
  --focus-ring: var(--charcoal);

  /* Type */
  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --fs-h1: 64px; --fs-h1-tablet: 52px; --fs-h1-mobile: clamp(34px, 10.67vw, 40px);
  --fs-h2: 46px; --fs-h2-tablet: 38px; --fs-h2-mobile: clamp(28px, 8.53vw, 32px);
  --fs-h3: 30px; --fs-h3-tablet: 27px; --fs-h3-mobile: 25px;
  --fs-h4: 24px; --fs-h4-tablet: 22px; --fs-h4-mobile: 21px;
  --fs-body-lg: 18px; --fs-body-lg-tablet: 17px; --fs-body-lg-mobile: 16px;
  --fs-body: 16px; --fs-support: 14px;
  --fs-eyebrow: 12px; --fs-eyebrow-mobile: 11px;
  --fs-cta: 15px;
  --lh-h1: 1.1; --lh-h2: 1.15; --lh-h3: 1.22; --lh-body: 1.6; --lh-eyebrow: 1.3; --lh-cta: 1.2;
  --ls-eyebrow: 0.14em;
  --gap-eyebrow-heading: 10px; --gap-heading-body: 14px; --gap-body-cta: 24px;

  /* Spacing */
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-14: 14px; --space-16: 16px;
  --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px;
  --space-64: 64px; --space-80: 80px; --space-96: 96px; --space-112: 112px;

  /* Radius */
  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 20px; --radius-pill: 999px;

  /* Layout */
  --container-max: 1240px;
  --page-pad-desktop: 32px; --page-pad-tablet: 32px; --page-pad-mobile: 20px;
  --columns-desktop: 12; --columns-tablet: 8; --columns-mobile: 4;
  --gutter-desktop: 24px; --gutter-tablet: 20px; --gutter-mobile: 12px;
  --section-y-desktop: 96px; --section-y-tablet: 80px; --section-y-mobile: 64px;
  --nav-height-desktop: 80px; --nav-height-mobile: 64px;
  --button-height: 48px;
  --measure: 62ch;

  /* Motion */
  --duration-fast: 160ms; --duration-base: 220ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* Future homepage sections land below the sticky bar when reached from the nav. */
[id] { scroll-margin-top: var(--nav-height-desktop); }

/* ---------- 01 · Navbar ---------- */
/* Logo sits on the container's left edge, the same line as the hero text.
   justify-self/align-self stop the grid cell and the column flexbox from stretching the
   <img> wider than the artwork (which letterboxed the SVG into the middle of the cell);
   aspect-ratio matches the trimmed SVG (its left whitespace removed in the viewBox). */
.site-nav .ds-brand { flex: none; justify-self: start; align-items: flex-start; }
.site-nav .ds-brand__logo { width: auto; aspect-ratio: 814.39 / 283.46; }

/* Eyebrow: text only, no leading dot */
.home .ds-eyebrow::before { content: none; }
.site-nav .nav-cta { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

/* Desktop & small laptop: logo left, links truly centred, phone CTA right */
@media (min-width: 1024px) {
  .site-nav .ds-nav__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .site-nav .ds-nav__actions { justify-self: end; }
}

/* Tablet 768–1023: links collapse into the menu, the number stays visible as the CTA */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-nav .ds-nav__actions .nav-cta { display: inline-flex; }
  .site-nav .ds-nav__actions .ds-nav__call-icon { display: none; }
}

/* ---------- 02 · Hero ---------- */
.hero { padding: var(--section-y-desktop) 0; background: var(--surface-page); }
.hero__grid {
  display: grid;
  grid-template-columns: repeat(var(--columns-desktop), minmax(0, 1fr));
  column-gap: var(--gutter-desktop);
}
.hero__text  { grid-column: 1 / span 6; grid-row: 1; align-self: end; }
.hero__cards { grid-column: 1 / span 6; grid-row: 2; align-self: start; margin-top: var(--space-48); }
.hero__media { grid-column: 8 / span 5; grid-row: 1 / span 2; align-self: center; }

.hero__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter-desktop); }

.hero-card { gap: var(--space-20); }
.hero-card--peach { background: var(--peach); border-color: transparent; }
.hero-card .ds-h4 { font-size: var(--fs-body-lg); line-height: var(--lh-h3); }
.hero-card .ds-h4 + .ds-support { margin-top: var(--space-8); }

.hero__slot { display: grid; gap: var(--space-8); justify-items: center; max-width: 30ch; }
.hero__slot strong { font-weight: 600; color: var(--charcoal); }
.hero__slot svg { width: 28px; height: 28px; color: var(--deep-green); }

/* Tablet 768–1199 (reference 834) */
@media (max-width: 1199px) {
  .hero { padding: var(--section-y-tablet) 0; }
  .hero__grid { grid-template-columns: repeat(var(--columns-tablet), minmax(0, 1fr)); column-gap: var(--gutter-tablet); }
  .hero__text  { grid-column: 1 / span 4; }
  .hero__cards { grid-column: 1 / span 4; margin-top: var(--space-40); grid-template-columns: minmax(0, 1fr); gap: var(--gutter-tablet); }
  .hero__media { grid-column: 5 / span 4; }
  .hero-card { flex-direction: row; align-items: flex-start; gap: var(--space-16); }
  [id] { scroll-margin-top: var(--nav-height-mobile); }
}

/* Mobile <768 (reference 375): eyebrow → H1 → body → CTA → photo → cards */
@media (max-width: 767px) {
  .hero { padding: var(--section-y-mobile) 0; }
  .hero__grid { display: flex; flex-direction: column; align-items: stretch; }
  .hero__media { margin-top: var(--space-32); }
  .hero__media.ds-media--portrait { aspect-ratio: 4 / 3; }
  .hero__cards { margin-top: var(--space-32); gap: var(--gutter-mobile); }
}

/* ---------- Green tooth on the „I za najmlađe" card ----------
   Floats slowly along the guide path: from its resting spot beside the title, a soft hook
   to the left, then up to the card's top-right corner, and back. Decorative only. */
.hero-card--peach { position: relative; }
.hero-card__tooth {
  position: absolute; top: -20px; right: -19px;   /* tooth centre sits on the card's top-right corner; keyframes offset from there */
  width: 38px; height: auto; pointer-events: none;
  transform: translate(-72px, 70px);
  animation: zubic-float 10s linear infinite alternate;
  will-change: transform;
}
@media (max-width: 1199px) {
  .hero-card--peach > div { padding-right: 72px; }   /* keep the description clear of the tooth on horizontal cards */
  .hero-card__tooth { top: -8px; }                     /* stacked cards: stay clear of the card above */
}
@media (prefers-reduced-motion: reduce) {
  .hero-card__tooth { animation: none; }
}
@keyframes zubic-float {
  0.00% { transform: translate(-72.0px, 70.0px) rotate(0.0deg); }
  4.17% { transform: translate(-72.4px, 69.8px) rotate(0.0deg); }
  8.33% { transform: translate(-73.6px, 69.4px) rotate(0.2deg); }
  12.50% { transform: translate(-75.5px, 68.6px) rotate(0.4deg); }
  16.67% { transform: translate(-77.8px, 67.4px) rotate(0.7deg); }
  20.83% { transform: translate(-80.5px, 65.8px) rotate(1.0deg); }
  25.00% { transform: translate(-83.2px, 63.8px) rotate(1.5deg); }
  29.17% { transform: translate(-85.7px, 61.3px) rotate(2.0deg); }
  33.33% { transform: translate(-87.7px, 58.4px) rotate(2.5deg); }
  37.50% { transform: translate(-88.9px, 55.1px) rotate(3.1deg); }
  41.67% { transform: translate(-89.1px, 51.3px) rotate(3.7deg); }
  45.83% { transform: translate(-88.3px, 47.3px) rotate(4.3deg); }
  50.00% { transform: translate(-86.2px, 43.1px) rotate(5.0deg); }
  54.17% { transform: translate(-83.0px, 38.8px) rotate(5.7deg); }
  58.33% { transform: translate(-78.6px, 34.6px) rotate(6.3deg); }
  62.50% { transform: translate(-73.3px, 30.4px) rotate(6.9deg); }
  66.67% { transform: translate(-67.2px, 26.5px) rotate(7.5deg); }
  70.83% { transform: translate(-60.7px, 23.0px) rotate(8.0deg); }
  75.00% { transform: translate(-54.0px, 19.8px) rotate(8.5deg); }
  79.17% { transform: translate(-47.6px, 17.2px) rotate(9.0deg); }
  83.33% { transform: translate(-41.8px, 14.9px) rotate(9.3deg); }
  87.50% { transform: translate(-36.9px, 13.2px) rotate(9.6deg); }
  91.67% { transform: translate(-33.1px, 12.0px) rotate(9.8deg); }
  95.83% { transform: translate(-30.8px, 11.2px) rotate(10.0deg); }
  100.00% { transform: translate(-30.0px, 11.0px) rotate(10.0deg); }
}

/* ---------- 03 · Usluge ----------
   Same composition as the Bulatović Dent services band: alternate surface (sage), centred
   editorial intro, a grid of quiet text-only cards (category label → title → description),
   a secondary CTA to the Services page. Each card is one link to its category on /usluge. */
.services { padding: var(--section-y-desktop) 0; background: var(--surface-alt); }

.services__intro { max-width: 760px; margin: 0 auto; text-align: center; }
.services__intro .ds-lead { max-width: 60ch; margin-left: auto; margin-right: auto; }

.services__grid {
  list-style: none; margin: var(--space-48) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--gutter-desktop);
}
.services__grid > li { display: flex; min-width: 0; }

/* Compact link card: category + arrow on one line, title beneath; rows share height */
.service {
  width: 100%; background: var(--porcelain); border-color: var(--hairline);
  color: var(--charcoal); text-decoration: none;
  padding: var(--space-24) var(--space-24) var(--space-32);
  transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.service__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-16); margin-bottom: var(--space-32); }
.service__cat { display: block; padding-top: 2px; }
.service__arrow {
  flex: none; width: 20px; height: 20px; color: var(--deep-green);
  transition: transform var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
/* Title sits on the card's bottom edge, so titles line up across a row even when a label wraps */
.service .service__title { margin-top: auto; }

a.service:hover { background: var(--white); border-color: var(--control-border); }
a.service:hover .service__arrow { transform: translate(2px, -2px); color: var(--charcoal); }
a.service:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.services__more { justify-content: center; margin-top: var(--space-48); }

/* Tablet 768–1199: 2 × 4 */
@media (max-width: 1199px) {
  .services { padding: var(--section-y-tablet) 0; }
  .services__grid { margin-top: var(--space-40); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter-tablet); }
  .service { padding: var(--space-20) var(--space-20) var(--space-24); }
  .service__top { margin-bottom: var(--space-24); }
  .services__more { margin-top: var(--space-40); }
}

/* Mobile <768: one column */
@media (max-width: 767px) {
  .services { padding: var(--section-y-mobile) 0; }
  .services__grid { margin-top: var(--space-32); grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .service__top { margin-bottom: var(--space-20); }
  .services__more { margin-top: var(--space-32); }
}

/* ---------- 04 · Za najmlađe ----------
   Porcelain band under a soft sage wave (the Usluge colour flowing in), centred intro,
   a five-photo fan that zooms the hovered/focused photo to 2×, three highlights, primary CTA.
   A tooth replaces the mouse pointer inside this section on fine-pointer screens ≥768px. */
.kids { position: relative; background: var(--surface-page); padding: calc(var(--space-80) + var(--space-48)) 0 var(--section-y-desktop); }
.kids__wave { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 96px; color: var(--sage); }

.kids__intro { position: relative; max-width: 760px; margin: 0 auto; text-align: center; }
.kids__intro .ds-lead { max-width: 62ch; margin-left: auto; margin-right: auto; }

/* Photo fan — positions are % of the stage, so it scales with the container */
.album { position: relative; margin-top: var(--space-64); aspect-ratio: 1240 / 450; }
.album__card {
  position: absolute; margin: 0; padding: 6px;
  left: var(--x); top: var(--y); width: var(--w); z-index: var(--z);
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  rotate: var(--r); scale: 1; transform-origin: var(--o) 50%;
  transition: scale 350ms var(--ease-standard), rotate 350ms var(--ease-standard), z-index 0s linear 350ms;
  outline: none;
}
.album__card--1 { --x: 4%;  --y: 15%; --w: 19%; --r: -7deg; --z: 1; --o: 0%; }
.album__card--2 { --x: 20%; --y: 7%;  --w: 22%; --r: -3.5deg; --z: 2; --o: 25%; }
.album__card--3 { --x: 36.5%; --y: 1%; --w: 27%; --r: 0deg; --z: 3; --o: 50%; }
.album__card--4 { --x: 58%; --y: 7%;  --w: 22%; --r: 3.5deg; --z: 2; --o: 75%; }
.album__card--5 { --x: 77%; --y: 15%; --w: 19%; --r: 7deg; --z: 1; --o: 100%; }

.album__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: calc(var(--radius-lg) - 6px); background: var(--sage); }
.album__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.album__slot {
  position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-12); text-align: center;
  font-size: var(--fs-support); line-height: 1.4; color: var(--text-body);
  border: 1px dashed var(--control-border); border-radius: inherit;
}

/* Hover / keyboard focus: the card rises above all others, straightens and doubles in size */
@media (hover: hover) and (min-width: 768px) {
  .album__card:hover { z-index: 10; scale: 2; rotate: 0deg; transition: scale 350ms var(--ease-standard), rotate 350ms var(--ease-standard), z-index 0s; }
}
@media (min-width: 768px) {
  .album__card:focus-visible { z-index: 10; scale: 2; rotate: 0deg; transition: scale 350ms var(--ease-standard), rotate 350ms var(--ease-standard), z-index 0s; box-shadow: 0 0 0 2px var(--focus-ring); }
}

/* Highlights: three items in one row, icon beside its text */
.kids__points {
  list-style: none; margin: var(--space-48) auto 0; padding: 0; max-width: 920px;
  display: flex; justify-content: center; gap: var(--space-64);
}
.kids__point { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--space-16); text-align: left; }
.kids__mark { flex: none; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--sage); display: grid; place-items: center; }
.kids__mark img { display: block; width: 24px; height: auto; }
.kids__label { font-family: var(--font-sans); font-size: 16px; line-height: 1.4; font-weight: 500; color: var(--charcoal); text-wrap: balance; }

.kids__more { justify-content: center; margin-top: var(--space-48); }

/* Tooth cursor (fine pointers, ≥768px). The element never takes pointer events. */
.kids__cursor {
  position: fixed; top: 0; left: 0; z-index: 100; display: block; width: 34px; height: 36px;
  pointer-events: none; opacity: 0; transform: translate3d(-100px, -100px, 0);
  transition: opacity 160ms var(--ease-standard);
}
.kids.has-tooth-cursor .kids__cursor { opacity: 1; }
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .kids.has-tooth-cursor, .kids.has-tooth-cursor * { cursor: none; }
}
@media (hover: none), (pointer: coarse), (max-width: 767px) {
  .kids__cursor { display: none; }
}

/* Tablet 768–1199 */
@media (max-width: 1199px) {
  .kids { padding: calc(var(--space-64) + var(--space-40)) 0 var(--section-y-tablet); }
  .kids__wave { height: 64px; }
  .album { margin-top: var(--space-48); }
  .album__card { padding: 4px; border-radius: var(--radius-md); }
  .album__photo { border-radius: calc(var(--radius-md) - 4px); }
  .kids__points { gap: var(--space-40); }
  .kids__label { white-space: nowrap; }
  .kids__more { margin-top: var(--space-40); }
}

/* Mobile <768: swipeable gallery; highlights stay in one row, smaller */
@media (max-width: 767px) {
  .kids { padding: calc(var(--space-48) + var(--space-32)) 0 var(--section-y-mobile); }
  .kids__wave { height: 44px; }
  .album {
    aspect-ratio: auto; margin: var(--space-32) calc(var(--page-pad-mobile) * -1) 0;
    display: flex; gap: var(--space-12); overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px var(--page-pad-mobile) 8px; scroll-padding-inline: var(--page-pad-mobile);
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .album::-webkit-scrollbar { display: none; }
  .album__card { position: relative; left: auto; top: auto; flex: none; width: 78%; rotate: 0deg; scroll-snap-align: center; }
  .album__card:focus-visible { box-shadow: 0 0 0 2px var(--focus-ring); }
  /* Highlights: one column on the container's left edge; icon left, text right */
  .kids__points { margin-top: var(--space-40); flex-direction: column; align-items: flex-start; gap: var(--space-16); width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
  .kids__point { gap: var(--space-12); justify-content: flex-start; }
  .kids__mark { width: 40px; height: 40px; }
  .kids__mark img { width: 18px; }
  .kids__label { font-size: 15px; line-height: 1.35; font-weight: 500; white-space: normal; text-align: left; }
  .kids__more { margin-top: var(--space-40); }
}

/* Cursor tooth */
.kids__cursor-tooth { position: relative; display: block; width: 34px; height: auto; }

/* ---------- Za najmlađe · desktop refinement (≥1200) ----------
   Cards ~11% smaller, same fan. Hover pulls the photo gently out of the album:
   it rises, nearly straightens and grows to 1.18 — 1.1s in, 0.9s out, ease-in-out. */
@media (min-width: 1200px) {
  .album { aspect-ratio: 1240 / 405; }
  .album__card--1 { --x: 9%;    --y: 15%; --w: 17%; }
  .album__card--2 { --x: 23.3%; --y: 7%;  --w: 19.6%; }
  .album__card--3 { --x: 38%;   --y: 1%;  --w: 24%; }
  .album__card--4 { --x: 57.1%; --y: 7%;  --w: 19.6%; }
  .album__card--5 { --x: 74%;   --y: 15%; --w: 17%; }
  .album__card {
    transform-origin: 50% 60%; translate: 0 0;
    transition:
      scale 900ms cubic-bezier(0.65, 0, 0.35, 1),
      rotate 900ms cubic-bezier(0.65, 0, 0.35, 1),
      translate 900ms cubic-bezier(0.65, 0, 0.35, 1),
      z-index 0s linear 900ms;
  }
  .album__card:hover, .album__card:focus-visible {
    z-index: 10; scale: 1.18; translate: 0 -18px; rotate: calc(var(--r) * 0.3);
    transition:
      scale 1100ms cubic-bezier(0.65, 0, 0.35, 1),
      rotate 1100ms cubic-bezier(0.65, 0, 0.35, 1),
      translate 1100ms cubic-bezier(0.65, 0, 0.35, 1),
      z-index 0s;
  }
}

/* ---------- Za najmlađe · mobile gallery controls (<768 only) ---------- */
.album-nav { display: none; }
@media (max-width: 767px) {
  .album-nav { display: block; margin-top: var(--space-20); text-align: center; }
  .album-nav__row { display: flex; align-items: center; justify-content: center; gap: var(--space-20); }
  .album-nav__btn { width: 44px; height: 44px; background: transparent; border-color: var(--control-border); color: var(--charcoal); }
  .album-nav__btn:hover:not(:disabled) { border-color: var(--charcoal); }
  .album-nav__btn:disabled { opacity: 0.35; cursor: default; }
  .album-nav__btn svg { width: 20px; height: 20px; }
  .album-nav__tooth { flex: none; width: 64px; height: 64px; border-radius: var(--radius-pill); background: var(--sage); display: grid; place-items: center; }
  .album-nav__tooth-img { display: block; width: 40px; height: auto; transform-origin: 50% 85%; }
  .album-nav__tooth-img.is-tilt-a { animation: album-tooth-tilt-a 600ms var(--ease-standard); }
  .album-nav__tooth-img.is-tilt-b { animation: album-tooth-tilt-b 600ms var(--ease-standard); }
  .album-nav__count { margin: var(--space-8) 0 0; font-family: var(--font-sans); font-size: var(--fs-support); line-height: 1.4; color: var(--text-body); font-variant-numeric: tabular-nums; }
  .kids__points { margin-top: var(--space-32); }
}
/* Two identical keyframes so alternating classes restart the tilt on every change */
@keyframes album-tooth-tilt-a { 0% { rotate: 0deg; } 35% { rotate: -12deg; } 70% { rotate: 5deg; } 100% { rotate: 0deg; } }
@keyframes album-tooth-tilt-b { 0% { rotate: 0deg; } 35% { rotate: -12deg; } 70% { rotate: 5deg; } 100% { rotate: 0deg; } }

/* ---------- 05 · Rezultati ----------
   Sage band under a soft porcelain wave (Za najmlađe flowing in), centred intro,
   two before/after case cards, secondary CTA. Calm and clinical: no icons, no hover effects. */
.results { position: relative; background: var(--surface-alt); padding: calc(var(--space-80) + var(--space-48)) 0 var(--section-y-desktop); }
.results__wave { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 96px; color: var(--porcelain); }

.results__intro { position: relative; max-width: 760px; margin: 0 auto; text-align: center; }
.results__intro .ds-lead { max-width: 60ch; margin-left: auto; margin-right: auto; }

.results__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter-desktop); margin-top: var(--space-48); }

.result {
  display: flex; flex-direction: column; margin: 0;
  background: var(--porcelain); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  padding: var(--space-32);
}
.result__cat { display: block; }
.result .result__title { margin-top: var(--gap-eyebrow-heading); }

.result__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); margin-top: var(--space-24); }
.result__img { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md); background: var(--sage); }
.result__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.result__slot {
  position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-12); text-align: center;
  font-size: var(--fs-support); line-height: 1.4; color: var(--text-body);
  border: 1px dashed var(--control-border); border-radius: inherit;
}
.result__pill {
  position: absolute; top: var(--space-12); left: var(--space-12);
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 var(--space-12);
  border-radius: var(--radius-pill); background: var(--white); border: 1px solid var(--hairline);
  font-family: var(--font-sans); font-size: 12px; line-height: 1; font-weight: 600; letter-spacing: 0.04em; color: var(--charcoal);
}

.result__treatment {
  margin: var(--space-24) 0 0; padding-top: var(--space-16); border-top: 1px solid var(--hairline);
  font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.4; font-weight: 500; color: var(--charcoal);
}

.results__more { justify-content: center; margin-top: var(--space-48); }

/* Tablet 768–1199: one wide card per row so the photos stay large */
@media (max-width: 1199px) {
  .results { padding: calc(var(--space-64) + var(--space-40)) 0 var(--section-y-tablet); }
  .results__wave { height: 64px; }
  .results__grid { grid-template-columns: minmax(0, 1fr); gap: var(--gutter-tablet); margin-top: var(--space-40); }
  .result { padding: var(--space-24); border-radius: var(--radius-md); }
  .result .result__title { margin-top: var(--space-8); }
  .result__pair { margin-top: var(--space-20); }
  .result__treatment { margin-top: var(--space-20); }
  .results__more { margin-top: var(--space-40); }
}

/* Mobile <768: Pre above Posle, full card width */
@media (max-width: 767px) {
  .results { padding: calc(var(--space-48) + var(--space-32)) 0 var(--section-y-mobile); }
  .results__wave { height: 44px; }
  .results__grid { gap: var(--space-16); margin-top: var(--space-32); }
  .result { padding: var(--space-20); }
  .result__pair { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); margin-top: var(--space-16); }
  .result__treatment { margin-top: var(--space-16); padding-top: var(--space-12); }
  .results__more { margin-top: var(--space-32); }
}

/* ---------- 06 · O ordinaciji ----------
   Porcelain band after the sage Rezultati band. Text left (5 cols), portrait right (cols 7–12)
   over two soft organic shapes in sage and peach. */
.about { position: relative; background: var(--surface-page); padding: var(--section-y-desktop) 0; overflow-x: clip; }
.about__grid { display: grid; grid-template-columns: repeat(var(--columns-desktop), minmax(0, 1fr)); column-gap: var(--gutter-desktop); align-items: center; }
.about__text { grid-column: 1 / span 5; }
.about__text .ds-lead + .ds-lead { margin-top: var(--space-16); }
/* No vertical padding on the visual: the photo's top edge sits exactly on the section padding.
   The shapes are absolutely placed and spill softly past the photo instead. */
.about__visual { grid-column: 7 / span 6; position: relative; padding: 0 var(--space-40) 0 var(--space-48); }
.about__media { position: relative; z-index: 1; }
.about__media picture { display: block; height: 100%; }
.about__media img { object-position: 50% 30%; }
.about__shape { position: absolute; display: block; pointer-events: none; }
.about__shape--back { color: var(--sage); width: 84%; left: -2%; bottom: -7%; rotate: -8deg; }
.about__shape--front { color: var(--sage); width: 30%; right: 0; top: -5%; rotate: 12deg; }

/* Tablet 768–1199 */
@media (max-width: 1199px) {
  .about { padding: var(--section-y-tablet) 0; }
  .about__grid { grid-template-columns: repeat(var(--columns-tablet), minmax(0, 1fr)); column-gap: var(--gutter-tablet); }
  .about__text { grid-column: 1 / span 4; }
  .about__text .ds-lead + .ds-lead { margin-top: var(--space-14); }
  .about__visual { grid-column: 5 / span 4; padding: 0 var(--space-24) 0 var(--space-32); }
}

/* Mobile <768: text first, portrait below */
@media (max-width: 767px) {
  .about { padding: var(--section-y-mobile) 0; }
  .about__grid { display: flex; flex-direction: column; align-items: stretch; }
  .about__visual { margin-top: var(--space-48); padding: 0 var(--space-16) 0 var(--space-24); }
  .about__media.ds-media--portrait { aspect-ratio: 4 / 5; }
}

/* ---------- 07 · Iskustva pacijenata ----------
   Sage band, centred intro, two independently scrollable rows of porcelain cards (5 + 4,
   second row offset 90px), arrows between the rows move both rows one card. Every excerpt
   shows in full. Mobile: one card at a time, arrows and 9 progress segments. */
.reviews { --rev-card: 350px; --rev-gap: 24px; --rev-offset: 90px;
  --rev-edge: max(var(--page-pad-desktop), calc((100% - var(--container-max)) / 2));
  background: var(--surface-alt); padding: var(--section-y-desktop) 0; overflow: hidden; }
.reviews__intro { max-width: 760px; margin: 0 auto; text-align: center; }
.reviews__intro .ds-lead { max-width: 60ch; margin-left: auto; margin-right: auto; }

.reviews__rows { display: grid; gap: var(--rev-gap); margin-top: var(--space-48); }
.reviews-row {
  display: flex; align-items: stretch; gap: var(--rev-gap); column-gap: var(--rev-gap);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  padding-left: var(--rev-edge); padding-right: var(--rev-edge); cursor: grab;
}
.reviews-row--2 { padding-left: calc(var(--rev-edge) + var(--rev-offset)); }
.reviews-row::-webkit-scrollbar { display: none; }
.reviews-row.is-dragging { cursor: grabbing; user-select: none; }
.reviews-row.is-dragging * { pointer-events: none; }
.reviews-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.reviews-row > sc-for, .reviews-track > sc-for, .reviews-nav__dots > sc-for { display: contents; }
.reviews-row__item { flex: none; width: var(--rev-card); display: flex; }

.reviews-arrows { display: flex; justify-content: center; gap: var(--space-12); margin: var(--space-20) 0; }
.reviews-arrows__btn, .reviews-nav__btn { width: 44px; height: 44px; background: transparent; border-color: var(--control-border); color: var(--charcoal); }
.reviews-arrows__btn:hover:not(:disabled), .reviews-nav__btn:hover:not(:disabled) { border-color: var(--charcoal); }
.reviews-arrows__btn:disabled, .reviews-nav__btn:disabled { opacity: 0.35; cursor: default; }
.reviews-arrows__btn svg, .reviews-nav__btn svg { width: 20px; height: 20px; }

.review {
  display: flex; flex-direction: column; width: 100%; height: 280px; margin: 0;
  padding: var(--space-24); background: var(--porcelain); border: 1px solid var(--hairline); border-radius: var(--radius-md);
}
.review__stars { display: inline-flex; gap: 3px; color: #c58b12; }
.review__stars svg { display: block; width: 16px; height: 16px; }
.review__quote { margin: var(--space-16) 0 0; }
.review__text { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.5; color: var(--charcoal); overflow-wrap: break-word; }
.review__author { display: flex; align-items: center; gap: var(--space-12); margin-top: auto; padding-top: var(--space-16); }
.review__avatar {
  flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-pill);
  background: var(--sage); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--deep-green);
}
.review__name { font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--charcoal); }

.reviews__more { justify-content: center; margin-top: var(--space-48); }
.reviews__sr, .reviews-nav__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

.reviews__mobile { display: none; }

/* Tablet 768–1199: same two swipeable rows */
@media (max-width: 1199px) {
  .reviews { padding: var(--section-y-tablet) 0; --rev-card: 320px; --rev-gap: 20px; --rev-offset: 60px; --rev-edge: var(--page-pad-tablet); }
  .reviews__rows { margin-top: var(--space-40); }
  .reviews__more { margin-top: var(--space-40); }
}

/* Mobile <768: one full card at a time */
@media (max-width: 767px) {
  .reviews { padding: var(--section-y-mobile) 0; }
  .reviews__rows { display: none; }
  .reviews__mobile { display: block; margin-top: var(--space-32); }
  .reviews-track {
    position: relative; display: flex; gap: var(--space-12); overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 0 var(--page-pad-mobile); scroll-padding-inline: var(--page-pad-mobile);
    overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .reviews-track::-webkit-scrollbar { display: none; }
  .reviews-track__item { flex: none; width: 100%; display: flex; scroll-snap-align: start; }
  .review { height: auto; min-height: 260px; padding: var(--space-20); }   /* items stretch, so all cards stay equal */
  .reviews-nav { display: flex; align-items: center; justify-content: center; gap: var(--space-12); margin-top: var(--space-24); padding: 0 var(--page-pad-mobile); }
  .reviews-nav__dots { display: flex; align-items: center; gap: 6px; }
  .reviews-nav__dot { display: block; width: 12px; height: 3px; border-radius: 2px; background: var(--control-border); transition: width var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard); }
  .reviews-nav__dot.is-active { width: 22px; background: var(--deep-green); }
  .reviews__more { margin-top: var(--space-32); }
}

/* Section 06 · desktop drag cursor: 60px sage circle with ← → in deep green, only over the cards */
.reviews__rows { position: relative; }
.reviews-cursor {
  position: fixed; top: 0; left: 0; z-index: 100; display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: var(--radius-pill); background: var(--sage); color: var(--deep-green);
  pointer-events: none; opacity: 0; transform: translate3d(-100px, -100px, 0);
  transition: opacity 120ms var(--ease-standard);
}
.reviews-cursor svg { display: block; width: 36px; height: 18px; stroke-width: 1.8; }
.reviews__rows.show-drag-cursor .reviews-cursor { opacity: 1; }
@media (hover: hover) and (pointer: fine) and (min-width: 1200px) {
  .reviews__rows.show-drag-cursor .review,
  .reviews__rows.show-drag-cursor .review *,
  .reviews__rows.show-drag-cursor .reviews-row.is-dragging { cursor: none; }
}
@media (hover: none), (pointer: coarse), (max-width: 1199px) {
  .reviews-cursor { display: none; }
}

/* ---------- 08 · Kontakt ----------
   Porcelain band, centred intro, map left (7 cols) and contact details right (5 cols).
   Mobile: details and CTA first, map below. */
.contact { background: var(--surface-page); padding: var(--section-y-desktop) 0; }
.contact__intro { max-width: 760px; margin: 0 auto; text-align: center; }
.contact__intro .ds-lead { max-width: 60ch; margin-left: auto; margin-right: auto; }

.contact__grid {
  display: grid; grid-template-columns: repeat(var(--columns-desktop), minmax(0, 1fr)); column-gap: var(--gutter-desktop);
  align-items: start; margin-top: var(--space-48);
}
.contact__map-col { grid-column: 1 / span 7; }
.contact__details { grid-column: 9 / span 4; }

.contact__map { position: relative; width: 100%; height: 420px; overflow: hidden; border-radius: var(--radius-lg); background: var(--sage); }
.contact__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.contact__map-slot {
  position: absolute; inset: 0; display: grid; place-content: center; gap: var(--space-8); padding: var(--space-24); text-align: center;
  border: 1px dashed var(--control-border); border-radius: inherit; font-size: var(--fs-support); line-height: 1.5; color: var(--text-body);
}
.contact__map-slot strong { font-weight: 600; color: var(--charcoal); }
.contact__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.contact__list { margin: 0; }
.contact__row { padding: var(--space-24) 0; border-bottom: 1px solid var(--hairline); }
.contact__row:first-child { padding-top: 0; }
.contact__label {
  margin: 0; font-family: var(--font-sans); font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: 600;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--deep-green);
}
.contact__value { margin: var(--space-8) 0 0; font-size: var(--fs-body-lg); line-height: 1.5; font-weight: 500; color: var(--charcoal); }
.contact__phone { color: var(--charcoal); text-decoration: none; font-variant-numeric: tabular-nums; transition: color var(--duration-fast) var(--ease-standard); }
.contact__phone:hover { color: var(--deep-green); text-decoration: underline; text-underline-offset: 4px; }
.contact__phone:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 2px; }
.contact__hours { display: flex; justify-content: space-between; gap: var(--space-16); font-variant-numeric: tabular-nums; }
.contact__hours + .contact__hours { margin-top: var(--space-4); }
.contact__hours span:last-child { color: var(--text-body); font-weight: 400; }
.contact__cta { margin-top: var(--space-32); }

/* Tablet 768–1199 */
@media (max-width: 1199px) {
  .contact { padding: var(--section-y-tablet) 0; }
  .contact__grid { grid-template-columns: repeat(var(--columns-tablet), minmax(0, 1fr)); column-gap: var(--gutter-tablet); margin-top: var(--space-40); }
  .contact__map-col { grid-column: 1 / span 4; }
  .contact__details { grid-column: 5 / span 4; }
  .contact__map { height: 380px; border-radius: var(--radius-md); }
  .contact__value { font-size: var(--fs-body); }
  .contact__row { padding: var(--space-20) 0; }
  .contact__row:first-child { padding-top: 0; }
  .contact__cta { margin-top: var(--space-24); }
}

/* Mobile <768: details + CTA first, map below */
@media (max-width: 767px) {
  .contact { padding: var(--section-y-mobile) 0; }
  .contact__grid { display: flex; flex-direction: column; align-items: stretch; margin-top: var(--space-32); }
  .contact__details { order: 1; }
  .contact__map-col { order: 2; margin-top: var(--space-40); }
  .contact__map { height: 300px; }
  .contact__value { font-size: var(--fs-body-lg-mobile); }
}

/* ---------- 09 · Footer ----------
   Soft Charcoal band, light logo variant, four columns (brand · navigation · contact · hours),
   thin divider, then copyright and back-to-top. */
.site-footer {
  --f-text: #ffffff; --f-muted: var(--sage); --f-hover: var(--fresh-green); --f-line: rgba(255, 255, 255, 0.14);
  background: #29453f; color: var(--f-muted); padding: var(--space-80) 0 0;   /* footer only */
}
.site-footer__grid { display: grid; grid-template-columns: repeat(var(--columns-desktop), minmax(0, 1fr)); column-gap: var(--gutter-desktop); }
.site-footer__brand { grid-column: 1 / span 4; }
.site-footer__grid > :nth-child(2) { grid-column: 6 / span 2; }
.site-footer__grid > :nth-child(3) { grid-column: 8 / span 2; }
.site-footer__grid > :nth-child(4) { grid-column: 10 / span 3; }

.site-footer__logo { display: inline-block; border-radius: 4px; }
.site-footer__logo img { display: block; height: 80px; width: auto; }
.site-footer__logo:focus-visible { outline: 2px solid var(--f-text); outline-offset: 4px; }
.site-footer__text { margin: var(--space-16) 0 0; max-width: 32ch; font-size: var(--fs-support); line-height: var(--lh-body); color: var(--f-muted); }
.site-footer__social {
  display: inline-grid; place-items: center; width: 40px; height: 40px; margin-top: var(--space-20);
  border: 1px solid var(--f-line); border-radius: var(--radius-pill); color: var(--f-text);
  transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.site-footer__social svg { width: 20px; height: 20px; }
.site-footer__social:hover { color: var(--f-hover); border-color: var(--f-hover); }
.site-footer__social:focus-visible { outline: 2px solid var(--f-text); outline-offset: 3px; }

.site-footer__title {
  margin: 0 0 var(--space-16); font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: 600;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--f-text);
}
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); font-size: var(--fs-support); line-height: var(--lh-body); color: var(--f-muted); }
.site-footer__list a, .site-footer__top { color: var(--f-muted); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); }
.site-footer__list a:hover, .site-footer__top:hover { color: var(--f-hover); }
.site-footer__list a:focus-visible, .site-footer__top:focus-visible { outline: 2px solid var(--f-text); outline-offset: 3px; border-radius: 2px; }
.site-footer__phone { font-variant-numeric: tabular-nums; }
.site-footer__hours span:first-child { color: var(--f-text); }

.site-footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-16);
  margin-top: var(--space-64); padding: var(--space-24) 0; border-top: 1px solid var(--f-line);
}
.site-footer__copy { margin: 0; font-size: 13px; line-height: 1.5; color: var(--f-muted); }
.site-footer__top { display: inline-flex; align-items: center; gap: var(--space-8); font-size: 13px; font-weight: 500; }
.site-footer__top svg { width: 16px; height: 16px; }

/* Tablet 768–1199: balanced 2 × 2 */
@media (max-width: 1199px) {
  .site-footer { padding-top: var(--space-64); }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter-tablet); row-gap: var(--space-40); }
  .site-footer__grid > :nth-child(n) { grid-column: auto; }
  .site-footer__bottom { margin-top: var(--space-48); }
}

/* Mobile <768: one column, brand → navigation → contact → hours */
@media (max-width: 767px) {
  .site-footer { padding-top: var(--space-48); }
  .site-footer__grid { display: flex; flex-direction: column; gap: 0; }
  .site-footer__col + .site-footer__col { margin-top: var(--space-24); padding-top: var(--space-24); border-top: 1px solid var(--f-line); }
  .site-footer__logo img { height: 64px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-12); margin-top: var(--space-32); padding-bottom: var(--space-32); }
}