/* ==========================================================================
   Ycotes — homepage sections.
   Loaded only on /. Tokens only, no raw hex.
   ========================================================================== */

/* The hero, faq, closing band and .card__link now live in site.css — they are
   used by the business pages too, and one copy is the whole point of a token
   system. Only home-specific rules remain below. */

/* --- Proof strip ------------------------------------------------------- */
.proof {
  padding-block: var(--s-8);
  border-block: 1px solid var(--surface-line);
  background: var(--surface-1);
}
.proof .stats { justify-content: space-between; }

/* --- The two doors ----------------------------------------------------- */
.doors { align-items: stretch; }

.door-card {
  display: flex; flex-direction: column;
  padding: var(--s-8);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  text-decoration: none;
  transition: transform var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.door-card:hover { transform: translateY(-4px); }
.door-card h3 { font-size: var(--fs-h2); max-width: 16ch; }
.door-card p  { color: var(--text-mid); }

.door-card--students:hover {
  border-color: color-mix(in srgb, var(--y-yellow) 55%, transparent);
  box-shadow: var(--glow-yellow);
}
.door-card--business:hover {
  border-color: color-mix(in srgb, var(--y-red) 55%, transparent);
  box-shadow: var(--glow-red);
}

.door-card__list { margin: var(--s-4) 0 var(--s-8); }
.door-card__list li {
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--surface-line);
  font-size: var(--fs-sm); color: var(--text-mid);
}
.door-card__go {
  margin-top: auto; font-weight: 600; color: var(--text-hi);
  transition: color var(--dur-fast) var(--ease-out);
}
.door-card:hover .door-card__go { color: var(--accent-ink); }

/* --- Chapters ---------------------------------------------------------- */
.chapter__head { margin-bottom: var(--s-12); }
.chapter__num {
  font-family: var(--font-mono); font-size: var(--fs-h3);
  color: var(--accent-ink); margin: 0 0 var(--s-3);
  font-variant-numeric: tabular-nums;
}
.chapter--alt { background: var(--surface-1); border-block: 1px solid var(--surface-line); }
.chapter__foot { margin-top: var(--s-8); }

.work-card .eyebrow { color: var(--text-lo); }

/* --- Trust ------------------------------------------------------------- */
.trust__links { margin-top: var(--s-6); font-weight: 600; }
.trust__links a { color: var(--accent-ink); text-decoration: none; }

.cred-list { display: grid; gap: var(--s-3); align-content: start; }
.cred {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--s-2);
  padding: var(--s-4);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  background: var(--surface-1);
}
.cred__what { color: var(--text-hi); font-weight: 600; font-size: var(--fs-sm); }
.cred__who  { color: var(--accent-ink); font-family: var(--font-mono); font-size: var(--fs-xs);
              letter-spacing: 0.04em; text-transform: uppercase; }

/* --- The one-shot loop steps ------------------------------------------- */
.steps { display: grid; gap: var(--s-3); align-content: start; }
.step {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--surface-line); border-radius: var(--radius);
  background: var(--surface-0);
}
.step__n {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--y-yellow); color: var(--y-black);
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700;
}
.step__t { color: var(--text-hi); font-size: var(--fs-sm); font-weight: 600; }

/* --- Hand-off to the business door -------------------------------------
   Deliberately quieter than the student sections above it. It is an exit for
   the minority who need it, not a second pitch competing with the first. */
.handoff { border-top: 1px solid var(--surface-line); }
.handoff .section__title { max-width: 18ch; }
.handoff .btn + .btn { margin-left: var(--s-2); }

/* --- Upskilling tracks --------------------------------------------------- */
.tracks { display: grid; gap: var(--s-3); align-content: start; }
.track {
  position: relative; display: grid; gap: var(--s-2);
  padding: var(--s-5) var(--s-6) var(--s-5) var(--s-8);
  border: 1px solid var(--surface-line); border-radius: var(--radius);
  background: var(--surface-1); overflow: hidden;
  transition: border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}
/* A yellow rule down the left edge. Grows on hover, so the list has a pulse
   instead of four identical grey boxes. */
.track::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--y-yellow); opacity: 0.45;
  transition: width var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.track:hover {
  transform: translateX(4px);
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--y-yellow) 45%, var(--surface-line));
}
.track:hover::before { width: 5px; opacity: 1; }

.track__name {
  color: var(--text-hi); font-weight: 600;
  font-size: var(--fs-body-lg); letter-spacing: -0.01em;
}
/* Was --text-lo, which is caption grey — on a card that reads as disabled
   rather than secondary. --text-mid is the body colour and stays legible. */
