/* =====================================================================
   BoatAtlas UI — shared chrome & primitives (Design System v1.0)
   Tokens: css/boatatlas-tokens.css
   Component rules read --ba-* so page-local --ink/--paper overrides
   cannot break the global shell.
   ===================================================================== */

@import url("./boatatlas-tokens.css");

/* =====================================================================
   Glass surfaces
   ===================================================================== */
.g{
  background:var(--ba-glass);
  backdrop-filter:var(--ba-blur);
  -webkit-backdrop-filter:var(--ba-blur);
  border:1px solid var(--ba-glass-border);
  box-shadow:var(--ba-shadow);
}
.g-strong{
  background:var(--ba-glass-strong);
  backdrop-filter:blur(var(--ba-nav-blur)) saturate(125%);
  -webkit-backdrop-filter:blur(var(--ba-nav-blur)) saturate(125%);
  border:1px solid var(--ba-nav-border);
  box-shadow:var(--ba-nav-shadow);
}

.ba-glass-panel{
  background:var(--ba-glass);
  backdrop-filter:var(--ba-blur);
  -webkit-backdrop-filter:var(--ba-blur);
  border:1px solid var(--ba-glass-border);
  box-shadow:var(--ba-shadow);
  border-radius:var(--ba-r-inspector);
}

/* =====================================================================
   Top nav — floating capsule (identical across pillars)
   ===================================================================== */
.nav-wrap{
  position:sticky;top:0;z-index:60;
  padding:14px var(--ba-page-pad) 0;
}
.nav{
  height:var(--ba-nav-height);
  border-radius:var(--ba-nav-radius);
  display:flex;align-items:center;gap:12px;
  padding:0 18px;
  color:var(--ba-ink);
  font-family:var(--ba-f);
}
.nav-wrap .nav{
  background:var(--ba-nav-bg);
  backdrop-filter:blur(var(--ba-nav-blur)) saturate(125%);
  -webkit-backdrop-filter:blur(var(--ba-nav-blur)) saturate(125%);
  border:1px solid var(--ba-nav-border);
  box-shadow:var(--ba-nav-shadow);
}

.wordmark{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
  font:650 0.85rem/1 var(--ba-f);letter-spacing:0.14em;
  color:var(--ba-ink);text-decoration:none;
}
.wordmark svg{width:22px;height:22px}
.wordmark b{font-weight:650;color:var(--ba-ink)}
.wordmark b em{font-style:normal;color:var(--ba-blue)}

.mode-strip{
  display:flex;align-items:center;gap:2px;
  flex-shrink:1;min-width:0;overflow-x:auto;scrollbar-width:none;
  background:none;border:0;padding:0;margin:0;
}
.mode-strip::-webkit-scrollbar{display:none}
.mode-strip a,
.mode-strip button{
  position:relative;display:inline-block;white-space:nowrap;
  border:0;background:none;text-decoration:none;cursor:pointer;
  color:var(--ba-mute);font:500 0.78rem/1 var(--ba-f);letter-spacing:-0.01em;
  padding:10px 12px 12px;border-radius:0;
  transition:color var(--ba-dur-hover) var(--ba-ease);
}
.mode-strip a:hover,
.mode-strip button:hover{color:var(--ba-ink-2)}
.mode-strip a.on,
.mode-strip button.on{color:var(--ba-ink);font-weight:600}
.mode-strip a.on::after,
.mode-strip button.on::after{
  content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;
  border-radius:2px;background:var(--ba-blue);
}
.mode-strip button.stub{opacity:0.72}
.mode-strip.sub a,
.mode-strip.sub button{font-size:0.7rem;padding:10px 10px 12px}

.nav-divider{width:1px;height:22px;background:rgba(255,255,255,0.12);flex-shrink:0}

