/* Compete · "Compete and create": the Startup Pitch Competition, the Policy Hackathon and the Art + Culture
   Showcase, each with its status and a "Get notified" action. Kept short from the start (Programme taught it):
   three items set side by side or as rows, never stacked as three bands. Shares .q, .q-grid, .q__title and
   .q__lede with questions.css and .pg-choice with programme.css. Nothing overlaps type. No motifs. */

.cp__sub {
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: var(--text-h2--line-height);
  color: var(--loud);
  text-wrap: balance;
}

/* ---- A programme: number, name, figures, what it is, note, status, action ---- */
.cp-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-stack-sm);
}

.cp-num {
  color: var(--quiet);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  font-variant-numeric: tabular-nums;
}

.cp-name {
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: var(--text-h2--line-height);
  text-wrap: balance;
}

.cp-figs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-stack-md) var(--sp-stack-lg);
  margin-block: var(--sp-stack-xs);
}

.cp-figs dt {
  font-family: var(--font-display);
  font-size: var(--type-title);
  line-height: 1;
}

.cp-figs dd {
  color: var(--quiet);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}

/* The three programmes as the brand's palette tiles (the brief names them for exactly this): number top,
   name at the foot, one ground each. */
.cp-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-stack-md);
  align-self: stretch;
  aspect-ratio: 5 / 2;
  margin-bottom: var(--sp-stack-sm);
  padding: var(--tile-pad);
}

.cp-tile--crimson {
  background: var(--primary);
  color: var(--primary-foreground);
  --quiet: var(--palette-rose-tint);
}

.cp-tile--lapis {
  background: var(--palette-lapis-blue);
  color: var(--inverse-foreground);
  --quiet: var(--palette-jodhpuri-blue);
}

.cp-tile--jodhpuri {
  background: var(--palette-jodhpuri-blue);
  color: var(--palette-lapis-blue);
  --quiet: var(--palette-lapis-blue);
}

/* A name that carries its number on its first line (C3's card, C4's rows). */
.cp-name--numbered {
  display: grid;
  grid-template-columns: calc(var(--text-small) * 2.2) minmax(0, 1fr);
  align-items: baseline;
}

.cp-name--numbered .cp-num {
  font-family: var(--font-sans);
}

.cp-desc {
  max-width: 44ch;
  font-size: var(--type-body);
  line-height: var(--text-body--line-height);
  text-wrap: pretty;
}

.cp-note {
  color: var(--quiet);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}

/* The status and the action close every item on one shared line at the foot. */
.cp-status {
  margin-top: auto;
  padding-top: var(--sp-stack-sm);
  font-family: var(--font-display);
  font-size: var(--type-lead);
  line-height: var(--text-h3--line-height);
}

.cp-photo {
  display: grid;
  gap: var(--sp-stack-sm);
  align-content: start;
}

.cp-photo__frame {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: clip;
}

.cp-photo__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cp-photo figcaption {
  color: var(--quiet);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}

/* ================= C1 · three columns, paper ================= */
.cp__intro {
  margin-top: var(--sp-stack-md);
}

.cp__intro .cp__sub {
  grid-column: 2 / 6;
}

.cp1__cols {
  row-gap: var(--sp-stack-lg);
  margin-top: calc(var(--sp-section) * 0.6);
  align-items: stretch;
}

.cp1__cols .cp-item:nth-child(1) { grid-column: 2 / 4; }
.cp1__cols .cp-item:nth-child(2) { grid-column: 4 / 6; }
.cp1__cols .cp-item:nth-child(3) { grid-column: 6 / 8; }

/* ================= C2 · feature + two, crimson ================= */
.cp2 {
  --ground: var(--primary);
  --on-paper: var(--primary);
}

.cp2__head {
  row-gap: var(--sp-stack-md);
  align-items: end;
}

.cp2__head .q__title {
  grid-column: 2 / 5;
  font-size: var(--type-display);
  line-height: var(--text-display--line-height);
}

.cp2__head .q__title > span {
  display: block;
}

.cp2__head .cp__sub {
  grid-column: 5 / 8;
}

.cp2__body {
  row-gap: var(--sp-stack-lg);
  margin-top: calc(var(--sp-section) * 0.6);
  align-items: stretch;
}

/* The lead: last year's final in photograph over three columns, its figures and action beside it. */
.cp2__lead {
  grid-column: 2 / 6;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--q-gap) var(--sp-stack-lg);
  align-items: stretch;
}

.cp2__lead .cp-photo {
  grid-template-rows: minmax(0, 1fr) auto;
}

/* The photograph runs the feature's full height, so no hole opens under it. */
.cp2__lead .cp-photo__frame {
  aspect-ratio: auto;
  height: 100%;
  min-height: calc(var(--sp-section) * 2.4);
}

.cp2__lead-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-stack-sm);
}

.cp2__side {
  grid-column: 6 / 8;
  display: grid;
  gap: var(--sp-stack-lg);
}

.cp2 .cp-num,
.cp2 .cp-figs dd,
.cp2 .cp-note,
.cp2 .cp-photo figcaption {
  color: var(--palette-rose-tint);
}

