/* === Gallery styling (kept self-contained) === */


.filters{max-width:1200px;margin:24px auto 8px;padding:0 24px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{border:1px solid #c6e1d5;background:#fff;color:#1f2d28;padding:10px 14px;border-radius:999px;font-size:14px}
.chip.active{background:#cfe7dc;border-color:#cfe7dc}

.gallery-grid{max-width:1200px;margin:24px auto 80px;padding:0 24px;display:grid;grid-template-columns:repeat(12,1fr);gap:20px; background: var(--cream);}
.card{grid-column:span 4;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.08);position:relative;transition:.2s}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(0,0,0,.12)}
@media(max-width:1100px){.card{grid-column:span 6}}
@media(max-width:700px){.card{grid-column:span 12}}

.card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
figcaption{padding:14px 16px}
figcaption h3{margin:10px 0 4px;font-size:18px;font-weight:600}
figcaption p{margin:0;color:#6b7480;font-size:14px}
.pill{display:inline-block;font-size:12px;font-weight:600;padding:6px 10px;border-radius:999px;background:#efe9d6;color:#3d3d3d;border:1px solid #e5dcc7}

/* Before/after compare (hover reveal) */
.compare{position:relative;overflow:hidden;aspect-ratio:4/3}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare .before{z-index:1}
.compare .after{z-index:2;clip-path:inset(0 0 0 50%);transition:clip-path .35s ease}
.card-compare:hover .after{clip-path:inset(0 0 0 80%)}
.compare .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(255,255,255,.95);z-index:3;transition:left .35s ease}
.card-compare:hover .handle{left:80%}
.compare .handle::after{content:\"↔\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:18px;color:#fff}



.page-hero.gallery-hero {
    padding: 56px 24px 42px;
    background: linear-gradient(180deg,#fff,#fbfaf6);
    border-bottom: 1px solid rgba(20,60,40,.06);
    text-align: center;
}

.page-hero.gallery-hero .wrap {
    max-width: 900px;
    margin: 0 auto;
}

.page-hero.gallery-hero h1 {
    font-family: Cinzel, serif;
    font-size: clamp(30px,4vw,44px);
    color: var(--ink);
    margin: 0 0 8px;
}

.page-hero.gallery-hero p {
    color: var(--sub);
    margin: 0 auto;
    max-width: 720px;
}


/* Before/After slider (draggable) */
.card-compare .compare-slider{
    position:relative; overflow:hidden; aspect-ratio:4/3; border-bottom:1px solid #f2efe7;
    /* slider position as percentage (0..100) */
    --pos:50;
}
.card-compare .compare-slider img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; pointer-events:none;
}
.card-compare .compare-slider img:first-of-type{ z-index:1; } /* BEFORE */
.card-compare .compare-slider img.after{
    z-index:2;
    clip-path: inset(0 0 0 calc(var(--pos) * 1%)); /* reveal from right; left edge moves */
    transition: clip-path .05s linear;
}

/* Handle line + knob */
.card-compare .slider-handle{
    position:absolute; top:0; bottom:0; width:2px;
    left: calc(var(--pos) * 1%); transform: translateX(-1px);
    background: rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(0,0,0,.12); z-index:3; cursor: ew-resize;
}
.card-compare .slider-handle::after{
    content:"↔"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    font-size:18px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35);
}

/* Keyboard focus */
.card-compare .slider-handle:focus-visible{
    outline: 3px solid #cfe7dc; outline-offset: 2px;
}


/* Tidy spacing under banner so filters sit closer */
.gallery-filters,
.filters{ /* whichever class you used */
    margin-top:18px; /* was larger before */
}