.nav-center{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  min-width:0;margin:0 auto;
}
.nav-search-wrap{position:relative;flex:1;max-width:400px;min-width:0}
.nav-search{
  width:100%;height:40px;border-radius:var(--ba-r-pill);
  background:var(--ba-glass-fill);border:1px solid rgba(255,255,255,0.09);
  display:flex;align-items:center;gap:10px;padding:0 15px;min-width:0;
  transition:border-color var(--ba-dur-hover) var(--ba-ease), background var(--ba-dur-hover) var(--ba-ease);
}
.nav-search:focus-within{
  border-color:var(--ba-accent-line);
  background:rgba(255,255,255,0.1);
}
.nav-search .ico,
.nav-search .nav-search-ico{color:var(--ba-mute);font-size:0.9rem;line-height:1;flex-shrink:0}
.nav-search input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font:450 0.85rem/1 var(--ba-f);color:var(--ba-ink);
}
.nav-search input::placeholder{color:var(--ba-mute)}

.loc-control{
  display:flex;align-items:center;gap:8px;flex-shrink:1;min-width:0;
  height:40px;padding:0 12px;border-radius:var(--ba-r-pill);
  background:var(--ba-glass-fill);border:1px solid rgba(255,255,255,0.09);
  color:var(--ba-ink);
}
.loc-control svg{width:14px;height:14px;flex-shrink:0}
.loc-control input{
  border:0;background:none;outline:none;min-width:0;width:108px;
  font:500 0.8rem/1 var(--ba-f);color:var(--ba-ink);
}
.loc-control input::placeholder{color:var(--ba-mute)}
.loc-control select{
  border:0;background:none;outline:none;cursor:pointer;
  font:500 0.78rem/1 var(--ba-f);color:var(--ba-blue);
  border-left:1px solid rgba(255,255,255,0.12);padding-left:10px;max-width:92px;
}
.loc-control select option{background:var(--ocean-900);color:var(--ba-ink)}
.loc-control.pulse{box-shadow:0 0 0 3px rgba(47,140,255,0.35)}

.near{
  height:36px;padding:0 14px;flex-shrink:0;
  border:0;border-radius:var(--ba-r-pill);cursor:pointer;white-space:nowrap;
  background:var(--ba-blue);color:#fff;font:550 0.72rem/1 var(--ba-f);
  box-shadow:0 4px 14px rgba(22,119,255,0.35);
  transition:background var(--ba-dur-hover) var(--ba-ease), transform var(--ba-dur-hover) var(--ba-ease);
}
.near:hover{background:var(--ba-blue-deep)}
.near:active{transform:scale(0.97)}

