/* Home page only (linked from /en/ and /ur/ index.html). Phone-first: hero with WhatsApp + Call, hours and address,
   treatment tiles, results, one reels row, doctors, FAQ, and a fixed action bar under 768 px.
   Tokens come from theme.css; nothing here sets a colour literal except the tile caption scrim (always over a photo). */

/* the card-edge family from theme-borders (acc-b 35% into --line): >= 3:1 on --card and on --ground in both themes, guarded by test_theme_contrast */
:root { --hm-edge: color-mix(in srgb, var(--acc-b) 35%, var(--line)); }

main > section { padding-block: var(--s3) var(--s2); }
main .head { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; margin-bottom: var(--s2); }
main .head + .rule { margin: 0 0 var(--s3); }

/* hero: 160 px photo band, copy, full-width WhatsApp + Call */
main > .hm-hero, main > section.hm-hero { padding-block: var(--s3); }
.hm-hero-grid { display: grid; gap: var(--s3); }
.hm-hero-media img { display: block; width: 100%; height: 160px; object-fit: cover; object-position: 50% 100%; border-radius: var(--r, 16px); border: 1px solid var(--hm-edge); }
.hm-hero-copy { display: flex; flex-direction: column; gap: var(--s2); }
.hm-hero-copy h1 { text-wrap: balance; }
.hm-lead { margin: 0; color: var(--bone); padding-inline-end: 0; }
.hm-cta { display: grid; gap: var(--s2); margin-top: var(--s2); }
.hm-cta .btn { width: 100%; }

/* hours and address */
main > section.hm-visit { padding-block: 0 var(--s2); }
.hm-visit-card { background: var(--card); border: 1px solid var(--hm-edge); border-radius: var(--r, 16px); padding: var(--s3); }
.hm-visit-card h2 { font-size: var(--fs-h3); margin-bottom: var(--s2); }
.hm-branches { display: grid; gap: var(--s3); }
.hm-branch h3 { font-size: 15px; font-weight: 600; color: var(--acc-a); margin: 0 0 2px; }
.hm-line { display: flex; gap: var(--s2); align-items: flex-start; margin: 2px 0 0; }
.hm-line .i { margin-top: 4px; color: var(--muted); }
.hm-visit-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s3); }
.hm-visit-foot .btn { min-height: 44px; padding-inline: var(--s3); }
.hm-phones { margin: 0; color: var(--muted); font-size: 15px; }
.nw { white-space: nowrap; }

/* treatments by concern */
.hm-cats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.hm-cat { position: relative; display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--hm-edge); text-decoration: none; background: var(--card); aspect-ratio: 16 / 11; }
.hm-cat img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* QD-2 frame review (build_pages.py HOME_POS_REVIEWED): two upright tiles whose subject sits off-centre. Wellness: the doctor's face
   (top of the photo), not his gown; pigmentation: the laser handpiece over the patient's face (lower part). Same photo, crop only. */
.hm-cat[href$="concern=wellness"] img { object-position: 50% 10%; }
.hm-cat[href$="concern=pigmentation"] img { object-position: 50% 70%; }
.hm-cat-name { position: absolute; inset-inline: 0; bottom: 0; padding: 28px var(--s2) var(--s2); font-size: 15px; line-height: 1.3; font-weight: 500; color: #f4efe6;
  background: linear-gradient(0deg, rgba(15,13,11,.92) 0%, rgba(15,13,11,.75) 55%, transparent 100%); }
.hm-cat-n { opacity: .85; font-weight: 400; white-space: nowrap; display: inline-block; }
.hm-cat:focus-visible, .hm-reel:focus-visible, .hm-doc:focus-visible { outline: 2px solid var(--acc-a); outline-offset: 2px; }
main .more-link { min-height: 44px; display: inline-flex; align-items: center; gap: var(--s1); margin-top: var(--s2); color: var(--acc-a); text-underline-offset: 4px; font-weight: 500; }

/* horizontal rows (results, reels) */
.hm-row { display: grid; grid-auto-flow: column; gap: var(--s2); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s1);
  margin-inline: calc(-1 * var(--s3)); padding-inline: var(--s3); scrollbar-width: none; scroll-padding-inline: var(--s3); }
.hm-row::-webkit-scrollbar { display: none; }
.hm-row > * { scroll-snap-align: start; }
.hm-results { grid-auto-columns: 78%; }
.hm-rcard { background: var(--card); border: 1px solid var(--hm-edge); border-radius: var(--r, 16px); overflow: hidden; display: flex; flex-direction: column; }
/* G5 merge4: every home result is a "-panels" poster whose own BEFORE/AFTER labels sit at its top edge; cover cropped them (judged),
   so the poster is shown whole (contain) on the card fill */
