/* ============================================================
   Maxillo Clinic — Before/After gallery
   extracted verbatim from the original Before-After design
   ============================================================ */

/* page head */
.phead{ padding-top:clamp(40px,6vw,80px); padding-bottom:clamp(30px,4vw,50px); }
.phead h1{ margin:.18em 0 0; }
.phead .lead{ margin-top:24px; }

/* filter bar */
.filterbar{ position:sticky; top:78px; z-index:50; background:var(--surface); padding-block:18px; border-block:1px solid var(--line-soft); }
.filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.fbtn{
  padding:.6em 1.15em; border-radius:var(--radius-btn); border:1px solid var(--line); background:var(--surface);
  font-size:.9rem; font-weight:500; color:var(--ink-2); transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); white-space:nowrap;
}
.fbtn .c{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-3); margin-inline-start:6px; direction:ltr; }
.fbtn:hover{ border-color:var(--ink-2); color:var(--ink); }
.fbtn[aria-pressed="true"]{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.fbtn[aria-pressed="true"] .c{ color:var(--tan-2); }
.fmeta{ margin-inline-start:auto; font-family:var(--font-mono); font-size:.76rem; color:var(--ink-3); direction:ltr; }
@media(max-width:680px){ .fmeta{ display:none; } }

/* grid */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; padding-block:clamp(36px,5vw,64px); }
@media(max-width:1040px){ .gallery{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:660px){ .gallery{ grid-template-columns:1fr;} }
.case{ display:flex; flex-direction:column; transition:opacity .45s var(--ease), transform .45s var(--ease); }
.case.hide{ display:none; }
.case__media{ position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); user-select:none; min-height:280px; }
.case__media .ph{ position:absolute; inset:0; width:100%; height:100%; }
.case__media .ph.has-img{ display:block; }
.case__media .ph.has-img img{ display:block; width:100%; height:100%; object-fit:cover; }
.case__media .after{ z-index:2; }
.case__media .before{ z-index:3; clip-path:inset(0 50% 0 0); }
.case .lab{ position:absolute; top:13px; z-index:5; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.1em; padding:.4em .75em; border-radius:999px; direction:ltr; }
.case .lab.b{ left:13px; background:var(--ink); color:var(--cream); }
.case .lab.a{ right:13px; background:var(--paper); color:var(--ink); border:1px solid var(--line); }
.handle{ position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff; z-index:6; transform:translateX(-50%); cursor:ew-resize; }
.grip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px;height:42px;border-radius:50%; background:#fff; border:1px solid var(--line); display:grid;place-items:center; color:var(--ink); }
.case__info{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-top:16px; }
.case__cat{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; color:var(--tan); direction:ltr; }
.case__title{ font-family:var(--font-display); font-weight:800; font-size:1.12rem; margin:6px 0 0; }
.case__meta{ display:flex; gap:14px; margin-top:8px; font-size:.82rem; color:var(--ink-3); }
.case__meta b{ color:var(--ink-2); font-weight:600; }
.case__link{ width:42px;height:42px;border-radius:50%; border:1px solid var(--line); background:var(--surface); display:grid;place-items:center; flex:none; transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); color:var(--ink); }
.case__link:hover{ background:var(--green); color:#fff; border-color:var(--green); }

.empty{ text-align:center; padding:80px 0; color:var(--ink-3); font-family:var(--font-mono); display:none; }

/* CTA strip */
.strip{ 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(30px,5vw,60px); }
.strip h2{ font-family:var(--font-display); font-weight:900; font-size:clamp(1.8rem,4vw,3rem); margin:0; line-height:1.05; }
.strip p{ color:rgba(238,243,251,.65); margin:12px 0 0; max-width:40ch; }
.strip .btn-primary{ background:#fff; color:var(--ink); }
.strip .btn-primary .arr{ background:var(--green); color:#fff; } .strip .btn-primary:hover .arr{ transform:rotate(-45deg); }