.nav-right{display:flex;align-items:center;gap:4px;flex-shrink:0}
.nav-icon{
  width:40px;height:40px;border:0;border-radius:50%;
  background:none;color:var(--ba-ink-2);font-size:0.85rem;
  display:grid;place-items:center;cursor:pointer;
  transition:background var(--ba-dur-hover) var(--ba-ease), color var(--ba-dur-hover) var(--ba-ease);
}
.nav-icon:hover{background:rgba(255,255,255,0.08);color:var(--ba-ink)}
.nav-avatar{
  width:32px;height:32px;border-radius:50%;margin-left:4px;flex-shrink:0;
  background:linear-gradient(140deg,#7db4ff,var(--ba-blue));
  border:1.5px solid rgba(255,255,255,0.35);
  background-size:cover;background-position:center;
}

.nav-icon:focus-visible,
.near:focus-visible,
.mode-strip a:focus-visible,
.mode-strip button:focus-visible,
.ba-btn:focus-visible,
.ba-iconbtn:focus-visible,
.m-tabbar a:focus-visible,
.m-tabbar button:focus-visible{
  outline:2px solid var(--ba-blue);
  outline-offset:2px;
}

/* =====================================================================
   Mobile bottom tab bar (MD §2.2)
   ===================================================================== */
.m-tabbar{
  display:none;
  position:fixed;left:12px;right:12px;bottom:max(12px, env(safe-area-inset-bottom));
  z-index:50;
  height:64px;border-radius:20px;padding:6px 8px;
  align-items:stretch;justify-content:space-around;gap:4px;
  background:var(--ba-nav-bg);
  backdrop-filter:blur(var(--ba-nav-blur)) saturate(125%);
  -webkit-backdrop-filter:blur(var(--ba-nav-blur)) saturate(125%);
  border:1px solid var(--ba-nav-border);
  box-shadow:var(--ba-nav-shadow);
  color:var(--ba-ink);
}
.m-tabbar a,
.m-tabbar button{
  flex:1;min-width:44px;min-height:44px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:0;background:none;color:var(--ba-mute);text-decoration:none;
  font:550 0.62rem/1 var(--ba-f);border-radius:12px;
  transition:color var(--ba-dur-hover) var(--ba-ease);
}
.m-tabbar a.on,
.m-tabbar button.on{color:var(--ba-ink)}
.m-tabbar a.on .ico,
.m-tabbar button.on .ico{color:var(--ba-blue)}
.m-tabbar .ico{font-size:1.05rem;line-height:1}
.m-tabbar svg.ico{width:20px;height:20px}
.m-tabbar .lbl{letter-spacing:0.01em}
.m-tabbar button.stub{opacity:0.72}

@media (max-width:767px){
  .m-tabbar{display:flex}
  /* Scroll pages only — Explore (#map) manages its own bottom chrome */
  body:has(.m-tabbar):not(:has(#map)){padding-bottom:88px}
  .mode-strip:not(.sub){display:none}
  .nav-divider{display:none}
}

/* =====================================================================
   Controls
   ===================================================================== */
.ba-seg{
  display:inline-flex;align-items:center;gap:2px;padding:4px;
  border-radius:var(--ba-r-pill);
  background:var(--ba-glass-strong);
  backdrop-filter:var(--ba-blur);
  -webkit-backdrop-filter:var(--ba-blur);
  border:1px solid var(--ba-glass-border);
  box-shadow:var(--ba-shadow);
}
.ba-seg button{
  border:0;background:none;cursor:pointer;white-space:nowrap;
  border-radius:var(--ba-r-pill);padding:7px 14px;
  font:550 0.74rem/1 var(--ba-f);color:var(--ba-ink-2);
  transition:background var(--ba-dur-hover) var(--ba-ease), color var(--ba-dur-hover) var(--ba-ease);
}
.ba-seg button:hover{color:var(--ba-ink);background:rgba(255,255,255,0.08)}
.ba-seg button.on{background:var(--ba-blue);color:#fff;box-shadow:0 4px 14px rgba(22,119,255,0.32)}

.ba-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:var(--ba-r-pill);cursor:pointer;white-space:nowrap;
  padding:11px 20px;font:600 0.8rem/1 var(--ba-f);
  transition:background var(--ba-dur-hover) var(--ba-ease), box-shadow var(--ba-dur-hover) var(--ba-ease),
             transform 150ms var(--ba-ease), color var(--ba-dur-hover) var(--ba-ease);
}
.ba-btn:active{transform:scale(0.98)}
.ba-btn-primary{background:var(--ba-blue);color:#fff;box-shadow:0 4px 14px rgba(22,119,255,0.35)}
.ba-btn-primary:hover{background:var(--ba-blue-deep);box-shadow:var(--ba-accent-glow)}
.ba-btn-glass{
  background:var(--ba-glass-fill);color:var(--ba-ink);
  border:1px solid var(--ba-glass-border);
  backdrop-filter:var(--ba-blur);
  -webkit-backdrop-filter:var(--ba-blur);
}
.ba-btn-glass:hover{background:var(--ba-glass-fill-2)}
.ba-btn-light{
  background:var(--ba-card);color:var(--ba-l-ink-2);
  border:1px solid var(--ba-l-line);box-shadow:var(--ba-l-shadow);
}
.ba-btn-light:hover{
  color:var(--ba-blue-deep);
  border-color:var(--ba-accent-line);
  background:linear-gradient(180deg,var(--ba-accent-tint),rgba(255,255,255,0.9));
  box-shadow:var(--ba-accent-glow);
}

.ba-iconbtn{
  width:40px;height:40px;flex-shrink:0;
  border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:var(--ba-glass-strong);color:var(--ba-ink-2);
  backdrop-filter:var(--ba-blur);
  -webkit-backdrop-filter:var(--ba-blur);
  border:1px solid var(--ba-glass-border);
  transition:color var(--ba-dur-hover) var(--ba-ease), background var(--ba-dur-hover) var(--ba-ease);
}
.ba-iconbtn:hover{color:var(--ba-ink);background:rgba(255,255,255,0.12)}

/* =====================================================================
   Card archetypes (MD §5) — Media · Information · Glass
   ===================================================================== */
.ba-surface{background:var(--ba-paper);color:var(--ba-l-ink)}

.ba-card,
.ba-info-panel{
  position:relative;
  background:var(--ba-card);
  border:1px solid var(--ba-l-line-soft);
  border-radius:var(--ba-r-card);
  box-shadow:var(--ba-l-shadow);
  padding:var(--space-5) var(--space-6);
  transition:transform var(--ba-dur-hover) var(--ba-ease), box-shadow var(--ba-dur-hover) var(--ba-ease),
             border-color var(--ba-dur-hover) var(--ba-ease), background var(--ba-dur-hover) var(--ba-ease);
}
.ba-card{padding:0;overflow:hidden}
.ba-card.is-interactive{cursor:pointer}
.ba-card.is-interactive:hover{
  transform:translateY(calc(var(--ba-lift) * -1));
  border-color:var(--ba-accent-line);
  background:linear-gradient(180deg,var(--ba-accent-tint),rgba(255,255,255,0.94));
  box-shadow:var(--ba-l-shadow-lg), var(--ba-accent-ring), var(--ba-accent-glow);
}
.ba-card.is-selected{
  border-color:var(--ba-blue);
  background:linear-gradient(180deg,rgba(47,140,255,0.1),rgba(255,255,255,0.96));
  box-shadow:var(--ba-l-shadow-lg), 0 0 0 1px var(--ba-blue), var(--ba-accent-glow);
}

/* ---- Media card (MD §5.1) — boats · places · events · trips · groups · highlights ---- */

/* Shared consumer provenance chips + media stack hierarchy */
.ba-provenance-chip{
  display:inline-flex;align-items:center;max-width:calc(100% - 20px);
  padding:4px 10px;border-radius:999px;
  font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;
  color:#041820;background:rgba(244,241,234,.92);border:1px solid rgba(216,216,209,.9);
}
.ba-provenance-chip--on-media{
  position:absolute;left:12px;bottom:12px;z-index:2;
  color:#fff;background:rgba(4,24,32,.72);border-color:rgba(255,255,255,.18);
}
.ba-media-stack{display:flex;flex-direction:column;gap:8px}
.ba-media-title{margin:0}
.ba-media-meta,.ba-media-lede,.ba-media-foot{margin:0}

.ba-media-card{
  position:relative;display:flex;flex-direction:column;
  border-radius:var(--ba-r-media);overflow:hidden;
  background:var(--ba-card);
  border:1px solid var(--ba-l-line-soft);
  box-shadow:var(--ba-l-shadow);
  color:var(--ba-l-ink);
  cursor:pointer;
  transition:
    transform var(--ba-dur-hover) var(--ba-ease),
    box-shadow var(--ba-dur-hover) var(--ba-ease),
    border-color var(--ba-dur-hover) var(--ba-ease);
}
.ba-media-card:hover{
  transform:translateY(calc(var(--ba-lift) * -1));
  box-shadow:var(--ba-l-shadow-lg);
  border-color:var(--ba-accent-line);
}
.ba-media-card:focus-visible{
  outline:2px solid var(--ba-blue);
  outline-offset:3px;
}
a.ba-media-card{text-decoration:none;color:inherit}

/* Media frame — img, background-image, or SVG plate */
.ba-media-card .ba-media,
.ba-media-card .thumb,
.ba-media-card .art{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:var(--ocean-800) center/cover no-repeat;
  isolation:isolate;
}
.ba-media-card .ba-media--16x9,
.ba-media-card .thumb.ba-media--16x9{aspect-ratio:16/9}
.ba-media-card .ba-media--square{aspect-ratio:1}
.ba-media-card .ba-media img,
.ba-media-card .thumb img,
.ba-media-card .art img,
.ba-media-card .art svg{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--ba-dur-hover) var(--ba-ease);
}
.ba-media-card .art svg{object-fit:contain}
.ba-media-card:hover .ba-media img,
.ba-media-card:hover .thumb img,
.ba-media-card:hover .art img,
.ba-media-card:hover .art svg{transform:scale(var(--ba-zoom))}
.ba-media-card:hover .ba-media.is-bg,
.ba-media-card:hover .thumb{background-size:cover} /* bg zoom via ::before */

/* Photo grade — filter only raster/SVG children so chips stay crisp.
   Background-image thumbs get cool Deep Ocean / Sea Glass veils instead. */
.ba-media-card .ba-media::before,
.ba-media-card .thumb::before,
.ba-media-card .art::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    var(--ba-photo-tint),
    var(--ba-photo-veil);
  mix-blend-mode:var(--ba-photo-mix);
}
.ba-media-card .ba-media::after,
.ba-media-card .thumb::after,
.ba-media-card .art::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--ba-photo-scrim-bottom);
}
.ba-media-card .ba-media img,
.ba-media-card .thumb img,
.ba-media-card .art img,
.ba-media-card .art > svg{
  filter:var(--ba-photo-filter);
}
.ba-media-card .ba-media > :not(img),
.ba-media-card .thumb > :not(img),
.ba-media-card .art > :not(img):not(svg){
  position:relative;z-index:2;
}

