/* Clinovia — additions the dynamic site layers on top of style.css.
   Loaded after style.css. Reuses existing custom properties only; no new
   colour values, no build step. Logical properties throughout so rtl.css only
   has to override the genuinely directional bits. */

/* ==========================================================================
   Vertical video — featured reel (home) + video cards (videos page)
   ========================================================================== */
.vhero__grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.vhero__frame,
.vcard__frame {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--bg-mint);
  box-shadow: var(--shadow-md);
  isolation: isolate;
}
.vhero__video,
.vcard__video,
.vhero__poster,
.vcard__poster,
.vhero__embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.vhero__embed { z-index: 3; }

/* play / unmute overlay — always visible & tappable (reduced-motion safe) */
.vhero__play,
.vcard__play {
  position: absolute;
  left: 50%;
  inset-block-end: 16px;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(6px);
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.vhero__play:hover,
.vcard__play:hover {
  background: var(--teal);
  color: #fff;
  transform: translateX(-50%) translateY(-2px);
}
.vhero__play:focus-visible,
.vcard__play:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
/* Templates emit `__play-ico`; the `vplay__ico` alias is kept so either name works. */
.vhero__play .vplay__ico,
.vcard__play .vplay__ico,
.vhero__play .vhero__play-ico,
.vcard__play .vcard__play-ico {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
}
.vhero__play:hover .vplay__ico,
.vcard__play:hover .vplay__ico,
.vhero__play:hover .vhero__play-ico,
.vcard__play:hover .vcard__play-ico { background: #fff; color: var(--teal); }
.vhero__play .vplay__ico svg,
.vcard__play .vplay__ico svg,
.vhero__play .vhero__play-ico svg,
.vcard__play .vcard__play-ico svg { width: 14px; height: 14px; }
/* Some cards put the glyph straight into the button without a wrapper; an unsized
   <svg> in a flex row would otherwise stretch to the frame. */
.vhero__play > svg,
.vcard__play > svg { width: 18px; height: 18px; flex: none; }

/* The class sets `display: inline-flex`, which outranks the UA `[hidden]` rule, so the
   hidden state has to be declared here or the control stays on top of the video. */
.vhero__play[hidden],
.vcard__play[hidden],
.vhero__play.is-hidden,
.vcard__play.is-hidden { display: none; }

.vhero__body { min-width: 0; }
.vhero__title { margin: 14px 0 14px; font-size: clamp(26px, 3vw, 38px); }
.vhero__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--teal); }
.vhero__text { max-width: 560px; font-size: 15.5px; }
.vhero__link { margin-top: 22px; }

/* videos page grid */
.vgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(18px, 3vw, 30px);
}
.vcard { display: flex; flex-direction: column; gap: 14px; }
.vcard__frame { max-width: none; }
.vcard__frame--wide { aspect-ratio: 16 / 9; }
.vcard--featured { grid-column: span 2; }
.vcard--featured .vcard__frame { aspect-ratio: 16 / 9; }
.vcard__body { min-width: 0; }
.vcard__title,
.vcard__body b { display: block; font-size: 16px; color: var(--ink); letter-spacing: -.01em; }
.vcard__desc,
.vcard__body span { display: block; margin-top: 5px; font-size: 13.5px; color: var(--body); }

/* ==========================================================================
   Family-hub strip (homepage)
   ========================================================================== */
.hubs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 26px);
}
.hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 260px;
  padding: 26px;
  border-radius: var(--r-lg);
  background: var(--navy);
  color: rgba(255, 255, 255, .82);
  isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.hub-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.hub-card__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .34;
}
.hub-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(17, 22, 47, .35), rgba(17, 22, 47, .9));
}
.hub-card__ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
}
.hub-card__ico svg { width: 24px; height: 24px; }
.hub-card h3 { margin: 18px 0 10px; color: #fff; font-size: 21px; }
.hub-card p { font-size: 14px; }
.hub-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
}
.hub-card__link svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.hub-card:hover .hub-card__link svg { transform: translateX(4px); }

/* ==========================================================================
   Hub page — quick answer, key facts, on-page anchor nav
   ========================================================================== */
