/* ==========================================================================
   components.css: building blocks used on more than one page
   ----------------------------------------------------------------------------
   Each component has one block below, with its breakpoints right after it.
   See docs/STYLE-GUIDE.md for copy-paste HTML snippets.
   ========================================================================== */

/* ==========================================================================
   SECTION HEADING
   The big title at the top of a section, with an optional lead paragraph.
   <div class="section-intro container">
     <h2 class="section-title">Title</h2>
     <p class="section-lead">Optional text.</p>
   </div>
   ========================================================================== */

/* A band with a heading block and content below it: 32px between the two
   (24px on phones; --space-heading-content in tokens.css). Every section
   heading on the site uses these spacings, whatever its layout. */
.band--with-intro {
  gap: var(--space-heading-content);
}

/* Title and intro line: 16px apart (--space-heading-lead) */
.section-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-heading-lead);
}

.section-title {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  line-height: var(--leading-snug);
  text-align: left;
}

.section-lead {
  text-align: left;
}

@media (max-width: 480px) {
  .section-title {
    font-size: var(--text-4xl);
  }
}

/* ==========================================================================
   LABEL: the small capitals line above a fact, a step or a card title
   ("When", "Morning · 09:00–12:00", "Choice 1", "Talk"): brand green, 12px,
   bold, 0.1em apart. One standard everywhere (owner, 22 October 2026).
   Add the class next to the element's own class, which then holds only
   what differs (spacing, display, a colour on a dark background).
   <p class="label key-facts__label">When</p>
   ========================================================================== */

.label {
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: var(--leading-heading);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand);
}

/* ==========================================================================
   PAGE HERO
   Top of each page: date line, page title, introduction and an image.
   On wide screens the text is on the left and the image on the right;
   from 1200px down the image moves below the text.
   ========================================================================== */

.page-hero {
  overflow: hidden;
}

.page-hero__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.page-hero__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-self: flex-start;
  align-items: flex-start;
  gap: var(--space-5);
}

.page-hero__eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-heading);
  text-align: left;
}

.page-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-7xl);
  line-height: var(--leading-snug);
  text-align: left;
}

.page-hero__intro {
  line-height: var(--leading-heading);
}

.page-hero__media {
  display: flex;
  flex: 1;
  align-items: center;
}

.page-hero__image {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-card);
}

/* Buttons under the hero text: each takes half the row (a button on its
   own takes one half); one under the other on phones. */
.page-hero__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-self: stretch;
  gap: var(--space-4);
}

@media (max-width: 1200px) {
  .page-hero__inner {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .page-hero__actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .page-hero__title {
    font-size: var(--text-5xl);
  }
}

/* ==========================================================================
   KEY FACTS: four facts directly under the page hero, as a very light
   green card on the page grid with the closing card's corners (design 4e,
   the owner's choice of 20 October 2026). Over each fact a brand-green rule, then a small
   green label, the fact itself in Playfair Display and a grey detail.
   Four across; two across from 1300px; one under the other from 480px.
   At 1300px and wider every fact fits on one line and every detail on two
   (with facts of up to about 19 characters and details of about 50).
   <section class="band key-facts-band" aria-label="Key facts">
     <div class="container">
       <ul class="key-facts">
         <li class="key-facts__item">
           <p class="key-facts__label">When</p>
           <p class="key-facts__value">18–31 August 2027</p>
           <p class="key-facts__detail">Two weeks in Cambridge; online prep …</p>
         </li>
       </ul>
     </div>
   </section>
   ========================================================================== */

/* The very light green card */
/* The card is at most 1200px wide, so the sizes once kept for smaller
   laptops (24px between facts, 32px side padding, 24px facts) are now the
   sizes at every width: each fact fits on one line, each detail on two */
.key-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background-color: var(--color-level-tint);
}

/* a green rule over each fact */
.key-facts__item {
  padding-top: var(--space-4);
  border-top: 3px solid var(--color-brand);
}

/* The strips have no icons any more. The Courses page (on hold) still has
   them in its markup: when the hold ends, delete them there, then this
   rule. */
.key-facts__icon {
  display: none;
}

.key-facts__value {
  margin-top: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  font-variant-numeric: lining-nums;
  line-height: var(--leading-snug);
}

.key-facts__detail {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-heading);
  color: var(--color-muted);
}

/* A deadline that has passed (data-deadline; marked is-past by main.js)
   fades and its date is crossed out. */
.key-facts__item.is-past {
  opacity: 0.55;
}

.key-facts__item.is-past .key-facts__value {
  text-decoration: line-through;
}

/* Two across */
@media (max-width: 1300px) {
  .key-facts {
    grid-template-columns: 1fr 1fr;
  }
}

