/* ============================================================
   Programmes We Offer — home page section styles.
   Markup: PROGRAMMES_HOME.php  |  Renderer: PROGRAMMES_HOME.js

   Soft-UI (neumorphic) card grid: every programme is a raised card on a
   tinted canvas, listing its elective subjects as embossed pills.
   Nothing collapses — the whole curriculum is visible at a glance.

   COLOUR — the entire section is derived from ONE anchor, --progHome-brand,
   which points at the school's main colour (--bg-color in
   domain_colors/<host>.css). Canvas, cards and chips are progressively
   lighter tints of that single colour and the type is progressively darker
   shades of it, so the whole block reads as a soft gradient of the site
   theme instead of a palette of its own. Nothing below is hue-specific:
   repoint --progHome-brand and the section re-tints wholesale, and a school
   with a blue/maroon/green theme each gets a section in its own family.

   Every tinted token is declared twice — a plain colour first, then the
   color-mix() version — so browsers that cannot parse color-mix() keep the
   flat fallback (same convention as ADMISSION_LOGIN2.css).
   ============================================================ */

.programmesHomeSection,
.programmesHomeSectionWave {
  /* Anchors: the site's main colour, plus its lighter sibling for accents. */
  --progHome-brand: var(--bg-color, #103d2d);
  --progHome-brand-lift: var(--hover-color, var(--progHome-brand));

  /* Canvas the cards sit on — a whisper of the brand over white. */
  --progHome-canvas: #eef1f0;
  --progHome-canvas: color-mix(in srgb, var(--progHome-brand) 7%, #ffffff);
  --progHome-canvas-deep: #e3e9e7;
  --progHome-canvas-deep: color-mix(in srgb, var(--progHome-brand) 13%, #ffffff);
  /* The foot lifts back to near-white so the section melts into the
     (near-white) block below it instead of ending on a hard edge. */
  --progHome-canvas-foot: #f7f9f8;
  --progHome-canvas-foot: color-mix(in srgb, var(--progHome-brand) 3%, #ffffff);

  /* Raised card: near-white at the lit corner, tinted at the foot. */
  --progHome-card-top: #fbfcfc;
  --progHome-card-top: color-mix(in srgb, var(--progHome-brand) 2%, #ffffff);
  --progHome-card-bottom: #e9eeec;
  --progHome-card-bottom: color-mix(in srgb, var(--progHome-brand) 10%, #ffffff);

  /* Embossed chips sit one step deeper than the card face. */
  --progHome-chip-top: #f4f7f6;
  --progHome-chip-top: color-mix(in srgb, var(--progHome-brand) 5%, #ffffff);
  --progHome-chip-bottom: #e6ecea;
  --progHome-chip-bottom: color-mix(in srgb, var(--progHome-brand) 12%, #ffffff);

  /* Type — deep / mid / muted, all the same hue as the brand. */
  --progHome-ink-deep: #0a251b;
  --progHome-ink-deep: color-mix(in srgb, var(--progHome-brand) 94%, #000000);
  --progHome-ink: var(--progHome-brand);
  --progHome-ink-soft: #4f6e63;
  --progHome-ink-soft: color-mix(in srgb, var(--progHome-brand) 70%, #ffffff);

  /* Hairlines + the neumorphic shade/light pair (shade is brand-tinted, the
     highlight stays white — that is the light source, not a brand colour). */
  --progHome-hair: rgba(16, 61, 45, 0.26);
  --progHome-hair: color-mix(in srgb, var(--progHome-brand) 26%, transparent);
  --progHome-hair-fade: rgba(16, 61, 45, 0.06);
  --progHome-hair-fade: color-mix(in srgb, var(--progHome-brand) 6%, transparent);
  --progHome-shade: rgba(16, 61, 45, 0.22);
  --progHome-shade: color-mix(in srgb, var(--progHome-brand) 22%, transparent);
  --progHome-shade-soft: rgba(16, 61, 45, 0.15);
  --progHome-shade-soft: color-mix(in srgb, var(--progHome-brand) 15%, transparent);
  --progHome-light: rgba(255, 255, 255, 0.92);
  --progHome-card-radius: 22px;
}

/* ---------- Wave divider into the section ---------- */

.programmesHomeSectionWave {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0.05rem;
  margin-bottom: 0;
  line-height: 0;
  pointer-events: none;
  z-index: 1;
}

.programmesHomeSectionWave .programmesHomeSectionWave-svg {
  display: block;
  width: 100%;
  height: 1.75rem;
}

/* The three layers step from a translucent brand tint into the solid canvas,
   so whatever section sits above shows through the first two. */
.programmesHomeSectionWave .programmesHomeSectionWave-layer1 {
  fill: rgba(16, 61, 45, 0.09);
  fill: color-mix(in srgb, var(--progHome-brand) 9%, transparent);
}

.programmesHomeSectionWave .programmesHomeSectionWave-layer2 {
  fill: rgba(227, 233, 231, 0.78);
  fill: color-mix(in srgb, var(--progHome-canvas-deep) 78%, transparent);
}

.programmesHomeSectionWave .programmesHomeSectionWave-layer3 {
  fill: #eef1f0;
  fill: var(--progHome-canvas);
}

/* ---------- Section shell ---------- */

.programmesHomeSection {
  position: relative;
  isolation: isolate;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 2.6rem;
  scroll-margin-top: 5rem;
}

/* Full-bleed canvas the cards sit on. Starts at exactly the wave's fill so the
   divider is seamless, deepens through the card grid so the raised cards read
   clearly against it, then lifts back to near-white at the foot to hand off to
   the block below. Two faint brand glows sit in opposite corners so the whole
   thing reads as one soft gradient of the school colour. */
.programmesHomeSection::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(50% - 50vw);
  width: 100vw;
  top: 0;
  bottom: 0;
  background: var(--progHome-canvas);
  background:
    radial-gradient(120% 58% at 10% 0%,
      color-mix(in srgb, var(--progHome-brand-lift) 7%, transparent) 0%,
      transparent 62%),
    radial-gradient(120% 62% at 90% 100%,
      color-mix(in srgb, var(--progHome-brand) 8%, transparent) 0%,
      transparent 64%),
    linear-gradient(180deg,
      var(--progHome-canvas) 0%,
      var(--progHome-canvas-deep) 54%,
      var(--progHome-canvas-foot) 100%);
  pointer-events: none;
}

.programmesHomeSection .programmesHomeSectionHero {
  position: relative;
  isolation: isolate;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 0.5rem;
  padding:
    1.4rem
    max(1rem, calc((100vw - 68rem) / 2))
    1.05rem;
  background: transparent;
  overflow: hidden;
}

/* ---------- Hero title block ---------- */

.programmesHomeSection .programmesHomeTitle {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(11rem, 13.5rem) minmax(0, 1fr);
  gap: 1.45rem;
  align-items: center;
  max-width: 68rem;
  margin: 0 auto !important;
  padding: 0 0 1rem;
}

.programmesHomeSection .programmesHomeTitle::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--progHome-hair) 12%, var(--progHome-hair) 88%, transparent 100%);
  pointer-events: none;
}

.programmesHomeSection .programmesHomeTitle-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.85rem;
  min-height: 100%;
  padding: 0.45rem 1.25rem 0.45rem 0.25rem;
  border-right: 1px solid var(--progHome-hair);
}

.programmesHomeSection .programmesHomeTitle-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(145deg, var(--progHome-card-top), var(--progHome-card-bottom));
  box-shadow:
    3px 3px 7px var(--progHome-shade-soft),
    -3px -3px 7px var(--progHome-light);
  color: var(--progHome-ink);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.programmesHomeSection .programmesHomeTitle-note {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--progHome-ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.programmesHomeSection .programmesHomeTitle-note::before {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: linear-gradient(90deg, var(--progHome-hair) 0%, var(--progHome-hair-fade) 100%);
}

.programmesHomeSection .programmesHomeTitle-inner {
  position: relative;
  max-width: 44rem;
  margin: 0;
  padding: 0.15rem 0 0.15rem 1.2rem;
  text-align: left;
}

.programmesHomeSection .programmesHomeTitle-inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--progHome-ink-soft) 0%, var(--progHome-ink) 100%);
}

.programmesHomeSection .programmesHomeTitle h5 {
  margin: 0;
  color: var(--progHome-ink-deep);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.38rem;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.programmesHomeSection .programmesHomeTitle p {
  margin: 0.72rem 0 0;
  max-width: 42rem;
  color: var(--progHome-ink-soft);
  font-size: 0.97rem;
  line-height: 1.72;
}

/* ---------- Summary strip ---------- */

.programmesHomeSection .programmesHomeSummary {
  display: none;
  position: relative;
  z-index: 1;
  max-width: 68rem;
  margin: 0.35rem auto 1.15rem;
  padding: 0 1rem;
}

.programmesHomeSection .programmesHomeSummary.is-ready {
  display: block;
}

.programmesHomeSection .programmesHomeSummary-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 2.4rem;
  padding: 0.85rem 1.35rem;
  border-radius: 16px;
  border: 0;
  background: linear-gradient(145deg, var(--progHome-card-top), var(--progHome-card-bottom));
  box-shadow:
    6px 6px 14px var(--progHome-shade-soft),
    -6px -6px 14px var(--progHome-light);
}

.programmesHomeSection .progHome-summaryItem {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  color: var(--progHome-ink-soft);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.programmesHomeSection .progHome-summaryItem b {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--progHome-ink-deep);
}

.programmesHomeSection .progHome-summaryNote {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--progHome-ink-soft);
  font-size: 0.76rem;
  font-style: italic;
}

.programmesHomeSection .progHome-summaryNote i {
  font-style: normal;
}

/* ---------- Card grid ---------- */

.programmesHomeSection .programmes_home_wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 0.25rem 1rem 0.6rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.35rem;
  align-items: stretch;
}

@media (min-width: 600px) {
  .programmesHomeSection .programmes_home_wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .programmesHomeSection .programmes_home_wrapper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Loading skeleton ---------- */

.programmesHomeSection .progHome-skeleton {
  height: 17rem;
  border-radius: var(--progHome-card-radius);
  background: linear-gradient(145deg, var(--progHome-card-top), var(--progHome-card-bottom));
  box-shadow:
    8px 8px 18px var(--progHome-shade-soft),
    -8px -8px 18px var(--progHome-light);
  opacity: 0.75;
  animation: progHomePulse 1.5s ease-in-out infinite;
}

@keyframes progHomePulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.85; }
}

