/* ==========================================================
   LAYER 4 · REUSABLE COMPONENTS
   Headings · Buttons · Cards · Section-specific blocks · Footer
   ========================================================== */

/* ---------- Placeholder (remove once real content is in) ---------- */
.ph {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  color: var(--muted); font-size: var(--fs-small); font-weight: 500;
  text-align: center;
}
.ph--photo    { aspect-ratio: 2 / 1; background: repeating-linear-gradient(45deg, #eef1ee 0 10px, #e5e9e5 10px 20px); border-radius: var(--radius); }

/* ================= HEADINGS =================
   One style for every section title: Montserrat 700, brand green on light
   backgrounds, white on green/dark bands. */
.section-title {
  font-size: var(--fs-h2); font-weight: 700; line-height: 1.25; letter-spacing: -.01em;
  color: var(--heading);
  text-align: center;
}
.section-title--light   { color: var(--white); }
.section-title--plain   { }                                   /* kept for markup compatibility */
.section-title--sm      { font-size: calc(var(--fs-h2) * .9); }
.section-title--display { }

/* Solid green strip heading ("Clinically Proven & Patient Approved") */
.banner-title {
  width: fit-content; max-width: 100%;
  margin-inline: auto;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--brand-strong);
  color: var(--white);
  font-size: var(--fs-h2);
  text-align: center;
}

/* ================= BUTTONS =================
   One button system: 48px tall on phones (easy to tap), rounded, bold label,
   clear hover / press / keyboard-focus states. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-6);
  border: 2px solid transparent; border-radius: 8px;
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 700; letter-spacing: .01em;
  line-height: 1.2; text-decoration: none; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  transition: background-color var(--ease), border-color var(--ease), color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.btn:hover  { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0, 0, 0, .16); }
.btn:active { transform: translateY(0);    box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.btn--accent        { background: var(--accent); color: var(--white); }
.btn--accent:hover  { background: var(--accent-hover); }
.btn--primary       { background: var(--brand); color: var(--white); }
.btn--primary:hover { background: var(--green-900); }
.btn--secondary       { background: var(--white); color: var(--brand); border-color: var(--brand); box-shadow: none; }
.btn--secondary:hover { background: var(--green-50); }
.btn--block   { width: 100%; }

/* ================= GENERIC CARD ================= */
.card {
  background: var(--white);
  border: 1px solid #e3e3e6;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

/* ================= LANGUAGE SWITCH ================= */
.lang-bar {
  display: flex; justify-content: flex-end;
  padding: 6px var(--gutter);
  background: var(--green-900);
}
.lang-switch {
  display: inline-flex; padding: 3px; gap: 3px;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px;
}
.lang-switch a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 84px; min-height: 44px; padding: 0 14px;
  border-radius: 999px;
  color: var(--white); text-decoration: none; font-size: var(--fs-small); font-weight: 600;
  transition: background-color var(--ease), color var(--ease);
}
.lang-switch a:hover { background: rgba(255, 255, 255, .12); }
.lang-switch a[aria-current="true"] { background: var(--white); color: var(--green-800); }

/* Marathi text: Devanagari font first, a little more line height */
:lang(mr) body, html:lang(mr) body { font-family: "Mukta", var(--font-body); }
html:lang(mr) p, html:lang(mr) .faq-item summary { line-height: 1.7; }
/* Devanagari looks smaller than Latin at the same size: scale Marathi text up ~6% (all rem sizes follow) */
html:lang(mr) { font-size: 106.25%; }

/* ================= HERO ================= */
.logo-badge {
  display: block;
  padding: var(--space-2) var(--space-5);
  background: var(--white);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lift);
}
.logo-badge img { width: 150px; }
/* Reference: light (400) title on a loose 1.5 line-height, 19px subtitle */
.hero__title    { font-size: var(--fs-hero); font-weight: 400; line-height: 1.5; }
.hero__subtitle { margin: var(--space-1) 0 var(--space-5); font-size: 1.2rem; line-height: 1.55; }

/* ================= VIDEO CARDS ================= */
.gallery-label { font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft); }
.gallery-label::before { content: "⋮"; margin-right: var(--space-3); font-weight: 700; }

