/* ════════════════════════════════════════════════════════════════════
   bdyna-responsive.css — Layer 5 of 5. Load last.
   Breakpoints: sm 480 · md 768 · lg 1024 · xl 1280.
   Type is clamped in tokens, so this file handles LAYOUT only.
   ════════════════════════════════════════════════════════════════════ */

@media(max-width:1024px){
  .bd-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
}

@media(max-width:768px){
  :root{--bd-section-y:clamp(36px,9vw,56px);--bd-gap:16px;--bd-gap-lg:24px}
  .bd-grid,.bd-grid--2,.bd-grid--4{grid-template-columns:1fr}
  .bd-row{gap:var(--bd-s-3)}
  .bd-form-actions{flex-direction:column;align-items:stretch}
  .bd-form-actions .bd-btn{width:100%}
  .bd-modal__panel{max-width:none;max-height:92vh}
  .bd-toasts{left:var(--bd-s-3);right:var(--bd-s-3);bottom:var(--bd-s-3);max-width:none}

  /* Tables become record cards. A horizontally scrolling table on a phone
     is technically responsive and practically unusable, so the markup
     carries both and the breakpoint chooses. */
  .bd-table-wrap--cards .bd-table{display:none}
  .bd-table-wrap--cards{border:0;overflow:visible}
  .bd-record{display:block}
}

@media(max-width:480px){
  :root{--bd-page-x:16px}
  .bd-btn{width:100%}
  .bd-row .bd-btn{width:auto}
  .bd-card{padding:var(--bd-s-4)}
  .bd-choices--inline{flex-direction:column}
}

/* Landscape phones: a 72vh hero leaves almost nothing on screen. */
@media(max-height:520px) and (orientation:landscape){
  :root{--bd-hero-h:auto;--bd-hero-h-min:0;--bd-hero-h-max:none}
}

/* WCAG 2.2 AA requires usability at 320px and at 400% zoom. Nothing may
   depend on horizontal scrolling to be readable. */
@media(max-width:360px){
  :root{--bd-page-x:14px;--bd-gap:12px}
}

@media print{
  .bd-skip,.bd-toasts,.bd-modal{display:none!important}
  body{background:#fff;color:#000}
  .bd-card{border-color:#ccc}
}