/* /stem -- STEM & STEAM Programming. Loaded by that page alone.
 *
 * NOT in shim/arrayscape.css, which loads on all seventy pages: a selector here
 * that escaped its prefix would restyle the whole site, and lint-build cannot
 * see CSS. This file is linked only from the page scripts/add-pages generates,
 * so the blast radius is the page itself. It is served from static/, so
 * scripts/verify-static proves it reaches both trees byte-identically with the
 * right content type.
 *
 * It is linked immediately before the shim's stylesheet, which puts it after
 * every Wix <style> block -- so these rules win without needing !important.
 *
 * COLOURS come from the brand guideline (PDF Guideline.pdf). The site theme
 * already defines them as variables on :root, and the shared CSS that carries
 * those arrives with the page, so they are referenced rather than restated:
 *     navy    #2E3F66  rgb(var(--color_11))
 *     yellow  #FFCD18  rgb(var(--color_43))
 * The handoff's #293453 and #FFC845 are near-misses and are not used -- the
 * doc itself says to prefer the site's version. The remaining values below are
 * the handoff's own and have no site equivalent.
 *
 * FONTS: questrial is the site's heading and body face and arrives with the
 * shared CSS. It has exactly one weight, so `bold` here is the browser's
 * synthetic bold -- which is what every other bold word on the site already is,
 * and what Wix did before the move. The handoff asks for weight 800; no face on
 * the site has it, and asking for 800 renders identically to asking for bold.
 * See #122, where that is tracked site-wide. Agreed with the business on #66.
 *
 * TWO VIEWPORT WIDTHS, NOT THREE. The mobile tree pins the viewport with
 * <meta name="viewport" content="width=320">, because the Wix mobile chrome is
 * built for it -- so the phone case is 320px, not 390. The desktop tree is
 * never usefully narrower than 980px, because every Wix section on it carries
 * min-width:980px. Mobile-first below: the base rules are the 320px case, and
 * the two media queries add the tablet and desktop cases.
 */

/* ---- shared ------------------------------------------------------------- */

.as-stem {
  --as-navy: rgb(var(--color_11));
  --as-yellow: rgb(var(--color_43));
  --as-ink: #1a1f36;
  --as-body: #4a5068;
  --as-on-navy: #d9ddee;
  --as-on-navy-dim: #c3c9de;
  --as-tag: #edeff6;
  --as-hairline: #e6e3da;
  --as-hover: #cbcfd9;
  --as-card-shadow: 0 6px 20px rgba(26, 31, 54, 0.10);
  --as-shot-w: 96px;

  box-sizing: border-box;
  background: #f6f4ee;
  font-family: questrial, sans-serif;
  color: var(--as-body);
}

.as-stem *,
.as-stem *::before,
.as-stem *::after { box-sizing: inherit; }

/* Wix's own reset sets margin:0 on everything, but these elements still carry
 * UA margins inside our block, so they are zeroed here.
 *
 * :where() DELIBERATELY. Written as `.as-stem p { margin: 0 }` this reset is
 * specificity (0,1,1) and beats every single-class rule below it -- so
 * .as-stem-intro's margin-top never applied and the whole page rendered with
 * its spacing collapsed. :where() contributes nothing to specificity, so the
 * reset sits at (0,1,0) and anything later wins. */
.as-stem :where(p, h1, h2, h3, ul, figure, figcaption) { margin: 0; padding: 0; }

.as-stem :where(ul) { list-style: none; }

.as-stem-wrap {
  max-width: 980px;
  margin: 0 auto;
}

/* Visually hidden but read aloud: the "How it works" heading is in the
 * structure the handoff specifies but is not drawn in the mockup. */
.as-stem-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Both buttons. The handoff gives the banner's as 52px tall and the sixth
 * card's as 48px; min-height rather than height, so a label that wraps on a
 * 320px screen makes the button taller instead of spilling out of it. Either
 * way the touch target clears 44px. */