.ba-media-card .ba-media-body,
.ba-media-card .body,
.ba-media-card .event-body{
  padding:var(--space-4) var(--space-5) var(--space-5);
  display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;
}
.ba-media-card h3,
.ba-media-card .ba-media-title{
  font:650 1.02rem/1.25 var(--ba-f);letter-spacing:-0.02em;color:var(--ba-l-ink);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ba-media-card .ba-media-meta,
.ba-media-card .ba-media-lede{
  margin:0;font:var(--ba-small);color:var(--ba-l-mute);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ba-media-card .ba-media-lede{color:var(--ba-l-ink-2);-webkit-line-clamp:3}
.ba-media-card .ba-media-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:12px;border-top:1px solid var(--ba-l-line-soft);
}
.ba-media-card .ba-media-pill{
  display:inline-flex;align-items:center;
  padding:4px 8px;border-radius:6px;
  /* AA: deep blue on tinted chip (≥4.5:1) */
  background:rgba(7,80,204,0.12);color:#0750cc;
  font:600 0.68rem/1 var(--ba-f);
}

/* Status / condition chips on photography */
.ba-media-chip{
  position:absolute;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:8px;
  font:650 0.65rem/1 var(--ba-f);letter-spacing:0.01em;color:#eef3f8;
  background:rgba(10,18,28,0.62);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,0.14);
}
.ba-media-chip--tl{top:10px;left:10px}
.ba-media-chip--tr{top:10px;right:10px}
.ba-media-chip--bl{left:10px;bottom:10px}
.ba-media-chip--br{right:10px;bottom:10px}
.ba-media-chip .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ba-media-chip.good .dot,
.ba-media-chip--good .dot{background:var(--ba-good);box-shadow:0 0 0 3px rgba(40,183,107,0.2)}
.ba-media-chip.warn .dot,
.ba-media-chip--warn .dot{background:var(--ba-warn);box-shadow:0 0 0 3px rgba(233,162,59,0.2)}
.ba-media-chip.watch .dot,
.ba-media-chip--watch .dot{background:#f0b429;box-shadow:0 0 0 3px rgba(240,180,41,0.18)}
.ba-media-chip--fav{background:rgba(37,99,235,0.92);border-color:transparent}
.ba-media-chip--good-fill{background:rgba(40,183,107,0.92);border-color:transparent}
.ba-media-chip--warn-fill{background:rgba(233,162,59,0.92);border-color:transparent}
.ba-media-chip--mute-fill{background:rgba(100,116,132,0.88);border-color:transparent}
.ba-media-chip--accent{background:rgba(47,140,255,0.9);border-color:transparent}

/* Overlay / editorial tile — caption sits on the image (highlights) */
.ba-media-card--overlay{
  min-height:180px;
}
.ba-media-card--overlay > .ba-media,
.ba-media-card--overlay > .thumb,
.ba-media-card--overlay > .bg{
  position:absolute;inset:0;aspect-ratio:auto;min-height:100%;
  background-size:cover;background-position:center;
  transition:transform 0.5s var(--ba-ease);
}
.ba-media-card--overlay:hover > .ba-media,
.ba-media-card--overlay:hover > .thumb,
.ba-media-card--overlay:hover > .bg{transform:scale(var(--ba-zoom))}
.ba-media-card--overlay > .ba-media::before,
.ba-media-card--overlay > .bg::before,
.ba-media-card--overlay > .thumb::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    var(--ba-photo-tint),
    var(--ba-photo-veil);
  mix-blend-mode:var(--ba-photo-mix);
}
.ba-media-card--overlay > .ba-media::after,
.ba-media-card--overlay > .thumb::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    var(--ba-photo-scrim-bottom),
    linear-gradient(180deg, transparent 22%, rgba(3,13,25,0.9));
}
.ba-media-card--overlay > .veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    var(--ba-photo-scrim-bottom),
    linear-gradient(180deg, transparent 22%, rgba(3,13,25,0.9));
}
.ba-media-card--overlay .ba-media-cap,
.ba-media-card--overlay .cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:14px 15px 15px;color:var(--ba-ink);
}
.ba-media-card--overlay .ba-media-cap .ba-eyebrow,
.ba-media-card--overlay .cap .hl-kind{
  display:inline-flex;align-items:center;gap:6px;
  font:650 0.6rem/1 var(--ba-f);letter-spacing:0.12em;text-transform:uppercase;
  color:#7db4ff;margin-bottom:8px;
}
.ba-media-card--overlay h3,
.ba-media-card--overlay .ba-media-title{color:#fff;-webkit-line-clamp:3}
.ba-media-card--overlay .ba-media-meta,
.ba-media-card--overlay .by{color:rgba(238,243,248,0.82);margin-top:4px}

/* Activity / text-only media card (no photo) */
.ba-media-card--activity{
  background:var(--ba-card);cursor:default;
}
.ba-media-card--activity:hover{transform:none;border-color:var(--ba-l-line-soft);box-shadow:var(--ba-l-shadow)}
.ba-media-card--activity .ba-media,
.ba-media-card--activity .bg,
.ba-media-card--activity .veil{display:none !important}
.ba-media-card--activity .ba-media-cap,
.ba-media-card--activity .cap{
  position:relative;color:var(--ba-l-ink);padding:16px;
}
.ba-media-card--activity h3{color:var(--ba-l-ink)}
.ba-media-card--activity .hl-kind{color:var(--ba-blue-deep)}

/* Create / dashed empty state */
.ba-media-card--create{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:240px;gap:10px;text-align:center;padding:20px;
  background:linear-gradient(180deg, rgba(47,140,255,0.07), #fff);
  border-style:dashed;border-color:rgba(47,140,255,0.38);
  cursor:pointer;
}
.ba-media-card--create:hover{
  border-color:rgba(47,140,255,0.55);
  background:linear-gradient(180deg, rgba(47,140,255,0.1), #fff);
}
.ba-media-card--create .ba-media-plus{
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;font:700 1.5rem/1 var(--ba-f);color:var(--ba-blue);
  background:rgba(47,140,255,0.12);border:1px solid rgba(47,140,255,0.32);
}
.ba-media-card--create h3{color:var(--ba-blue-deep);-webkit-line-clamp:unset}

/* Variant aspect / intent hooks (pages may combine) */
.ba-media-card--boat .ba-media,
.ba-media-card--boat .thumb,
.ba-media-card--boat .art{aspect-ratio:16/9}
.ba-media-card--place .ba-media,
.ba-media-card--place .thumb{aspect-ratio:16/10}
.ba-media-card--event .ba-media,
.ba-media-card--event .thumb{aspect-ratio:16/10}
.ba-media-card--trip .ba-media,
.ba-media-card--trip .thumb{aspect-ratio:16/10}
.ba-media-card--group .ba-media,
.ba-media-card--group .thumb{aspect-ratio:16/9}

/* =====================================================================
   Photo grading utilities (MD §9) — CSS-only cool marine treatment
   ===================================================================== */
.ba-photo-grade{
  position:relative;isolation:isolate;
}
.ba-photo-grade::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--ba-photo-veil);
  mix-blend-mode:var(--ba-photo-mix);
}
.ba-photo-grade > img,
.ba-photo-grade.is-bg{
  filter:var(--ba-photo-filter);
}
/* When the graded node IS the background image element */
.ba-photo-grade[style*="background-image"],
.ba-photo-grade.is-bg{
  filter:var(--ba-photo-filter);
}

.ba-photo-scrim,
.ba-hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--ba-photo-scrim-hero);
}
.ba-photo-scrim--bottom{background:var(--ba-photo-scrim-bottom)}
.ba-photo-scrim--top{background:var(--ba-photo-scrim-top)}
.ba-photo-scrim--fade-paper{
  background:
    var(--ba-hero-overlay),
    linear-gradient(180deg, transparent 55%, rgba(3,13,25,0.72) 82%, var(--ba-paper) 100%);
}

