/* ============================================================
   BTK Design System — Responsive utilities
   Mobile-first, min-width breakpoints (Tailwind v4 theme in the
   BTK frontend): sm 414 · md 768 · lg 1024 · xl 1280 · 2xl 1460.
   Use these classes in static HTML / any consumer markup; the
   React components ship equivalent <Show>/<Hide>/<Grid> primitives.
   ============================================================ */

/* ---- Container: centered, capped at 1460, gutters grow with width ---- */
.btk-container {
  width: 100%;
  max-width: var(--btk-container-max, 1460px);
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 414px)  { .btk-container { padding-inline: 20px; } }
@media (min-width: 1080px) { .btk-container { padding-inline: 40px; } }
@media (min-width: 1920px) { .btk-container { padding-inline: 0; } }

/* ---- Responsive grid: 1 col on mobile, scaling up by breakpoint ---- */
.btk-grid { display: grid; gap: var(--btk-space-2, 20px); grid-template-columns: 1fr; }
.btk-grid--2,
.btk-grid--3,
.btk-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .btk-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .btk-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .btk-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .btk-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .btk-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
/* Auto-fit grid for unknown counts (cards, files, logos) */
.btk-grid--auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ---- Responsive row: stacks on mobile, becomes a row at md ---- */
.btk-row { display: flex; flex-direction: column; gap: var(--btk-space-2, 20px); }
@media (min-width: 768px) { .btk-row { flex-direction: row; } }

/* ---- Visibility helpers (lg = 1024 is the mobile/desktop divide) ---- */
.btk-only-mobile  { display: revert; }
.btk-only-desktop { display: none; }
@media (min-width: 1024px) {
  .btk-only-mobile  { display: none; }
  .btk-only-desktop { display: revert; }
}
.btk-hide-sm { display: none; }
@media (min-width: 414px)  { .btk-hide-sm { display: revert; } }

/* ---- Fluid section padding (scales the vertical rhythm) ---- */
.btk-section { padding-block: clamp(40px, 6vw, 80px); }

/* ---- Fluid display heading (banner / hero) ---- */
.btk-fluid-display { font-size: clamp(24px, 4vw, 44px); line-height: 1.2; }