/* responsive.css — Sovereign Sampson mobile-first responsive layer.
 * Loaded after ss-blackout. All rules use !important to beat inline styles on grid containers.
 * Desktop (>1024px): zero impact — all overrides are inside @media blocks.
 * Breakpoints: tablet <=1024px, mobile <=640px.
 */

/* ─── Nav toggle: hidden on desktop ─────────────────────────────────────────── */
.ss-navtoggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  color: var(--bone);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 22px;
  line-height: 1;
  padding: 4px 10px;
  cursor: pointer;
  letter-spacing: 0;
}

/* ─── Tablet: <=1024px ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* -- Nav toggle visible; menu collapses -- */
  .ss-navtoggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Hide navmenu by default on tablet/mobile */
  .ss-navmenu {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 2px solid var(--orange);
    padding: 16px 24px;
    gap: 12px;
    z-index: 20;
  }

  /* Open state */
  .ss-navmenu.open {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Make nav items stack nicely */
  .ss-navmenu .ss-navitems {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100%;
  }

  .ss-navmenu .ss-navlink {
    display: block;
    width: 100%;
  }

  /* CTA cluster stacks too */
  .ss-navmenu > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100%;
    margin-top: 4px;
  }

  /* Make the header nav position:relative so the dropdown anchors correctly */
  .ss-nav {
    position: relative;
  }

  /* ── Overflow root-cause fix ──
   * Grid & flex items default to `min-width:auto`, which refuses to shrink below
   * their content's intrinsic width. A wide image, table, or unbreakable string
   * then blows the track PAST the viewport — horizontal overflow even though the
   * grid "collapsed". (This is why /support + /contact ran content flush off the
   * right edge — the email string + cards had no min-width:0.) The real grids
   * already self-collapse via their own mobile-first breakpoints in blackout.css,
   * so we only need to let their tracks shrink, then cap media + tables to their
   * column so nothing forces the page wider than the screen. */
  .ss-hero > *,
  .ss-bio > *,
  .ss-footer > *,
  .ss-newsletter > *,
  .ss-tiles > *,
  .ss-uasgrid > *,
  .ss-factgrid > *,
  .ss-quotegrid > *,
  .ss-rotations__grid > *,
  .ss-network > *,
  .ss-network__grid > *,
  .ss-funds > *,
  .ss-contactgrid > *,
  .ss-callcongress__grid > *,
  .ss-stats > *,
  .media-grid > *,
  .ss-cable > *,
  .ss-presscable > *,
  .ss-insignia > * {
    min-width: 0 !important;
  }

  /* Footer drops from 4 columns to 2 on tablet (brand+nav / booking+channels). */
  .ss-footer {
    grid-template-columns: 1fr 1fr !important;
  }

  img,
  iframe,
  video,
  table,
  pre {
    max-width: 100% !important;
  }

  table {
    width: 100% !important;
    table-layout: auto;
  }
}

/* ─── Mobile: <=640px ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Collapse the cable rows to a single column on phones (the content grids
     already self-collapse via their own mobile-first breakpoints). */
  .ss-cable {
    grid-template-columns: 1fr !important;
  }

  /* Fluid-scale big headlines — calmer on a phone than the 36px desktop size */
  .ss-h1 {
    font-size: clamp(20px, 5.6vw, 28px) !important;
    line-height: 1.15 !important;
  }

  /* Status bar wraps on small screens (horizontal gutter comes from the rail) */
  .ss-statusbar {
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
    padding-block: 6px !important;
  }

  /* Cable row gap and thumb when stacked */
  .ss-cable {
    gap: 12px !important;
  }

  /* Ensure stacked cable thumb column has auto width (not fixed 160px/140px) */
  .ss-cable > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Reduce section padding on mobile (horizontal gutter comes from the rail) */
  .ss-nav {
    padding-block: 10px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Hide the MOS tag (// SCOUT-SNIPER · 0317) on phones. It widened the brand to
     ~314px, pushing the hamburger onto a second row and leaving the nav's right
     edge empty (so SCOTTSDALE, AZ above looked unaligned). Without it the brand is
     ~195px and the toggle sits back on the right gutter, under SCOTTSDALE. */
  .ss-brand .bmono {
    display: none !important;
  }

  /* Ensure no element forces horizontal overflow */
  img,
  iframe,
  table {
    max-width: 100%;
  }

  /* Give footer breathing room when stacked; single column on phones */
  .ss-footer {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* hero panel padding reduction */
  .ss-hero > div {
    min-height: auto !important;
  }

  /* ── Images sized for a phone, not a desktop ──
   * Photoslots carry inline aspect ratios (hero 16:9, portrait 3:4). At full
   * mobile width a 3:4 portrait is ~130% of the screen TALL — it eats the whole
   * first screen and forces endless scrolling. Cap the rendered height and let
   * the existing object-fit:cover crop to a clean banner instead. */
  /* Let the image wrappers (display:flex / fixed-ratio) become simple full-width blocks */
  .ss-hero > div {
    display: block !important;
  }
  .photoslot {
    display: block !important;
    width: 100% !important;
    height: 44vh !important;
    max-height: 44vh !important;
    aspect-ratio: auto !important;   /* let the fixed height win over the inline ratio */
  }
  /* Small inline thumbnails (cable rows, media tiles) must stay small, not 44vh. */
  .ss-cable .photoslot,
  .media-grid .photoslot {
    height: auto !important;
    max-height: 220px !important;
    aspect-ratio: 16 / 10 !important;
  }
  .photoslot img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* ── De-clutter: tame oversized desktop vertical padding on the dossier panel ── */
  .ss-hero > div:last-child {
    padding: 24px 18px !important;
  }
}

/* ─── Global overflow safety ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body {
    overflow-x: hidden !important;
  }
}