.video-card {
  position: relative; display: block; width: 100%;
  padding: 0; border: 0; background: #000;  /* matches the black side bars on vertical Shorts thumbnails */
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.video-card[hidden] { display: none; }
.video-card__thumb { position: absolute; inset: 0; }
.video-card__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }  /* favour faces in vertical Shorts */
.video-card__play {
  position: absolute; left: 50%; top: 50%; width: 32px; height: 32px;
  transform: translate(-50%, -50%);
  transition: transform var(--ease);
}
.video-card:hover .video-card__play { transform: translate(-50%, -50%) scale(1.12); }
.video-modal {
  width: min(860px, 94vw); padding: 0;
  border: 0; border-radius: var(--radius);
  background: #000; color: var(--white);
  overflow: visible;
}
.video-modal::backdrop { background: rgba(0, 0, 0, .8); }
.video-modal__close {
  position: absolute; top: -44px; right: 0; z-index: 1;
  width: 44px; height: 44px;
  background: none; border: 0; color: var(--white); font-size: 2.2rem; line-height: 1;
}
.video-modal__frame iframe,
.video-modal__frame video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }
/* YouTube Shorts are vertical: size by height so the whole video fits the screen */
.video-modal.is-short { width: min(calc((100vh - 120px) * 9 / 16), 92vw); }
.video-modal.is-short .video-modal__frame iframe { aspect-ratio: 9 / 16; }

/* ================= INFOGRAPHICS =================
   Research card, Regrow→Relive pillars and knee-degeneration panel are
   full-width images inside their section container. */
.infographic img { width: 100%; height: auto; }
.section--green .infographic img { box-shadow: var(--shadow-lift); }


.factors__note { font-size: var(--fs-small); line-height: 1.6; }
.ref-link { display: inline; background: var(--highlight); color: var(--ink); padding: 0 2px; }
.ref-link a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ref-link a:hover { text-decoration-thickness: 2px; }

/* ================= 6-STEP PROTOCOL ================= */
.step-card { text-align: left; }
/* Step illustration: square panel from the workflow artwork (number badge is part of the image) */
.illus-card {
  width: min(240px, 75%);
  border-radius: 14px;
  overflow: hidden;                 /* clips the artwork's white corners */
  background: var(--white);
  box-shadow: var(--shadow-lift);
}
.illus-card img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.step-card__title { margin: var(--space-5) 0 var(--space-2); font-size: var(--fs-h3); }
.step-card p      { font-size: var(--fs-small); line-height: 1.55; opacity: .95; }

/* ================= IMPACT ================= */
.impact-panel { padding: var(--space-5); background: var(--grey-panel); }
.impact-card  { overflow: hidden; border-radius: var(--radius-lg); background: var(--white); }
.impact-card__img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }  /* square photos in assets/img/impact-*.webp */
.impact-card__text { padding: var(--space-3) var(--space-2); text-align: center; font-size: 0.875rem; font-weight: 600; color: var(--green-800); line-height: 1.2; }
.impact-card__text strong { display: block; font-size: 1.25rem; font-weight: 700; }

/* ================= MINI-ROADMAP =================
   HTML title + call card (Jivanurja's number), then the roadmap image.
   Panel colour matches the image background (#f8f6f9). */
