/*
 * Minimal shared shadow-root reset, prepended once to the bundled
 * `ds.css` every component links to (see `scripts/build-ds-css.mjs` in
 * src). The design-system skill requires a single global reset
 * (`global.css`), but that is light-DOM only and cannot reach into a
 * shadow root. This is the shadow-DOM equivalent: box-sizing plus a
 * token-driven focus ring.
 *
 * Focus-ring color on inverse surfaces is not handled with `:host-context`
 * here: `ds-section[data-surface="inverse"]` re-points the
 * `--elvaio-color-focus` custom property for its whole subtree, and every
 * component (light or shadow DOM) that reads that token for its focus ring
 * inherits the override automatically, because custom properties inherit
 * through shadow boundaries.
 */
:host {
  box-sizing: border-box;
}

:host *,
:host *::before,
:host *::after {
  box-sizing: border-box;
}

:host(:focus-visible) {
  outline: var(--elvaio-focus-width) solid var(--elvaio-color-focus);
  outline-offset: 2px;
  border-radius: var(--elvaio-radius-field);
}


:host {
  display: block;
}

.price-list {
  display: grid;
  /* Flat, not the large container-gutter clamp: matches the reference's
     `.el-prices` gap, which uses the same tighter card-grid value as every
     other grid of sibling cards (see `--elvaio-space-card-grid-gap`). */
  gap: var(--elvaio-space-card-grid-gap);
  grid-template-columns: minmax(0, 1fr);
  /* 6 rows: `ds-price-card`'s subgrid now spans 6 (see its own comment) —
     the 6th (`note`) is empty/collapsed for every card that doesn't use
     it, which is every current multi-card usage. */
  grid-template-rows: repeat(6, auto);
  align-items: stretch;
}

@media ((min-width: 48rem)) {
  .price-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Situatie's single-package card: without this it inherits the
     unconditional 2-column rule above and gets squeezed into half its
     container's width. */
  :host([columns='1']) .price-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media ((min-width: 75rem)) {
  :host([columns='2']) .price-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :host([columns='3']) .price-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  :host([columns='4']) .price-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}