/* ==========================================================================
   /packs -- the catalogue, plus the shared pieces it introduces:
   bands, scenario cards, chips, tags and the breakdown rows.
   ========================================================================== */

/* ---------- Bands ---------- */

.band {
  padding-block: var(--section-y);
  background: var(--bg-0);
}

.band--alt    { background: var(--bg-1); }

/* Bands holding a bleeding box render must clip it. */
#main, #blurped { overflow: hidden; }
.band--purple { background: var(--purple); }

.band__title {
  margin-top: var(--space-4);
  font-size: var(--fs-title-m);
  line-height: var(--lh-title-m);
}

/* ---------- #top ---------- */

.packs-top {
  padding-block: var(--section-y);
  background: var(--bg-0);
}

.packs-top__title {
  margin-top: var(--space-4);
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
}

.packs-top__lead {
  max-width: 34ch;
  margin-top: var(--space-5);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--muted);
}

.packs-top__jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ---------- Main pack ---------- */

.pack-main {
  display: grid;
  gap: var(--space-7);
  margin-top: var(--space-7);
}

/* The box renders are cropped to content (crop_to_content.py), so the
   image IS the box -- there is no longer transparent padding absorbing
   part of the declared width. Widths here are the visible box size. */
.pack-main__art img {
  width: 100%;
  max-width: 750px;
  height: auto;
}

.pack-main__sub {
  font-size: var(--fs-step);
  line-height: var(--lh-step);
}

.pack-main__sub + .chips,
.pack-main__sub + .breakdown { margin-top: var(--space-4); }

.breakdown + .pack-main__sub { margin-top: var(--space-7); }

@media (min-width: 1024px) {
  .pack-main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-9);
  }

  /* 1.5x the column width, bleeding left. The grid column binds long before
     any max-width does, so scaling has to come from overflowing the column --
     which is also what the design asks for ("bleeding off the left edge").
     The section clips it, so this cannot cause a horizontal scrollbar. */
  .pack-main__art img {
    /* 75% of the previous 150%, shifted right so far less is lost off-screen. */
    width: 112.5%;
    max-width: none;
    margin-left: -5%;
  }
}

/* ---------- Breakdown rows ---------- */

.breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.breakdown__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.breakdown__num {
  min-width: 3ch;
  font-size: var(--fs-stat-num);
  line-height: var(--lh-stat-num);
  color: var(--text);
}

.breakdown__label {
  font-size: var(--fs-body);
  color: var(--muted);
}

/* ---------- Chips ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding-inline: 14px;
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.chip--teen {
  border-radius: var(--radius-teen);
  border: var(--border-teen) solid var(--teen-ink);
  background: var(--sky);
  color: var(--teen-ink);
  font-family: var(--font-teen), var(--font-display);
  font-size: 18px;
  text-transform: none;
}

/* The Blurped chips cycle the brand palette rather than all being one colour. */
.chips--teen .chip--teen:nth-child(5n+2) { background: var(--bubble); }
.chips--teen .chip--teen:nth-child(5n+3) { background: var(--mint); }
.chips--teen .chip--teen:nth-child(5n+4) { background: var(--coral); }
.chips--teen .chip--teen:nth-child(5n+5) { background: var(--lemon); }

/* ---------- Tags ---------- */

.tag {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding-inline: 10px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.tag--set   { background: var(--yellow); }
.tag--count { background: var(--scitech-a); }

/* On a set slab the tags sit on the set's own accent, which varies per set --
   a lime tag on the lime Science & Tech slab disappears. The comp draws them
   as ink with white text, which holds against every accent. */
.set-panel .tag {
  background: var(--ink);
  color: var(--white);
}

/* ---------- Expansion heading ---------- */

.expansions-head { padding-block: var(--space-8); }

.expansions-head__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.expansions-head__title {
  font-size: var(--fs-title-m);
  line-height: var(--lh-title-m);
}

.expansions-head__note {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-text);
}

/* ---------- Set bands --------------------------------------------------
   The art slab bleeds to the left viewport edge with a diagonal right edge,
   as drawn; only the samples column is inset by the gutter. So the band is
   NOT wrapped in .container -- it manages its own padding.
   ----------------------------------------------------------------------- */

