/* ============================================================
   Before & After — editorial reveal gallery
   Drag-to-compare frames, masonry rhythm, staggered filtering.
   Depends on :root tokens in site.css.
   ============================================================ */

/* ---------- consent line (quiet, not a banner) ---------- */
.ba-consent{display:flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:13px;line-height:1.5;color:var(--c-slate);margin:0 0 40px}
.ba-consent svg{color:var(--c-sea);flex-shrink:0}
.ba-consent strong{font-weight:600;color:var(--c-ink)}

/* ---------- section shell ---------- */
.ba-gallery{background:var(--c-ivory);padding:16px 0 140px}
.ba-shell{max-width:1280px;margin:0 auto;padding:0 32px}
@media (max-width:767px){.ba-shell{padding:0 20px}.ba-gallery{padding-bottom:96px}}

/* ---------- filter pills ---------- */
.ba-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 84px;padding:0;list-style:none}
@media (max-width:767px){.ba-filters{margin-bottom:56px;gap:8px}}
.ba-chip{appearance:none;background:transparent;border:1px solid rgba(26,41,46,0.22);color:var(--c-ink);font-family:var(--font-sans);font-weight:500;font-size:13px;line-height:1;letter-spacing:0.02em;padding:10px 18px;border-radius:999px;cursor:pointer;transition:background-color 200ms var(--ease-out),color 200ms var(--ease-out),border-color 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ba-chip:hover{border-color:var(--c-sea);color:var(--c-deep)}}
.ba-chip[aria-pressed="true"]{background:var(--c-sea);border-color:var(--c-sea);color:var(--c-ivory)}
.ba-chip:focus-visible{outline:2px solid var(--c-deep);outline-offset:2px}

/* ---------- masonry grid ---------- */
.ba-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:32px;row-gap:96px;list-style:none;margin:0;padding:0}
.ba-item{margin:0;display:flex;flex-direction:column;opacity:0;transform:translateY(8px);transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out)}
.ba-item.in{opacity:1;transform:none}
.ba-item.in.out{opacity:0;transform:translateY(8px)}
.ba-cat{font-family:var(--font-sans);font-weight:700;font-size:11px;line-height:1.4;letter-spacing:0.16em;text-transform:uppercase;color:var(--c-sea-text);margin:0 0 12px}
.ba-cap{font-family:var(--font-sans);font-size:14px;line-height:1.55;color:var(--c-slate);margin:14px 0 0;max-width:44ch}
.ba-empty{grid-column:1/-1;font-family:var(--font-sans);font-size:15px;color:var(--c-slate);text-align:center;padding:80px 0;list-style:none}

/* desktop slot rhythm — repeats every 10 items, two arch features per motif */
@media (min-width:1024px){
.ba-s0{grid-column:1/span 7}.ba-s0 .ba-frame{aspect-ratio:3/4}
.ba-s1{grid-column:9/span 4;align-self:end;margin-top:88px}.ba-s1 .ba-frame{aspect-ratio:3/4}
.ba-s2{grid-column:2/span 5;margin-top:56px}.ba-s2 .ba-frame{aspect-ratio:4/5}
.ba-s3{grid-column:8/span 5;align-self:center}.ba-s3 .ba-frame{aspect-ratio:1/1}
.ba-s4{grid-column:4/span 6}.ba-s4 .ba-frame{aspect-ratio:1/1}
.ba-s5{grid-column:1/span 5;margin-top:48px}.ba-s5 .ba-frame{aspect-ratio:3/4}
.ba-s6{grid-column:7/span 6}.ba-s6 .ba-frame{aspect-ratio:4/5}
.ba-s7{grid-column:2/span 4;align-self:end;margin-top:72px}.ba-s7 .ba-frame{aspect-ratio:3/4}
.ba-s8{grid-column:7/span 5}.ba-s8 .ba-frame{aspect-ratio:4/5}
.ba-s9{grid-column:3/span 7}.ba-s9 .ba-frame{aspect-ratio:6/7}
}
/* tablet */
@media (min-width:640px) and (max-width:1023px){
.ba-grid{column-gap:24px;row-gap:72px}
.ba-s0{grid-column:1/span 7}.ba-s0 .ba-frame{aspect-ratio:3/4}
.ba-s1{grid-column:8/span 5;align-self:end;margin-top:64px}.ba-s1 .ba-frame{aspect-ratio:3/4}
.ba-s2{grid-column:1/span 6;margin-top:40px}.ba-s2 .ba-frame{aspect-ratio:4/5}
.ba-s3{grid-column:7/span 6;align-self:center}.ba-s3 .ba-frame{aspect-ratio:1/1}
.ba-s4{grid-column:3/span 8}.ba-s4 .ba-frame{aspect-ratio:1/1}
.ba-s5{grid-column:1/span 6;margin-top:32px}.ba-s5 .ba-frame{aspect-ratio:3/4}
.ba-s6{grid-column:7/span 6}.ba-s6 .ba-frame{aspect-ratio:4/5}
.ba-s7{grid-column:1/span 5;align-self:end;margin-top:48px}.ba-s7 .ba-frame{aspect-ratio:3/4}
.ba-s8{grid-column:6/span 7}.ba-s8 .ba-frame{aspect-ratio:4/5}
.ba-s9{grid-column:2/span 9}.ba-s9 .ba-frame{aspect-ratio:6/7}
}
/* mobile — single column */
@media (max-width:639px){
.ba-grid{grid-template-columns:1fr;row-gap:56px}
.ba-item{grid-column:1/-1 !important;margin-top:0 !important;align-self:auto !important}
.ba-item .ba-frame{aspect-ratio:4/5}
.ba-s3 .ba-frame,.ba-s4 .ba-frame{aspect-ratio:1/1}
}

