/* ==========================================================================
   GATE CAPITAL — V3 REFINED
   06 · RESPONSIVE
   --------------------------------------------------------------------------
   Breakpoints (content-driven, not device-driven):
     xl  ≥1280  full asymmetric compositions
     lg  ≥1024  two-column holds, rail visible
     md  ≥768   compositions collapse to stacked; tables scroll
     sm  ≥480   single column, controls go full-width
     xs  <480   densest — figures step down, side stats stack

   Principle: the Net Flow hierarchy and the note-family distinction must
   survive every breakpoint. They are the two things that may never collapse
   into equal weight.
   ========================================================================== */

/* ---- ≤1280 : loosen the widest stages -------------------------------- */
@media (max-width: 1280px) {
  .hero__grid { gap: var(--s-10); }
  .cabinet { grid-template-columns: 200px minmax(0, 1fr); }
  .megamenu--wide { min-width: 560px; }
}

/* ---- ≤1024 : two-column compositions unstack ------------------------- */
@media (max-width: 1024px) {
  /* Narrow 12-col spans pair up before they stack */
  .col-3, .col-4 { grid-column: span 6; }

  .hero__grid       { grid-template-columns: 1fr; gap: var(--s-12); }
  .hero__title      { max-width: 16ch; }
  .hero__marks      { top: -22px; right: var(--s-4); }

  .sec-head--split  { grid-template-columns: 1fr; gap: var(--s-6); align-items: start; }

  .calc             { grid-template-columns: 1fr; }
  .calc__inputs     { border-right: 0; border-bottom: 1px solid var(--c-border); }

  .arb              { grid-template-columns: 1fr; }
  .cabinet__grid    { grid-template-columns: 1fr; }
  .news-item        { grid-template-columns: 110px minmax(0, 1fr); }
  .news-item__cta   { grid-column: 2; }

  .footer__grid     { grid-template-columns: 1fr 1fr; }
  .footer__col:first-child { grid-column: 1 / -1; }

  /* Ledger: keep Net Flow dominant, move the supporting counts beneath
     rather than shrinking the centre stage. */
  .ledger {
    grid-template-columns: 1fr;
    gap: var(--s-12);
  }
  .ledger__side {
    flex-direction: row;
    justify-content: space-around;
    gap: var(--s-6);
    text-align: center;
  }
  .ledger__side--right { text-align: center; align-items: center; }
  .ledger__side--left  { order: 2; }
  .ledger__side--right { order: 3; }
  .ledger__stage       { order: 1; }
  .ledger__stat        { align-items: center; }
}

/* ---- ≤768 : stacked, tables scroll ----------------------------------- */
@media (max-width: 768px) {
  :root { --header-h: 60px; --rail-h: 48px; }

  /* The 12-column grid collapses to a single column. Without this,
     figures and headings spill past the viewport and the mobile layout
     viewport widens. */
  .grid { grid-template-columns: minmax(0, 1fr); }
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-12 { grid-column: span 1; }

  .section        { padding-block: clamp(3rem, 8vw, 4.5rem); }
  .section--loose { padding-block: clamp(3.5rem, 10vw, 6rem); }

  .note-families  { grid-template-columns: 1fr; }
  .split__pane    { padding: var(--s-8); }
  .cabinet        { grid-template-columns: 1fr; }
  .cabinet__side  { border-right: 0; border-bottom: 1px solid var(--c-border); }
  .cabinet__nav   { flex-direction: row; overflow-x: auto; }

  .arb__venues    { flex-direction: column; }
  .arb__venue     { width: 100%; }

  .series-card--1,
  .series-card--2,
  .series-card--current { width: 100%; margin-left: 0; }

  .news-item      { grid-template-columns: 1fr; gap: var(--s-3); }
  .news-item__cta { grid-column: 1; }

  .horizon__row   { grid-template-columns: 1fr; gap: var(--s-2); }

  .footer__grid   { grid-template-columns: 1fr; gap: var(--s-10); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  /* Ledger figures step down but keep their ratio (net ≈ 2.4× flow) */
  .ledger__flow dd { font-size: clamp(1.5rem, 4.4vw, 2rem); }
  .ledger__side    { flex-wrap: wrap; }
}

/* ---- ≤480 : densest -------------------------------------------------- */
@media (max-width: 480px) {
  .hero__actions .btn { width: 100%; }
  .field__options     { gap: var(--s-2); }
  .option             { min-width: 0; flex: 1 1 calc(33.333% - var(--s-2)); }
  .option--compact    { flex: 1 1 auto; }

  .calc__breakdown    { grid-template-columns: 1fr 1fr; }
  .segmented          { width: 100%; justify-content: flex-start; }
  .terminal__row      { grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-3); }
  .terminal__meta     { grid-column: 1; }

  .ledger__side       { flex-direction: column; align-items: center; }
  .footer__wordmark   { font-size: 3.5rem; }
}