/* The band clips, not the panel: the box render still overlaps the dark half
   of the same band, but its rotation cannot push the page wider than the
   viewport. Clipping on .set-panel instead would cut the box at the slab. */
.set-band {
  padding-block: 0;
  overflow: hidden;
}

.set-band__inner {
  display: grid;
  /* Mobile: slab on top, cards beneath. */
  grid-template-columns: minmax(0, 1fr);
}

/* The accent pair arrives from data/sets.php as --accent-a / --accent-b on
   [data-set], so a new set needs no new CSS. */
.set-panel {
  position: relative;
  /* Above the samples column, so the box render can overlap the dark band. */
  z-index: 1;
  padding-block: var(--space-7) var(--space-8);
  padding-inline: var(--gutter);
}

/* The accent slab. Carries the background, the diagonal clip and the base
   strip, so the panel's own children stay unclipped. */
.set-panel__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--accent-a, var(--yellow));
  overflow: hidden;
}

.set-panel__body {
  position: relative;
  z-index: 1;
  max-width: 420px;
}

.set-panel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.set-panel__name {
  margin-top: var(--space-4);
  font-size: var(--fs-title-m);
  line-height: .88;
  color: var(--ink);
}

.set-panel__art {
  position: relative;
  z-index: 1;
  margin-top: var(--space-6);
}

.set-panel img {
  width: 100%;
  /* 20% up from 330/360. */
  max-width: 396px;
  height: auto;
  /* The box sits at a slight angle, as drawn. */
  transform: rotate(-7deg);
}

/* The diagonal base strip in accent B. */
.set-panel__strip {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 48px;
  background: var(--accent-b, var(--pink));
  clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 100%);
}

.set-band__samples {
  padding-block: var(--section-y);
  padding-inline: var(--gutter);
}

@media (min-width: 1024px) {
  .set-band__inner {
    /* The slab takes roughly the left 39% as drawn. */
    grid-template-columns: minmax(0, 39fr) minmax(0, 61fr);
    align-items: stretch;
  }

  .set-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* The slab runs off the left of the viewport, so its inner padding is the
       gutter plus the container's own offset. */
    padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))) var(--space-8);
  }

  /* The diagonal lives on the background layer only. */
  .set-panel__bg { clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }

  .set-panel img { max-width: 432px; }

  /* Push the box past the slab's diagonal edge so it sits over the
     dark band rather than being cut off at the accent colour. */
  .set-panel__art { margin-right: -22%; }

  .set-band__samples {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-inline: var(--space-8) var(--gutter);
  }
}

/* ---------- Samples ---------- */

.samples { margin-top: var(--space-8); }

.samples__label {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
}

.samples__hint {
  margin-top: var(--space-2);
  font-size: var(--fs-body-s);
  color: var(--muted);
}

/* Mobile: a horizontal swipe row, as drawn. Stacking three full-height cards
   per set would make the page several screens longer for no gain. The row is
   a real scroll container, so it works with touch, trackpad and keyboard. */
.samples__row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 300px);
  gap: var(--space-4);
  margin-top: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Let the cards reach the screen edge while keeping the first aligned to
     the gutter, so the row reads as continuing off-screen. */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
}

.samples__row > li { scroll-snap-align: start; }

/* The scenario text scales with card width and must not be shrunk (doc 03),
   so the cards wrap to fewer columns rather than getting narrower than 240px.
   auto-fit keeps three across wherever three actually fit. */