.hm-rcard img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; background: var(--ground); }
/* G5 merge5: top-anchored cover — the 16:10 box is shared (one aspect per row, qa_live), the posters' BEFORE/AFTER labels sit at their top edge and stay whole; only a little of the bottom margin is cut. Contain left white bars beside the 1.42 acne poster */
.hm-rcard .in { padding: var(--s2) var(--s3) var(--s3); }
.hm-rcard h3 { font-size: 16px; line-height: 1.35; margin: 0; overflow-wrap: anywhere; }
.hm-rcard .meta { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.hm-rcard .consent-label { display: inline-block; margin: var(--s2) 0 0; font-size: var(--fs-small); color: var(--acc-a); border: 1px solid var(--hm-edge); border-radius: 999px; padding: 2px 10px; }
.hm-wide { width: 100%; margin-top: var(--s3); }

.hm-reels { grid-auto-columns: 132px; }
.hm-reel { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.hm-reel-thumb { position: relative; display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--hm-edge); aspect-ratio: 9 / 16; background: var(--card); }
.hm-reel-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-reel-play { position: absolute; inset-inline-start: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--scrim, color-mix(in srgb, var(--ground) 78%, transparent)); color: var(--bone); border: 1px solid var(--bone); }
:root[data-theme="light"] .hm-reel-play { background: rgba(247,242,232,.92); }
.hm-reel-play .i { fill: currentColor; width: 14px; height: 14px; }
.hm-reel-title { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }

/* doctors as list rows */
.hm-docs { display: grid; gap: var(--s2); }
.hm-doc { display: flex; align-items: center; gap: var(--s3); min-height: 72px; padding: var(--s2) var(--s3); background: var(--card); border: 1px solid var(--hm-edge); border-radius: var(--r, 16px); text-decoration: none; color: inherit; }
.hm-doc img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; flex: none; }
.hm-doc > span { flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.hm-doc b { font-weight: 600; font-size: 16px; }
.hm-doc .role { color: var(--muted); font-size: 14px; }
.hm-doc > .i { color: var(--muted); }

#faq-strip .faq-list { max-width: none; }

/* phone action bar: WhatsApp first, call second; the chat launcher sits above it */
.hm-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s2);
  padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--ground) 94%, transparent); border-top: 1px solid var(--hm-edge); backdrop-filter: blur(12px); }
.hm-bar .btn { min-height: 48px; padding-inline: var(--s3); }
@media (max-width: 480px) {
  /* scrollers bleed to the screen edge past the 16 px wrap gutter */
  .hm-row { margin-inline-end: -16px; padding-inline-end: 16px; scroll-padding-inline-end: 16px; }
}
@media (max-width: 767px) {
  .js body { padding-block-end: calc(72px + env(safe-area-inset-bottom, 0px)); }
  html:root .c-launcher, html:root[dir] .c-launcher { bottom: calc(72px + var(--s2) + var(--s1) + env(safe-area-inset-bottom, 0px)); }
}

/* Urdu (urdu-copy: Nastaliq needs the taller line boxes) */
[dir="rtl"] .hm-lead { line-height: 2; }
[dir="rtl"] .hm-branch h3 { font-weight: 400; font-size: 17px; }
[dir="rtl"] .hm-cat-name { font-size: 16px; line-height: 1.8; font-weight: 400; }
[dir="rtl"] .hm-rcard h3 { font-size: 16px; line-height: 1.9; font-weight: 400; }
[dir="rtl"] .hm-rcard .meta, [dir="rtl"] .hm-phones, [dir="rtl"] .hm-doc .role { font-size: 15px; line-height: 1.9; }
[dir="rtl"] .hm-rcard .consent-label { font-size: 14px; line-height: 1.9; }
[dir="rtl"] .hm-reel-title { font-size: 15px; line-height: 1.85; }
[dir="rtl"] .hm-doc b { font-weight: 400; font-size: 17px; line-height: 1.8; }
[dir="rtl"] .faq-list summary { font-size: 17px; line-height: 1.9; }

/* tablet / desktop: no bar, split hero, two branches side by side, tiles and rows in grids */
@media (min-width: 768px) {
  .hm-bar { display: none; }
  main > section { padding-block: var(--s6); }
  main > section.hm-hero { padding-block: var(--s5) var(--s6); }
  main > section.hm-visit { padding-block: var(--s6); }
  .hm-hero-grid { grid-template-columns: 1.25fr 1fr; align-items: center; gap: var(--s6); }
  .hm-hero-media { order: 2; }
  .hm-hero-media img { height: auto; max-height: 420px; }
  .hm-cta { display: flex; flex-wrap: wrap; }
  .hm-cta .btn { width: auto; }
  .hm-visit-card { padding: var(--s4); }
  .hm-branches { grid-template-columns: 1fr 1fr; gap: var(--s4); }
  .hm-cats { grid-template-columns: repeat(6, 1fr); gap: var(--s3); }
  .hm-cat { aspect-ratio: 3 / 4; }
  .hm-results { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; }
  /* wave-final publicweb: the build emits hm-n<count>; fewer than 4 result cards get that many columns (no empty track) */
  .hm-results.hm-n3 { grid-template-columns: repeat(3, 1fr); }
  .hm-results.hm-n2 { grid-template-columns: repeat(2, 1fr); }
  .hm-wide { width: auto; }
  .hm-reels { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); gap: var(--s3); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .hm-docs { grid-template-columns: repeat(2, 1fr); }
  #faq-strip .faq-list { max-width: 75ch; }
}

@media (min-width: 1100px) {
  .hm-reels { grid-template-columns: repeat(8, 1fr); gap: var(--s2); }
}