/* Apply grade to immersive hero media nodes (siblings of copy — filter OK) */
.ba-hero-immersive .ba-hero-media,
.hero-media.ba-photo-grade{
  filter:var(--ba-photo-filter);
}
.ba-hero-immersive .ba-hero-media::before,
.hero-media.ba-photo-grade::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--ba-photo-tint);
  mix-blend-mode:soft-light;
  filter:none;
}
.ba-hero-immersive .ba-hero-media::after{
  background:
    var(--ba-hero-overlay),
    linear-gradient(180deg, transparent 55%, rgba(3,13,25,0.72) 82%, var(--ba-paper) 100%);
}

/* Featured boat / large media plate */
.ba-media-feature{
  position:relative;overflow:hidden;border-radius:var(--ba-r-media);min-height:300px;
  background:var(--ocean-800) center/cover no-repeat;
  border:1px solid var(--ba-l-line-soft);
  isolation:isolate;
}
.ba-media-feature::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    var(--ba-photo-tint),
    var(--ba-photo-veil);
  mix-blend-mode:var(--ba-photo-mix);
}
.ba-media-feature::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--ba-photo-scrim-bottom);
}
.ba-media-feature .ba-media-cap,
.ba-media-feature .boat-hero-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:18px 18px 16px;color:var(--ba-ink);
}