.track__note { color: var(--text-mid); font-size: var(--fs-sm); line-height: 1.55; }

/* --- Course cards ------------------------------------------------------- */
.course-card { display: flex; flex-direction: column; }
.course-card__top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-2);
}
.course-card__top .card__title { margin: 0; }
.course-card__learn { display: grid; gap: var(--s-2); margin: var(--s-4) 0 var(--s-6); }
.course-card__learn li {
  font-size: var(--fs-sm); color: var(--text-mid);
  padding-left: var(--s-5); position: relative;
}
.course-card__learn li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--y-yellow);
}
.course-card__foot {
  margin-top: auto; padding-top: var(--s-4);
  border-top: 1px solid var(--surface-line);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
}
.course-card__price {
  font-family: var(--font-display); font-size: var(--fs-h3);
  color: var(--text-hi); letter-spacing: -0.02em;
}

/* --- Course catalogue ---------------------------------------------------- */
.track-group { margin-bottom: var(--s-12); }
.track-group__h {
  display: flex; align-items: baseline; gap: var(--s-3);
  font-size: var(--fs-h3); margin-bottom: var(--s-6);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--surface-line);
}
.track-group__h span {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--accent-ink); font-weight: 400;
}
.course-card__thumb {
  margin: calc(var(--s-6) * -1) calc(var(--s-6) * -1) var(--s-4);
  aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface-2);
}
.course-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-slow) var(--ease-out); }
.course-card:hover .course-card__thumb img { transform: scale(1.04); }
.course-card h4 { font-size: var(--fs-h3); margin-bottom: var(--s-2); }

/* --- Filter pills -------------------------------------------------------- */
.pills { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-8); }
.pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-5);
  border: 1px solid var(--surface-line); border-radius: var(--radius-pill);
  background: var(--surface-1); color: var(--text-mid);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.pill span { font-family: var(--font-mono); font-size: var(--fs-xs); opacity: 0.65; }
.pill:hover { border-color: var(--y-yellow); color: var(--text-hi); }
.pill.is-on { background: var(--y-yellow); border-color: var(--y-yellow); color: var(--y-black); }
.pill.is-on:hover { color: var(--y-black); }

/* Thumbnail fallback: a monogram beats a broken-image icon. */
.course-card__thumb--none {
  display: grid; place-items: center;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--y-yellow) 22%, var(--surface-2)),
    var(--surface-2));
}
.course-card__initial {
  font-family: var(--font-display); font-size: 3rem; font-weight: 600;
  color: color-mix(in srgb, var(--y-yellow) 70%, var(--text-lo));
}
.course-card h4 a { text-decoration: none; }
.course-card h4 a:hover { color: var(--accent-ink); }

.learnlist { list-style: none; }
.learnlist__item {
  padding: var(--s-4) var(--s-5); position: relative; padding-left: var(--s-8);
  border: 1px solid var(--surface-line); border-radius: var(--radius);
  background: var(--surface-1); color: var(--text-mid); font-size: var(--fs-sm);
}
.learnlist__item::before {
  content: ""; position: absolute; left: var(--s-5); top: 1.35em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--y-yellow);
}

/* --- Enrolment summary --------------------------------------------------- */
.enrol__summary { display: grid; gap: var(--s-3); margin: var(--s-6) 0; }
.enrol__summary > div {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--surface-line);
}
.enrol__summary dt { color: var(--text-lo); font-size: var(--fs-sm); margin: 0; }
.enrol__summary dd { margin: 0; color: var(--text-hi); font-size: var(--fs-sm); font-weight: 600; text-align: right; }
.enrol__total dd { font-family: var(--font-display); font-size: var(--fs-h3); }
.enrol__total { border-bottom: 0 !important; }

/* --- Curriculum accordion ------------------------------------------------ */
.curriculum { display: grid; gap: var(--s-2); max-width: 60rem; }
.cur__sec { border: 1px solid var(--surface-line); border-radius: var(--radius); background: var(--surface-1); }
/* GRID, not flex + space-between. With three items in the row (title, count,
   and the +/- pseudo-element) space-between distributes the free space BETWEEN
   them, so the lesson count landed at a different x on every row — wherever
   that module's title happened to end. Fixed columns pin it to one place, so
   the counts read as a column instead of a ragged scatter. */