/* ---------- comparison frame ---------- */
.ba-frame{position:relative;overflow:hidden;border-radius:10px;background:var(--c-pearl);cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;box-shadow:0 1px 2px rgba(15,79,87,0.06);isolation:isolate}
.ba-frame--arch{border-radius:50% 50% 12px 12px / 32% 32% 12px 12px}
@media (max-width:639px){.ba-frame--arch{border-radius:50% 50% 10px 10px / 26% 26% 10px 10px}}
.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 40%);-webkit-user-drag:none}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)*100%) 0 0)}
.ba-frame.anim .ba-before{transition:clip-path 150ms var(--ease-out)}
.ba-divider{position:absolute;top:0;bottom:0;left:calc(var(--p)*100%);width:0;z-index:2}
.ba-frame.anim .ba-divider{transition:left 150ms var(--ease-out)}
.ba-divider::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:rgba(26,41,46,0.78);box-shadow:0 0 0 0.5px rgba(255,255,255,0.35)}
.ba-grip{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:var(--c-sea);color:var(--c-ivory);display:flex;align-items:center;justify-content:center;gap:3px;cursor:ew-resize;box-shadow:0 2px 12px rgba(15,79,87,0.35),0 0 0 1px rgba(255,255,255,0.28)}
.ba-grip svg{display:block;opacity:0.9}
.ba-grip:focus-visible{outline:2px solid var(--c-white);outline-offset:3px}
@media (max-width:639px){.ba-grip{width:46px;height:46px}}
.ba-tag{position:absolute;bottom:12px;z-index:1;font-family:var(--font-sans);font-weight:600;font-size:10px;line-height:1;letter-spacing:0.16em;text-transform:uppercase;color:var(--c-white);background:rgba(26,41,46,0.72);padding:8px 12px;border-radius:999px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);pointer-events:none;transition:opacity 150ms var(--ease-out)}
.ba-tag-b{left:12px;opacity:clamp(0,(var(--p) - 0.08)/0.12,1)}
.ba-tag-a{right:12px;opacity:clamp(0,(0.92 - var(--p))/0.12,1)}

/* ---------- closing CTA ---------- */
.ba-cta{background:var(--c-deep);padding:116px 32px 124px;text-align:center}
@media (max-width:767px){.ba-cta{padding:80px 24px 88px}}
.ba-cta-kicker{font-family:var(--font-sans);font-weight:700;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--c-aqua);margin:0 0 20px}
.ba-cta h2{font-family:var(--font-display);font-weight:400;font-size:clamp(34px,4.2vw,48px);line-height:1.12;color:var(--c-ivory);margin:0 0 16px}
.ba-cta h2 em{font-style:italic}
.ba-cta p{font-family:var(--font-sans);font-size:16px;line-height:1.6;color:rgba(246,246,247,0.72);margin:0 auto 40px;max-width:52ch}
.ba-cta .btn-book{display:inline-flex;align-items:center;gap:8px;background:var(--c-sea);color:var(--c-ivory);font-family:var(--font-sans);font-weight:600;font-size:15px;padding:16px 30px;border-radius:999px;text-decoration:none;transition:transform 220ms var(--ease-out),box-shadow 220ms var(--ease-out),background-color 220ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ba-cta .btn-book:hover{background:var(--c-sea-hover);transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,0.28)}.ba-cta .btn-book:hover .arrow{transform:translateX(3px)}}
.ba-cta .btn-book .arrow{transition:transform 220ms var(--ease-out)}
.ba-cta .btn-book:focus-visible{outline:2px solid var(--c-ivory);outline-offset:3px}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
.ba-item,.ba-item.in.out{opacity:1;transform:none;transition:none}
.ba-frame.anim .ba-before,.ba-frame.anim .ba-divider,.ba-tag,.ba-chip,.ba-cta .btn-book{transition:none}
.ba-cta .btn-book:hover{transform:none}
}