/* Tablets and phones: less space and a smaller fact */
@media (max-width: 767px) {
  .key-facts {
    row-gap: var(--space-4);
    padding: var(--space-5);
  }

  .key-facts__item {
    padding-top: var(--space-3);
  }

  .key-facts__value {
    margin-top: var(--space-1);
    font-size: var(--text-lg);
  }

  .key-facts__detail {
    margin-top: var(--space-1);
  }
}

/* One under the other */
@media (max-width: 480px) {
  .key-facts {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   PILLS (subject labels in the home hero) and JUMP LINKS (the green-outlined
   links to sections further down the page, in the Courses and Faculty heroes)
   Both are the same size and use the same font: 14px semi-bold Inter,
   38px tall. Both have a 2px border: the subject's colour shows through the
   transparent border of a subject pill; a jump link's border is green.
   ========================================================================== */

.pill,
.jump-links__link {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  padding: 5px 12px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-relaxed);
  overflow-wrap: anywhere;
}

/* ==========================================================================
   PILLS (subject labels in the home hero)
   <ul class="pill-list">
     <li class="pill pill--ai">AI</li>
   </ul>
   ========================================================================== */

.pill-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.pill--ai {
  color: var(--color-on-dark);
  background-color: var(--color-subject-ai);
}

.pill--ds {
  color: var(--color-on-dark);
  background-color: var(--color-subject-data-science);
}

.pill--ec {
  color: var(--color-subject-text);
  background-color: var(--color-subject-economics);
}

.pill--fi {
  color: var(--color-subject-text);
  background-color: var(--color-subject-finance);
}

/* ==========================================================================
   JUMP LINKS (links to sections further down the page, Courses and Faculty
   heroes; size and font: see PILLS AND JUMP LINKS above)
   <nav aria-label="On this page">
     <ul class="jump-links">
       <li><a class="jump-links__link" href="#courses">Courses</a></li>
     </ul>
   </nav>
   ========================================================================== */

.jump-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.jump-links__link {
  position: relative;
  border-color: var(--color-brand);
  color: var(--color-brand);
  background-color: var(--color-surface);
  transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}

/* The link looks 38px tall but can be tapped over 44px (an invisible strip
   above and below it), the minimum touch target. */
.jump-links__link::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -2px;
  left: -2px;
  height: 44px;
  transform: translateY(-50%);
}

.jump-links__link:hover,
.jump-links__link:active {
  color: var(--color-on-dark);
  background-color: var(--color-button-hover);
}

/* ==========================================================================
   BUTTONS
   One size for every button on a page: 48px tall, 14px semi-bold text,
   pill-shaped, and as wide as the space it sits in (hero: half the row;
   the two brochure buttons: 240px each).
   btn--cta: a single centred button, 350px ("Ready to join us?",
   404 page).
   (The header "Apply now" is a smaller version; see layout.css.)

   Two styles. When buttons sit together, the main action is primary and the
   others are secondary:
     <a class="btn btn--primary" href="applypage.html">Apply now</a>   primary
     <a class="btn" href="courses.html#courses">Explore courses</a>     secondary

   Primary: call-to-action colour, white text. Secondary: white with a 2px
   call-to-action outline and text. Hover and pressed keep the same colour
   family: primary deepens; secondary gets a faint wash with deeper text
   and outline.
   ========================================================================== */

/* Secondary button: white, call-to-action outline and text */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 48px;
  padding: 0 28px;
  border: 2px solid var(--color-cta);
  border-radius: var(--radius-pill);
  font-weight: 600;
  line-height: var(--leading-heading);
  white-space: nowrap;
  text-align: center;
  color: var(--color-cta);
  fill: var(--color-cta);
  background-color: var(--color-surface);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.btn:hover,
.btn:active {
  border-color: var(--color-cta-hover);
  color: var(--color-cta-hover);
  fill: var(--color-cta-hover);
  background-color: var(--color-cta-tint);
}

/* Primary button: the call-to-action colour */
.btn--primary {
  color: var(--color-on-dark);
  fill: var(--color-on-dark);
  background-color: var(--color-cta);
}

.btn--primary:hover,
.btn--primary:active {
  border-color: var(--color-cta-hover);
  color: var(--color-on-dark);
  fill: var(--color-on-dark);
  background-color: var(--color-cta-hover);
}

/* Secondary button on brand green (the closing tiles): white outline and
   text; it fills white on hover */
.btn--on-dark {
  border-color: var(--color-on-dark);
  color: var(--color-on-dark);
  fill: var(--color-on-dark);
  background-color: transparent;
}

.btn--on-dark:hover,
.btn--on-dark:active {
  border-color: var(--color-on-dark);
  color: var(--color-brand);
  fill: var(--color-brand);
  background-color: var(--color-on-dark);
}

/* A single centred button: 350px (never wider than the screen) */
.btn--cta {
  width: 306px;
  max-width: 100%;
}