@keyframes progHomeRise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Programme card ---------- */

.programmesHomeSection .progHome-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.4rem 1.35rem 1.55rem;
  border: 0;
  border-radius: var(--progHome-card-radius);
  background: linear-gradient(145deg, var(--progHome-card-top) 0%, var(--progHome-card-bottom) 100%);
  box-shadow:
    9px 9px 20px var(--progHome-shade),
    -9px -9px 20px var(--progHome-light);
  animation: progHomeRise 0.55s cubic-bezier(0.22, 0.72, 0.3, 1) both;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.programmesHomeSection .progHome-card:hover {
  transform: translateY(-3px);
  box-shadow:
    12px 12px 26px var(--progHome-shade),
    -12px -12px 26px var(--progHome-light);
}

/* ---------- Corner ribbon ----------
   A band laid across the top-right corner of every card — the product "NEW"
   badge motif, used purely as ornament (no text), so each pale card is
   pinned back to the system colour.

   COLOUR — a TINT of the brand, never the brand at full strength: every stop
   is mixed with white so the ribbon sits a step lighter than the site's main
   colour while staying unmistakably the same hue. Keep it that way if you
   re-tune the stops.

   GEOMETRY — --progHome-ribbon-near/-far are the distances from the corner,
   measured along each edge, to the band's two ends. Both bounds are real,
   not taste:
     near  >  the 22px card radius, so the band lands on the STRAIGHT part of
              each edge; any smaller and its tip pokes outside the rounded
              corner (the card has no overflow clip — that would swallow the
              ribbon's drop shadow).
     far   <  the "01" index badge's offset from the card top (~61px measured
              live, ~57px on mobile), so the band never reaches the badge.
   Re-measure both if the card padding or radius ever changes. */

