/* ==========================================================================
   MOBILE SHELF COLLAPSE — "Browse the work" (#home-brands), 2026-08-17
   ==========================================================================
   Founder: the shelf runs too long on a phone/tablet. panel-brands.css:1412-
   1418 already documents why it flows instead of scrolling internally below
   900px — the glass rig unstacks and the PAGE becomes the only scroller, on
   purpose, so a phone never gets two scrollers fighting for the same space.

   This layer does NOT reintroduce a nested scroller. It caps how much of
   that flow renders before a tap — a collapsed peek (~2 rows) with a fade and
   a "Show more" pill, both patched on top via bto-js/shelf-collapse.js. The
   geometry/look lives here; the toggle behaviour lives there.

   Loaded on index.html only — #home-brands does not exist on any other page.
   ========================================================================== */
@media (max-width: 900px) {
  .bw-panel .bw-gridwrap {
    position: relative;
    transition: max-height .45s cubic-bezier(.22, 1, .36, 1);
  }

  /* ~2 rows at the measured 109px pitch (91px tile + 18px row-gap) + the
     wrapper's own 17.6px top padding, plus a few px so row 3 peeks in as a
     "there is more" cue instead of a clean, easy-to-miss cut. */
  .bw-panel .bw-gridwrap.bws-collapsed {
    max-height: 254px;
    overflow: hidden;
  }

  .bw-panel .bw-gridwrap.bws-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72px;
    /* matches the tile's own scrim tone (panel-brands.css §7, .bw-tile::after
       fades to rgba(19,24,27,.94)) so the cut reads as part of the same glass,
       not a mismatched overlay. */
    background: linear-gradient(180deg, rgba(19, 24, 27, 0) 0%, rgba(19, 24, 27, .92) 78%);
    pointer-events: none;
  }

  .bws-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    padding: 13px 20px;
    min-height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(240, 238, 235, .22);
    background: rgba(240, 238, 235, .06);
    color: var(--bw-ink, #F0EEEB);
    font-family: "Neue Montreal", "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .01em;
    cursor: pointer;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: border-color .25s ease, background .25s ease;
  }
  .bws-toggle:hover,
  .bws-toggle:focus-visible {
    border-color: rgba(255, 191, 101, .5);
    background: rgba(240, 238, 235, .1);
  }
  .bws-toggle:focus-visible { outline: 2px solid var(--bw-amber, #FFBF65); outline-offset: 2px; }

  .bws-toggle svg {
    width: 15px;
    height: 15px;
    flex: none;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
  }
  .bws-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

  /* hidden entirely when a filter/drill result already fits inside the
     collapsed cap — no fake "show more" over three tiles */
  .bws-toggle[hidden] { display: none; }
}