/* ---- Coarse pointer: no hover-open menus, larger hit areas ----------- */
@media (hover: none) {
  .btn:hover { transform: none; }
  .nav__link, .rail__item, .sheet__link { min-height: 44px; }
}

/* ---- Print: evidence sections must remain readable ------------------- */
@media print {
  .site-header, .rail, .sheet, .sheet-scrim, .marquee { display: none !important; }
  .atmos::before { display: none; }
  body { background: #fff; color: #000; }
  .card, .terminal { box-shadow: none; border: 1px solid #ccc; }
  .terminal { background: #fff; color: #000; }
  .disclosure__panel { grid-template-rows: 1fr !important; }
}

/* ==========================================================================
   FINAL RESPONSIVE PASS
   ========================================================================== */

/* ---- NOTE TERMS TABLE ------------------------------------------------- */
/* Desktop keeps the approved V1 layout. Below it the table scrolls
   horizontally with the Note column pinned, so a row is always
   identifiable. No column is removed and no value is hidden. */
@media (max-width: 1100px) {
  #notes-table .table-wrap {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* fade hint that there is more table to the right */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
  }
  .nt-table { min-width: 860px; }
  .nt-table thead th:first-child,
  .nt-table tbody th.nt-note {
    position: sticky; left: 0; z-index: 2;
    background: var(--c-bg-alt);
    box-shadow: 1px 0 0 var(--c-border);
  }
  .nt-table tbody tr:hover th.nt-note { background: var(--c-surface-muted); }
  .nt-table tbody td { scroll-snap-align: start; }
  .nt-scrollhint { display: block; }
}
@media (max-width: 640px) {
  .nt-table { min-width: 760px; }
  .nt-badge { width: 34px; height: 34px; font-size: var(--t-2xs); margin-right: var(--s-3); }
  .nt-fam { font-size: var(--t-xs); }
  .nt-table thead th { font-size: var(--t-xs); }
  .nt-table tbody td.nt-prem { font-size: var(--t-h4); }
}

/* ---- INVESTOR CABINET PREVIEW ---------------------------------------- */
.cab-appbar__brand { display: none; font-size: 1.0625rem; }

@media (max-width: 1024px) {
  /* tablet: keep the application structure, drop the rail */
  .cabinet__side { display: none; }
  /* the hidden rail must not keep reserving its grid column */
  .cabinet { grid-template-columns: minmax(0, 1fr); }
  .cab-appbar__brand { display: inline-flex; }
  /* 4 metrics no longer fit once the rail is gone */
  .cab-glance { grid-template-columns: 1fr 1fr; }
  .cab-glance__cell:nth-child(3) { border-left: 0; }
  .cab-glance__cell:nth-child(n+3) { border-top: 1px solid var(--c-border); }
  .cab-cash__grid { grid-template-columns: 1fr 1fr; }
  .cab-cash__lead { grid-column: 1 / -1; border-bottom: 1px solid rgba(255,255,255,0.10); }
  .cab-cash__cell:nth-child(2) { border-left: 0; }
  .cab-split { grid-template-columns: 1fr; }
  .cab-split__cell + .cab-split__cell { border-left: 0; border-top: 1px solid var(--c-border); }
}
@media (max-width: 768px) {
  /* mobile: a believable phone-sized product preview, not a shrunken
     desktop dashboard. Same content, same labels, same hierarchy. */
  .cabinet { border-radius: var(--r-xl); }
  .cabinet__main { padding: var(--s-5); gap: var(--s-4); }
  .cab-head { flex-direction: column; align-items: stretch; gap: var(--s-4); }
  .cab-head .btn { width: 100%; }
  .cab-head__title { font-size: 1.625rem; }
  .cab-glance { grid-template-columns: 1fr 1fr; }
  .cab-glance__cell:nth-child(3) { border-left: 0; }
  .cab-glance__cell:nth-child(n+3) { border-top: 1px solid var(--c-border); }
  .cab-cash__grid { grid-template-columns: 1fr 1fr; }
  .cab-cash__lead { grid-column: 1 / -1; border-bottom: 1px solid rgba(255,255,255,0.10); }
  .cab-cash__cell:nth-child(2) { border-left: 0; }
  .cab-split { grid-template-columns: 1fr; }
  .cab-split__cell + .cab-split__cell { border-left: 0; border-top: 1px solid var(--c-border); }
  /* panel heading gets the full width instead of wrapping beside the link */
  .cab-panel__head { flex-direction: column; gap: var(--s-2); }
  .cab-panel__head .link-arrow { align-self: flex-start; }
}

/* ---- DIMENSIONAL OBJECTS: scale down, keep the depth ------------------ */
@media (max-width: 768px) {
  .hero__marks { top: -18px; right: 0; gap: var(--s-2); }
  .token-mark      { width: 46px; height: 46px; }
  .token-mark--sm  { width: 34px; height: 34px; }
  .access-obj      { width: 76px; height: 76px; border-radius: 22px; }
  .arb__asset      { width: 54px; height: 54px; }
  /* shadows scale with the objects so depth reads the same, not heavier */
  :root {
    --e-dim:        0 34px 56px -22px rgba(87, 84, 212, 0.55);
    --e-dim-violet: 0 20px 28px -12px rgba(87, 84, 212, 0.48);
    --e-dim-green:  0 16px 14px rgba(34, 145, 108, 0.20);
    --e-dim-ink:    0 13px 11px rgba(22, 24, 47, 0.20);
    --e-dim-pink:   0 11px 9px rgba(198, 79, 148, 0.50);
  }
  .hero__instrument::before { left: 4%; right: 0; height: 40%; }
}
@media (max-width: 430px) {
  .token-mark--sm { width: 30px; height: 30px; font-size: 8px; }
  .note-card { padding: var(--s-5); }
}

/* legibility floor for badge labels */
.token-mark--sm { font-size: 10px; }

/* ---- FOUR STEPS: 4 across → 2x2 → vertical sequence with connector ---- */
@media (max-width: 1024px) {
  #how-it-works .steps { grid-template-columns: 1fr 1fr !important; gap: var(--s-8) var(--grid-gutter); }
}
@media (max-width: 640px) {
  #how-it-works .steps { grid-template-columns: 1fr !important; gap: 0; }
  #how-it-works .step { position: relative; padding: 0 0 var(--s-8) var(--s-10); border-top: 0; }
  #how-it-works .step:last-child { padding-bottom: 0; }
  /* vertical connector replaces the desktop horizontal relationship */
  #how-it-works .step::before {
    content: ""; position: absolute; left: 11px; top: 26px; bottom: 0;
    width: 1px; background: var(--c-border-strong);
  }
  #how-it-works .step:last-child::before { display: none; }
  #how-it-works .step__num {
    position: absolute; left: 0; top: 2px;
    width: 23px; height: 23px; border-radius: 50%;
    background: var(--c-accent-soft); color: var(--c-accent-text);
    display: grid; place-items: center; font-size: 10px;
  }
}