.programmesHomeSection .progHome-card {
  --progHome-ribbon-near: 1.5rem;
  --progHome-ribbon-far: 2.75rem;
}

.programmesHomeSection .progHome-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: 3.2rem;
  height: 3.2rem;
  pointer-events: none;
  /* Lifted → mid → settled, all tints of the brand, so the band carries a
     sheen along its length without darkening past the main colour. */
  background: linear-gradient(135deg, #617f74 0%, #406457 52%, #1e493a 100%);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--progHome-brand) 66%, #ffffff) 0%,
    color-mix(in srgb, var(--progHome-brand) 80%, #ffffff) 52%,
    color-mix(in srgb, var(--progHome-brand) 94%, #ffffff) 100%);
  filter: drop-shadow(0 1px 2px var(--progHome-shade));
  transition: filter 0.3s ease;
  clip-path: polygon(
    calc(100% - var(--progHome-ribbon-far)) 0,
    calc(100% - var(--progHome-ribbon-near)) 0,
    100% var(--progHome-ribbon-near),
    100% var(--progHome-ribbon-far)
  );
}

.programmesHomeSection .progHome-card:hover::after {
  filter: drop-shadow(0 2px 5px var(--progHome-shade));
}

/* Card content always paints above the ornament, so the ribbon can never end
   up over the index badge or title even if a tenant's font metrics shift the
   layout down. */
.programmesHomeSection .progHome-card > * {
  position: relative;
  z-index: 1;
}

/* Pin mark */
.programmesHomeSection .progHome-pin {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--progHome-ink);
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.9;
}

/* Title row: programme name + index badge */
.programmesHomeSection .progHome-cardHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.programmesHomeSection .progHome-cardName {
  margin: 0;
  color: var(--progHome-ink-deep);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.42rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.programmesHomeSection .progHome-cardIndex {
  flex-shrink: 0;
  padding: 0.28rem 0.5rem;
  border-radius: 9px;
  background: linear-gradient(145deg, var(--progHome-chip-bottom), var(--progHome-chip-top));
  box-shadow:
    inset 2px 2px 4px var(--progHome-shade-soft),
    inset -2px -2px 4px var(--progHome-light);
  color: var(--progHome-ink-soft);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
}

/* "ELECTIVES · 5" label with a rule running to the card edge */
.programmesHomeSection .progHome-divider {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.95rem;
}

.programmesHomeSection .progHome-dividerLabel {
  color: var(--progHome-ink-soft);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.programmesHomeSection .progHome-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--progHome-hair) 0%, var(--progHome-hair-fade) 100%);
}

