/* product-configuration.html — the four listed configurators on one page.

   Page shell only: the card grid itself comes from common/css/design-system.css,
   which is where it moved once more than one page showed it. Same shape as the
   homepage — tokens, ambient glow, a centred column — minus the drift animation
   and plus a way back. */

:root {
  --bg:         #000000;
  --white:      #FFFFFF;
  --muted:      rgba(255,255,255,0.55);
  --line:       rgba(255,255,255,0.10);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--white);
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: -30%;
  background:
    radial-gradient(38% 38% at 22% 28%, rgba(46,110,255,0.13), transparent 72%),
    radial-gradient(36% 36% at 82% 78%, rgba(30,80,200,0.11), transparent 72%),
    radial-gradient(28% 28% at 62% 18%, rgba(90,150,255,0.07), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

main {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 7rem) clamp(1.5rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

header {
  margin-bottom: clamp(2.5rem, 7vh, 5rem);
  text-align: center;
}
/* Just the page name, in white. No eyebrow above it and no subtitle under it:
   the four cards are the content, and anything else here only pushed them
   down the fold. */
h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--white);
}

/* Two columns, not the design system's four: four cards in a 2x2 makes each
   photo about twice the area it had, which is the point of a card that is now
   photo-plus-name and nothing else. The breakpoints are restated rather than
   inherited — this rule sits after the design system, so without them it would
   beat its media queries and never collapse on a phone. */
.cards { grid-template-columns: repeat(2, 1fr); }
/* 4:3 rather than a min-height, so the card is the shape the packshots were
   cropped to and `cover` has almost nothing left to crop. */
.cards .card { min-height: 0; aspect-ratio: 4 / 3; }
@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
}

/* The name sits at the bottom of the card, where the photo scrim is darkest
   and white type is most legible. `space-between` in the design system put it
   at the top, which only worked while a CTA held the bottom edge; with the
   name as the card's only child there is nothing left to space it against. */
.cards .card { justify-content: flex-end; }
.cards .card-title { margin-bottom: 0; }

/* A lighter scrim than the design system's. That one is dialled in for a card
   whose photo sits behind a paragraph of description; here there is one word,
   so the photo can come up and only the bottom strip needs to stay dark enough
   to hold it. */
.cards .card--photo::before {
  background:
    linear-gradient(180deg,
      rgba(3,6,18,0.34) 0%,
      rgba(3,6,18,0.10) 42%,
      rgba(3,6,18,0.82) 100%),
    var(--photo);
  background-size: cover;
  background-position: center, var(--photo-pos, center);
}