/* ============================================================
   Xplorer Yachts — Fleet inventory + gated detail styles
   Layered on top of site.css (uses the same CSS variables).
============================================================ */

/* ---------- Filter bar ---------- */
.filter-bar{background:var(--bg-3);border:1px solid var(--rule);padding:clamp(1.6rem,3vw,2.4rem);margin-bottom:clamp(2.4rem,4vw,3.4rem)}
.filter-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.4rem 1.6rem;align-items:end}
.filter-field{display:flex;flex-direction:column;gap:.55rem}
.filter-field label{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:500}
.filter-field select,.filter-field input[type=range]{width:100%}
.filter-field select{background:var(--bg-deep);border:1px solid var(--rule);color:var(--ink);padding:.75rem .8rem;font-family:inherit;font-size:.95rem;font-weight:300}
.filter-field select:focus{outline:none;border-color:var(--gold)}
.filter-field input[type=range]{accent-color:var(--gold);background:transparent;height:1.6rem}
.filter-range-out{font-family:'Cormorant Garamond',serif;color:var(--gold);font-size:1.15rem}
.filter-caps{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.6rem;padding-top:1.4rem;margin-top:.4rem;border-top:1px solid var(--rule)}
.cap-toggle{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .95rem;border:1px solid var(--rule);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);cursor:pointer;transition:all .2s;user-select:none}
.cap-toggle input{position:absolute;opacity:0;width:0;height:0}
.cap-toggle:hover{border-color:var(--gold-2);color:var(--ink)}
.cap-toggle:has(input:checked){background:var(--gold);border-color:var(--gold);color:var(--bg);font-weight:500}
.filter-actions{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.4rem;margin-top:.2rem;border-top:1px solid var(--rule)}
.filter-count{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.filter-count strong,#fCount{color:var(--gold)}

/* ---------- Fleet grid + cards ---------- */
.fleet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,2.6vw,2.2rem)}
.fleet-card{display:flex;flex-direction:column;background:var(--bg-3);border:1px solid var(--rule);overflow:hidden;transition:transform .35s ease,border-color .25s}
.fleet-card:hover{transform:translateY(-4px);border-color:var(--gold-2)}
.fc-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg-deep)}
.fc-img{width:100%;height:100%;object-fit:cover;filter:brightness(.86) contrast(1.05)}
.fc-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;background:linear-gradient(160deg,var(--bg-3),var(--bg-deep))}
.fc-ph span{font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--ink-2);letter-spacing:.04em}
.fc-ph span em{color:var(--gold);font-style:italic}
.fc-ph small{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4)}
.fc-badge{position:absolute;top:1rem;left:1rem;background:rgba(6,21,46,.82);border:1px solid var(--gold-2);color:var(--gold);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;padding:.35rem .7rem;font-weight:500}
.fc-body{padding:clamp(1.4rem,2.2vw,1.9rem);display:flex;flex-direction:column;flex:1}
.fc-tag{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.7rem}
.fc-body h3{font-size:clamp(1.5rem,2vw,1.85rem);margin:0 0 .5rem}
.fc-sub{font-size:.8rem;letter-spacing:.03em;color:var(--ink-3);margin:0 0 1rem;text-transform:uppercase}
.fc-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.chip{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--rule-2);padding:.3rem .6rem;border-radius:2px}
.fc-blurb{font-size:.92rem;color:var(--ink-2);margin:0 0 1.3rem;flex:1;line-height:1.6}
.fc-cta{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-top:auto}
.fc-cta::after{content:" \2192";color:var(--gold)}
.fc-cta-gate{color:var(--steel)}
.fc-cta-gate::after{color:var(--steel)}
.fleet-empty{grid-column:1/-1;text-align:center;padding:4rem 1rem;color:var(--ink-3)}
.fleet-empty p{margin-bottom:1.4rem}

@media (max-width:1024px){
  .filter-grid{grid-template-columns:repeat(3,1fr)}
  .fleet-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .filter-grid{grid-template-columns:1fr 1fr}
  .fleet-grid{grid-template-columns:1fr}
}

