/* MyHub — a deliberately small set of layout utilities (flex / gap / spacing on the 4-pt scale).
   Anything visual (color, border, radius, type) belongs in a component, not here. */
@layer utilities {
  .row   { display: flex; align-items: center; }
  .col   { display: flex; flex-direction: column; }
  .wrap  { flex-wrap: wrap; }
  .grow  { flex: 1; min-width: 0; }
  .push  { margin-left: auto; }
  .start { align-items: flex-start; }
  .base  { align-items: baseline; }
  .self-start { align-self: flex-start; }
  .gap-1 { gap: var(--as-s-1); } .gap-2 { gap: var(--as-s-2); } .gap-3 { gap: var(--as-s-3); }
  .gap-4 { gap: var(--as-s-4); } .gap-5 { gap: var(--as-s-5); } .gap-6 { gap: var(--as-s-6); }
  .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .span-all { grid-column: 1 / -1; }
  .p-8 { padding: var(--as-s-8); }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  @media (max-width: 1024px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 599px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }
}