.as-stem-btn {
  display: inline-block;
  min-height: 52px;
  padding: 15px 28px;
  border: 0;
  border-radius: 10px;
  background: var(--as-yellow);
  color: var(--as-navy);
  font-family: questrial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Agreed with the business on #66: the same light grey the three Programs page
 * jump buttons use, with navy text rather than their blue. */
.as-stem-btn:hover,
.as-stem-btn:focus {
  background: var(--as-hover);
  color: var(--as-navy);
}

.as-stem-btn:focus-visible {
  outline: 3px solid var(--as-navy);
  outline-offset: 3px;
}

/* ---- banner ------------------------------------------------------------- */

.as-stem-banner {
  background: var(--as-navy);
  padding: 36px 20px 40px;
}

.as-stem-h1 {
  color: #fff;
  font-size: 42px;
  font-weight: bold;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.as-stem-intro {
  margin-top: 24px;
  color: var(--as-on-navy);
  font-size: 18px;
  line-height: 1.45;
}

.as-stem-sub {
  margin-top: 24px;
  color: var(--as-on-navy-dim);
  font-size: 16px;
  line-height: 1.5;
}

.as-stem-cta { margin-top: 24px; }

/* The photo cluster: three cards over two, overlapping, each tilted a few
 * degrees and alternating left and right. The overlap is a negative margin
 * rather than absolute positioning, so the rows stay centred at any width and
 * nothing has to be measured. */
.as-stem-shots {
  margin-top: 32px;
}

.as-stem-shots-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Overlap enough to read as a stack, not so much that it eats the captions on
 * the row above -- the caption sits at the bottom of each card. */
.as-stem-shots-row-low { margin-top: -6px; }

.as-stem-shot {
  width: var(--as-shot-w);
  flex: 0 0 auto;
  padding: 10px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

/* Barely overlapped on a phone, because the caption sits under each card and a
 * deep overlap eats the one next to it -- the approved mockup keeps all five
 * readable and lets the long ones wrap. The mockup is drawn at 392px and the
 * mobile tree is pinned to 320, so the cards are proportionally smaller here. */
.as-stem-shot + .as-stem-shot { margin-left: -12px; }

.as-stem-shot-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 148 / 111;
  object-fit: cover;
  border-radius: 3px;
}

.as-stem-shot-cap {
  margin-top: 7px;
  color: var(--as-ink);
  font-size: 12px;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
}

/* The tilts the handoff specifies, in order. Later cards sit on top of earlier
 * ones so the overlap reads left to right. */
.as-stem-shot-a { transform: rotate(-4deg); z-index: 1; }
.as-stem-shot-b { transform: rotate(3deg);  z-index: 2; }
.as-stem-shot-c { transform: rotate(-2deg); z-index: 3; }
.as-stem-shot-d { transform: rotate(3deg);  z-index: 4; }
.as-stem-shot-e { transform: rotate(-3deg); z-index: 5; }

/* ---- how it works ------------------------------------------------------- */

.as-stem-how {
  background: #fff;
  border-bottom: 1px solid var(--as-hairline);
  padding: 28px 20px;
}

.as-stem-how-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.as-stem-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--as-tag);
  color: var(--as-navy);
}

.as-stem-how-h {
  margin-top: 12px;
  color: var(--as-ink);
  font-size: 17px;
  font-weight: bold;
  line-height: 1.25;
}

.as-stem-how-p {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.45;
}

/* ---- what we can teach -------------------------------------------------- */

.as-stem-teach {
  padding: 40px 20px 56px;
}

.as-stem-h2 {
  color: var(--as-ink);
  font-size: 32px;
  font-weight: bold;
  line-height: 1.1;
}

.as-stem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 32px;
}

.as-stem-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--as-card-shadow);
}

.as-stem-card-img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.as-stem-card-body { padding: 22px 24px; }

.as-stem-card-h {
  color: var(--as-ink);
  font-size: 24px;
  font-weight: bold;
  line-height: 1.15;
}

.as-stem-label-wrap { margin-top: 12px; }