/* "Open WeChat" and "Open WhatsApp" in their pop-ups (layout.css): about as
   wide as the QR code above, not the full width of the box */
.qr-dialog__btn {
  width: min(100%, 260px);
  margin-top: var(--space-4);
}

/* ==========================================================================
   TEXT LINK (underlined link inside a paragraph)
   ========================================================================== */

/* Semi-bold, with a thick underline set a little below the text in a light
   green that turns brand green on hover, so links stand out from the text
   around them. A link that opens in a new tab ends with a small arrow and a
   hidden "(opens in a new tab)" for screen readers:
   <a class="text-link" href="https://…" target="_blank" rel="noreferrer noopener">Pilkington <span class="text-link__end">Prize<svg class="text-link__icon" …>…</svg></span><span class="visually-hidden"> (opens in a new tab)</span></a> */
.text-link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-link-underline);
  color: var(--color-brand);
  transition: text-decoration-color var(--duration-base) var(--ease-standard);
}

.text-link:hover {
  text-decoration-color: currentColor;
}

/* A button inside text that opens a pop-up (FAQ "Who can I contact…?")
   looks like the text links around it */
button.text-link {
  border: 0;
  line-height: inherit;
  cursor: pointer;
}

/* The last word and the arrow never split across two lines */
.text-link__end {
  white-space: nowrap;
}

.text-link__icon {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 2px;
  vertical-align: -0.05em;
}

/* ==========================================================================
   CONTACT ICON: a 20px brand-green line icon on its own (no circle; owner's
   choice, 20 October 2026), used by the footer's Contact us and Follow us
   lists and the phone menu's contact row.
   <span class="contact-icon"><svg viewBox="0 0 24 24" …>…</svg></span>
   ========================================================================== */

.contact-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--color-brand);
}

.contact-icon svg {
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   TO CONFIRM: a highlighted placeholder for a fact still to be supplied.
   Replace or delete every one before the site is published.
   <span class="to-confirm">[TO CONFIRM: 2027 fees]</span>
   (or <p class="to-confirm">…</p> for a whole line)
   ========================================================================== */

.to-confirm {
  padding: 0 var(--space-1);
  font-weight: 600;
  line-height: var(--leading-heading);
  color: var(--color-ink);
  background-color: var(--color-pillar-social);
}

/* --------------------------------------------------------------------------
   Photo placeholder (temporary): a striped box with a camera, "Photo to
   come" and what the photo should show ([TO CONFIRM: photo]). Replace it
   with an <img> of the same class before publishing; the HTML comment
   above each box gives the line to use.
   -------------------------------------------------------------------------- */
.photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: center;
  color: var(--color-muted);
  background: repeating-linear-gradient(135deg, var(--color-level-tint) 0 14px, var(--color-surface-soft) 14px 28px);
  box-shadow: inset 0 0 0 1px var(--color-line);
}

.photo-placeholder svg {
  width: 28px;
  height: 28px;
  color: var(--color-brand);
}

.photo-placeholder__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand);
}

.photo-placeholder__text {
  max-width: 34ch;
  font-size: var(--text-sm);
  line-height: var(--leading-heading);
}

@media (max-width: 767px) {
  .day-card .photo-placeholder__text {
    display: none;
  }
}

/* ==========================================================================
   AWARD LIST (Teaching awards): two columns in the style of "What our
   students say". Each award: its logo, centred in a 128x80 box (no border),
   where the portrait is; the award's name (a link to the news story where
   there is one) in Playfair where the quote is; the awarding body, year and
   any status below. Compact, solid marks (squares, crests) add
   award-list__logo--compact and are drawn at 56px (64px on phones), so they don't outweigh
   the long wordmarks. Faculty: all eight awards, compact marks in the left
   column and wordmarks in the right. Home: four of them and a link to the
   Faculty list (award-list__more). One column from 991px; smaller logos
   from 480px.
   <ul class="award-list">
     <li class="award-list__item">
       <span class="award-list__logo award-list__logo--compact"><img src="…" alt="" …></span>
       <div class="award-list__text">
         <p class="award-list__title"><a class="text-link" …>…</a></p>
         <p class="award-list__meta"><span class="award-list__giver">…</span><span>2026</span></p>
       </div>
     </li>
   </ul>
   ========================================================================== */

.award-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap-columns);
}

.award-list__item {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-line);
}

/* no line above the first row, no space below the last */
.award-list__item:nth-child(-n + 2) {
  padding-top: 0;
  border-top: 0;
}

.award-list__item:nth-last-child(-n + 2) {
  padding-bottom: 0;
}

/* The logo, whole, fitted into a fixed box (no border), centred in it */
.award-list__logo {
  position: relative;
  display: block;
  width: 112px;
  height: 70px;
}

