/* gallery.css - the shared presentation for the three approved galleries
 * (home hero rotator, Installation Gallery listing, Custom Builds spotlight).
 *
 * ONE source for the image plate and the thumbnail, so no gallery grows its own
 * one-off class (.blead / .p / .ixt are gone):
 *
 *   .plate      a white image plate: white background, object-fit:contain, the
 *               photo CENTERED MIDDLE, thin rule border. Never crops.
 *   .tm         a thumbnail: white background, thin border, opens the large file.
 *
 * The centering rule is the owner's: margin:auto on an absolutely-fitted image is
 * the dependable middle for a mixed-aspect set and does not depend on the parent
 * having a definite height. Flex alone leaves tall portraits top-aligned.
 *
 * Loaded ONLY on /, /installs/ and /custom-builds/ (as each page's css2), so the
 * existing .plate rules in fixes.css on every other page are untouched.
 */

/* ---------- shared plate + thumbnail ------------------------------------- */
.plate,.plate>a,.listing .plate,.spots .plate,.hc .plate{
  background:#ffffff;border:1px solid var(--rule);display:flex;
  align-items:center;justify-content:center;overflow:hidden;
}
.plate img,.plate>a img,.listing .plate img,.spots .plate img,.hc .plate img{
  object-fit:contain;display:block;background:#ffffff;margin:auto;
  max-width:100%;max-height:100%;width:auto;height:auto;
}
.tm{display:block;background:#ffffff;border:1px solid var(--rule);overflow:hidden;line-height:0}
.tm img{width:88px;height:66px;object-fit:contain;display:block;background:#ffffff;margin:0 auto}
.tm:hover,.tm:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ---------- the lightbox arrows -------------------------------------------
 * REMOVED from here 2026-11-03. They are defined once in fixes.css, which every page
 * loads, because this file only loads on /, /installs/ and /custom-builds/ - so on a
 * series page the same two buttons rendered with no styling. Do not re-add them: one
 * site-wide arrow control is the owner's rule.
 */

/* ---------- Installation Gallery - the LISTING look ----------------------- */
.igrp{margin-top:8px}
.igrp-h{display:flex;align-items:baseline;gap:14px;margin:38px 0 0;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.igrp-h h2{font-size:1.5rem}
.igrp-h .cnt{color:var(--ink-muted);font-size:13px}
.listing{border-top:1px solid var(--rule);margin-top:22px}
.entry{display:grid;grid-template-columns:1.5fr 1fr;gap:34px;padding:40px 0;border-bottom:1px solid var(--rule);align-items:center}
.leadcol .plate{min-height:clamp(200px,30vw,420px)}
.leadcol .plate img{width:100%;max-height:clamp(200px,30vw,420px)}
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:10px}
.entry .body h3{font-size:1.6rem;margin:10px 0 12px}
.entry .meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.badge{font:600 10px/1 var(--label-font);letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--rule);color:var(--ink-muted)}
.badge--verified{color:var(--accent-text);border-color:var(--accent-text)}
.entry .ds{color:var(--ink-muted);font-size:14.5px;max-width:52ch;margin:0 0 10px}
.entry .ord{font:400 12.5px/1.5 var(--label-font);color:var(--ink-muted);margin:0 0 16px}
@media(max-width:920px){.entry{grid-template-columns:1fr}.strip{grid-template-columns:repeat(4,1fr)}}

/* ---------- Custom Builds - the SPOTLIGHT look ---------------------------- */
.spots{border-top:1px solid var(--rule);margin-top:22px}
.spot{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;padding:48px 0;border-bottom:1px solid var(--rule);align-items:center}
.spot.rev .imgwrap{order:2}
.imgwrap .plate{min-height:clamp(220px,30vw,420px)}
.imgwrap .plate img{width:100%;max-height:clamp(220px,30vw,420px)}
.spot .strip{display:flex;flex-wrap:wrap}
.story h3{font-size:1.9rem;margin:10px 0 14px}
.story p{color:var(--ink-muted);font-size:14.5px;max-width:56ch;margin-bottom:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.chip{font-size:11px;font-family:var(--label-font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);border:1px solid var(--rule);border-radius:999px;padding:6px 12px}
@media(max-width:920px){.spot{grid-template-columns:1fr}.spot.rev .imgwrap{order:0}}

/* ---------- Home hero - the ROTATOR (interleaved pairs -> rotator) -------- */
.hc{background:var(--surface);border-top:1px solid var(--rule)}
.rvc-stage,.rvc-side{display:none}
.rvc-items{list-style:none;margin:0 auto;padding:0;max-width:var(--max);border-top:1px solid var(--rule)}
.rvc-note{display:none}
.rvc-item{display:grid;grid-template-columns:1.35fr 1fr;gap:0;border-bottom:1px solid var(--rule)}
.rvc-item .rvc-fig{min-height:clamp(260px,34vw,500px)}
.rvc-item .rvc-fig a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.rvc-item .rvc-info{padding:clamp(22px,3.6vw,44px) clamp(20px,3.4vw,40px);display:flex;flex-direction:column;background:var(--surface)}
.rvc-item .rvc-info .lbl{color:var(--ink-muted);font-size:11px}
.rvc-item h2{font-family:var(--display-font);font-size:clamp(1.5rem,2.8vw,2.2rem);font-weight:400;margin:10px 0 14px;line-height:1.12}
.rvc-item p{color:var(--ink-muted);font-size:15px;line-height:1.6;max-width:46ch;margin-bottom:18px}
.rvc-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.rvc-item .rq{margin-top:2px}
@media(max-width:920px){.rvc-item{grid-template-columns:1fr}.rvc-item .rvc-info{border-top:1px solid var(--rule)}}
html.js .rvc-items{display:none}
html.js .rvc-stage,html.js .rvc-side{display:block}
html.js .hc[data-rvc]{display:grid;grid-template-columns:1.4fr 1fr;max-width:var(--max);margin:0 auto}
html.js .rvc-stage{position:relative;overflow:hidden;background:#ffffff;min-height:0}
html.js .rvc-track{position:relative;height:clamp(320px,48vw,620px)}
html.js .rvc-slide{position:absolute;inset:0;opacity:0;transition:opacity 700ms var(--ease);pointer-events:none;background:#ffffff}
html.js .rvc-slide.active{opacity:1;pointer-events:auto}
html.js .rvc-slide .rvc-inside{width:100%;height:100%}
html.js .rvc-slide a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
html.js .rvc-slide img{max-width:100%;max-height:100%;object-fit:contain;display:block;background:#ffffff;margin:auto}
.rvc-side{background:var(--surface);border-left:1px solid var(--rule);padding:clamp(24px,4vw,44px) clamp(20px,3.4vw,40px)}
@media(max-width:920px){html.js .hc[data-rvc]{grid-template-columns:1fr}html.js .rvc-side{border-left:0;border-top:1px solid var(--rule)}}
.rvc-label{margin-bottom:14px}
.rvc-label .lbl{color:var(--accent-text)}
.rvc-panels{position:relative;min-height:260px}
.rvc-panel{display:none;padding:0}
.rvc-panel.on{display:block}
.rvc-panel .lbl{color:var(--ink-muted);font-size:11px}
.rvc-panel h2{font-family:var(--display-font);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:400;margin:10px 0 14px;line-height:1.12}
.rvc-panel p{color:var(--ink-muted);font-size:15.5px;line-height:1.6;max-width:44ch;margin-bottom:18px}
.rvc-panel .rq{margin-top:2px}
.rvc-ctl{display:flex;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap}
.rvc-prog{flex:1;height:2px;background:var(--rule);position:relative;overflow:hidden;min-width:120px}
.rvc-bar{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent)}
.rvc-dots{display:flex;gap:9px}
.rvc-dot{width:11px;height:11px;border-radius:50%;background:var(--rule);cursor:pointer;border:0;padding:0}
.rvc-dot.on{background:var(--accent)}

/* ---------- Shop by series: per-model thumbs + per-card mini-gallery ------
 * The card's stage is the series' own cycler (manual arrows, no auto-advance). Its slides are
 * the shared .plate, and thumbs are the shared .tm - so the same no-crop, centred-middle rule
 * applies here as in the galleries. */
.frow .sstage{position:relative;display:flex;align-items:center;justify-content:center;width:100%}
.frow .sstage .sslide{width:100%}
.frow .sstage .sslide[hidden]{display:none}
.frow .sstage .plate{width:100%;min-height:clamp(180px,26vw,320px)}
.frow .sstage .plate img{width:100%;max-height:clamp(180px,26vw,320px)}
.frow .smodels{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 18px}
.smodel{display:flex;flex-direction:column;gap:6px;width:104px}
.smodel .tm img{width:100%;height:72px}
.smodel .slb{font:400 11.5px/1.35 var(--label-font);color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.smodel .slb:hover{color:var(--accent-text)}
.frow .sstage{position:relative;display:flex;align-items:center;justify-content:center}
.frow .sstage .sarrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:38px;height:38px;min-height:38px;border:1px solid var(--rule);background:var(--surface);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.frow .sstage .sarrow[data-s="prev"]{left:6px}
.frow .sstage .sarrow[data-s="next"]{right:6px}
.frow .sstage .sarrow:hover{border-color:var(--accent);color:var(--accent)}
.frow .spos{position:absolute;right:10px;bottom:8px;z-index:4;font:400 11px/1 var(--label-font);color:var(--ink-muted);background:var(--surface);border:1px solid var(--rule);padding:4px 8px}

/* ---------- the install-type editor (owner control, /installs/) ---------- */
.igedit{border:1px solid var(--rule);border-radius:2px;padding:18px 20px;margin:26px 0 0;background:var(--surface-2)}
.igedit[hidden]{display:none}
.igedit h3{font-size:1.05rem;margin:0 0 6px}
.igedit p.hint{color:var(--ink-muted);font-size:13px;margin:0 0 14px;max-width:78ch}
.igedit table{border-collapse:collapse;width:100%;font-size:13.5px}
.igedit th,.igedit td{border-bottom:1px solid var(--rule);padding:7px 8px;text-align:left;vertical-align:middle}
.igedit th{font:600 11px/1 var(--label-font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.igedit select,.igedit button{font:inherit;padding:5px 8px;border:1px solid var(--rule);background:var(--surface);color:var(--ink)}
.igedit .row-removed{opacity:.45;text-decoration:line-through}
.igedit .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.igedit .acts .btn{font-size:12px;padding:8px 14px}