/* =========================================================================
   utilities-extra.css — the remaining responsive utilities the ported markup
   references (border-radius pairs, grid-column widths, responsive spacing,
   extra opacities). All map onto variables already defined in tokens.css.
   ========================================================================= */

:root {
  /* one 16-grid column, used by .w-cols-* */
  --col: calc((var(--grid-width) - 15 * var(--grid-gap)) / 16);
}

/* ---- Border radius ------------------------------------------------------- */
.br-16      { border-radius: var(--16); }
.br-20-8    { border-radius: var(--20-8); }
.br-20-16   { border-radius: var(--20-16); }
.br-24-12   { border-radius: var(--24-12); }
.br-inherit { border-radius: inherit; }

/* ---- Grid column widths (N cols + N-1 gaps) ----------------------------- */
.w-cols-4  { width: calc(4  * var(--col) + 3  * var(--grid-gap)); }
.w-cols-6  { width: calc(6  * var(--col) + 5  * var(--grid-gap)); }
.w-cols-8  { width: calc(8  * var(--col) + 7  * var(--grid-gap)); }
.w-cols-10 { width: calc(10 * var(--col) + 9  * var(--grid-gap)); }
.w-cols-12 { width: calc(12 * var(--col) + 11 * var(--grid-gap)); }

/* ---- Opacity ------------------------------------------------------------- */
.opacity-0  { opacity: 0; }
.opacity-10 { opacity: .1; }

/* ---- Responsive margin/gap/padding pairs -------------------------------- */
.mt-24-16 { margin-top: var(--24-16); }
.mt-64-24 { margin-top: var(--64-24); }
.mt-64-48 { margin-top: var(--64-48); }
.mt-80-32 { margin-top: var(--80-32); }
.mt-96-32 { margin-top: var(--96-32); }
.mb-96-48 { margin-bottom: var(--96-48); }
.mb-120-64 { margin-bottom: var(--120-64); }
.my-96-48 { margin-top: var(--96-48); margin-bottom: var(--96-48); }
.gap-32-16 { gap: var(--32-16); }
.gap-32-24 { gap: var(--32-24); }
.py-216-140 { padding-top: var(--216-140); padding-bottom: var(--216-140); }

/* responsive column width on small screens — default to full width */
@media (max-width: 743px) {
  .w-cols-4, .w-cols-6, .w-cols-8, .w-cols-10, .w-cols-12 { width: 100%; }
}