.cur__sum {
  display: grid; grid-template-columns: 1fr auto 1.25rem;
  align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); cursor: pointer; list-style: none;
}
.cur__sum::-webkit-details-marker { display: none; }
.cur__sum::after { content: "+"; font-family: var(--font-mono); color: var(--accent-ink); text-align: right; }
.cur__sec[open] .cur__sum::after { content: "–"; }
.cur__title { color: var(--text-hi); font-weight: 600; font-size: var(--fs-body); }
.cur__meta { font-size: var(--fs-xs); color: var(--text-lo); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.cur__lectures { border-top: 1px solid var(--surface-line); }
.cur__lec {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--surface-line);
  font-size: var(--fs-sm); color: var(--text-mid);
}
.cur__lec:last-child { border-bottom: 0; }
.cur__lt { flex: 1; }
.cur__d { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-lo); }
.cur__lec--res .cur__lt { color: var(--text-lo); font-style: italic; }

/* ==========================================================================
   COURSE DETAIL — enrol card, highlights, certification, differentiators.
   Ported from courses/course.php on the live site.
   ========================================================================== */

.enrolgrid {
  display: grid;
  gap: clamp(var(--s-6), 4vw, var(--s-12));
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  align-items: start;
}
/* The card sticks while the highlights scroll past it. It is the only thing on
   the page a visitor may want at any moment, and a buy button they have to
   scroll back up to find is a buy button that does not get pressed. */
@media (min-width: 56rem) {
  .enrolcard { position: sticky; top: calc(var(--s-20) + var(--s-4)); }
}
@media (max-width: 56rem) {
  .enrolgrid { grid-template-columns: 1fr; }
}

.enrolcard {
  padding: clamp(var(--s-6), 3vw, var(--s-8));
  border-radius: var(--radius-lg);
  border: 1px solid var(--surface-line);
  background: linear-gradient(160deg, var(--surface-1), var(--surface-0));
  box-shadow: var(--shadow-card);
}
.enrolcard__eyebrow {
  font-size: var(--fs-xs); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--accent-ink); margin: 0 0 var(--s-4);
}
.enrolcard__price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  line-height: 1; letter-spacing: -0.03em;
  color: var(--text-hi); margin: 0 0 var(--s-2);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3);
  font-variant-numeric: tabular-nums;
}
.enrolcard__was {
  font-family: var(--font-body); font-size: var(--fs-body);
  color: var(--text-lo); text-decoration: line-through;
}
.enrolcard__off {
  font-family: var(--font-body); font-size: var(--fs-xs);
  padding: var(--s-1) var(--s-3); border-radius: var(--radius-pill);
  background: var(--y-red); color: var(--y-white); letter-spacing: 0.04em;
}
.enrolcard__terms { color: var(--text-lo); font-size: var(--fs-sm); margin: 0 0 var(--s-6); }
.enrolcard__go { display: block; width: 100%; text-align: center; }

.enrolcard__facts {
  list-style: none; padding: 0;
  margin: var(--s-6) 0 0;
  display: grid; gap: var(--s-3);
  border-top: 1px solid var(--surface-line); padding-top: var(--s-6);
}
.enrolcard__facts li {
  position: relative; padding-left: var(--s-6);
  color: var(--text-mid); font-size: var(--fs-sm);
}
/* A drawn tick rather than an emoji or an icon font: it inherits the accent
   colour, needs no extra request, and cannot render as a missing glyph. */
.enrolcard__facts li::before {
  content: ""; position: absolute; left: 0; top: 0.34em;
  width: 0.45rem; height: 0.8rem;
  border: solid var(--y-yellow); border-width: 0 2px 2px 0;
  rotate: 45deg;
}
.enrolcard__help {
  margin: var(--s-6) 0 0; padding-top: var(--s-5);
  border-top: 1px solid var(--surface-line);
  font-size: var(--fs-sm); color: var(--text-lo);
}

.highlights__list {
  list-style: none; padding: 0; margin: var(--s-6) 0 0;
  display: grid; gap: var(--s-4);
}
.highlights__list li {
  position: relative; padding-left: var(--s-8);
  color: var(--text-mid); font-size: var(--fs-body-lg); line-height: var(--lh-body);
}
.highlights__list li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: var(--s-5); height: 2px; background: var(--y-yellow);
}
.highlights__sub {
  margin: clamp(var(--s-10), 5vw, var(--s-16)) 0 var(--s-2);
  font-size: var(--fs-h3); color: var(--text-hi);
}
.highlights__lead { color: var(--text-mid); margin: 0 0 var(--s-6); }

.certgrid {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.certgrid__item {
  padding: var(--s-5);
  border-radius: var(--radius);
  border: 1px solid var(--surface-line);
  background: var(--surface-1);
}
.certgrid__t { font-size: var(--fs-body); margin: 0 0 var(--s-2); color: var(--text-hi); }
.certgrid__b { font-size: var(--fs-sm); color: var(--text-mid); margin: 0; line-height: var(--lh-body); }

.apart .chapter__num { color: var(--y-yellow); }

/* Fact list inside a card — the real counts, read from the database. */
.card__facts {
  list-style: none; margin: var(--s-4) 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-2);
}
.card__facts li {
  font-size: var(--fs-xs);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-pill);
  color: var(--text-mid);
}

