/* ═══════════════════════════════════════════════════════════
   AYAD — the clinic pages
   Loaded after style.css, which supplies every token, the nav,
   the menu, the buttons, .tcard, .docs and the footer. Only what
   these pages add is defined here.
   ═══════════════════════════════════════════════════════════ */

/* ── PAGE HERO ────────────────────────────────────────────── */
.cp-hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(80svh,780px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(8rem,18vh,12rem) var(--pad) clamp(2.6rem,7vh,4.6rem);
}
.cp-hero__media{position:absolute;inset:0;z-index:-2}
.cp-hero__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
/* Dark enough for the headline to hold, light enough that the room is still a
   room. The radial keeps the corners down without flattening the middle. */
.cp-hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(8,17,26,.82) 0%,rgba(8,17,26,.22) 38%,rgba(8,17,26,.94) 100%),
    radial-gradient(120% 90% at 50% 40%,transparent 34%,rgba(8,17,26,.62) 100%);
}
.cp-hero__inner{max-width:var(--maxw);width:100%;margin-inline:auto}
.cp-hero h1{
  font-family:var(--f-display);font-weight:300;letter-spacing:-.012em;
  font-size:clamp(2.3rem,5.6vw,5rem);line-height:1.03;color:var(--porcelain);
  max-width:16ch;margin-block:.9rem 1.3rem;
}
html[lang="ar"] .cp-hero h1{font-weight:400;line-height:1.34;letter-spacing:0}
.cp-hero__lede{max-width:54ch;color:#c4d0d9;font-size:clamp(.98rem,1.2vw,1.14rem);line-height:1.88}
html[lang="ar"] .cp-hero__lede{line-height:2.05}
.cp-hero__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:clamp(1.8rem,4vh,2.8rem)}

/* The way back up to the rail this page came from. It has to be flex rather
   than inline-flex: margin-bottom on an inline-level box does not move the
   line below it, and the eyebrow was landing on top of this. */
.cp-back{
  display:flex;width:max-content;align-items:center;gap:.85rem;
  margin-bottom:clamp(1.3rem,3.2vh,2.4rem);
  font-family:var(--f-ui);font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;
  /* it sits on photography, not on the page ground, so --text-dim is not
     enough contrast — this needs to read against a bright frame too */
  color:rgba(239,240,240,.78);text-shadow:0 1px 12px rgba(8,17,26,.85);
  transition:color .4s;
}
html[lang="ar"] .cp-back{letter-spacing:normal;font-size:.8rem;text-transform:none}
.cp-back i{
  display:block;width:34px;height:1px;background:currentColor;
  transition:width .5s var(--tr-lux);
}
.cp-back:hover{color:var(--gold)}
.cp-back:hover i{width:54px}

/* ── OPENING SPREAD: the long copy, and the facts beside it ── */
.cp-open{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(2rem,6vw,6rem);align-items:start;
}
.cp-open__body > p{color:var(--text);font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.95;max-width:60ch}
.cp-open__body > p + p{margin-top:1.4rem}
html[lang="ar"] .cp-open__body > p{line-height:2.15}
.cp-open__body > p:first-child{color:var(--porcelain);font-size:clamp(1.1rem,1.5vw,1.42rem);line-height:1.75}
html[lang="ar"] .cp-open__body > p:first-child{line-height:1.95}

.cp-facts{display:flex;flex-direction:column;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.cp-facts > div{background:var(--ink-2);padding:clamp(1.1rem,1.9vw,1.6rem)}
.cp-facts dt{
  font-family:var(--f-ui);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.55rem;
}
html[lang="ar"] .cp-facts dt{letter-spacing:normal;font-size:.76rem;text-transform:none}
.cp-facts dd{color:var(--porcelain);font-size:.92rem;line-height:1.7}
html[lang="ar"] .cp-facts dd{line-height:1.95}

/* ── WHAT THIS CLINIC TREATS ──────────────────────────────── */
.treat{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);
}
.treat__i{
  background:var(--ink);padding:clamp(1.4rem,2.6vw,2.3rem);
  position:relative;transition:background .55s var(--tr-lux);
}
.treat__i:hover{background:rgba(32,88,117,.09)}
.treat__i::before{
  content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--gold),transparent);
  transform:scaleY(0);transform-origin:top;transition:transform .6s var(--tr-lux);
}
.treat__i:hover::before{transform:scaleY(1)}
.treat__n{
  display:block;font-family:var(--f-ui);font-size:.62rem;letter-spacing:.3em;
  color:var(--gold);margin-bottom:.9rem;font-variant-numeric:tabular-nums;
}
.treat__i h3{font-size:clamp(1.1rem,1.7vw,1.45rem);color:var(--porcelain);margin-bottom:.6rem;line-height:1.3}
html[lang="ar"] .treat__i h3{line-height:1.5}
.treat__i p{color:var(--text-dim);font-size:.93rem;line-height:1.85;max-width:46ch}
html[lang="ar"] .treat__i p{line-height:2.05}

