/* ============================================================
   Maxillo Clinic — single treatment detail
   new page (no original mockup) built on the design system
   ============================================================ */

/* hero */
.t-hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,60px); align-items:center; padding-top:clamp(30px,4vw,56px); }
@media(max-width:900px){ .t-hero{ grid-template-columns:1fr; } }
.t-hero h1{ margin:.12em 0 0; }
.t-hero__lead{ margin-top:22px; }
.t-hero__meta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.t-hero__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.t-hero__media-wrap{ position:relative; aspect-ratio:4/5; border-radius:var(--radius-l); overflow:hidden; border:1px solid var(--line); }
.t-hero__media-wrap img{ width:100%; height:100%; object-fit:cover; }
.t-hero__media-wrap .ph{ position:absolute; inset:0; }
.t-hero__media-wrap .ph.has-img img{ display:block; }

/* body prose */
.t-body{ padding-block:clamp(40px,6vw,90px); }
.t-prose{ max-width:64ch; }
.t-prose, .t-prose p, .t-prose li{ font-size:clamp(1.02rem,1.2vw,1.16rem); color:var(--ink-2); line-height:1.85; }
.t-prose h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,2.4vw,2rem); color:var(--ink); margin:1.6em 0 .5em; }
.t-prose h3{ font-family:var(--font-display); font-weight:800; font-size:1.25rem; color:var(--ink); margin:1.3em 0 .4em; }
.t-prose a{ color:var(--green-d); border-bottom:1px solid var(--line); }
.t-prose img{ border-radius:var(--radius); margin:1.4em 0; border:1px solid var(--line); }
.t-prose ul, .t-prose ol{ padding-inline-start:1.4em; }

/* related results */
.t-related{ padding-bottom:clamp(40px,6vw,90px); }
.t-related__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:32px; }
@media(max-width:900px){ .t-related__grid{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .t-related__grid{ grid-template-columns:1fr;} }

/* single before/after case */
.t-case{ max-width:820px; margin-inline:auto; }
.t-case__head{ text-align:center; }
.t-case__meta{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:22px; }
.t-case__media{ margin-top:clamp(28px,4vw,44px); }
.t-case__media .case{ width:100%; }
.t-case__media .case__media{
  aspect-ratio:4/5;
  width:100%;
  max-width:620px;
  margin-inline:auto;
  min-height:clamp(280px, 52vw, 480px);
}
.t-case__media .case__media .ph{ position:absolute; inset:0; width:100%; height:100%; }
.t-case__media .case__media .ph.has-img{ display:block; }
.t-case__media .case__media .ph.has-img img{ display:block; width:100%; height:100%; object-fit:cover; }
.t-case__hint{ text-align:center; font-size:.86rem; color:var(--ink-3); margin-top:16px; }

.t-case__gallery{ margin-top:clamp(36px,5vw,56px); }
.t-case__gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(14px, 2.5vw, 22px);
  margin-top:24px;
}
@media(max-width:900px){ .t-case__gallery-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media(max-width:560px){ .t-case__gallery-grid{ grid-template-columns:1fr; } }
.t-case__gallery-item{ margin:0; }
.t-case__gallery-trigger{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:none;
  cursor:zoom-in;
  text-align:inherit;
  color:inherit;
  font:inherit;
}
.t-case__gallery-trigger:focus-visible{
  outline:2px solid var(--green);
  outline-offset:4px;
  border-radius:var(--radius);
}
.t-case__gallery-trigger:hover .t-case__gallery-media{
  border-color:var(--green);
  box-shadow:0 10px 28px rgba(22,51,94,.08);
}
.t-case__gallery-media{
  position:relative;
  display:block;
  aspect-ratio:4/5;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--cream-deep);
  min-height:220px;
}
.t-case__gallery-media .ph{ position:absolute; inset:0; width:100%; height:100%; }
.t-case__gallery-media .ph.has-img{ display:block; }
.t-case__gallery-media .ph.has-img img{ display:block; width:100%; height:100%; object-fit:cover; }
.t-case__gallery-caption{
  margin-top:10px;
  font-size:.88rem;
  color:var(--ink-2);
  text-align:center;
}

.t-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:clamp(16px, 4vw, 40px);
  visibility:hidden;
  pointer-events:none;
}
.t-lightbox[hidden]{ display:none; }
.t-lightbox.is-open{
  visibility:visible;
  pointer-events:auto;
}
.t-lightbox__backdrop{
  position:absolute;
  inset:0;
  background:rgba(22,51,94,.72);
  opacity:0;
  transition:opacity .28s var(--ease);
}
.t-lightbox.is-open .t-lightbox__backdrop{ opacity:1; }
.t-lightbox__dialog{
  position:relative;
  z-index:1;
  width:min(920px, 100%);
  max-height:min(92vh, 980px);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
  transform:scale(.96);
  opacity:0;
  transition:transform .28s var(--ease), opacity .28s var(--ease);
}
.t-lightbox.is-open .t-lightbox__dialog{
  transform:scale(1);
  opacity:1;
}
.t-lightbox__close{
  width:42px;
  height:42px;
  padding:0;
  border:1px solid rgba(238,243,251,.25);
  border-radius:50%;
  background:rgba(22,51,94,.55);
  color:var(--cream);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.t-lightbox__close:hover{
  background:rgba(22,51,94,.78);
  border-color:rgba(238,243,251,.45);
  transform:scale(1.04);
}
.t-lightbox__figure{
  width:100%;
  margin:0;
  border-radius:var(--radius-l);
  overflow:hidden;
  border:1px solid rgba(238,243,251,.18);
  background:var(--ink);
  box-shadow:0 24px 60px rgba(0,0,0,.28);
}
.t-lightbox__figure img{
  display:block;
  width:100%;
  max-height:min(78vh, 860px);
  object-fit:contain;
  background:var(--ink);
}
.t-lightbox__figure figcaption{
  padding:14px 18px;
  font-size:.92rem;
  color:rgba(238,243,251,.82);
  text-align:center;
  background:rgba(0,0,0,.18);
}
.t-lightbox__figure figcaption:empty{ display:none; }
body.t-lightbox-open{ overflow:hidden; }

/* final cta (compact, navy) */
.t-cta{ background:var(--ink); color:var(--cream); border-radius:var(--radius-l); padding:clamp(34px,5vw,64px); display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-block:clamp(20px,4vw,40px); }
.t-cta h2{ font-family:var(--font-display); font-weight:900; font-size:clamp(1.6rem,3.4vw,2.6rem); margin:0; line-height:1.1; }
.t-cta p{ color:rgba(238,243,251,.65); margin:10px 0 0; max-width:42ch; }
.t-cta .btn-primary{ background:#fff; color:var(--ink); }
.t-cta .btn-primary .arr{ background:var(--green); color:#fff; }
.t-cta .btn-primary:hover .arr{ transform:rotate(-45deg); }