.award-list__logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Compact, solid marks (the EEA, QS and SU squares, the CUP crest) are
   drawn smaller (56px), so they don't outweigh the long wordmarks */
.award-list__logo--compact img {
  inset: 7px;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
}

.award-list__title {
  font-size: var(--text-md);
  line-height: var(--leading-heading);
  text-wrap: pretty;
}

.award-list__title .text-link {
  font-weight: 400;
}

.award-list__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-heading);
  color: var(--color-muted);
}

.award-list__giver {
  font-weight: 600;
  color: var(--color-ink);
}

/* "Bronze", "Shortlisted", "Highly commended": a small outlined label */
.award-list__status {
  padding: 1px var(--space-2);
  border: 1px solid var(--color-level);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-level);
}

@media (max-width: 991px) {
  .award-list {
    grid-template-columns: 1fr;
  }

  .award-list__item:nth-child(2) {
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-line);
  }

  .award-list__item:nth-last-child(2) {
    padding-bottom: var(--space-5);
  }
}

/* Phones: the logos at their earlier size, with the earlier type */
@media (max-width: 767px) {
  .award-list__item {
    grid-template-columns: 128px minmax(0, 1fr);
  }

  .award-list__logo {
    width: 128px;
    height: 80px;
  }

  .award-list__logo--compact img {
    inset: var(--space-2);
    width: calc(100% - 2 * var(--space-2));
    height: calc(100% - 2 * var(--space-2));
  }
}

@media (max-width: 480px) {
  .award-list__item {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--space-4);
  }

  .award-list__logo {
    width: 96px;
    height: 64px;
  }

  .award-list__title {
    font-size: var(--text-base);
  }

  .award-list__logo--compact img {
    inset: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
  }
}

/* "See all eight teaching awards" under a short list (Home): the site's
   link style with an arrow that moves on hover */
.award-list__more {
  margin-top: var(--space-6);
}

.award-list__more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-link-underline);
  color: var(--color-brand);
  transition: text-decoration-color var(--duration-base) var(--ease-standard);
}

.award-list__more-link:hover {
  text-decoration-color: currentColor;
}

.award-list__more-link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-base) var(--ease-standard);
}

.award-list__more-link:hover svg {
  transform: translateX(3px);
}

/* ==========================================================================
   PHOTO MOSAIC: three photos as one picture, a tall one on the left and two
   on the right, each cropped to fill its place. The mosaic takes the shape
   it is given: on the home page's "How each day works" that of the photo
   it replaces (development__photo: 4:3, 16:9 when stacked, 3:2 on phones).
   - photo-mosaic--hero (Apply page hero; owner's option 2 of the hero
     mock-ups, 21 October 2026): 16:10; on phones the tall photo goes on
     top across the width, the other two side by side under it (4:5).
   <div class="photo-mosaic">
     <img class="photo-mosaic__photo photo-mosaic__photo--tall" …>
     <img class="photo-mosaic__photo" …>
     <img class="photo-mosaic__photo" …>
   </div>
   ========================================================================== */

.photo-mosaic {
  display: grid;
  grid-template-columns: 5fr 6fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-4);
  width: 100%;
}

.photo-mosaic__photo {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.photo-mosaic__photo--tall {
  grid-row: 1 / 3;
}

.photo-mosaic--hero {
  aspect-ratio: 16 / 10;
}

@media (max-width: 600px) {
  .photo-mosaic {
    gap: var(--space-3);
  }

  .photo-mosaic--hero {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 3fr 2fr;
    aspect-ratio: 4 / 5;
  }

  .photo-mosaic--hero .photo-mosaic__photo--tall {
    grid-row: 1;
    grid-column: 1 / 3;
  }
}

/* ==========================================================================
   DATA TABLE (Programme dates, Apply fees)
   A simple table with a thin green line under each row.
   <table class="data-table">
     <thead><tr><td></td><th scope="col">Column</th></tr></thead>
     <tbody><tr><th scope="row">Row</th><td>Value</td></tr></tbody>
   </table>
   ========================================================================== */

.data-table {
  align-self: center;
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.data-table tr {
  border-bottom: 1px solid var(--color-line);
}

/* Row labels in normal weight (Apply fees table) */
.data-table__label {
  font-weight: 400;
}

/* ==========================================================================
   ACCORDION (the FAQ questions)
   A question that opens to show its answer. Works without JavaScript.
   <details class="accordion">
     <summary class="accordion__summary">
       Question text
       <svg class="accordion__icon" width="32" height="32" viewBox="0 0 24 24" aria-hidden="true"><path d="m12 14l-4-4h8z" fill="currentColor"></path></svg>
     </summary>
     <div class="accordion__panel"> … answer … </div>
   </details>
   Each page adds its own spacing and fonts (see pages.css).
   ========================================================================== */

.accordion {
  width: 100%;
}

.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.accordion__icon {
  flex-shrink: 0;
  transition: transform var(--duration-base) ease-in-out;
}

.accordion[open] .accordion__icon {
  transform: rotate(180deg);
}

/* ==========================================================================
   DEADLINE FLAG AND OFFER TAG: small labels on dated items (the discounts
   and scholarships on the Apply page and in its fees pop-up). The flag
   shows "Passed" once main.js has marked its item is-past, and the offer
   tag is then crossed out.
   <span class="deadline-flag deadline-flag--passed">Passed</span>
   <span class="offer-tag">10% off</span>
   ========================================================================== */

.deadline-flag {
  position: relative;
  display: none;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}

.is-past .deadline-flag--passed {
  display: inline-block;
  color: var(--color-muted);
  background-color: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-line);
}

.offer-tag {
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-cta-hover);
  background-color: var(--color-cta-tint);
}

