/* =============================================================
   Bud — Product Overview Films · shared static styles
   Films: Bud Studio · Bud Model Foundry · Bud Cache
   Everything visual is inline in the film markup; this file
   carries only what inline styles cannot: the sr-only utility
   and the narrow-screen (≤860px) treatment, per the brief
   ("bake in, don't retrofit").
   ============================================================= */

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- narrow-screen treatment (≤860px) — all three films ---------- */
@media (max-width: 860px){
  [data-sf-film], [data-mf-film], [data-cf-film]{
    aspect-ratio: auto !important;
    min-height: 620px !important;
  }

  /* Beat A — drop the stack column, single column of text */
  [data-sf-film] .ff-a-stackcol,
  [data-mf-film] .ff-a-stackcol,
  [data-cf-film] .ff-a-stackcol{ display:none !important; }
  [data-sf-film] .ff-a-grid,
  [data-mf-film] .ff-a-grid,
  [data-cf-film] .ff-a-grid{
    grid-template-columns: 1fr !important;
    padding: 36px 28px !important;
    gap: 0 !important;
  }

  /* Beat B — drop secondary labels, stack columns */
  .sf-b-grid{ grid-template-columns: 1fr !important; gap: 16px !important; padding: 32px 24px !important; }
  .sf-net{ min-height: 300px !important; }
  .sf-side{ display:none !important; }
  .mf-b-wrap{ padding: 32px 24px !important; }
  .mf-lanesub{ display:none !important; }
  .cf-b-wrap{ padding: 32px 20px !important; }
  .cf-lanelab{ display:none !important; }
  .cf-cap{ font-size: 11.5px !important; }

  /* Beat C — cluster stacks over the detail panel */
  .ffc-wrap{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 30px 24px !important;
    align-content: start !important;
  }
  .ffc-clus{ width: 190px !important; height: 190px !important; margin: 0 auto !important; }
  .ffc-detail{ max-width: 100% !important; }
}

@media (max-width: 540px){
  [data-sf-film], [data-mf-film], [data-cf-film]{ min-height: 660px !important; }
  .ff-a-grid h3{ font-size: 26px !important; }
  .ff-d-line{ font-size: 22px !important; }
  .mf-chiprow, .cf-chiprow, .sf-chiprow{ gap: 6px !important; }
}