/**
 * Section: Collection
 *
 * Ported from .docs/mockup/css/shop.css (§2 SHOP — COLLECTIONS, lines 130-220)
 * and .docs/mockup/css/collection.css (the responsive grid steps and the
 * `.is-cta` cross-sell band). Tokens only — no colour, size, radius or font
 * literal that a token exists for.
 *
 * The px values kept below (`8px 16px` on the count pill, `340px` / `240px`
 * feature-image floors) are the mockup's own structural values with no token
 * equivalent; the section contract allows those and forbids inventing new ones.
 *
 * NOT declared here, because they are already shared chrome the theme owns:
 *   .kit-card and every child of it, .kit-grid, .kit-grid.two, .kit-desc,
 *   .btn-row, .lead                     → assets/css/components.css
 *   .section-title-group, .section-lead, .eyebrow, .card, .reveal
 *                                       → assets/css/components.css
 * The mockup restates `.col-head .section-title-group { gap: var(--space-xs) }`
 * with the value components.css already sets, so it is not repeated.
 *
 * The two-column grid override lives in sections/collection-two.css, which is
 * the section that produces it.
 */

.collection {
  padding-block: var(--section-space-s);
  padding-inline: var(--space-gutter);
}

/* Every second collection band on a page, set by the renderer rather than by
   an editor control — see the decision note in sections/collection.php. */
.collection.alt {
  background: var(--pebble);
}

.col-head {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}

.col-head h2 {
  font-size: var(--text-h2);
  font-weight: 800;
  line-height: 1.05;
  max-width: 18ch;
}

.col-head h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--terracotta);
}

.col-count {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--deep-ocean);
  background: var(--coastal-soft);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* Cross-sell band: title group stacked above the buttons instead of the head
   and the count pill sitting side by side. */
.collection .col-head.is-cta {
  display: block;
}

.collection .col-head.is-cta .btn-row {
  margin-top: var(--space-m);
}

/* ==========================================================
   FEATURED SINGLE PRODUCT
   A band that resolves to one product, e.g. the Travel kit on Shop by Space.
   The mockup paints this as a standalone `.kit-feature` block; here the same
   treatment is applied to the shared product card so there is still exactly
   one card renderer in the theme.
   ========================================================== */
.kit-feature {
  max-width: var(--container);
  margin-inline: auto;
}

.kit-feature .kit-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
}

.kit-feature .kit-img {
  aspect-ratio: auto;
  height: 100%;
  min-height: 340px;
}

.kit-feature .kit-body {
  padding: var(--space-l);
  gap: var(--space-xs);
  justify-content: center;
}

.kit-feature .kit-body h3 {
  font-size: var(--text-h3);
}

/* ==========================================================
   RESPONSIVE
   The mockup pools these at the end of css/shop.css (381-427) and
   css/collection.css (9-20); only the selectors this section owns are taken.
   `.collection .kit-grid` (0,2,0) deliberately outranks the shared
   `.kit-grid` rule in components.css, which collapses straight to one column.
   ========================================================== */
@media (max-width: 980px) {
  .collection .kit-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .kit-feature .kit-card {
    grid-template-columns: 1fr;
  }

  .kit-feature .kit-img {
    min-height: 240px;
  }
}

@media (max-width: 640px) {
  .col-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
  }
}

@media (max-width: 560px) {
  .collection .kit-grid {
    grid-template-columns: 1fr;
  }
}