/* Scholarships (Apply page): brand green on light green */
.offer-tag--scholarship {
  color: var(--color-brand);
  background-color: var(--color-level-tint);
}

/* Full fees (Apply page, the final deadline): grey with a thin outline */
.offer-tag--plain {
  color: var(--color-muted);
  background-color: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-line);
}

.is-past .offer-tag {
  text-decoration: line-through;
  color: var(--color-muted);
  background-color: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-line);
}

/* ==========================================================================
   NEXT-DEADLINE NOTE (home hero, the "Ready to join us?" bands and the
   phone menu): one line per deadline;
   main.js shows the first one that has not passed and hides the group
   after the last deadline. Without JavaScript the first line shows.
   ========================================================================== */

.deadline-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 12px;
  border-radius: var(--radius-card);
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  color: var(--color-cta-hover);
  background-color: var(--color-cta-tint);
}

.deadline-note[hidden] {
  display: none;
}

.deadline-note__icon {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   CLOSING TILES ("Ready to join us?", the last section of every page;
   design 7b, the owner's choice of 20 October 2026)
   Four tiles on the page grid, 16px apart (closer than cards in a grid, so
   they read as one block):
   - main (brand green), its content centred top to bottom: dates, title,
     the price ("From £4,900" and a note, owner, 23 October 2026), the
     three application deadlines as a timeline (main.js marks the next
     one and fades those that have passed), "Apply now" and "Explore
     courses" side by side;
   - quote (very light green): a 2026 student's words under a large orange
     quotation mark, with her portrait and caption (the words are in
     selected-quotes.md, "Closing card");
   - What you need (white, thin border): four ticks;
   - brochure (white, thin border): a line, the two PDF buttons and
     "Or message us on WhatsApp · WeChat." (owner, 23 October 2026: this line
     was in the green tile; only the brochure has buttons).
   Desktop: main | quote | What you need over the brochure, all ending
   level. From 1200px: main across the top (the timeline beside the title
   and buttons), then quote | What you need over the brochure. From 991px:
   the main tile's parts one under the other. From 767px: one column, in
   the order main, What you need, quote, brochure. From 480px the two
   main buttons stack.
   <section class="band" aria-labelledby="cta-heading">
     <div class="container closing-tiles">
       <div class="closing-tiles__main">…</div>
       <figure class="closing-tiles__quote">…</figure>
       <div class="closing-tiles__need">…</div>
       <div class="closing-tiles__brochure">…</div>
     </div>
   </section>
   ========================================================================== */

.closing-tiles {
  /* the side padding of the main tile: 40px (all round on phones: the card padding) */
  --tiles-pad: calc(var(--space-6) + var(--space-2));
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  /* What you need keeps its own height; any spare height goes to the
     brochure tile, whose buttons sit at its foot */
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "main quote need"
    "main quote brochure";
  gap: var(--space-4);
}

/* The call to action */
.closing-tiles__main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 28px above, 32px below: the dates line sits low in its line, so the
     two gaps look the same (about 34px) */
  padding: calc(var(--space-6) - var(--space-1)) var(--tiles-pad) var(--space-6);
  border-radius: var(--radius-card);
  color: var(--color-on-dark);
  background-color: var(--color-brand);
}

.closing-tiles__eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-heading);
  color: var(--color-on-dark-muted);
}

.closing-tiles__title {
  margin-top: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-6xl);
  line-height: var(--leading-snug);
}

/* The price under the title, on one line: "From" small, the amount in the
   heading font, then what it includes in small text (on narrow screens
   the small text wraps under the amount) */
.closing-tiles__price {
  margin-top: var(--space-4);
}

.closing-tiles__price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--space-2);
}

.closing-tiles__price-from {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-on-dark-muted);
}

.closing-tiles__price-amount {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-on-dark);
}

.closing-tiles__price-note {
  font-size: var(--text-sm);
  line-height: var(--leading-heading);
  color: var(--color-on-dark-muted);
}