/* ============================================================
   Detail page — capability grid + gating
============================================================ */
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.cap-cell{background:var(--bg-3);padding:1.6rem 1.2rem;display:flex;flex-direction:column;align-items:center;gap:.8rem;text-align:center}
.cap-cell img{width:44px;height:44px;object-fit:contain;filter:brightness(0) saturate(100%) invert(78%) sepia(28%) saturate(420%) hue-rotate(348deg) brightness(92%) contrast(88%)}
.cap-cell .cap-lbl{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);line-height:1.4}
.cap-cell .cap-opt{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);margin-top:.1rem}
@media (max-width:900px){.cap-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.cap-grid{grid-template-columns:repeat(2,1fr)}}

/* advantage cards */
.adv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.adv-card{background:var(--bg-3);border:1px solid var(--rule);padding:clamp(1.8rem,2.6vw,2.4rem)}
.adv-card .adv-big{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,3.4vw,2.8rem);color:var(--gold);line-height:1;margin-bottom:.7rem;font-weight:300}
.adv-card.teal .adv-big{color:var(--accent)}
.adv-card .adv-lbl{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:500;margin-bottom:.9rem}
.adv-card p{font-size:.95rem;color:var(--ink-2);margin:0}
@media (max-width:640px){.adv-grid{grid-template-columns:1fr}}

/* gallery strip */
.gal-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.gal-strip img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--rule);filter:brightness(.9)}
@media (max-width:640px){.gal-strip{grid-template-columns:1fr}}

/* spec table */
.spec-table{width:100%;border-collapse:collapse;border-top:1px solid var(--rule)}
.spec-table tr{border-bottom:1px solid var(--rule)}
.spec-table th{text-align:left;padding:1rem 1.2rem 1rem 0;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:500;width:38%;vertical-align:top;font-family:'Inter',sans-serif}
.spec-table td{padding:1rem 0;color:var(--ink);font-size:1rem;font-weight:300}

/* pricing cards */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.price-card{background:var(--bg-3);border:1px solid var(--rule);padding:clamp(1.8rem,2.6vw,2.4rem);text-align:center}
.price-card .price-big{font-family:'Cormorant Garamond',serif;font-size:clamp(1.8rem,3vw,2.5rem);color:var(--ink);line-height:1;margin-bottom:.8rem;font-weight:300}
.price-card.teal .price-big{color:var(--accent)}
.price-card .price-lbl{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:.7rem}
.price-card p{font-size:.88rem;color:var(--ink-2);margin:0}
@media (max-width:820px){.price-grid{grid-template-columns:1fr}}

/* ---------- Gate ---------- */
.gate{position:relative;text-align:center;padding:clamp(3rem,6vw,5rem) clamp(1.2rem,4vw,3rem);background:var(--bg-deep);border:1px solid var(--rule-2);border-radius:2px}
.gate .eyebrow{margin-bottom:1.2rem}
.gate h2{margin-bottom:1.2rem}
.gate p{max-width:52ch;margin:0 auto 2rem}
.gate-locked-list{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:1.6rem auto 2.2rem;max-width:44rem}
.gate-locked-list span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--rule);padding:.4rem .8rem}
.gate-locked-list span::before{content:"\1F512  ";filter:grayscale(1) opacity(.7)}
.gated-content{display:none}
.gated-content.unlocked{display:block;animation:gatefade .5s ease}
@keyframes gatefade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* register modal / soft gate note */
.gate-note{font-size:.72rem;letter-spacing:.06em;color:var(--ink-4);margin-top:1.4rem}

/* interior list two-col (vision groups) */
.vision-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.8rem,3vw,2.6rem)}
.vision-col h4{color:var(--gold);font-family:'Inter',sans-serif;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin-bottom:1rem}
.vision-col ul{list-style:none;padding:0;margin:0 0 1.8rem}
.vision-col li{padding:.55rem 0 .55rem 1.4rem;border-bottom:1px solid var(--rule);color:var(--ink-2);font-size:.92rem;position:relative}
.vision-col li:last-child{border-bottom:none}
.vision-col li::before{content:"";position:absolute;left:0;top:1.15em;width:7px;height:1px;background:var(--gold)}
@media (max-width:720px){.vision-grid{grid-template-columns:1fr}}