.ba-glass-metric{
  padding:14px 14px 13px;border-radius:16px;
  background:var(--ba-glass);
  backdrop-filter:var(--ba-blur);
  -webkit-backdrop-filter:var(--ba-blur);
  border:1px solid var(--ba-glass-border);
  box-shadow:var(--ba-shadow);
  transition:transform var(--ba-dur-hover) var(--ba-ease), border-color var(--ba-dur-hover) var(--ba-ease);
}
.ba-glass-metric:hover{
  transform:translateY(-2px);
  border-color:rgba(47,140,255,0.4);
}
.ba-glass-metric b{
  display:block;font:750 1.35rem/1 var(--ba-f);letter-spacing:-0.03em;color:#fff;margin-bottom:6px;
}
.ba-glass-metric span{
  display:block;font:500 0.68rem/1.25 var(--ba-f);color:var(--ba-ink-2);
}

/* =====================================================================
   Heroes
   ===================================================================== */
.ba-hero-immersive{
  position:relative;
  min-height:clamp(520px, 62vh, 680px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--ba-page-pad) var(--space-7);
  overflow:hidden;isolation:isolate;
  color:var(--ba-ink);background:var(--ba-void);
}
.ba-hero-immersive .ba-hero-media{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
}
.ba-hero-immersive .ba-hero-media::after{
  content:"";position:absolute;inset:0;
  background:var(--ba-hero-overlay);
}
.ba-hero-compact{
  position:relative;
  min-height:clamp(220px, 28vh, 300px);
  padding:var(--space-7) var(--ba-page-pad) var(--space-6);
  background:
    radial-gradient(900px 280px at 88% 20%, rgba(47,140,255,0.10), transparent 55%),
    linear-gradient(180deg, var(--ba-paper) 0%, var(--ba-paper-2) 100%);
  color:var(--ba-l-ink);
  border-bottom:1px solid var(--ba-l-line-soft);
}
.ba-hero-compact h1{font:var(--ba-h2);letter-spacing:-0.03em;margin:0 0 8px}
.ba-hero-compact .ba-hero-lede{font:var(--ba-body);color:var(--ba-l-ink-2);max-width:42ch}