/* The two buttons side by side, set apart from the deadlines above
   (the largest gap in the tile: from information to action) */
.closing-tiles__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.closing-tiles__actions .btn {
  padding: 0 14px;
}

/* "Or message us on WhatsApp · WeChat.", in the brochure tile under its
   buttons (one line from 1100px up) */
.closing-tiles__chat {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-muted);
}

.closing-tiles__chat-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 4px 0 2px;
  vertical-align: -3px;
  color: var(--color-brand);
}

/* Each icon stays with its name, and the full stop with "WeChat", the last
   one: a line may break after a button, which left the full stop on a line
   of its own */
.closing-tiles__chat-item {
  white-space: nowrap;
}

/* WeChat and WhatsApp are buttons (each opens its QR pop-up) that look like
   the site's text links */
.closing-tiles__chat-link {
  padding: 0;
  border: 0;
  font: inherit;
  font-weight: 600;
  color: var(--color-brand);
  background: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-link-underline);
  text-underline-offset: 3px;
  cursor: pointer;
}

.closing-tiles__chat-link:hover {
  text-decoration-color: var(--color-brand);
}

/* The deadlines: a dot on a line for each, an orange ring (filled for the
   next one), the discount on the right. Passed deadlines fade and their
   date is crossed out (is-next and is-past come from main.js). */
.closing-timeline {
  /* the text starts 40px in, to the right of the dots */
  --timeline-indent: calc(var(--space-6) + var(--space-2));
  margin-top: var(--space-3);  /* with the item's own 12px: 24px from the title */
}

/* A thin line under each deadline, starting where the text starts, so it
   does not cross the line joining the dots */
.closing-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-4);
  padding: var(--space-3) 0 var(--space-3) var(--timeline-indent);
  background: linear-gradient(var(--color-line-on-dark), var(--color-line-on-dark)) right bottom / calc(100% - var(--timeline-indent)) 1px no-repeat;
}

/* the dot, centred on the name's line */
.closing-timeline__item::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 14px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-round);
  background-color: var(--color-brand);
  box-shadow: inset 0 0 0 3px var(--color-cta);
}

/* the line from each dot down to the next */
.closing-timeline__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 24px;
  left: 9px;
  width: 2px;
  height: 100%;
  background-color: var(--color-line-on-dark);
}

.closing-timeline__item.is-next::before {
  background-color: var(--color-cta);
}

.closing-timeline__name {
  font-weight: 600;
  line-height: var(--leading-heading);
}

.closing-timeline__date {
  grid-column: 1;
  font-size: var(--text-sm);
  line-height: var(--leading-heading);
  color: var(--color-on-dark-muted);
}

.closing-timeline__discount {
  grid-row: 1 / span 2;
  grid-column: 2;
  padding: var(--space-1) 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: var(--leading-heading);
  color: var(--color-ink);
  background-color: var(--color-cta-tint);
}

.closing-timeline__item.is-next .closing-timeline__discount {
  color: var(--color-on-dark);
  background-color: var(--color-cta);
}

.closing-timeline__item.is-past {
  opacity: 0.55;
}

.closing-timeline__item.is-past .closing-timeline__date {
  text-decoration: line-through;
}

/* A student's words */
.closing-tiles__quote {
  grid-area: quote;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background-color: var(--color-level-tint);
}

/* the large quotation mark (decoration only: screen readers skip it) */
.closing-tiles__quote::before {
  content: "\201C";
  content: "\201C" / "";
  font-family: var(--font-heading);
  font-size: 102px;
  line-height: 0.55;
  color: var(--color-cta);
}

.closing-tiles__quote-text {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: var(--leading-heading);
  text-wrap: pretty; /* browsers that support it avoid a single word on the last line */
}

.closing-tiles__person {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.closing-tiles__photo {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-round);
  object-fit: cover;
}

.closing-tiles__who {
  display: flex;
  flex-direction: column;
}

.closing-tiles__name {
  font-weight: 600;
  line-height: var(--leading-heading);
}

.closing-tiles__detail {
  font-size: var(--text-sm);
  line-height: var(--leading-heading);
  color: var(--color-muted);
}