.qa {
  display: flex;
  gap: 16px;
  padding: clamp(22px, 3vw, 30px);
  border-radius: var(--r-lg);
  background: var(--teal-050);
  border: 1px solid var(--teal-100);
}
.qa__ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  background: #fff;
  color: var(--teal-600);
  box-shadow: var(--shadow-sm);
}
.qa__ico svg { width: 22px; height: 22px; }
.qa__body { min-width: 0; }
.qa__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--teal-600);
}
.qa__text { font-size: 15.5px; color: var(--ink); }

.kfacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.kfact {
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--line);
}
.kfact__label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.kfact__value {
  display: block;
  margin-top: 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

/* on-page anchor nav (sticky) */
.onpage {
  position: sticky;
  top: calc(var(--head-h) + 12px);
  align-self: start;
  padding: 18px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.onpage__title {
  margin-bottom: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.onpage__list { display: grid; gap: 2px; }
.onpage__list a {
  display: block;
  padding: 8px 12px;
  border-inline-start: 2px solid var(--line);
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  color: var(--body);
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.onpage__list a:hover,
.onpage__list a.is-active {
  color: var(--teal-600);
  background: var(--teal-050);
  border-inline-start-color: var(--teal);
}

/* ==========================================================================
   Service-area chip row (GEO)  +  small helper chip rows
   ========================================================================== */
.areas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.area-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}
.area-chip svg { width: 14px; height: 14px; color: var(--teal); flex: none; }

/* symptom/suits mini-chips inside cards (ListViews) */
.mchips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.mchip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--teal-050);
  font-size: 12px;
  color: var(--body);
}

/* ==========================================================================
   Filter bar (conditions) — sticky chip row
   ========================================================================== */
.filterbar {
  position: sticky;
  top: calc(var(--head-h) + 8px);
  z-index: 20;
  margin-bottom: 30px;
  padding: 10px 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
}
.filterbar .chips,
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  transition: border-color .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
}
.chip:hover { border-color: var(--teal); color: var(--teal-600); }
.chip.is-on {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

/* ==========================================================================
   Mega-menu promo card (ChromeViews)
   ========================================================================== */
.mega__promo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  padding: 18px;
  border-radius: var(--r-md);
  background: var(--teal-050);
  border: 1px solid var(--teal-100);
}
.mega__promo-tag {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--teal-600);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.mega__promo-title { font-size: 16px; color: var(--ink); }
.mega__promo-text { font-size: 13px; color: var(--body); }
.mega__promo .btn { margin-top: 4px; }

/* ==========================================================================
   Lead form — new state nodes (DetailViews + home/contact)
   ========================================================================== */
.form__err,
[data-lead-err] {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, #e5484d 12%, #fff);
  color: #b42318;
  font-size: 14px;
  font-weight: 600;
}
.form__err.is-on,
[data-lead-err].is-on { display: flex; }

.lform__wa,
[data-lead-wa] {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #25d366;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.lform__wa.is-on,
[data-lead-wa].is-on { display: flex; }
.lform__wa svg,
[data-lead-wa] svg { width: 17px; height: 17px; flex: none; }

/* invalid field highlight (site.js toggles .is-invalid) */
.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid,
.is-invalid {
  border-color: #e5484d !important;
  background: color-mix(in srgb, #e5484d 6%, #fff);
}

/* honeypot: fully removed from tab/hit order (belt-and-braces on top of .sr-only) */
.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* sending state */
[data-lead-form].is-sending .btn { opacity: .65; pointer-events: none; }

/* ==========================================================================
   Mobile sticky CTA bar
   ========================================================================== */
.mcta {
  position: fixed;
  inset-inline: 0;
  bottom: var(--tick-h);
  z-index: 114;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -14px 30px -18px rgba(19, 23, 48, .3);
  transform: translateY(120%);
  transition: transform .35s var(--ease);
}
.mcta.is-on { transform: translateY(0); }
.mcta.is-dismissed { display: none !important; }
.mcta__label { min-width: 0; flex: 1; }
.mcta__label b { display: block; font-size: 14px; color: var(--ink); }
.mcta__label span { display: block; font-size: 12px; color: var(--muted); }
.mcta .btn { flex: none; }
.mcta__close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--navy);
}
.mcta__close svg { width: 16px; height: 16px; }
@media (max-width: 680px) {
  .mcta { display: flex; }
}
/* ==========================================================================
   Locale switchers rendered as <a> (drawer + footer) — style.css only
   targets <button>; mirror those rules for anchors so they navigate w/o JS.
   ========================================================================== */