.ba-section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:var(--space-5);flex-wrap:wrap;
}
.ba-section-head h2{
  font:650 clamp(1.35rem, 2.2vw, 1.75rem)/1.15 var(--ba-f);letter-spacing:-0.03em;
  color:var(--ba-l-ink);
}
.ba-section-head p{font:var(--ba-small);color:var(--ba-l-mute);max-width:48ch}

.ba-carousel{
  display:flex;gap:var(--space-4);overflow-x:auto;
  scroll-snap-type:x mandatory;padding-bottom:var(--space-3);
  scrollbar-width:thin;
}
.ba-carousel > *{flex:0 0 min(280px, 78vw);scroll-snap-align:start}

/* =====================================================================
   Light chips / tabs / crumbs
   ===================================================================== */
.ba-chip{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--ba-l-line-soft);border-radius:var(--ba-r-pill);
  background:var(--ba-card);color:var(--ba-l-ink-2);
  padding:6px 12px;font:500 0.75rem/1.15 var(--ba-f);
  transition:border-color var(--ba-dur-hover) var(--ba-ease), background var(--ba-dur-hover) var(--ba-ease),
             box-shadow var(--ba-dur-hover) var(--ba-ease), color var(--ba-dur-hover) var(--ba-ease);
}
.ba-chip:hover{
  border-color:var(--ba-accent-line);
  background:linear-gradient(180deg,var(--ba-accent-tint),#fff);
  box-shadow:var(--ba-accent-ring);
  color:var(--ba-l-ink);
}
.ba-chip em{font-style:normal;color:var(--ba-l-mute);font-size:0.7rem}
.ba-chip.is-flagged{border-color:#e4b45c;background:#fff7e8}
.ba-chip.is-flagged em{color:var(--ba-warn)}

.ba-tabs{display:flex;gap:2px;border-bottom:1px solid var(--ba-l-line-soft)}
.ba-tabs button,
.ba-tabs a{
  position:relative;border:0;background:none;cursor:pointer;text-decoration:none;
  padding:12px 14px;font:500 0.82rem/1 var(--ba-f);color:var(--ba-l-mute);
  transition:color var(--ba-dur-hover) var(--ba-ease);
}
.ba-tabs button:hover,
.ba-tabs a:hover{color:var(--ba-l-ink-2)}
.ba-tabs button:hover::after,
.ba-tabs a:hover::after{
  content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;
  border-radius:2px;background:var(--ba-l-line);
}
.ba-tabs button.on,
.ba-tabs a.on{color:var(--ba-l-ink);font-weight:650}
.ba-tabs button.on::after,
.ba-tabs a.on::after{
  content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;
  border-radius:2px;background:var(--ba-blue);
}

.ba-eyebrow{
  font:650 0.6rem/1 var(--ba-f);letter-spacing:0.2em;text-transform:uppercase;
  color:var(--ba-blue);
}
.ba-crumbs{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font:500 0.7rem/1 var(--ba-f);color:var(--ba-l-mute);
}
.ba-crumbs a{color:var(--ba-l-mute);text-decoration:none}
.ba-crumbs a:hover{color:var(--ba-blue)}

/* =====================================================================
   Nav responsiveness
   ===================================================================== */
@media (max-width:1199px){
  .nav-search-wrap{max-width:320px}
  .nav{gap:8px;padding:0 14px}
}
@media (max-width:1024px){
  .mode-strip a.stub,.mode-strip button.stub{display:none}
  .loc-control select{max-width:74px}
  .near{padding:0 11px}
}
@media (max-width:960px){
  .nav-wrap{padding:10px 10px 0}
  .mode-strip a,.mode-strip button{padding:8px 8px 10px;font-size:0.72rem}
  .nav-center{max-width:none}
  .near{display:none}
  .nav-icon:not(.m-layers-btn){display:none}
  .loc-control input{width:84px}
}
@media (max-width:720px){
  .loc-control{padding:0 10px;gap:6px}
  .loc-control select{display:none}
  .loc-control input{width:72px}
  .nav{height:58px}
}
@media (max-width:560px){
  .wordmark b{display:none}
  .nav{gap:6px;padding:0 10px}
  .nav-avatar{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important}
  .ba-media-card:hover .ba-media img,
  .ba-media-card:hover .thumb img,
  .ba-media-card:hover .art img,
  .ba-media-card:hover .art svg,
  .ba-media-card--overlay:hover .ba-media,
  .ba-media-card--overlay:hover .bg{transform:none}
}