/* What you need, and the brochure: white tiles with a thin border */
.closing-tiles__need,
.closing-tiles__brochure {
  padding: var(--space-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background-color: var(--color-surface);
}

.closing-tiles__need {
  grid-area: need;
}

.closing-tiles__list {
  margin-top: var(--space-2);
}

.closing-tiles__item {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  column-gap: var(--space-3);
  padding: 6px 0;  /* compact, so this column is no taller than the green tile */
}

.closing-tiles__item + .closing-tiles__item {
  border-top: 1px solid var(--color-line);
}

/* no space under the last item, so the tile's space below matches the space above */
.closing-tiles__item:last-child {
  padding-bottom: 0;
}

.closing-tiles__tick {
  grid-row: 1 / span 2;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  color: var(--color-brand);
}

.closing-tiles__item-name {
  font-weight: 600;
  line-height: var(--leading-heading);
}

.closing-tiles__item-detail {
  font-size: var(--text-sm);
  line-height: var(--leading-heading);
  color: var(--color-muted);
}

/* Apply page: "Questions before you apply?" in place of "What you need".
   Each topic's name is a link to the FAQ, stretched over its row, so the
   whole row (more than 44px tall) can be tapped. */
.closing-tiles__item--link {
  position: relative;
}

.closing-tiles__link {
  justify-self: start;
}

.closing-tiles__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Its three rows are one line each, so the tile is shorter than "What you
   need": here the questions tile takes the spare height instead of the
   brochure (rows spread evenly, text centred between the lines), and the
   brochure tile stays compact */
.closing-tiles--questions {
  grid-template-rows: 1fr auto;
}

.closing-tiles__need--questions {
  display: flex;
  flex-direction: column;
}

.closing-tiles__list--spread {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.closing-tiles__list--spread .closing-tiles__item {
  flex: 1 1 auto;
  align-content: center;
}

/* The brochure: a line, then the two buttons side by side at the foot */
.closing-tiles__brochure {
  grid-area: brochure;
  display: grid;
  align-content: space-between;
  gap: var(--space-4);
}

.closing-tiles__lead {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.closing-tiles__brochure-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.closing-tiles__brochure-actions .btn {
  padding: 0 10px;
}

/* Smaller laptops: a smaller portrait and caption, so each caption line
   (e.g. "Year 1 · University of Cambridge") stays on one line in the
   narrower quote tile */
@media (max-width: 1300px) {
  .closing-tiles__person {
    gap: var(--space-3);
  }

  .closing-tiles__photo {
    width: 38px;
    height: 38px;
  }

  .closing-tiles__detail {
    font-size: var(--text-xs);
  }
}

/* Tablets and small laptops: the main tile across the top, its timeline
   beside the title and buttons; then the quote | What you need over the
   brochure */
@media (max-width: 1200px) {
  .closing-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "main main"
      "quote need"
      "quote brochure";
  }

  .closing-tiles--questions {
    grid-template-rows: auto 1fr auto;
  }

  .closing-tiles__main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "eyebrow timeline"
      "title timeline"
      "price timeline"
      "actions timeline";
    align-content: center;
    column-gap: var(--space-7);
  }

  .closing-tiles__eyebrow {
    grid-area: eyebrow;
  }

  .closing-tiles__title {
    grid-area: title;
  }

  .closing-tiles__price {
    grid-area: price;
  }

  .closing-timeline {
    grid-area: timeline;
    align-self: center;
    margin-top: 0;
  }

  .closing-tiles__actions {
    grid-area: actions;
  }
}

/* Tablets: the main tile's parts one under the other, full width */
@media (max-width: 991px) {
  .closing-tiles__main {
    display: flex;
  }

  .closing-timeline {
    align-self: stretch;
    margin-top: var(--space-3);
  }

  .closing-tiles__actions {
    align-self: stretch;
  }
}

/* Phones: one column (main, What you need, quote, brochure) */
@media (max-width: 767px) {
  .closing-tiles {
    --tiles-pad: var(--space-card);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "main"
      "need"
      "quote"
      "brochure";
  }

  .closing-tiles__main,
  .closing-tiles__quote {
    padding: var(--tiles-pad);
  }

  .closing-tiles__title {
    font-size: var(--text-5xl);
  }

  .closing-tiles__quote::before {
    font-size: 80px;
  }

  .closing-tiles__photo {
    width: 44px;
    height: 44px;
  }
}

/* Small phones: the two main buttons one above the other */
@media (max-width: 480px) {
  .closing-tiles__title {
    font-size: var(--text-4xl);
  }

  .closing-tiles__actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   STUDENT VOICE ("What our students say": one section on each main page)
   The page's video clip (on Home, the highlight reel with all seven
   students) as a vertical tile (9:16) on the left, and three
   quotes from 2026 students on the right, each with a round portrait, the
   name, degree and year, and university. Quotes are in the heading font;
   the opening quotation mark hangs in the margin so the words line up.
   The tile shows the poster, a round play button and the clip's title
   until the visitor presses play (main.js part 6); then the video plays
   where it is, with its own controls and subtitles on. Without JavaScript
   the video simply shows its controls.
   Desktop: tile 262px wide (300px until the type went 2px smaller), 84px
   portraits in the left margin of the quotes. From 1200px: tile 260px, each
   60px portrait next to the name. From 991px: tile 220px, smaller quote
   text. From 767px: the tile above the quotes, 68px portraits.
   See docs/STYLE-GUIDE.md for the HTML.
   ========================================================================== */

.student-voice {
  display: grid;
  grid-template-columns: 262px minmax(0, 1fr);
  align-items: center;
  gap: var(--gap-columns);
}

/* The video tile: rounded like every photo */
.student-voice__film {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--radius-card);
  background-color: var(--color-ink);
}