.roadmap { padding-top: var(--space-5); background: #f8f6f9; }
.roadmap__title { padding-inline: var(--space-4); font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; text-align: center; color: var(--heading); }
.road-call {
  display: flex; align-items: center; gap: 14px;
  margin: 18px 9% 0;
  padding: 14px 18px;
  background: var(--white);
  border-radius: 8px;                           /* same corner as .btn */
  box-shadow: var(--shadow-soft);
  font-size: 1.05rem; font-weight: 700; color: var(--ink); text-decoration: none;
  transition: box-shadow var(--ease);
}
.road-call:hover { box-shadow: 0 8px 22px rgba(15, 23, 42, .16); }
.road-call svg { width: 24px; height: 24px; flex: none; fill: none; color: var(--ink); }
.roadmap__img { width: 100%; height: auto; }

/* ================= TREATMENT JOURNEY ================= */
.journey { display: grid; gap: 0; }
.journey-step {
  padding: var(--space-3) var(--space-4);
  background: var(--green-800); color: var(--white);
  text-align: center; font-size: var(--fs-small); line-height: 1.5;
}
.journey-step h3 { font-size: var(--fs-body); }
/* Arrow between steps, drawn with CSS so it's reused for every step */
.journey-step + .journey-step { position: relative; margin-top: 48px; }
.journey-step + .journey-step::before {
  content: "↓";
  position: absolute; left: 50%; top: -44px; transform: translateX(-50%);
  font-size: 2rem; line-height: 1; color: var(--ink);
}

/* ================= FAQ ================= */
.faq { display: grid; gap: var(--space-2); }
.faq-item { border: 1px solid #a8a8a8; background: var(--white); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-body);
  cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none;
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq-item summary:hover { color: var(--green-700); }
.faq-item__body { padding: 0 var(--space-4) var(--space-4); font-size: var(--fs-small); line-height: 1.65; color: var(--ink-soft); }
.faq-item__body a { color: var(--green-700); font-weight: 600; }

/* ================= FOOTER ================= */
.site-footer { background: var(--green-800); color: var(--green-50); }
.site-footer__main { padding-bottom: var(--space-6); }
.site-footer .logo-badge { width: fit-content; margin-inline: auto; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.site-footer .logo-badge img { width: 170px; }
.footer__tagline { max-width: 470px; margin: var(--space-5) auto; text-align: center; font-size: var(--fs-small); line-height: 1.7; }
.footer__col h3 {
  margin-bottom: var(--space-3);
  font-size: var(--fs-small); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green-200);                      /* soft label colour, 8:1 on the green band */
}
html:lang(mr) .footer__col h3 { letter-spacing: 0; text-transform: none; font-size: var(--fs-body); }

/* Branch cities as tags: wrap neatly on any screen width */
.branch-list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2);
  max-width: 420px; margin-inline: auto;
}
.branch-list li {
  padding: 6px 14px; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  font-size: var(--fs-small); font-weight: 600; line-height: 1.3; color: var(--white);
}
.branch-list li:first-child { background: var(--white); color: var(--green-800); border-color: var(--white); }   /* Pune: main clinic */

/* Mobile number: large and tappable */
.footer-phone {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-5);
  border-radius: 999px; background: var(--accent);
  color: var(--white); text-decoration: none;
  font-size: 1.125rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  transition: background-color var(--ease), transform var(--ease);
}
.footer-phone:hover { background: var(--accent-hover); transform: translateY(-1px); }
.footer-phone svg { width: 20px; height: 20px; flex: none; }

.socials { display: flex; justify-content: center; gap: var(--space-2); }
.socials a {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;   /* comfortable tap size */
  background: rgba(255, 255, 255, .12); color: var(--white);
  border: 1px solid rgba(255, 255, 255, .35);
  transition: background-color var(--ease), color var(--ease);
}
.socials .icon-cut { fill: var(--green-800); }               /* YouTube play triangle */
.socials a:hover .icon-cut { fill: var(--white); }
.socials a:hover { background: var(--white); color: var(--green-800); }
.socials svg { width: 20px; height: 20px; }

.subfooter {
  padding: var(--space-3) var(--gutter);
  background: var(--subfooter); color: var(--ink);
  text-align: center; font-size: var(--fs-tiny); line-height: 1.8;
}
.subfooter a { display: block; color: var(--ink); padding-block: 4px; }
.subfooter__disclaimer { margin-top: var(--space-1); color: var(--muted); }

/* ================= STICKY CALL + WHATSAPP =================
   Always visible, bottom-right. Round icons on phones; labelled pills on larger screens.
   Colours keep white text readable (contrast ≥ 5:1). */
.sticky-contact {
  position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 50;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.sticky-contact__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 56px; height: 56px; border-radius: 999px;
  color: var(--white); text-decoration: none;
  font-weight: 600; font-size: 0.95rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
  transition: transform var(--ease), box-shadow var(--ease);
}
.sticky-contact__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, .3); }
.sticky-contact__btn svg { width: 26px; height: 26px; flex: none; fill: none; }
.sticky-contact__btn span { display: none; }
.sticky-contact__btn--whatsapp { background: var(--whatsapp); }
.sticky-contact__btn--call     { background: var(--accent); }