/* ==========================================================================
   Eleganz Kids International Preschool — Programmes page
   Loads after style.css. Four things live here: the credit to Caprics Learning
   Lab, the age-group detail rows, the Story Lab / Scholastic Lab rows, and this
   page's own tweaks to the shared programme cards.

   The Caprics credit is a credit, not a second brand on the page, so it is
   deliberately held back: it lives entirely in the brand teal (the quietest of
   the three brand colours), it never takes a heading, it never takes a button,
   and it never sits above the programme cards in the visual hierarchy. Two
   touches are left — a line in the section intro and a mark over the cards.
   (A product strip under them was removed on 2026-09-23.) The CTA band carries
   no credit: it is the school's own ask and stays single-minded.
   ========================================================================== */

/* ------------------------------------------------ white programmes band */
/* This page's programmes section runs on plain white, not the pink-50 the home
   page uses. Two things were leaning on that tint and have to be given their
   own edge back now that there is none. */

/* The cards' tint borders are near-invisible against white, so the shadow has
   to carry the edge instead. Hover still deepens the border, so the
   interaction reads the same. */
#programmes .programme { box-shadow: var(--shadow-sm); }

/* ------------------------------------------------- partner line (intro) */
/* Second paragraph in .section-head. A step smaller and a shade darker than
   the intro above it, so it reads as a supporting note rather than a second
   pitch competing with the section's own copy. */
.section-head .caprics-note {
  margin-top: var(--sp-4);
  font-size: 16px;
  color: var(--ink-soft);
}
.caprics-note strong {
  font-weight: 700;
  color: var(--green-900);
}

/* --------------------------------------------------- "powered by" mark */
/* Small caps line sitting directly over the three cards, close enough to read
   as their caption. It takes the top margin .programme-grid would have had,
   and the grid then tucks up under it. */
.caprics-mark {
  position: relative;
  z-index: var(--z-content);   /* clear of .programmes-confetti */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: clamp(36px, 4vw, 56px);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-700);
}
.caprics-mark svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--teal-600);
}
.caprics-mark strong {
  font-weight: 800;
  color: var(--green-900);
}
.caprics-mark + .programme-grid { margin-top: var(--sp-5); }

/* ------------------------------------------------- age-group detail rows */
/* This section kept reading as a second copy of the programmes section above
   it: same centred eyebrow, same big centred heading, same three programmes
   in a row of cards. So it drops all three. The title moves to a narrow
   left-hand column and sticks there while the prose scrolls past, and the
   three age groups become a plainly divided list — no cards, no borders but
   the hairline between them. Reference material, not a second pitch. */
.day-detail {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 86px);
  align-items: start;
}

.day-detail-intro {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-6));
}
.day-detail-intro h2 { font-size: clamp(25px, 2.7vw, 34px); }
.day-detail-intro p {
  margin-top: var(--sp-4);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-muted);
}

.age-details { display: grid; }

/* A rule between entries, not around them. */
.age-detail + .age-detail {
  margin-top: clamp(28px, 3.4vw, 44px);
  padding-top: clamp(28px, 3.4vw, 44px);
  border-top: 1.5px solid var(--border);
}

/* Name and age on one line, the name taking the card's tint so the three are
   still colour-coded to the programmes above without needing a panel each. */
.age-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.age-detail-head h3 {
  font-size: clamp(20px, 2vw, 25px);
  color: var(--tint-ink);
}
/* The chip is built for a programme card, where it sits above a heading in a
   flex column; on this line its own bottom margin would knock it off centre. */
.age-detail-head .age-chip { margin-bottom: 0; }

.age-detail-body p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink-soft);
}
.age-detail-body p + p { margin-top: var(--sp-5); }

/* ------------------------------------------------------- learning spaces */
/* Story Lab and Scholastic Lab. Photograph on one side, the explanation on
   the other, and the second row flipped so the page alternates rather than
   marching down one edge. */
.lab-rows {
  display: grid;
  gap: clamp(36px, 5vw, 72px);
  margin-top: clamp(36px, 4vw, 56px);
}

/* Each row is a tinted panel of its own. Loose on white, the rows read as two
   stray photographs with paragraphs beside them; the panel gives the pair an
   edge and puts colour on a page that is mostly white between the cards and
   the CTA. The picture column is the narrower of the two — at an even split
   these photographs swamped the words, which are the point of the row. */
.lab-row {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(26px, 3.4vw, 52px);
  border-radius: var(--r-xl);
  background: var(--tint-soft);
  border: 1.5px solid var(--tint);
}
/* `direction` would flip the text too. Ordering the columns is the one change
   that moves the picture without touching anything inside it — but the track
   widths have to swap with it, or the flipped row hands the narrow column to
   the prose and the wide one to a photo that is capped anyway. */
.lab-row--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); }
.lab-row--flip .lab-art { order: 2; }

/* A white mount with a slight tilt, the same trick .pill-label uses — on a
   tinted panel a flat square photo looks stuck on, and these are pictures of
   a puppet theatre and a play room, not architecture. */
.lab-art {
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
  padding: 10px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  rotate: -1.6deg;
  transition: rotate var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.lab-row--flip .lab-art { rotate: 1.6deg; }
.lab-row:hover .lab-art { rotate: 0deg; transform: translateY(-4px); }

/* Square, because both photographs are. A landscape frame took a third off
   the Story Lab picture, banner included, and the banner is the half that
   says what it is. `top` so the trim that is left comes off the floor. */
.lab-art img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  border-radius: 18px;
}

/* White, not the row tint — the panel behind it is already that colour. */
.lab-body .eyebrow {
  background: var(--surface);
  color: var(--tint-ink);
}
.lab-body .eyebrow::before { background: var(--tint-ink); }

.lab-body h3 {
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.28;
}
.lab-body p {
  margin-top: var(--sp-5);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* What the corner is actually for, at a glance — the prose above used to
   spell this out in a second long paragraph that nobody was going to read.
   Cycled through the three brand accents rather than the row's own tint, so
   both rows get the same spread of colour. */
.lab-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
/* 13px rather than 14: at the larger size the four Scholastic Lab tags came
   to about two pixels wider than their column and dropped the last one onto
   a line of its own. */
.lab-tags li {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 2px solid var(--teal-400);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--teal-700);
}
.lab-tags li:nth-child(3n+2) { border-color: var(--pink-400);  color: var(--pink-800); }
.lab-tags li:nth-child(3n)   { border-color: var(--amber-500); color: var(--amber-700); }

/* ------------------------------------------------------------ responsive */
/* Below this the prose column is too narrow to be worth the split — the copy
   starts breaking into six-word lines. Stack, and the chip and heading become
   a header line above the text. */
@media (max-width: 860px) {
  /* The title stacks above the list and stops sticking — a sticky block is
     no use once it is the thing scrolling past. */
  .day-detail {
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 40px);
  }
  .day-detail-intro { position: static; }

  /* Picture over text, and the flip is dropped — alternating sides means
     nothing in one column, and `order` would only push one photo below its
     own paragraphs. */
  .lab-row { grid-template-columns: 1fr; }
  .lab-row--flip .lab-art { order: 0; }
}

@media (max-width: 560px) {
  .caprics-mark { letter-spacing: .08em; font-size: 11.5px; }
  .section-head .caprics-note { font-size: 15.5px; }

  .age-detail-body p { font-size: 15.5px; line-height: 1.8; }
}