.drawer__langs a {
  display: block;
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
}
.drawer__langs a[aria-current="true"],
.drawer__langs a[aria-selected="true"] {
  border-color: var(--teal);
  background: var(--teal-050);
  color: var(--teal-600);
}
.foot__langs a {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, .7);
}
.foot__langs a:hover { color: #fff; }
.foot__langs a[aria-current="true"],
.foot__langs a[aria-selected="true"] {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
/* six-entry language menu: cap height so it never overflows the viewport */
#langMenu { max-height: min(70vh, 420px); overflow-y: auto; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
  .vhero__grid { grid-template-columns: 1fr; }
  .hubs { grid-template-columns: 1fr; }
  .onpage { position: static; }
}
@media (max-width: 680px) {
  .vgrid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .vcard--featured { grid-column: 1 / -1; }
  .filterbar { top: calc(40px + 8px); }
}

/* ==========================================================================
   Misc peer-requested helpers
   ========================================================================== */
/* semantic <address> should not render italic */
address { font-style: normal; }

/* .socials on a LIGHT background (e.g. contact page): the base rgba-white
   circle is invisible there — this modifier gives visible circles + ink icon. */
.socials--ink a {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--navy);
}
.socials--ink a:hover { background: var(--teal); border-color: var(--teal); color: #fff; }

/* results popup: single filling image + CTA alignment */
.pop__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}
.pop__cta .btn { justify-content: space-between; }