/* ---- WHAT'S NEW: 3-up → 2+1 → snap carousel with a peeking next card -- */
@media (max-width: 1024px) and (min-width: 641px) {
  .news-grid { grid-template-columns: 1fr 1fr; }
  .news-card:first-child { grid-column: 1 / -1; min-height: 280px; }
}
@media (max-width: 640px) {
  .news-grid {
    display: flex;
    gap: var(--s-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* break the stage gutter so cards run to the screen edge */
    margin-inline: calc(var(--page-gutter) * -1);
    padding-inline: var(--page-gutter);
    padding-bottom: var(--s-2);
  }
  .news-grid::-webkit-scrollbar { display: none; }
  .news-card {
    flex: 0 0 86%;              /* next card peeks in */
    scroll-snap-align: start;
    min-height: 300px;
  }
}

/* ---- FINANCIAL STATISTICS: Net Flow stays dominant at every width ----- */
@media (max-width: 640px) {
  .ledger__net-value { font-size: clamp(3rem, 13vw, 4rem); }
  .ledger__flow dd   { font-size: clamp(1.375rem, 6vw, 1.75rem); }
  .ledger__stat dd   { font-size: clamp(1.25rem, 5.5vw, 1.5rem); }
  .ledger__op        { max-width: 200px; }
}

/* ---- REGISTRY / EVIDENCE: keep dense surfaces readable, scroll locally  */
@media (max-width: 900px) {
  .terminal__body { overflow-x: auto; }
  .terminal .data-table { min-width: 620px; }
  .registry-search { flex-wrap: wrap; }
  .registry-search__input { font-size: var(--t-sm); min-width: 100%; order: 2; }
}

/* ---- FOOTER: 3 → 2 → stacked, links stay tappable -------------------- */
@media (max-width: 1024px) and (min-width: 641px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .footer__links a { font-size: var(--t-sm); padding-block: 2px; }
}

/* ---- TOUCH TARGETS --------------------------------------------------- */
@media (hover: none) {
  .btn, .tabs__btn, .segmented__btn, .option,
  .disclosure__trigger, .sheet__link, .rail__item { min-height: 44px; }
  .link-arrow { padding-block: 6px; }
}

/* Cabinet preview: desktop shows the complete Overview. Once the layout
   stacks, the lower row would turn the homepage into a multi-screen
   dashboard, so tablet/mobile present the core Overview composition —
   portfolio, allocation, supporting metrics, cash position, next
   redemption and recent activity. The full cabinet is a separate design. */
@media (max-width: 1024px) {
  .cab-lower { display: none; }
}

/* Access: stack the two options; shared infrastructure always comes after */
@media (max-width: 860px) {
  .access-choices { grid-template-columns: 1fr; }
  .access-infra__rule { height: 20px; }
}

/* ==========================================================================
   RESPONSIVE CORRECTION PASS — layout only, no content or design change
   ========================================================================== */

/* Five steps in an auto-fit grid land as 4 + 1 in the ~1024 range, orphaning
   the last one. Three-and-two is balanced for five items. */
@media (min-width: 901px) and (max-width: 1180px) {
  .steps--five { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* The registry search is a deliberate stack on small screens: input first,
   action second. */
@media (max-width: 768px) {
  .registry-search { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .registry-search__input { order: -1; }
  .registry-search .btn { align-self: flex-start; }
}

/* Tab labels here are full sentences; a fixed 40px pill clips them at 320/390.
   Let the control grow instead of truncating the wording. */
@media (max-width: 480px) {
  .tabs__btn {
    height: auto; min-height: 44px;
    padding-block: var(--s-3);
    white-space: normal; text-align: left; line-height: 1.3;
  }
}

/* The terminal row's three columns cannot fit 320 — OPEN was pushed 37px past
   the panel. Stack the row and let the meta wrap. */
@media (max-width: 430px) {
  .terminal__row { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .terminal__row > * { justify-self: start; }
  .terminal__meta { white-space: normal; }
}

/* Small wrapping polish flagged in visual QA — no copy changes. */
.cab-note__when, .cab-split__meta { text-wrap: pretty; }