/* ============================================================
   mobile.css
   The whole mobile layer, one file, media queries over the SAME
   HTML (design-decisions-mobile.md). Loaded LAST so it wins the
   cascade; every value comes from tokens.css. Breakpoint 768px:
   at/above it the desktop layout is untouched. No JavaScript: the
   header, search and filter toggles are the checkbox hack.
   ============================================================ */
@media (max-width: 768px) {

  /* ---- container -------------------------------------------- */
  .rfi-wrap { padding: 0 16px 24px; }
  .rfi-wrap > .rfi-masthead { margin: 12px 0 18px; }
  .rfi-wrap > .rfi-topslot,
  .rfi-wrap > .rfi-topslot + .rfi-masthead { margin-top: 12px; }

  /* ============================================================
     HEADER: one white card becomes three stacked bands. The order
     is set here (utility 1, plate 2, drawer 3); the markup order is
     navcb, plate, nav, right. Two bugs the doc calls out: the fixed
     height + overflow:hidden must be released, and the logo SVG needs
     an explicit width (auto computes to 0 in a nested container).
     ============================================================ */
  .rfi-masthead {
    background: transparent; box-shadow: none; padding: 0;
    height: auto; overflow: visible;
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  }

  /* band 1 -- utility strip on the grey ground (the right zone) */
  .rfi-masthead__right { order: 1; width: 100%; margin: 0; gap: 8px; flex: none; align-self: auto; min-width: 0; }
  .rfi-masthead__lupe {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none;
    background: var(--rfi-surface); border-radius: var(--rfi-radius); box-shadow: var(--rfi-shadow);
  }
  .rfi-masthead__lupe svg { fill: var(--rfi-text-3); }
  .rfi-masthead__search { display: none; }
  .rfi-masthead__div, .rfi-masthead__lang { display: none; }
  .rfi-masthead__auth { margin-left: auto; gap: 8px; flex: none; }
  .rfi-masthead__auth .rfi-btn { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }

  /* lupe expands ONE full-width field with a close; the lupe and the
     Subscribe/Sign-in pair hide while it is open (no two search boxes). */
  .rfi-masthead__searchcb:checked ~ .rfi-masthead__lupe { display: none; }
  .rfi-masthead__searchcb:checked ~ .rfi-masthead__search {
    display: flex; flex: 1; height: 44px; padding: 0 12px; margin: 0;
    background: var(--rfi-surface); box-shadow: var(--rfi-shadow); border-radius: var(--rfi-radius);
  }
  .rfi-masthead__searchcb:checked ~ .rfi-masthead__search input { display: block; width: 100%; }
  .rfi-masthead__searchcb:checked ~ .rfi-masthead__auth { display: none; }
  .rfi-masthead__searchclose { /* revealed only while search is open */ }
  .rfi-masthead__searchcb:checked ~ .rfi-masthead__searchclose {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none; color: var(--rfi-text-3);
    font-size: 26px; line-height: 1;
  }

  /* band 2 -- white plate: logo (no tagline) + burger */
  .rfi-masthead__plate {
    order: 2; width: 100%; justify-content: space-between;
    background: var(--rfi-surface); box-shadow: var(--rfi-shadow); border-radius: var(--rfi-radius);
    padding: 12px 16px;
  }
  .rfi-masthead__tag { display: none; }
  .rfi-masthead__mark { height: 27px; width: 150px; }   /* explicit width: auto -> 0 in some engines */
  .rfi-masthead__burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 11px; flex: none;
  }
  .rfi-masthead__burger span { display: block; height: 2px; background: var(--rfi-navy); border-radius: 2px; }

  /* band 3 -- drawer: the same nav, restacked, revealed by the burger */
  .rfi-masthead__nav {
    order: 3; display: none; width: 100%; flex-direction: column;
    background: var(--rfi-surface); box-shadow: var(--rfi-shadow); border-radius: var(--rfi-radius);
    padding: 4px 16px 8px; gap: 0;
  }
  .rfi-masthead__navcb:checked ~ .rfi-masthead__nav { display: flex; }
  .rfi-masthead__nav a {
    font-size: 17px; font-weight: 600; color: var(--rfi-text);
    padding: 13px 2px; border-bottom: 1px solid var(--rfi-border-soft);
    min-height: 44px; display: flex; align-items: center; white-space: normal;
  }
  .rfi-masthead__nav a.is-active { color: var(--rfi-orange-text); }
  .rfi-masthead__navlang { display: block; padding: 10px 2px 2px; }
  .rfi-masthead__navlang-lab {
    display: block; font-family: var(--rfi-font-text); font-size: 11px;
    letter-spacing: 1px; text-transform: uppercase; color: var(--rfi-text-3); margin-bottom: 2px;
  }
  .rfi-masthead__navlang a, .rfi-masthead__navlang-solo {
    display: block; min-height: 44px; padding: 11px 2px;
    font-family: var(--rfi-font-ui); font-size: 15px; color: var(--rfi-text-2);
  }
  .rfi-masthead__navlang a.is-active { color: var(--rfi-navy); font-weight: 600; }

  /* ============================================================
     LAYOUT: every page grid to one stretched column. STRETCH is
     load-bearing: without it the content column sizes to its content
     and a long headline pushes the page wider than the viewport.
     ============================================================ */
  .rfi-grid4 { display: flex; flex-direction: column; align-items: stretch; }
  .rfi-span3 { order: 1; width: 100%; min-width: 0; }
  .rfi-rail  { order: 2; width: 100%; margin-top: 24px; position: static; }
  .rfi-grid3, .rfi-grid2, .rfi-feed { grid-template-columns: 1fr; gap: 14px; }
  .rfi-home__two { grid-template-columns: 1fr; }

  /* Nothing wider than the viewport. */
  img, svg, video, iframe, table { max-width: 100%; }

  /* ---- cards: one per row, a touch larger title --------------- */
  .rfi-card__title { font-size: 17px; }

  /* ============================================================
     DETAIL: the 720px reading measure is released to the full width.
     ============================================================ */
  .rfi-article__read,
  .rfi-article__figure,
  .rfi-article__figure--brand,
  .rfi-article__gallery,
  .rfi-article__source,
  .rfi-tagrow,
  .rfi-aboutco,
  .rfi-inline-sub { max-width: 100%; }

  /* ============================================================
     LISTINGS: filters behind a full-width button (checkbox hack), the
     panel's rows stacked; two banners in the feed flow with breathing
     room; the rail to the tail with its first two slots deduped (they
     are the ones shown in-flow).
     ============================================================ */
  .rfi-mfilter-toggle, .rfi-filter__toggle {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 46px; margin-bottom: 14px;
    background: var(--rfi-surface); border: 1px solid var(--rfi-border); border-radius: var(--rfi-radius);
    font-family: var(--rfi-font-ui); font-size: 15px; font-weight: 600; color: var(--rfi-navy); cursor: pointer;
  }
  .rfi-mfilter-toggle::before, .rfi-filter__toggle::before { content: '\2699'; font-size: 16px; }
  .rfi-listing__filter { display: none; margin-bottom: 14px; }
  .rfi-mfilter-cb:checked ~ .rfi-listing__filter { display: block; }

  /* Companies: the collapsible panel. The name search (above the button, still the
     first child of the wired root) stays visible; the filters below it collapse. The
     inline button carries no bottom margin because the collapse body owns the gap. */
  .rfi-filter__toggle { margin-bottom: 0; margin-top: 4px; }
  .rfi-filter__search { margin-bottom: 14px; }
  .rfi-filter__collapse { display: none; margin-top: 14px; }
  .rfi-filter__togglecb:checked ~ .rfi-filter__collapse { display: block; }
  /* Inside the open panel: label above chips, all chips shown (drop the +more
     expander), the view switch full width. Tap targets on chips and switch. */
  .rfi-filter__group { flex-direction: column; align-items: stretch; gap: 8px; }
  .rfi-filter__label { width: auto; padding-top: 0; }
  .rfi-filter__chips.is-collapsed { max-height: none; }
  .rfi-chip--expand { display: none; }
  .rfi-chip, .rfi-switch button { min-height: 40px; }
  .rfi-switch { width: 100%; }
  .rfi-filter__result { flex-wrap: wrap; gap: 10px; }
  .rfi-filter__drops { flex-direction: column; align-items: stretch; }
  .rfi-select, .rfi-select select { width: 100%; }

  /* In-flow feed banners: same rule as the rail. No plate and no min-height, so the block is
     exactly as tall as the creative; the margin keeps it off the neighbouring cards. */
  .rfi-feed-banner { display: block; margin: 16px 0; }
  .rfi-feed-banner .rfi-banner-single { width: 100%; border-radius: var(--rfi-radius); overflow: hidden; }
  .rfi-feed-banner .rfi-banner { display: block; width: 100%; }
  .rfi-feed-banner img { display: block; width: 100%; height: auto; }

  /* The two in-flow slots are not duplicated in the rail tail on a listing. */
  .rfi-grid4--listing .rfi-rail__slot--V1,
  .rfi-grid4--listing .rfi-rail__slot--V2,
  .rfi-grid4--listing .rfi-rail__slot--EV1,
  .rfi-grid4--listing .rfi-rail__slot--EV2 { display: none; }

  /* ---- company directory row: stack to one column --------------
     Desktop is a horizontal row (logo left, body right, tier pushed right). At the
     phone width that body column is too narrow: the tier tag lands on the name and
     the spec breaks one word per line. On mobile the whole row becomes one column,
     top to bottom: logo full width, then the tier tag on its own line, the name, the
     spec (kept on its own lines, not word-per-line), and the description. */
  .rfi-colist .rfi-crow { flex-direction: column; gap: 12px; }
  .rfi-colist .rfi-crow--rich .rfi-crow__logo,
  .rfi-colist .rfi-crow--plain .rfi-crow__logo {
    width: 100%; height: auto; min-height: 72px; padding: 10px;
  }
  /* Contain, never stretch or crop: a wide banner logo scales to the card width, a
     small square one stays small and centred, both capped so a tall logo cannot
     dominate the row. */
  .rfi-colist .rfi-crow__logo img { width: auto; max-width: 100%; max-height: 96px; object-fit: contain; }
  .rfi-colist .rfi-crow__body { width: 100%; }
  .rfi-colist .rfi-crow__top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rfi-colist .rfi-crow__tier { order: -1; margin-left: 0; }   /* the tag, its own line, above the name */

  /* ---- footer: four columns to one --------------------------- */
  .rfi-footer { padding: 24px 20px; }
  .rfi-footer__cols { grid-template-columns: 1fr; gap: 20px; }
  .rfi-footer__col a { min-height: 40px; display: flex; align-items: center; }

  /* ---- touch targets on shared controls ---------------------- */
  .rfi-loadmore button { min-height: 46px; }

}