.as-stem-label {
  display: inline-block;
  padding: 4px 9px;
  border: 1px solid var(--as-navy);
  border-radius: 6px;
  color: var(--as-navy);
  font-size: 13px;
  font-weight: bold;
  line-height: 1.2;
}

.as-stem-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.as-stem-tag {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--as-tag);
  color: var(--as-navy);
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2;
}

/* The sixth card: navy, no photo, contents centred down the card. */
.as-stem-card-ask {
  justify-content: center;
  background: var(--as-navy);
  box-shadow: none;
}

.as-stem-card-ask .as-stem-card-body { padding: 28px; }

.as-stem-ask-h {
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  line-height: 1.15;
}

.as-stem-ask-p {
  margin-top: 12px;
  color: var(--as-on-navy);
  font-size: 17px;
  line-height: 1.45;
}

/* The sixth card's button is 48px, not the banner's 52px.
 *
 * Full width of the card body rather than shrink-to-fit: "Talk to Us About
 * STEM & STEAM" is 28 characters and the card is 308px wide on desktop and
 * 280px on a phone, so at the specified 18px the label wraps to two lines
 * whatever the padding. A full-width button that wraps reads as deliberate;
 * an inline one that wraps reads as cramped. The height is therefore ~70px
 * rather than the handoff's 48 -- a consequence of the label length at this
 * card width, not a choice about the button. */
.as-stem-btn-card {
  display: block;
  min-height: 48px;
  padding: 13px 20px;
}

/* ---- the two trees, and why the breakpoints sit where they do -------------
 *
 * There is no fluid middle. The mobile tree pins its viewport to width=320 and
 * the desktop tree never lays out narrower than 980px, because every Wix
 * section on it carries min-width:980px -- a narrow window scrolls sideways
 * rather than reflowing. Tablets get the desktop tree (verify-variants checks
 * that), so an iPad renders a 980px-wide page in an 820px viewport.
 *
 * Keying the phone layout off the viewport was therefore wrong: at an 880px
 * window the media query said "phone" and drew 96px photo cards inside a box
 * that was still 980px wide, which left them marooned. So 601px separates the
 * two trees -- nothing legitimately renders between 320 and 600 -- and
 * everything above it gets the full-size layout.
 */

@media (min-width: 601px) {
  .as-stem { --as-shot-w: 168px; }

  .as-stem-h1 { font-size: 68px; }
  .as-stem-intro { font-size: 21px; }
  .as-stem-sub { font-size: 18px; }

  .as-stem-banner { padding: 56px 40px 64px; }
  .as-stem-shots { margin-top: 40px; }
  .as-stem-shots-row-low { margin-top: -8px; }
  .as-stem-shot + .as-stem-shot { margin-left: -16px; }
  .as-stem-shot-cap { font-size: 14px; }

  .as-stem-how { padding: 36px 20px; }
  .as-stem-how-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .as-stem-how-h { font-size: 19px; }
  .as-stem-how-p { font-size: 16px; }

  .as-stem-teach { padding: 64px 20px 96px; }
  .as-stem-h2 { font-size: 44px; }
  .as-stem-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .as-stem-card-img { height: 240px; }
  .as-stem-card-ask .as-stem-card-body { padding: 36px; }
}

/* ---- wide enough for the banner's two columns ----------------------------
 *
 * 560px of text + a 40px gap + the 472px photo cluster is 1072px, and the
 * banner's 80px side padding makes 1232px the narrowest window that fits it.
 * Below that the banner stacks -- at full size, which is the point -- rather
 * than being squeezed. The approved mockup is drawn at 1280, so the designed
 * layout is what nearly every desktop window gets.
 */

@media (min-width: 1232px) {
  .as-stem-banner {
    display: flex;
    align-items: center;
    min-height: 620px;
    padding: 40px 80px;
  }

  .as-stem-banner-grid {
    display: grid;
    grid-template-columns: 560px 1fr;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 1120px;
  }

  .as-stem-shots { margin-top: 0; }
}