/* ══════════════════════════════════════════════════════════════════════════
   THE STUDENT SIX — replaced the two autoplaying reels
   Six labelled doors with a live count each. This page is a chooser: nobody
   reads it, they scan it and click.
   ══════════════════════════════════════════════════════════════════════════ */
.sixgrid {
  display: grid;
  /* auto-fit, so it is 3 across on a laptop, 2 on a tablet and 1 on a phone
     without three separate breakpoints to keep in sync. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--s-4);
  width: min(var(--container), 100%); margin-inline: auto;
}

.sixtile {
  display: flex; flex-direction: column; gap: var(--s-3);
  min-width: 0; padding: var(--s-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--surface-line);
  background:
    linear-gradient(160deg, hsl(var(--h) 60% 55% / .07), transparent 60%),
    var(--surface-1);
  text-decoration: none;
  /* Colour only. A card that moves under its own hover is a feedback loop:
     the pointer leaves the new position, it moves back, it oscillates. */
  transition: border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}
.sixtile:hover { border-color: hsl(var(--h) 65% 60% / .55); }

.sixtile__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }

.sixtile__ico {
  flex: none; width: 2.4rem; height: 2.4rem; border-radius: var(--radius);
  border: 1px solid hsl(var(--h) 60% 60% / .3);
  background: hsl(var(--h) 60% 55% / .12);
  position: relative;
}
/* Drawn, not six more SVG files for 20px glyphs. */
.sixtile__ico::before, .sixtile__ico::after {
  content: ''; position: absolute; border-color: hsl(var(--h) 75% 72%);
}
.sixtile__ico--notes::before   { inset: .6rem .7rem; border: 1.5px solid; border-radius: 2px; }
.sixtile__ico--notes::after    { inset: .85rem .95rem auto .95rem; height: 1.5px; background: currentColor; opacity: .0; }
.sixtile__ico--rooms::before   { inset: .65rem .6rem .8rem; border: 1.5px solid; border-radius: 4px 4px 4px 1px; }
.sixtile__ico--people::before  { left: .6rem; top: .65rem; width: .55rem; height: .55rem; border: 1.5px solid; border-radius: 50%; }
.sixtile__ico--people::after   { right: .6rem; bottom: .65rem; width: .55rem; height: .55rem; border: 1.5px solid; border-radius: 50%; }
.sixtile__ico--courses::before { inset: .7rem .6rem; border: 1.5px solid; border-radius: 3px; }
.sixtile__ico--courses::after  { left: 50%; top: 50%; translate: -50% -50%; border: .3rem solid transparent;
                                 border-left-color: hsl(var(--h) 75% 72%); }
.sixtile__ico--quiz::before    { inset: .6rem; border: 1.5px solid; border-radius: 50%; }
.sixtile__ico--quiz::after     { inset: .95rem; border: 1.5px solid; border-radius: 50%; }
.sixtile__ico--flash::before   { inset: .6rem .8rem .8rem .55rem; border: 1.5px solid; border-radius: 3px; }
.sixtile__ico--flash::after    { inset: .75rem .55rem .6rem .8rem; border: 1.5px solid; border-radius: 3px; }

.sixtile__n {
  font-family: var(--font-mono); font-size: .72rem; color: var(--text-hi);
  text-align: right; line-height: 1.3;
}
.sixtile__n i { display: block; font-style: normal; font-size: .6rem; color: var(--text-lo); }

.sixtile__name {
  font-family: var(--font-display); font-size: var(--fs-h3);
  letter-spacing: -.02em; color: var(--text-hi);
}
.sixtile__desc {
  font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-lo);
}
.sixtile__cta {
  /* margin-top:auto pins the action to the bottom, so six tiles with
     different description lengths still line their buttons up. */
  margin-top: auto; padding-top: var(--s-2);
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-hi);
}
.sixtile__cta i { font-style: normal; transition: translate var(--dur) var(--ease-out); }
.sixtile:hover .sixtile__cta { color: hsl(var(--h) 80% 75%); }
.sixtile:hover .sixtile__cta i { translate: 4px 0; }

@media (max-width: 46rem) {
  .sixtile { padding: var(--s-5); gap: var(--s-2); }
  .sixtile__name { font-size: var(--fs-body-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .sixtile, .sixtile__cta i { transition: none; }
}