/* ---------- Elective subject pills ---------- */

.programmesHomeSection .progHome-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.programmesHomeSection .progHome-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.44rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--progHome-chip-top) 0%, var(--progHome-chip-bottom) 100%);
  box-shadow:
    3px 3px 7px var(--progHome-shade-soft),
    -3px -3px 7px var(--progHome-light);
  color: var(--progHome-ink);
  font-size: 0.79rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.3;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.programmesHomeSection .progHome-chip:hover {
  transform: translateY(-1px);
  box-shadow:
    4px 4px 9px var(--progHome-shade),
    -4px -4px 9px var(--progHome-light);
}

/* Programme whose electives are not mapped yet */

.programmesHomeSection .progHome-noElectives {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: var(--progHome-ink-soft);
  font-size: 0.8rem;
  font-style: italic;
}

/* Empty state (kept for safety; the JS normally hides the section) */

.programmesHomeSection .progHome-empty {
  grid-column: 1 / -1;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--progHome-card-top), var(--progHome-card-bottom));
  box-shadow:
    6px 6px 14px var(--progHome-shade-soft),
    -6px -6px 14px var(--progHome-light);
  color: var(--progHome-ink-soft);
  text-align: center;
  padding: 1.4rem 1rem;
  font-size: 0.92rem;
}

/* ---------- Mobile ---------- */

@media (max-width: 767.98px) {
  .programmesHomeSection {
    padding-bottom: 1.8rem;
  }

  .programmesHomeSection .programmesHomeTitle {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
    padding-bottom: 0.85rem;
  }

  .programmesHomeSection .programmesHomeTitle-meta {
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
    padding: 0;
    border-right: 0;
  }

  .programmesHomeSection .programmesHomeTitle-note::before {
    width: 1.4rem;
  }

  .programmesHomeSection .programmesHomeTitle-inner {
    padding-left: 0.95rem;
  }

  .programmesHomeSection .programmesHomeTitle h5 {
    font-size: 1.72rem;
  }

  .programmesHomeSection .programmesHomeTitle p {
    font-size: 0.9rem;
    line-height: 1.62;
  }

  .programmesHomeSection .programmesHomeSummary-inner {
    gap: 0.35rem 1.4rem;
    padding: 0.75rem 1rem;
  }

  .programmesHomeSection .progHome-summaryItem {
    font-size: 0.64rem;
    letter-spacing: 0.12em;
  }

  .programmesHomeSection .progHome-summaryItem b {
    font-size: 1.1rem;
  }

  .programmesHomeSection .progHome-summaryNote {
    display: none;
  }

  .programmesHomeSection .programmes_home_wrapper {
    gap: 1.15rem;
  }

  .programmesHomeSection .progHome-card {
    padding: 1.25rem 1.15rem 1.35rem;
  }

  .programmesHomeSection .progHome-cardName {
    font-size: 1.28rem;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .programmesHomeSection .progHome-card,
  .programmesHomeSection .progHome-card::after,
  .programmesHomeSection .progHome-chip {
    transition: none;
  }

  .programmesHomeSection .progHome-card {
    animation: none;
  }

  .programmesHomeSection .progHome-skeleton {
    animation: none;
  }
}