/*
 * Green St Kitchen - Products page.
 * No literal colour values. Everything comes from tokens.css.
 *
 * Only the page's own centred intro and the rhythm around the reel. The bands and
 * the cards are the Product catalogue block and carry their own stylesheet.
 *
 * Measured from 02_GSK_Web_June-2026_Products.pdf, a 960 x 3409.7pt artboard which
 * resolves to the same 1280px canvas at 4/3 scale as the other six. See
 * MAINTAINER.md, "Where the numbers came from".
 *
 * WHY THIS INTRO IS NOT SHARED WITH THE OTHER THREE. Same reasoning as the notes
 * at the top of faq.css and locator.css, and it now holds a fourth time: all four
 * centre an eyebrow, a headline and a standfirst, and all four draw them at
 * different sizes with different gaps. This page's headline is 74px like Contact's
 * and Store Locator's, and it is the only one of the four drawn over two lines, so
 * it is also the only one whose leading had to be measured. A shared component
 * would be one whose every value is overridden per page.
 */

/* =========================================================================
 * CENTRED INTRO
 * Drawn baselines: eyebrow 165.1, headline 245.3 and 316, standfirst 368 and
 * 389.3, the first range band at 479.9. Each gap below is the distance between
 * two line boxes derived from those baselines, not a scale.
 * ========================================================================= */
/* Padding rather than a margin, for the same reason as the FAQ and Store Locator
 * intros: this is the last child of a plain div, so a bottom margin collapses
 * straight out of it and the gap to the first band disappears. */
.gs-products-intro {
  text-align: center;
  padding-block: var(--gs-products-pad-top) var(--gs-products-body-gap);
}

/* The same darker rust the FAQ and Store Locator eyebrows use, and its own fill in
 * the artwork rather than the Pickled Things accent with something over it.
 *
 * KNOWN CONTRAST EXCEPTION. 4.13:1 on warm beige where 12.5px needs 4.5.
 * Reproduced as drawn and reported rather than corrected; this is the third page
 * to carry it and it is already a granted exception. See BUILD-REPORT.md. */
.gs-products-intro__eyebrow {
  margin: 0 0 var(--gs-products-eyebrow-gap);
  line-height: var(--gs-leading-tight);
  color: var(--gs-rust-deep);
}

/* 74px over two authored lines. The same step Contact's and Store Locator's h1
 * take, which is what the artboard draws: all three are 55.5pt.
 *
 * NOT set solid, which is where this differs from the other three. Those are one
 * line each, so their leading never shows. This one is drawn over two lines
 * pitched 70.7px apart at 74px, which is a leading of 0.955 - tighter than solid.
 * Set to 1 the second line sat 3.3px low, and the standfirst and every band under
 * it inherited the error. */
.gs-products-intro__title {
  margin: 0 0 var(--gs-products-title-gap);
  font-size: var(--gs-step-hero-xl);
  line-height: 0.955;
}

/* 18px on a 21.3px line, the drawn pitch.
 *
 * The measure is set rather than the line broken by hand, per PROJECT-BRIEF 7A.
 * The drawn first line runs 584.7px and " Pick" is 37.5px, so any measure from
 * 585 to 622 reproduces the break; 37.5rem sits in the middle of that window
 * rather than on its edge.
 *
 * The first pass had 28rem, from reading the PDF's own 438.5 as CSS pixels when
 * it is in POINTS. Everything the text layer reports is in points, and 438.5 x
 * 4/3 is 584.7 - which the browser then rendered at 583.2, confirming the font is
 * right and the arithmetic was not. The standfirst ran to three lines and every
 * band under it sat 21px low. Worth remembering on the next artboard: convert the
 * widths as well as the sizes. */
.gs-products-intro__standfirst {
  max-width: 37.5rem;
  margin-inline: auto;
  font-size: var(--gs-step-intro);
  line-height: 1.18;
  color: var(--gs-ink-soft);
}

/* =========================================================================
 * REEL
 * The Media slider block, its third page. The block carries no vertical rhythm of
 * its own, which is what lets Home, Our Story and this page place it differently,
 * so the two measured gaps live here.
 *
 * Above: the last card row ends at 3402 and the slides begin at 3503.4.
 * Below: the dots end at 3891.2 and the locator band begins at 3950.7.
 * ========================================================================= */
.gs-products-reel {
  margin-block: var(--gs-products-reel-gap-top) var(--gs-products-reel-gap-bottom);
}

/* Small screens. PROJECT-BRIEF 7A: no artefact covers them, so these are the
 * desktop gaps brought down proportionally rather than new numbers. A 101px gap
 * either side of the reel is most of a phone viewport. */
@media (max-width: 1023px) {
  .gs-products-reel {
    margin-block: var(--gs-space-3xl) var(--gs-space-xl);
  }
}