/* /iv-terapiya/ IV sections + /iv-terapiya/<slug>/ protocol pages.
   Site tokens only (styles.css). Dark film band uses the site's own dark-theme
   values (#0B181C, #ECF6F7), as in the clinic's IV module. */

/* ============ Film header ============ */
/* --ivf-head: where the card starts while pinned (stuck nav pill ends at about 83px).
   The section is pulled up under the nav so the card sits just below it both
   before and while the stage is pinned. */
.ivf { --ivf-bg: #0B181C; --ivf-ink: #ECF6F7; --ivf-muted: #A9BDC1; --ivf-head: 96px; margin-top: calc(12px - var(--ivf-head)); }
/* Desktop: the card stays pinned while the film plays with the scroll. */
.ivf-track { position: relative; height: calc(100vh + 230vh); }
.ivf-stage {
  position: sticky; top: 0; height: 100vh;
  padding: var(--ivf-head) 16px 20px; box-sizing: border-box;
}
.ivf-media, .ivf-veil {
  position: absolute; left: 16px; right: 16px; top: var(--ivf-head); bottom: 20px;
  max-width: calc(var(--maxw) + 16px); margin: 0 auto;
  border-radius: var(--r-xl); overflow: hidden;
}
.ivf-media { background: var(--ivf-bg); }
.ivf-media img, .ivf-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.ivf-media video { opacity: 0; transition: opacity .3s ease; }
.ivf[data-painted="true"] .ivf-media video { opacity: 1; }
.ivf-veil {
  background: linear-gradient(90deg, rgba(11,24,28,.86) 0%, rgba(11,24,28,.55) 38%, rgba(11,24,28,0) 68%);
  pointer-events: none;
}
/* Text sits at the top of the card, under the breadcrumb, like the other
   service pages' headers (owner, 2026-10-17). */
.ivf-copy {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 36px 56px 48px; box-sizing: border-box; color: var(--ivf-ink);
}
.ivf-crumb { padding: 0; margin-bottom: clamp(36px, 6vh, 72px); }
/* Desktop: breadcrumb stays at the top, the text block sits in the middle of
   the remaining height (owner: the lower half looked empty). */
@media (min-width: 861px) and (hover: hover) {
  .ivf-crumb { margin-bottom: auto; }
  .ivf-actions { margin-bottom: auto; }
  .ivf-copy { padding-bottom: 36px; }
}
.ivf-crumb, .ivf-crumb a { color: var(--ivf-muted); }
.ivf-crumb a:hover { color: #fff; }
.ivf-crumb .cur { color: var(--ivf-ink); }
.ivf-eyebrow { color: var(--lime-300); }
.ivf-eyebrow::before { background: var(--lime-300); }
.ivf-title {
  margin: 14px 0 0; max-width: 600px; /* same size and measure as the other service headers */
  font-size: clamp(32px, 3.5vw, 50px); line-height: 1.04; font-weight: 800; letter-spacing: -.03em;
  color: var(--ivf-ink);
}
.ivf-nw { white-space: nowrap; }
.ivf-lead { margin: 18px 0 0; max-width: 470px; font-size: 17px; line-height: 1.55; color: #C9DADC; }
.ivf-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 20px 0 0; padding: 0; }
.ivf-chips li {
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid rgba(236,246,247,.24); color: var(--ivf-ink);
}
.ivf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 26px; }
.ivf-link { color: var(--ivf-ink); font-weight: 600; font-size: 15px; border-bottom: 1px solid rgba(236,246,247,.35); padding-bottom: 2px; }
.ivf-link:hover { border-color: var(--lime-300); }
.ivf a:focus-visible, .ivf button:focus-visible { outline-color: #fff; }

/* Phones/tablets: no pinning, the film just loops behind the card. */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  .ivf { margin-top: 0; }
  .ivf-track { height: auto; }
  .ivf-stage { position: relative; height: auto; min-height: 640px; padding: 20px 16px 0; }
  .ivf-media, .ivf-veil { top: 20px; bottom: 0; left: 16px; right: 16px; border-radius: var(--r-lg); }
  .ivf-veil { background: linear-gradient(180deg, rgba(11,24,28,.92) 0%, rgba(11,24,28,.7) 55%, rgba(11,24,28,.35) 100%); }
  .ivf-copy { min-height: 620px; padding: 20px 22px 28px; }
  .ivf-crumb { margin-bottom: 40px; }
  .ivf-lead { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .ivf-track { height: auto; }
  .ivf-stage { position: relative; height: 92vh; min-height: 620px; }
}

/* ============ Six-line switcher ============ */
.ivl { margin: 8px 0 28px; scroll-margin-top: 100px; }
/* /iv-terapiya/ has no programme cards under the switcher any more: drop the empty grid's gap. */
.ivl + .prog-lines:not(:has(.prog-line)) { display: none; }
.ivl + .prog-lines + .prog-note { margin-top: 0; }
.ivl-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ivl-tab {
  padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ivl-tab:hover { border-color: var(--teal-200); color: var(--ink); }
.ivl-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ivl-panel {
  display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 32px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px; box-shadow: var(--shadow-sm);
}
.ivl-panel + .ivl-panel { margin-top: 16px; } /* JS off: all panels stacked */
.ivl[data-ready] .ivl-panel + .ivl-panel { margin-top: 0; }
.ivl-panel[hidden] { display: none; }
.ivl-bag {
  margin: 0; border-radius: var(--r-md); aspect-ratio: 3 / 4;
  background: linear-gradient(180deg, var(--teal-50), #fff);
  display: grid; place-items: center; overflow: hidden;
}
.ivl-bag img {
  grid-area: 1 / 1; width: 92%; height: 92%; object-fit: contain;
  transition: opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
.ivl-bag img.is-out { opacity: 0; transform: scale(.96) translateY(8px); }
@media (prefers-reduced-motion: reduce) {
  .ivl-bag img { transition: opacity .2s linear; }
  .ivl-bag img.is-out { transform: none; }
}
.ivl-kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-600); }
.ivl-title { margin: 6px 0 0; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.ivl-sum { margin: 8px 0 14px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.ivl-rows { list-style: none; margin: 0; padding: 0; }
.ivl-row {
  display: grid; grid-template-columns: minmax(150px, 210px) 1fr auto; gap: 16px; align-items: center;
  padding: 13px 4px; border-top: 1px solid var(--line); color: var(--ink);
}
.ivl-row strong { font-size: 15.5px; font-weight: 700; }
.ivl-row span { color: var(--muted); font-size: 14px; }
.ivl-row i { font-style: normal; color: var(--teal-500); font-weight: 700; transition: transform .2s ease; }
.ivl-row:hover strong { color: var(--teal-600); }
.ivl-row:hover i { transform: translateX(4px); }

@media (max-width: 860px) {
  .ivl-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .ivl-tab { text-align: center; padding: 10px 8px; font-size: 13px; }
  .ivl-panel { grid-template-columns: 1fr; padding: 18px; gap: 16px; }
  .ivl-bag { aspect-ratio: auto; height: 240px; }
  .ivl-row { grid-template-columns: 1fr auto; }
  .ivl-row span { grid-column: 1; grid-row: 2; font-size: 13px; }
  .ivl-row i { grid-row: 1 / span 2; }
}

/* ============ New zone (renders) ============ */
.ivr { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; margin-top: 28px; }
.ivr-frame { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--bg-warm); }
.ivr-frame img { width: 100%; height: 440px; object-fit: cover; }
.ivr-badge {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.92);
  font-size: 12px; font-weight: 700; color: var(--ink); letter-spacing: .02em;
}
.ivr-frame figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 18px 16px;
  display: flex; flex-direction: column; gap: 4px; color: #fff;
  background: linear-gradient(transparent, rgba(14,43,48,.72));
}
.ivr-frame figcaption strong { font-size: 16px; }
.ivr-frame figcaption span { font-size: 13px; opacity: .9; }
.ivr-note { margin: 16px 0 0; padding: 12px 16px; border-radius: var(--r-sm); background: var(--bg-warm); color: var(--ink-2); font-size: 14px; }
@media (max-width: 860px) {
  .ivr { grid-template-columns: 1fr; }
  .ivr-frame img { height: 280px; }
}

/* ============ Phones (2026-10-17, user: "adjust the IV page for mobiles") ============
   Same content, laid out for a narrow screen instead of desktop blocks stacked:
   bag beside the line title, steps as one compact list, renders as a swipe row.
   Protocol pages have their own phone rules (iv-protocol.css). */
@media (max-width: 640px) {
  /* Film header: a little tighter so the booking button sits higher. */
  .ivf-stage { min-height: 0; }
  .ivf-copy { min-height: 0; padding: 18px 20px 26px; }
  .ivf-crumb { margin-bottom: 26px; font-size: 13px; }
  .ivf-title { margin-top: 10px; font-size: clamp(30px, 8.6vw, 36px); }
  .ivf-lead { margin-top: 14px; }
  .ivf-chips { margin-top: 16px; gap: 6px; }
  .ivf-chips li { padding: 6px 12px; font-size: 12.5px; }
  .ivf-actions { margin-top: 20px; gap: 16px; }
  .ivf-actions .btn { width: 100%; justify-content: center; }

  /* Switcher: the bag shrinks to a thumbnail next to the line title. */
  .ivl-tab { padding: 11px 8px; } /* 44px tap height */
  .ivl-panel {
    grid-template-columns: 84px 1fr; column-gap: 14px; row-gap: 0;
    align-items: start; padding: 16px;
  }
  .ivl-body { display: contents; }
  .ivl-bag { grid-column: 1; grid-row: 1 / span 3; height: 112px; aspect-ratio: auto; }
  .ivl-kicker { grid-column: 2; font-size: 11px; }
  .ivl-title { grid-column: 2; font-size: 20px; }
  .ivl-sum { grid-column: 2; margin: 6px 0 0; font-size: 14px; }
  .ivl-rows { grid-column: 1 / -1; margin-top: 14px; }
  .ivl-row { padding: 12px 2px; gap: 2px 12px; }
  .ivl-row strong { font-size: 15px; }

  /* Steps: one card, numbered rows joined by a line (it is a sequence). */
  body:has(.ivf) .proc-grid {
    margin-top: 24px; gap: 0;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 6px 0;
  }
  body:has(.ivf) .proc {
    flex-direction: row; align-items: center; gap: 14px;
    padding: 12px 18px; border: 0; border-radius: 0; background: none;
  }
  body:has(.ivf) .proc-n { flex: none; width: 36px; height: 36px; font-size: 14px; position: relative; z-index: 1; }
  body:has(.ivf) .proc:not(:last-child)::after {
    display: block; top: 50%; left: 35px; right: auto; width: 2px; height: 100%;
    background: var(--accent-tint, var(--teal-100)); opacity: 1;
  }
  body:has(.ivf) .proc-t { font-size: 15px; }

  /* New zone: swipe row with the next render peeking in. */
  .ivr {
    display: flex; gap: 12px; margin: 24px -16px 0; padding: 0 16px 4px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .ivr::-webkit-scrollbar { display: none; }
  .ivr-frame { flex: 0 0 84%; scroll-snap-align: start; }
  .ivr-frame img { height: 340px; }
  .ivr-note { font-size: 13.5px; }
}

/* ============ Switcher motion (2026-10-17, user: "smoother toggle") ============
   iv-lines.js adds .ivl-ink (the dark pill) and .ivl-stage (wraps the panels).
   Paint order inside the tab list: white tab backgrounds (::before, z -1),
   then the sliding pill, then the tab labels — so the pill glides under the text. */
.ivl[data-ready] .ivl-tabs { position: relative; isolation: isolate; }
.ivl[data-ready] .ivl-tab {
  position: relative; background: transparent; border-color: transparent;
  transition: color .35s ease;
}
.ivl[data-ready] .ivl-tab::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .2s ease;
}
.ivl[data-ready] .ivl-tab:hover::before { border-color: var(--teal-200); }
.ivl[data-ready] .ivl-tab[aria-selected="true"] { background: transparent; border-color: transparent; color: #fff; }
.ivl-ink {
  position: absolute; top: 0; left: 0; border-radius: 999px; background: var(--ink);
  box-shadow: 0 6px 18px rgba(14, 43, 48, .18);
  transition: transform .5s cubic-bezier(.22, .8, .24, 1), width .5s cubic-bezier(.22, .8, .24, 1), height .5s cubic-bezier(.22, .8, .24, 1);
  will-change: transform;
}
.ivl-stage { position: relative; border-radius: var(--r-lg); }
.ivl-stage.is-moving { overflow: clip; } /* only while sliding, so the panel shadow shows at rest */
.ivl-stage .ivl-panel.is-leaving { position: absolute; top: 0; left: 0; right: 0; }
@media (prefers-reduced-motion: reduce) {
  .ivl-ink { transition: none; }
}

/* Phones: less text in the film header (2026-10-18, user: "too much text"):
   one short line instead of the paragraph; label and chips hidden. */
.ivf-lead-short { display: none; }
@media (max-width: 640px) {
  .ivf:has(.ivf-lead-short) .ivf-lead,
  .ivf-eyebrow,
  .ivf-chips { display: none; }
  .ivf-crumb { margin-bottom: 22px; }
  .ivf-title { margin-top: 0; }
  .ivf-lead-short { display: block; margin: 14px 0 0; font-size: 16px; line-height: 1.45; color: #C9DADC; max-width: none; }
}
.section-head + .ivl { margin-top: 22px; } /* title sits directly above the tabs since the intro text was removed (2026-10-18) */

/* Phones/tablets (2026-10-18, user): line buttons below the protocol list, in
   one row that scrolls sideways (iv-lines.js scrolls back up to the new line). */
@media (max-width: 860px) {
  .ivl[data-ready] { display: flex; flex-direction: column; }
  .ivl[data-ready] .ivl-tabs {
    order: 2; display: flex; flex-wrap: nowrap; gap: 8px;
    margin: 16px -16px 0; padding: 4px 16px 6px;
    overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 16px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .ivl[data-ready] .ivl-tabs::-webkit-scrollbar { display: none; }
  .ivl[data-ready] .ivl-tab { flex: none; white-space: nowrap; padding: 11px 18px; scroll-snap-align: start; }
  .ivl[data-ready] .ivl-stage { order: 1; }
  .section-head + .ivl[data-ready] { margin-top: 18px; }
}

/* Phones: taller film header (2026-10-18, user: "a bit longer"). Fills most
   of the first screen; breadcrumb on top, headline + button at the bottom,
   more of the film visible between. Veil darkest where the text sits. */
@media (max-width: 640px) {
  .ivf-stage { min-height: min(640px, calc(100svh - 150px)); display: flex; }
  .ivf-copy { flex: 1; height: auto; align-self: stretch; display: flex; flex-direction: column; min-height: 0; padding-bottom: 24px; }
  .ivf-crumb { margin-bottom: auto; padding-bottom: 24px; }
  .ivf-veil { background: linear-gradient(180deg, rgba(11,24,28,.55) 0%, rgba(11,24,28,.25) 35%, rgba(11,24,28,.75) 62%, rgba(11,24,28,.94) 100%); }
}