/* ── HOW A VISIT GOES ─────────────────────────────────────── */
.flow{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.2rem,2.6vw,2.6rem);
  counter-reset:step;
}
.flow__s{position:relative;padding-top:2.2rem;counter-increment:step}
.flow__s::before{
  content:'';position:absolute;top:0;inset-inline:0;height:1px;background:var(--line-soft);
}
.flow__s::after{
  content:'';position:absolute;top:0;inset-inline-start:0;width:34%;height:1px;background:var(--gold);
}
.flow__n{
  display:block;font-family:var(--f-ui);font-size:.62rem;letter-spacing:.3em;color:var(--gold);
  margin-bottom:.85rem;font-variant-numeric:tabular-nums;
}
.flow__s h3{font-size:clamp(1.02rem,1.4vw,1.25rem);color:var(--porcelain);margin-bottom:.55rem;line-height:1.35}
html[lang="ar"] .flow__s h3{line-height:1.55}
.flow__s p{color:var(--text-dim);font-size:.9rem;line-height:1.8}
html[lang="ar"] .flow__s p{line-height:2}

/* ── THE EQUIPMENT THIS CLINIC USES ───────────────────────── */
/* .tcard comes from style.css; this is only the column it sits in */
.cp-tech{max-width:var(--maxw);margin-inline:auto}

/* ── BEFORE / AFTER ───────────────────────────────────────── */
/* Static pairs, deliberately. The dragged divider is the homepage's set piece
   and it costs a component's worth of JavaScript; on a clinic page two frames
   side by side say the same thing the instant they load. */
.ba{max-width:var(--maxw);margin-inline:auto;display:flex;flex-direction:column;gap:clamp(2.2rem,5vw,4rem)}
.ba__case{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.4rem)}
.ba__f{position:relative;overflow:hidden;aspect-ratio:1/1;background:var(--navy);border:1px solid var(--line-soft)}
.ba__f img{width:100%;height:100%;object-fit:cover;display:block}
.ba__f figcaption{
  position:absolute;inset-inline-start:0;bottom:0;
  padding:.45rem 1rem;background:rgba(8,17,26,.82);backdrop-filter:blur(4px);
  font-family:var(--f-ui);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--porcelain);
}
html[lang="ar"] .ba__f figcaption{letter-spacing:normal;font-size:.78rem;text-transform:none}
.ba__f--a figcaption{color:var(--ink);background:var(--gold)}
.ba__cap{
  grid-column:1/-1;order:-1;color:var(--text-dim);font-size:.95rem;line-height:1.85;max-width:64ch;
}
html[lang="ar"] .ba__cap{line-height:2.05}
.ba__cap b{
  display:block;font-family:var(--f-ui);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);font-weight:500;margin-bottom:.5rem;
}
html[lang="ar"] .ba__cap b{letter-spacing:normal;font-size:.78rem;text-transform:none}
.ba__note{
  max-width:var(--maxw);margin:clamp(2rem,4vw,3rem) auto 0;
  color:var(--text-dim);font-size:.86rem;line-height:1.8;max-width:70ch;opacity:.8;
}

/* ── THE OTHER CLINICS ────────────────────────────────────── */
.cp-next{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);
}
.cp-next a{
  background:var(--ink);padding:clamp(1.1rem,2vw,1.7rem);
  display:flex;flex-direction:column;gap:.5rem;
  transition:background .55s var(--tr-lux);
}
.cp-next a:hover{background:rgba(32,88,117,.1)}
.cp-next span{font-family:var(--f-ui);font-size:.6rem;letter-spacing:.3em;color:var(--gold);font-variant-numeric:tabular-nums}
.cp-next strong{font-family:var(--f-display);font-weight:300;font-size:clamp(1.05rem,1.5vw,1.35rem);color:var(--porcelain);line-height:1.25}
html[lang="ar"] .cp-next strong{font-weight:500;line-height:1.5}

/* ── THE LOUNGE PAGE'S PHOTOGRAPHY ────────────────────────── */
.cp-gal{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.7rem,1.4vw,1.2rem);
}
.cp-gal figure{overflow:hidden;background:var(--navy);border:1px solid var(--line-soft)}
.cp-gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.3s var(--tr-lux)}
.cp-gal figure:hover img{transform:scale(1.05)}
.cp-gal figure:nth-child(1){grid-column:span 2;aspect-ratio:3/4}
.cp-gal figure:nth-child(2){grid-column:span 4;aspect-ratio:16/9}
.cp-gal figure:nth-child(3){grid-column:span 3;aspect-ratio:4/3}
.cp-gal figure:nth-child(4){grid-column:span 3;aspect-ratio:4/3}
.cp-gal figure:nth-child(5){grid-column:span 4;aspect-ratio:16/9}
.cp-gal figure:nth-child(6){grid-column:span 2;aspect-ratio:3/4}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width:1100px){
  .cp-open{grid-template-columns:1fr;gap:2.5rem}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
  .cp-next{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .cp-hero{min-height:min(72svh,620px)}
  .treat{grid-template-columns:1fr}
  .cp-gal{grid-template-columns:repeat(2,1fr)}
  .cp-gal figure:nth-child(n){grid-column:span 1;aspect-ratio:1/1}
}
@media (max-width:560px){
  .flow{grid-template-columns:1fr}
  .cp-next{grid-template-columns:1fr}
  .ba__case{grid-template-columns:1fr}
}

/* Nothing here needs its own pre-state or its own reveal: .treat, .flow, .ba,
   .cp-gal and .cp-next each carry `data-stagger`, and style.css already hides
   a [data-stagger] child while JS is live and main.js already brings it back.
   Adding a second mechanism is how one of them ends up stuck at opacity 0. */

@media (prefers-reduced-motion:reduce){
  .cp-hero__media img{transform:none}
}