/* =============================================================================
   Tiny utility layer: layout primitives only
   ============================================================================= */

@layer utilities {
  .container {
    inline-size: 100%;
    max-inline-size: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .section__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }

  .stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--s-4)); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--s-3)); }

  .stack > *, .grid-2 > * { min-inline-size: 0; }

  .grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--s-4);
  }

  .visually-hidden {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}