/* pillar / family-hub header media */
.phero__media {
  margin-top: clamp(22px, 3vw, 34px);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--bg-mint);
}
.phero__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* key-facts definition list (pillar) */
.keyfacts { display: grid; gap: 0; }
.keyfacts > div,
.keyfacts__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 12px 0;
  border-block-end: 1px solid var(--line);
}
.keyfacts > div:last-child,
.keyfacts__row:last-child { border-block-end: 0; }
.keyfacts dt {
  flex: none;
  min-width: 42%;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--teal-600);
}
.keyfacts dd {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* ==========================================================================
   Hero type scale per script
   Georgian and Cyrillic headlines run 25–40% longer than the Turkish original,
   which pushed the hero past a laptop viewport and hid the slider controls.
   The copy stays the same; only the display size adapts.
   ========================================================================== */
html:lang(ka) .hero__title { font-size: clamp(30px, 4.1vw, 48px); }
html:lang(ru) .hero__title { font-size: clamp(32px, 4.4vw, 52px); }
html:lang(ka) .hero__text,
html:lang(ru) .hero__text { max-width: 560px; font-size: 16px; }

/* Arabic sets wider at the same size; keep the measure a touch narrower so the
   headline stays on three lines. */
html:lang(ar) .hero__title { font-size: clamp(30px, 4.3vw, 54px); }
html:lang(ar) .hero__panes { max-width: 600px; }

/* Azerbaijani headlines are long compounds ("Dayandırın, Dərinizi"), which ran to a
   fourth line on tall desktops and pushed the slider bar under the ticker. */
html:lang(az) .hero__title { font-size: clamp(30px, 4.6vw, 54px); }

/* --------------------------------------------------------------------------
   Hero on short viewports
   A laptop is ~768–900px tall, and the hero stack (kicker + 3-line headline +
   lead + CTAs + slider bar) was taller than that, so the arrows, dots and trust
   badges sat below the fold and the slider looked like a static photo. Type and
   padding therefore scale with viewport HEIGHT as well as width.
   -------------------------------------------------------------------------- */
@media (max-height: 940px) and (min-width: 861px) {
  .hero { padding: calc(84px + 44px) 0 calc(42px + var(--tick-h)); }
  .hero__in { gap: 18px; }
  .hero__title { font-size: clamp(28px, min(4.8vw, 5.8vh), 52px); }
  .hero__text { font-size: 15.5px; }
  .hero__cta { margin-top: 18px; }
  .hero__badges { gap: 14px 30px; }
  html:lang(ka) .hero__title { font-size: clamp(26px, min(4vw, 5vh), 42px); }
  html:lang(ru) .hero__title { font-size: clamp(28px, min(4.3vw, 5.4vh), 46px); }
  html:lang(ar) .hero__title { font-size: clamp(28px, min(4.3vw, 5.6vh), 48px); }
  html:lang(az) .hero__title { font-size: clamp(26px, min(4.2vw, 5.2vh), 46px); }
}

/* The topbar (44px) sits above the hero, so a 100svh hero ends 44px below the
   viewport and its control bar slid under the fixed ticker. Subtract the topbar
   where it is actually rendered (it is hidden below 861px). */
@media (min-width: 861px) {
  .hero { min-height: min(900px, calc(100svh - 44px)); }
}

/* --------------------------------------------------------------------------
   Georgian header
   The Georgian nav labels plus the long appointment CTA overflowed the viewport
   between 1220px (where the static breakpoint collapsed the nav) and 1440px.
   Collapse earlier for this locale instead of letting the row spill.
   -------------------------------------------------------------------------- */
@media (max-width: 1440px) {
  html:lang(ka) .nav { display: none; }
  html:lang(ka) .burger { display: grid; }
  html:lang(ka) .head-icon { display: grid; }
  html:lang(ka) .head-call { display: none; }
  html:lang(ka) .navbar { height: 68px; padding: 0; }
}

/* --------------------------------------------------------------------------
   Very short laptops (13" at 1280x720/800 and similar)
   One more notch of compression so the slider bar still clears the ticker.
   -------------------------------------------------------------------------- */
@media (max-height: 800px) and (min-width: 861px) {
  .hero { padding: calc(84px + 16px) 0 calc(42px + var(--tick-h)); }
  .hero__in { gap: 14px; }
  .hero__title { font-size: clamp(26px, min(4.4vw, 5vh), 44px); }
  .hero__text { font-size: 15px; }
  .hero__cta { margin-top: 14px; }
  html:lang(ka) .hero__title { font-size: clamp(24px, min(3.6vw, 4.2vh), 36px); }
  html:lang(ru) .hero__title,
  html:lang(az) .hero__title { font-size: clamp(25px, min(3.9vw, 4.6vh), 40px); }
  html:lang(ar) .hero__title { font-size: clamp(25px, min(4vw, 4.8vh), 42px); }
}

/* --------------------------------------------------------------------------
   Header collapse thresholds
   The desktop nav fit 1440px in Turkish but not the longer locales: at 1152px
   the Russian row overflowed by 77px and Latin locales by ~12px. Collapse the
   nav to the drawer before the row can spill, per script width.
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .nav, .head-call { display: none; }
  .burger { display: grid; }
  .head-icon { display: grid; }
  .navbar { height: 68px; padding: 0; gap: 12px; }
}
@media (max-width: 1320px) {
  html:lang(ru) .nav, html:lang(ru) .head-call { display: none; }
  html:lang(ru) .burger { display: grid; }
  html:lang(ru) .head-icon { display: grid; }
  html:lang(ru) .navbar { height: 68px; padding: 0; gap: 12px; }
}

/* --------------------------------------------------------------------------
   About block with the featured reel
   The 9:16 reel now sits where the still photo was, so the media column stops
   being a cropped 5:5.4 box: the frame carries its own radius and shadow, and
   the trust chip moves from an overlay to a card under the video (it would
   otherwise cover the unmute control).
   -------------------------------------------------------------------------- */
.about__media--video {
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  display: grid;
  gap: 14px;
  justify-items: center;
}
.about__media--video .vhero__frame { max-width: 372px; }
.about__media--video .about__chip {
  position: static;
  inset: auto;
  width: 100%;
  max-width: 372px;
}
.about__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; }