/* ================= C3 · cascade + card, lapis ================= */
.cp3 {
  --ground: var(--background);
}

.cp3__stage {
  display: grid;
  grid-template-columns: calc(var(--sp-section) * 3.6) minmax(0, 1fr);
  gap: var(--sp-stack-lg);
  width: min(100% - var(--lay-gutter) * 2, var(--lay-wide));
  margin-inline: auto;
  align-items: start;
}

.cp3__head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: end;
  margin-bottom: var(--sp-stack-lg);
}

.cp3__head h2 {
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: var(--text-h2--line-height);
  color: var(--loud);
}

.cp3__head .q__lede {
  max-width: var(--ms-md);
  color: var(--palette-jodhpuri-blue);
}

/* The card: paper with lapis type, the chosen programme in full, beside the names and never over them. */
.cp3__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-stack-sm);
  min-height: calc(var(--sp-section) * 3.2);
  padding: var(--sp-inset-lg);
  background: var(--background);
  color: var(--palette-lapis-blue);
  --quiet: var(--palette-lapis-blue);
  --ink: var(--palette-lapis-blue);
}

.cp3__words {
  container-type: inline-size;
}

/* Three names, each over two lines, so the cascade runs about the card's height at a size that holds it. */
.cp-cascade {
  display: grid;
  gap: var(--sp-stack-md);
  font-size: 9.6cqi;
  line-height: 0.95;
}

.cp-cascade__name {
  display: inline-grid;
}

.cp-cascade__name > span:nth-child(2) {
  margin-inline-start: 12%;
}

.cp-cascade li {
  width: fit-content;
  white-space: nowrap;
}

.cp-cascade li:nth-child(1) { margin-inline-start: 0%; }
.cp-cascade li:nth-child(2) { margin-inline-start: 30%; }
.cp-cascade li:nth-child(3) { margin-inline-start: 10%; }

.cp-cascade .pg-choice {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-inset-sm);
}

.cp-choice {
  color: var(--palette-jodhpuri-blue);
}

.cp-choice[aria-pressed='true'] {
  color: var(--ink);
}

.cp-choice .pg-choice__num {
  color: var(--palette-jodhpuri-blue);
  vertical-align: baseline;
}

/* ================= C4 · sheet, Jodhpuri ================= */
.cp4 {
  --ground: var(--palette-jodhpuri-blue);
}

.cp4__head {
  row-gap: var(--sp-stack-md);
  align-items: end;
}

.cp4__head .q__title {
  grid-column: 2 / 5;
  font-size: var(--type-title);
  line-height: var(--text-h1--line-height);
}

.cp4__head .cp__sub {
  grid-column: 5 / 8;
}

.cp4__sheet {
  display: grid;
  gap: var(--sp-stack-lg);
  margin-top: calc(var(--sp-section) * 0.6);
}

/* One grid line per programme: number against the name, the name over two columns, what it is over two,
   the status and action in the last. */
.cp4__row {
  align-items: start;
}

.cp4__row .cp-name {
  grid-column: 2 / 4;
}

.cp4__text {
  grid-column: 4 / 6;
  display: grid;
  gap: var(--sp-stack-sm);
}

.cp4__text .cp-figs {
  margin-top: 0;
}

.cp4__act {
  grid-column: 6 / 8;
  display: grid;
  gap: var(--sp-stack-sm);
  justify-items: start;
}

.cp4__act .cp-status {
  margin-top: 0;
  padding-top: 0;
}

/* ================= Narrow ================= */
@media (max-width: 1099px) {
  .cp__intro .cp__sub,
  .cp2__head .q__title,
  .cp2__head .cp__sub,
  .cp4__head .q__title,
  .cp4__head .cp__sub {
    grid-column: 2 / 8;
  }

  .cp2__lead,
  .cp2__side {
    grid-column: 2 / 8;
  }

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

  .cp3__stage {
    grid-template-columns: 1fr;
  }

  .cp3__head {
    grid-template-columns: 1fr;
    row-gap: var(--sp-stack-md);
  }

  .cp3__card {
    order: 2;
    max-width: var(--ms-sm);
    min-height: 0;
  }

  /* Stacked above the card, the names span the full width, so they step down to keep the band short. */
  .cp-cascade {
    font-size: 6.6cqi;
  }

  .cp4__row .cp-name {
    grid-column: 2 / 8;
  }

  .cp4__text {
    grid-column: 2 / 6;
  }

  .cp4__act {
    grid-column: 6 / 8;
  }
}

/* Three columns hold down to 800; below that the programmes stack. */
@media (max-width: 799px) {
  .cp1__cols .cp-item:nth-child(n) {
    grid-column: 2 / 8;
  }

  .cp4__text,
  .cp4__act {
    grid-column: 2 / 8;
  }
}

@media (max-width: 599px) {
  .cp2__lead,
  .cp2__side {
    grid-template-columns: 1fr;
  }

  .cp-cascade {
    font-size: 12cqi;
  }

  .cp-cascade li:nth-child(n) {
    margin-inline-start: 0;
    white-space: normal;
  }
}