/* ==========================================================================
   Grid container

   Family:
     .grid

  API (inline styles):
    --cols              Base column count (default: 1)
    --cols-md           Override at 40rem+
    --cols-lg           Override at 64rem+
    --cols-xl           Override at 90rem+
    --col-span          Per-child track span (set on a grid item; default 1)

  Runtime contexts (from container API):
    --c                 Resolved column count for current breakpoint
    --pi                Inline padding context
    --gap               Spacing rhythm context (sets both axes)
    --row-gap           Optional override — vertical (row) gap only
    --col-gap           Optional override — horizontal (column) gap only

   Family modifiers:
     .grid--cards-centered
       Optional:
         --grid-item-max-mobile
         --grid-wrap-max-mobile
         --grid-item-max
         --grid-wrap-max

   Example markup:
    <div class="grid" style="--cols: 1; --cols-lg: 3;">...</div>
    <div class="grid gap-0" style="--cols: 2;">...</div>
    <div class="grid mw-full" style="--cols: 2; --cols-xl: 4;">...</div>
   ========================================================================== */

.grid {
  --c: var(--cols, 1);
  display: grid;
  align-items: start;
  gap: var(--row-gap, var(--gap)) var(--col-gap, var(--gap));
  grid-template-columns: repeat(var(--c), minmax(0, 1fr));
  width: 100%;
  min-width: 0;
}

.grid > * {
  min-width: 0;
  grid-column: span var(--col-span, 1);
}

/* */

.grid.text-blocks-2x2 {
  --gap: 0;
  --pi: 1em;
  align-items: stretch;
}

.grid.text-blocks-2x2 > .text-block {
  position: relative;
  height: 100%;
  --pi: 1em;
  --pb: var(--s-48);
  --gap: 1.2em;
}

.grid.text-blocks-2x2 > .text-block + .text-block {
  border-top: 1px solid var(--card-border-color, color-mix(in srgb, currentColor 18%, transparent));
}

/* --- Info-card grids (ÅF contacts + butiker stores) --------------------
   Roomy card padding from 40rem up. On the smallest breakpoint each card is a
   single full-width column with no border/background, so the inline padding is
   dropped and the block padding tightened — pi-48 would otherwise crowd the
   text against the page gutters. Replaces the per-card pi-48/pb-32 utilities. */
.grid.info-cards > .card {
  --pi: 0;
  --pb: var(--s-16);
}

@media (min-width: 40rem) {
  .grid.info-cards > .card {
    --pi: var(--s-48);
    --pb: var(--s-32);
  }
}

/* --- Centered card-group variant --------------------------------------- */

.grid--cards-centered {
  margin-inline: auto;
  max-width: min(100%, var(--grid-wrap-max-mobile, 100%));
}

.grid--cards-centered > * {
  max-width: var(--grid-item-max-mobile, none);
  margin-inline: auto;
}

/* Shared USP four-card grid preset used across migration pages. */
.grid--usp-cards {
  --cols: 1;
  --cols-md: 2;
  --cols-lg: 4;
  --grid-item-max-mobile: 13rem;
  --grid-wrap-max-mobile: calc((2 * 13rem) + var(--gap));
  --grid-item-max: 15rem;
}

/* --- Breakpoints -------------------------------------------------------- */

@media (min-width: 40rem) {
  .grid {
    --c: var(--cols-md, var(--cols, 1));
  }

  .grid.reverse-md {
    direction: rtl;
  }

  .grid.reverse-md > * {
    direction: ltr;
  }
}

@media (min-width: 64rem) {
  .grid {
    --c: var(--cols-lg, var(--cols-md, var(--cols, 1)));
  }

  .grid.text-blocks-2x2 > .text-block {
    --pi: var(--s-48);
  }

  .grid.text-blocks-2x2 > .text-block {
    border: 1px solid var(--card-border-color, color-mix(in srgb, currentColor 18%, transparent));
  }

  .grid.text-blocks-2x2 > .text-block:nth-child(odd) {
    margin-inline: auto 0; /* push toward end of track (right in LTR) */
  }

  .grid.text-blocks-2x2 > .text-block:nth-child(even) {
    border-left: 0;
    margin-inline: 0 auto; /* push toward start of track (left in LTR) */
  }

  /* middle seam: row 2 drops its top — row 1's bottom draws it */
  .grid.text-blocks-2x2 > .text-block:nth-child(n + 3) {
    border-top: 0;
  }

  .grid--cards-centered {
    --grid-item-max: 16rem;
    --grid-wrap-max: min(
      var(--content-max),
      calc(var(--c) * var(--grid-item-max) + (var(--c) - 1) * var(--gap))
    );
    max-width: min(100%, var(--grid-wrap-max));
  }

  .grid--cards-centered > * {
    max-width: var(--grid-item-max);
    margin-inline: auto;
  }
}

@media (min-width: 90rem) {
  .grid {
    --c: var(--cols-xl, var(--cols-lg, var(--cols-md, var(--cols, 1))));
  }
}

@media (min-width: 120rem) {
  .grid.text-blocks-2x2 {
  }
}

/* When a stretched text-block holds an iframe (e.g. Google Maps next to an
   image in a 2-col grid), let the iframe consume the remaining vertical
   space at md+ so its bottom lines up with the sibling image. */

.grid .text-block .google-maps {
  width: 100%;
  margin-top: var(--s-16);
  border: 0;
  flex: 1;
  min-height: 0;
  aspect-ratio: 3 / 2;
}

@media (min-width: 64rem) {
  .grid .text-block .google-maps {
    aspect-ratio: auto;
    height: 100%;
    max-height: 30vw;
  }
}