/* ===========================================================================
   Bnarrativ canonical site — shared styles
   Page-specific compositions remain inline per page (design preserved).
   This file only holds cross-page technical concerns: accessibility helpers,
   review-mode image placeholders, and the video placeholder.
   =========================================================================== */

/* ---- Accessibility: skip link ---- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:#182635; color:#e9edf1; padding:12px 18px;
  font-family:'Jost',sans-serif; font-size:14px; text-decoration:none;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---- Visible focus states everywhere (keyboard nav) ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid #e5432b; outline-offset:2px;
}

/* ---- Minimum 44px tap targets for nav/burger where practical ---- */
[data-burger]{ min-width:44px; min-height:44px; }

/* ===========================================================================
   Review-mode image placeholder  (.img-slot)
   Replaces the design tool's <image-slot>. Production-safe: no authoring
   controls, no external calls. In review mode it shows the intended-subject
   caption; in production mode (html[data-review="0"]) it collapses to a
   neutral empty frame. See IMAGE_PLACEHOLDERS.md.
   =========================================================================== */
.img-slot{
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  width:100%; height:100%; min-height:220px;
  background:#dfe5ea;
  background-image:
    repeating-linear-gradient(135deg,
      rgba(24,38,53,0.05) 0, rgba(24,38,53,0.05) 1px,
      transparent 1px, transparent 11px);
  border:1px solid rgba(24,38,53,0.22);
  color:#48545e; overflow:hidden;
}
/* When the slot fills an absolutely-positioned frame (e.g. homepage cards) */
.img-slot--fill{ position:absolute; inset:0; min-height:0; }

.img-slot__tag{
  position:absolute; top:10px; left:10px;
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:#fff; background:#182635; padding:3px 8px;
}
.img-slot__body{
  position:relative; padding:14px 16px;
  background:linear-gradient(180deg, rgba(223,229,234,0) 0%, rgba(223,229,234,0.92) 60%, rgba(223,229,234,0.98) 100%);
}
.img-slot__subject{
  font-family:'Jost',sans-serif; font-size:13px; font-weight:500;
  line-height:1.4; color:#182635; margin:0;
}
.img-slot__meta{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:10px; letter-spacing:0.03em; color:#6e7c86; margin-top:5px;
}

/* Production mode: hide review captions, show a neutral frame only. */
html[data-review="0"] .img-slot__tag,
html[data-review="0"] .img-slot__body{ display:none; }
html[data-review="0"] .img-slot{ background-image:none; background:#e2e7ec; }

/* ===========================================================================
   Video placeholder (.video-slot) — one reusable component.
   =========================================================================== */
.video-slot{
  position:relative; width:100%; aspect-ratio:16 / 9; background:#182635;
  border:1px solid #182635; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.video-slot__poster{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 42%, rgba(229,67,43,0.16), transparent 60%),
    repeating-linear-gradient(135deg, rgba(232,237,242,0.045) 0, rgba(232,237,242,0.045) 1px, transparent 1px, transparent 13px),
    #182635;
}
.video-slot__play{
  position:relative; width:74px; height:74px; border-radius:50%;
  background:#e5432b; display:flex; align-items:center; justify-content:center;
}
.video-slot__play::after{
  content:""; width:0; height:0;
  border-left:20px solid #fff; border-top:13px solid transparent; border-bottom:13px solid transparent;
  margin-left:5px;
}
.video-slot__label{
  position:absolute; left:0; right:0; bottom:0; padding:16px 20px;
  background:linear-gradient(180deg, rgba(24,38,53,0) 0%, rgba(24,38,53,0.85) 100%);
  color:#e8edf2; font-family:'Jost',sans-serif; font-size:14px; line-height:1.4;
}
.video-slot__label span{
  display:block; font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase;
  color:#9fb0c1; margin-top:6px;
}

/* ---- Reduced motion: neutralize any decorative animation ---- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ===========================================================================
   Unified global-nav responsive behavior (one shared mobile nav, all pages).
   Overrides any per-page breakpoint so behavior is identical site-wide.
   =========================================================================== */
@media (max-width:1024px){
  [data-full-nav]{ display:none !important; }
  [data-burger]{ display:inline-flex !important; }
}
@media (min-width:1025px){
  [data-mobile-menu]{ display:none !important; }
  [data-burger]{ display:none !important; }
}

/* ---- Self-hosted font fallback (works offline / if Google Fonts blocked) ---- */
@font-face{ font-family:'Jost'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('/assets/c56c897e-1645-4365-a9fe-743c6385586c.woff2') format('woff2'); }
@font-face{ font-family:'Josefin Sans'; font-style:normal; font-weight:500 700; font-display:swap;
  src:url('/assets/2dfd5aca-2d29-4c76-8a03-bb717e5d9e95.woff2') format('woff2'); }

/* ===========================================================================
   Global responsive fallbacks for shared components (footer, insights grid,
   section padding). Source pages carry their own inline rules; generated
   pages (insights hub, 404, review) rely on these. Keeps mobile consistent.
   =========================================================================== */
@media (max-width:900px){
  [data-footcols]{ grid-template-columns:1fr 1fr !important; gap:28px !important; }
  [data-insights]{ grid-template-columns:1fr !important; }
  [data-pad]{ padding-left:22px !important; padding-right:22px !important; }
}
@media (max-width:560px){
  [data-footcols]{ grid-template-columns:1fr !important; }
}
/* Safety: prevent decorative off-canvas geometry from creating scroll. */
html, body{ overflow-x:hidden; }

@media (max-width:900px){ [data-video-grid]{ grid-template-columns:1fr !important; } }