/* Responsive layout utilities.
   The only place in this system where components rely on CSS classes rather
   than inline styles — because @media cannot exist in a style object. */

/* --- Auto-collapsing grids --- */
.bc-grid{display:grid;gap:var(--space-6)}
.bc-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bc-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bc-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Two-column page layouts: main + aside */
.bc-split{display:grid;gap:var(--space-16);align-items:start}
.bc-split-main{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.bc-split-aside{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}

@media (max-width:1023px){
  .bc-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bc-split-main,.bc-split-aside{grid-template-columns:minmax(0,1fr);gap:var(--space-10)}
}
@media (max-width:767px){
  .bc-grid-2,.bc-grid-3,.bc-grid-4{grid-template-columns:minmax(0,1fr)}
  .bc-grid{gap:var(--space-4)}
}

/* --- Visibility --- */
.bc-desktop-only{display:flex}
.bc-mobile-only{display:none}
@media (max-width:767px){
  .bc-desktop-only{display:none !important}
  .bc-mobile-only{display:flex !important}
}
/* Gated at 1024px — matches where .bc-split-* collapses to one column.
   Use for sidebars that only make sense beside the content, never above it. */
.bc-lg-only{display:flex}
@media (max-width:1023px){.bc-lg-only{display:none !important}}

/* --- Section rhythm --- */
.bc-section{padding-block:var(--section-y)}
.bc-section-lg{padding-block:var(--section-y-lg)}
@media (max-width:767px){
  .bc-section,.bc-section-lg{padding-block:var(--section-y-mobile)}
}

/* --- Fluid display type: headlines shrink instead of wrapping badly --- */
.bc-display{font-size:clamp(34px,6.2vw,60px);line-height:1.06;letter-spacing:var(--tracking-tight)}
.bc-h2{font-size:clamp(26px,4vw,38px);line-height:1.18;letter-spacing:var(--tracking-tight)}

/* --- Mobile gutter --- */
@media (max-width:767px){
  .bc-container{padding-inline:var(--gutter-mobile) !important}
}

/* --- Stack a row on mobile (button pairs, inline meta) --- */
@media (max-width:600px){
  .bc-stack-sm{flex-direction:column !important;align-items:stretch !important}
  .bc-stack-sm > *{width:100%}
}

/* Body scroll lock while the mobile drawer is open */
body.bc-no-scroll{overflow:hidden}

/* Service detail row: icon · copy · actions */
.bc-service-row{grid-template-columns:72px minmax(0,1fr) 240px}
@media (max-width:1023px){.bc-service-row{grid-template-columns:72px minmax(0,1fr);gap:24px}.bc-service-row > *:last-child{grid-column:1 / -1}}
@media (max-width:600px){.bc-service-row{grid-template-columns:minmax(0,1fr)}}

/* Footer: brand block + link columns. Every track is minmax(0,…) so long
   labels shrink instead of forcing the grid past the viewport. */
.bc-footer-grid{grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(140px,1fr))}
@media (max-width:900px){.bc-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}}
@media (max-width:560px){.bc-footer-grid{grid-template-columns:minmax(0,1fr);gap:32px}}

/* Tabs that don't fit scroll inside their own row instead of widening the page */
.bc-tabs{scrollbar-width:none;-webkit-overflow-scrolling:touch}
.bc-tabs::-webkit-scrollbar{display:none}

/* Featured article card: image beside text on desktop, stacked on mobile */
/* On mobile the featured card matches the regular cards (same height/padding/title) —
   everything is one column anyway, so the extra emphasis only makes the list longer. */
@media (max-width:767px){
  .bc-card-featured{grid-template-columns:minmax(0,1fr) !important}
  .bc-card-featured-media{min-height:150px !important}
  .bc-card-featured-body{padding:24px !important}
  .bc-card-featured-title{font-size:var(--text-md) !important}
}