/* A faint line round the tile, above the video and its play button, so a
   pale sky in a poster keeps the tile's edge against the white page */
.student-voice__film::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--color-film-edge);
  pointer-events: none;
}

/* A wide (16:9) tile: the Academic Director's welcome in the Faculty hero */
.student-voice__film--wide {
  aspect-ratio: 16 / 9;
}

.student-voice__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Full screen: the whole picture, uncropped, with black bars where the
   screen's shape differs (cover above would cut the top and bottom off a
   vertical video on a wide screen). Two rules: Safari needs its own name. */
.student-voice__video:fullscreen {
  object-fit: contain;
}

.student-voice__video:-webkit-full-screen {
  object-fit: contain;
}

/* The play button covers the whole tile: shading at the bottom, a round
   play icon in the middle and the clip's title over the shading */
.student-voice__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-5);
  border: 0;
  font: inherit;
  text-align: left;
  color: var(--color-on-dark);
  background: linear-gradient(to top, var(--color-film-shade) 0%, var(--color-film-shade-soft) 32%, var(--color-film-shade-clear) 55%);
  cursor: pointer;
}

.student-voice__play[hidden] {
  display: none;
}

/* The tile clips anything outside it, so the keyboard outline goes inside */
.student-voice__play:focus-visible {
  outline: 3px solid var(--color-on-dark);
  outline-offset: -6px;
}

.student-voice__play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-round);
  color: var(--color-brand);
  background-color: var(--color-play-button);
  transform: translate(-50%, -50%);
  transition: transform var(--duration-base) var(--ease-standard);
}

/* Nudged right so the triangle looks centred */
.student-voice__play-icon svg {
  width: 23px;
  height: 23px;
  margin-left: 3px;
}

.student-voice__play:hover .student-voice__play-icon,
.student-voice__play:focus-visible .student-voice__play-icon {
  transform: translate(-50%, -50%) scale(1.08);
}

.student-voice__play-title {
  font-size: var(--text-md);
  font-weight: 600;
  line-height: var(--leading-snug);
}

.student-voice__play-time {
  font-size: var(--text-sm);
  color: var(--color-on-dark-muted);
}

/* The quotes: a thin line between them; each portrait sits in the left
   margin, level with the first line of its quote */
.student-voice__list {
  display: flex;
  flex-direction: column;
}

.student-voice__item {
  position: relative;
  padding: var(--space-6) 0 var(--space-6) 108px; /* the 84px portrait and 24px */
  border-top: 1px solid var(--color-line);
}

.student-voice__item:first-child {
  padding-top: 0;
  border-top: 0;
}

.student-voice__item:last-child {
  padding-bottom: 0;
}

.student-voice__quote {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-heading);
  text-indent: -0.42em;
  text-wrap: pretty; /* browsers that support it avoid a single word on the last line */
}

.student-voice__person {
  margin-top: var(--gap-card);
}

.student-voice__photo {
  position: absolute;
  top: var(--space-6);
  left: 0;
  width: 84px;
  height: 84px;
  border-radius: var(--radius-round);
  object-fit: cover;
}

.student-voice__item:first-child .student-voice__photo {
  top: 0;
}

.student-voice__name {
  font-weight: 600;
}

.student-voice__detail {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* On wide screens the name, degree and university share one line, with a
   middle dot between them */
.student-voice__detail::before {
  content: "\00a0\00b7\00a0";
}

@media (max-width: 1200px) {
  .student-voice {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--space-7);
  }

  .student-voice__item {
    padding: var(--space-5) 0;
  }

  /* Portrait next to the name; name, degree and university on three lines
     (long university names no longer break mid-name) */
  .student-voice__person {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
  }

  .student-voice__photo {
    position: static;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
  }

  .student-voice__name,
  .student-voice__detail {
    display: block;
  }

  .student-voice__detail::before {
    content: none;
  }
}

@media (max-width: 991px) {
  .student-voice {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--space-6);
  }

  .student-voice__quote {
    font-size: var(--text-md);
  }
}

@media (max-width: 767px) {
  .student-voice {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-stacked);
  }

  .student-voice__film {
    width: min(100%, 300px);
  }

  .student-voice__photo {
    width: 68px;
    height: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .student-voice__play-icon {
    transition: none;
  }

  .student-voice__play:hover .student-voice__play-icon,
  .student-voice__play:focus-visible .student-voice__play-icon {
    transform: translate(-50%, -50%);
  }
}