/* ==========================================================================
   Container API

   Base:
     .container

   Families:
     .grid
     .rail
     .carousel
     .text-block

  Utilities (defined in assets/css/utilities.css):
     Max-width (general):
       .mw-xs
       .mw-md
       .mw-lg
       .mw-xl
       .mw-max
       .mw-full
     Max-width (text):
      .mw-text-xs
       .mw-text-sm
       .mw-text-md
       .mw-text-lg
     Gap:
       .gap-0, .gap-8, .gap-16, .gap-24, .gap-32, .gap-40, .gap-48,
       .gap-60, .gap-72, .gap-96
    Inline padding:
      .pi-0, .pi-8, .pi-16, .pi-24, .pi-32, .pi-40, .pi-48, .pi-60, .pi-72, .pi-96
    Block padding:
      .pb-0, .pb-8, .pb-16, .pb-24, .pb-32, .pb-40, .pb-48, .pb-60, .pb-72, .pb-96

   Notes:
    Runtime contexts:
      --pi: inline padding (default 1em)
      --mw: max-width (default var(--mw-max))
      --gap: spacing rhythm (default var(--s-16))
    .mw-full mirrors current full-bleed behavior (max-width none + zero inline padding).
    Runtime overrides are applied via utility classes in assets/css/utilities.css.

   Example markup:
     <div class="container">...</div>
     <div class="grid mw-full">...</div>
     <div class="rail gap-0">...</div>
     <div class="text-block mw-md">...</div>
     <div class="text-block mw-text-lg">...</div>
   ========================================================================== */

:where(.container, .grid, .rail, .carousel, .text-block, .row, .col, .cta-block) {
  --pi: 1em;
  --pb: 0;
  --mw: var(--mw-max);
  --gap: var(--s-16);

  width: 100%;
  max-width: calc(var(--mw) + var(--pi) + var(--pi));
  min-width: 0;
  margin-inline: auto;
  padding-inline: var(--pi);
  padding-block: var(--pb);
}

/* other component wrappers */

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--row-gap, var(--gap, var(--s-16))) var(--col-gap, var(--gap, var(--s-16)));
  align-items: center;
  justify-content: center;
}

.row.link-list {
  --pi: 0;
  --gap: var(--s-24);
  justify-content: flex-start;
}

/* Haga Links block: stacked column by default. The legacy content-variant
   `.row.link-list` keeps its row layout via the `.row` primitive (excluded
   here), so both can coexist during the card refactor. */
.link-list:not(.row) {
  display: flex;
  flex-direction: column;
  gap: var(--gap, var(--s-16));
  align-items: flex-start;
}

.link-list:not(.row) > p {
  margin: 0;
}

@media (min-width: 40rem) {
  .link-list.dir-row-md {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

@media (min-width: 64rem) {
  .link-list.dir-row-lg {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

.row.between {
  justify-content: space-between;
}

.col {
  display: flex;
  flex-direction: column;
  gap: var(--gap, var(--s-16));
}

.cta-block {
  display: flex;
  flex-direction: column;
  gap: var(--gap, var(--s-16));
  align-items: center;
  justify-content: center;
}

.col > iframe {
  display: block;
  inline-size: 100%;
  border: 0;
  border-radius: var(--border-radius-media);
}