/* Gallery + Google reviews sections (T36). Loaded after style.css; reuses its variables, .sec/.wrap/.card/.rv classes.
   No inline styles anywhere (CSP style-src has no 'unsafe-inline'). */

/* ---------- FLIP SWITCH (gallery): hide a group of photos by listing it in the data-hide attribute of <ul id="gal"> in index.html ---------- */
.gal[data-hide~="cla"] [data-group="cla"]{display:none}

/* ---------- FLIP SWITCHES (reviews): attributes on <div class="rev-grid" id="revs"> in index.html ---------- */
.rev-grid[data-r13="excerpt"] .r-more{display:none}
.rev-grid:not([data-r13="excerpt"]) .r-ex-note{display:none}
.rev-grid[data-ellie-tail="hide"] .r-tail{display:none}

/* gallery */
.gal-sec .lead{margin-inline:auto}
.gal-note{margin-inline:auto;margin-top:14px}
.gal{list-style:none;margin-top:48px;column-count:4;column-gap:14px;text-align:left}
@media(max-width:1000px){.gal{column-count:3}}
@media(max-width:700px){.gal{column-count:2;column-gap:10px;margin-top:36px}}
.g-item{break-inside:avoid;margin:0 0 14px;position:relative}
@media(max-width:700px){.g-item{margin-bottom:10px}}
.g-btn{display:block;position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#0c0c0c;box-shadow:0 18px 30px -18px #000;transition:border-color .5s var(--ease),transform .6s var(--ease)}
.g-btn:hover,.g-btn:focus-visible{border-color:rgba(255,255,255,.5);transform:translateY(-3px)}
.g-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.g-btn img{display:block;width:100%;height:auto;background:#111}
.g-pair{break-inside:avoid;margin:0 0 14px;border:1px solid rgba(255,255,255,.4);border-radius:8px;padding:8px;background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.02))}
@media(max-width:700px){.g-pair{margin-bottom:10px;padding:6px}}
.g-pair-h{font-family:var(--sans);font-size:10px;line-height:1.4;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);font-weight:600;padding:2px 4px 8px}
.g-pair-h span{display:block;margin-top:3px;font-size:11px;letter-spacing:.04em;text-transform:none;font-weight:400;color:#b0b0b0}
.g-pair .g-fig{position:relative}
.g-pair .g-fig+.g-fig{margin-top:8px}
.g-tag{position:absolute;left:8px;bottom:8px;z-index:2;background:#fff;color:#000;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:4px 10px;border-radius:999px;pointer-events:none}

/* lightbox (native <dialog>: focus trap + Esc close built in) */
.lb{border:0;padding:0;background:transparent;color:#fff;max-width:100vw;max-height:100vh;width:100vw;height:100vh;margin:0;overflow:hidden}
.lb::backdrop{background:rgba(0,0,0,.92)}
.lb-in{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 16px 20px}
.lb-img{max-width:min(96vw,1600px);max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px);width:auto;height:auto;object-fit:contain;border-radius:4px;background:#111}
.lb-cap{font-family:var(--sans);font-size:13px;color:#c8c8c8;text-align:center;max-width:70ch;margin-top:14px;line-height:1.45}
.lb-count{font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--mut);margin-top:6px}
.lb-x,.lb-nav{position:absolute;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.55);color:#fff;font-size:22px;line-height:1;cursor:pointer;font-family:var(--sans);transition:background .3s,color .3s}
.lb-x:hover,.lb-nav:hover{background:#fff;color:#000}
.lb-x:focus-visible,.lb-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lb-x{top:12px;right:12px}
.lb-nav.prev{left:12px;top:50%;transform:translateY(-50%)}
.lb-nav.next{right:12px;top:50%;transform:translateY(-50%)}
@media(max-width:700px){.lb-nav.prev,.lb-nav.next{top:auto;bottom:12px;transform:none}.lb-in{padding-top:64px;padding-bottom:70px}.lb-img{max-height:calc(100vh - 220px);max-height:calc(100dvh - 220px)}}
html.lb-open{overflow:hidden}

/* reviews */
.rev-sec .lead{margin-inline:auto}
.rev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px;text-align:left;align-items:stretch}
@media(max-width:1000px){.rev-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.rev-grid{grid-template-columns:minmax(0,1fr);margin-top:36px}}
.rev{display:flex;flex-direction:column;gap:12px;padding:24px 24px 20px}
.rev.long{grid-column:span 2}
@media(max-width:700px){.rev.long{grid-column:auto}}
.rev .stars{font-family:var(--sans);letter-spacing:.18em;color:#fff;font-size:15px}
.rev .rt{color:#e0e0e0;font-size:15.5px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
.rev .r-tail{display:block}
.rev .r-ex-note{display:block;margin-top:8px;font-family:var(--sans);font-size:12px;letter-spacing:.08em;color:var(--mut);white-space:normal}
.rev .r-ex-note a{text-decoration:underline;text-underline-offset:4px;color:#fff}
.rev .r-by{margin-top:auto;display:flex;flex-direction:column;gap:2px;font-family:var(--sans);letter-spacing:.1em;text-transform:none;color:var(--mut)}
.rev .r-by b{font-size:15px;font-weight:600;letter-spacing:.02em;color:#fff}
.rev .r-by span{font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.rev-link{margin-top:32px;font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.rev-link a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:5px;color:#fff}