/* From 560 there is room to show them all at once. */
@media (min-width: 560px) {
  .samples__row {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-columns: auto;
    gap: var(--space-5);
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* The swipe hint only makes sense while the row actually scrolls. */
.samples__swipe { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--muted); }

@media (min-width: 560px) {
  .samples__swipe { display: none; }
}

/* ---------- Scenario card (doc 02 geometry) -----------------------------
   Ratio 816:1110. Radius 4.5% of width, text 6.63% of width at line height
   1.37, margins 12.7% / 12.5% / 9.2%.

   The percentages are of the FULL card width, so .scard is a bare query
   container with no padding of its own -- `cqw` is 1% of the container's
   CONTENT box, and padding here would silently shrink every value. The visual
   card is .scard__face, a descendant, because an element cannot resolve its
   own container units (a radius in cqw on .scard fell back to viewport units
   and rendered four times too large).
   ----------------------------------------------------------------------- */

.scard {
  container-type: inline-size;
  aspect-ratio: 816 / 1110;
  margin: 0;
}

.scard__face {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 9.2cqw 12.5cqw 9.2cqw 12.7cqw;
  background: var(--white);
  color: #17171A;
  border-radius: 4.5cqw;
  box-shadow: 6px 8px 0 rgb(0 0 0 / .25);
}

.scard__text {
  margin: 0;
  font-family: var(--font-body);
  /* 6.63% of card width. The design pack is explicit that this must not be
     shrunk: the scenario is the hook. */
  font-size: 6.63cqw;
  line-height: 1.37;
}

/* The logo tile sits bottom-left, sized as a share of the card. */
.scard .logo-tile--card,
.scard .logo-tile--card-teen {
  --logo-w: 13.1cqw;
  align-self: flex-start;
  box-shadow: none;
}

.scard--teen .scard__face {
  border-radius: 6cqw;
  box-shadow: 6px 8px 0 var(--coral);
}

/* Rotations. A small fixed set, so they are modifiers rather than inline
   styles, which CLAUDE.md forbids in markup. */
.scard--rotn1 { transform: rotate(-1deg); }
.scard--rotn2 { transform: rotate(-2deg); }
.scard--rot0  { transform: none; }
.scard--rot1  { transform: rotate(1deg); }
.scard--rot2  { transform: rotate(2deg); }

@media (prefers-reduced-motion: reduce) {
  .scard { transform: none !important; }
}

/* ---------- Blurped panel ---------- */

.teen-panel {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-5);
  padding: var(--space-7);
  background: var(--lemon);
  border: var(--border-teen) solid var(--teen-ink);
  border-radius: var(--radius-teen-card);
  color: var(--teen-ink);
}

.teen-panel__art img {
  width: 100%;
  max-width: 630px;
  height: auto;
}

/* Below the two-column breakpoint the box had only the panel's content width
   to work with, which left it looking small inside a large lemon block. It
   now spills over the panel's own padding -- still well inside the panel
   itself, so nothing is clipped and the page cannot widen. */
@media (max-width: 1023px) {
  .teen-panel__art img {
    width: 120%;
    max-width: none;
    margin-inline: -10%;
  }
}

.teen-panel__title {
  font-family: var(--font-teen), var(--font-display);
  font-size: var(--fs-title-m);
  line-height: 1;
}

.teen-panel__age {
  display: inline-block;
  margin-top: var(--space-3);
  padding: 4px 12px;
  background: var(--teen-ink);
  color: var(--cream);
  border-radius: var(--radius-teen);
  font-family: var(--font-teen), var(--font-body);
  font-size: 18px;
}

.teen-panel__tagline {
  margin-top: var(--space-4);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

.teen-panel .chips { margin-top: var(--space-5); }

@media (min-width: 1024px) {
  /* The art column, not any max-width, is what sizes this box -- widened so
     the render reads at roughly 1.5x. It cannot bleed like the other bands
     because it sits inside a bordered, rounded panel. */
  .teen-panel {
    grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-6);
  }
}

/* The Blurped panel sits on lemon, so its breakdown rules need the teen ink
   rather than the dark-ground --line. */
.breakdown--teen { margin-top: var(--space-5); }

.breakdown--teen .breakdown__row { border-bottom-color: rgb(35 32 43 / .25); }
.breakdown--teen .breakdown__num  { color: var(--teen-ink); }
.breakdown--teen .breakdown__label { color: var(--teen-ink); font-weight: 700; }

/* The set's description sits under its name on the accent slab, so it carries
   ink like everything else there. */
.set-panel__desc {
  margin-top: var(--space-4);
  max-width: 42ch;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--ink);
}