/* =====================================================================
   The restructured courses page (templates/courses_v2.html).

   Loaded by that template only, so nothing here can leak into the rest of
   the site. The palette is the site's own: the warm page, ink, the one
   accent, and the paper panel. No new colour is introduced, and no rule
   here restyles an existing component.

   Sizing follows her standing notes: large, readable body text; nothing
   faint; rows of labels kept on one line; and every card in a row the same
   height so the CTAs line up. Three cards to a row on a laptop, two on a
   tablet, one on a phone.
   ===================================================================== */

.cp-note {
  max-width: 70ch;
  border-left: 3px solid var(--gold);
  background: var(--paper);
  padding: 14px 18px;
  margin-bottom: clamp(28px, 3vw, 44px);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
}

/* ---------------------------------------------------------- jump links -- */
.cp-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 18px;
}
.cp-jump__link {
  display: inline-block;
  padding: 9px 15px;
  border: 1px solid var(--line-strong);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.cp-jump__link:hover { background: var(--ink); color: var(--page); border-color: var(--ink); }
.cp-jump__link--alt { border-color: var(--accent); color: var(--accent); }
.cp-jump__link--alt:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.cp-hero-acts {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.cp-hero-acts .muted { font-size: 16.5px; }

.cp-lede {
  max-width: 58ch;
  margin-top: 14px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--body);
}

/* -------------------------------------------------------- progression -- */
.cp-prog {
  padding: clamp(22px, 2.6vw, 40px);
  background: var(--paper);
  border: 1px solid var(--line);
}
.cp-prog__row {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.cp-prog__step {
  display: block;
  border-top: 3px solid var(--accent);
  padding-top: 14px;
}
.cp-prog__step b {
  display: block;
  margin: 6px 0 6px;
  font-size: clamp(17px, 1.3vw, 20px);
  color: var(--ink);
}
.cp-prog__step span:last-child { display: block; font-size: 16.5px; line-height: 1.55; color: var(--body); }
.cp-prog__num {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--accent);
}
.cp-prog__note {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
}

/* ------------------------------------------------------------ pathway -- */
.cp-path { margin-top: clamp(52px, 6vw, 96px); }
.cp-path__head { max-width: 78ch; }
.cp-path__out {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--paper);
  border-left: 3px solid var(--ink);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
}
.cp-path__after {
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
}
.cp-path__after a { color: var(--accent); font-weight: 600; }

.cp-grid {
  margin-top: clamp(24px, 2.6vw, 38px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  align-items: stretch;
}
.cp-grid--one { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
/* Her word, 30 October 2026, first "2 course cards in one row", then on 30 October 2026
   "On laptop, make 3 courses in one row" - so a laptop reads the whole shelf in two sweeps.
   Three at 1180px and wider; two on a tablet; one on a phone (the phone rule below). */
.cp-grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --------------------------------------------------------------- card -- */
.cp-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}
.cp-card__media {
  display: block;
  /* The default frame, used only when the file's own size could not be read: 1/1 is what
     most of the course art actually is. In practice every card carries its picture's own
     ratio inline (app.py image_aspect), so nothing is cropped either way.
     `flex: 0 0 auto` keeps the frame at that ratio instead of being stretched by the grid. */
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  background: var(--paper);
  overflow: hidden;
}
.cp-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform .5s var(--ease-out);
}
/* The workshop tiles are the shared product card, so the two rules that would crop their
   posters are overridden here rather than in site.css, where other pages rely on them.
   A uniform 16:9 frame keeps the three-tile row even; `contain` shows each picture whole
   (her instruction, 29 Oct 2026, "Make sure the images are not cropped off"), and any
   letterbox falls on paper, not on a dark band. `flex: 0 0 auto` stops the frame being
   stretched taller than its ratio by the grid, which is what left two blank tiles. */
.cp-grid--cards .pcard__media {
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
  background: var(--paper);
}
.cp-grid--cards .pcard__media img { object-fit: contain; }
/* No hover zoom on these cards: a scale inside a frame that exactly matches the picture
   would crop a sliver of the artwork she just asked to keep whole. */
.cp-card:hover .cp-card__media img { transform: none; }
.cp-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  padding: clamp(18px, 1.8vw, 26px);
}
.cp-card__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-chip {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.cp-chip--level {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.cp-card__title {
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.14;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.cp-card__title a { color: inherit; }
.cp-card__title a:hover { color: var(--accent); }
.cp-card__who { font-size: 16.5px; line-height: 1.55; color: var(--body); }
.cp-card__who b, .cp-card__make b { color: var(--ink); }
.cp-card__label {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.cp-card__learn { list-style: none; margin: 0; padding: 0; }
.cp-card__learn li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 7px;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink);
}
.cp-card__learn li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  background: var(--accent);
}
.cp-card__make {
  padding: 12px 14px;
  background: var(--paper);
  border-left: 3px solid var(--accent);
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink);
}
.cp-card__fee { font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.cp-card__acts {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.cp-card__acts .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
.cp-card__next {
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
  font-size: 16px;
  line-height: 1.55;
  color: var(--body);
}
.cp-card__next a { color: var(--accent); font-weight: 600; }

/* ---------------------------------------------------------- comparison -- */
.cp-cmp { margin-top: clamp(56px, 6.5vw, 104px); }
.cp-cmp__scroll { margin-top: clamp(22px, 2.4vw, 36px); overflow-x: auto; }
.cp-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
}
.cp-table__cap {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0 0 12px;
  font-size: 15px;
  color: var(--muted);
}
.cp-table th, .cp-table td {
  border: 1px solid var(--line);
  padding: 13px 15px;
  text-align: left;
  vertical-align: top;
  font-size: 16px;
  line-height: 1.5;
}
.cp-table thead th {
  background: var(--ink);
  color: var(--page);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cp-table tbody th {
  font-size: 16.5px;
  font-weight: 700;
  min-width: 210px;
}
.cp-table tbody th a { color: var(--ink); }
.cp-table tbody th a:hover { color: var(--accent); }
.cp-table tbody tr:nth-child(even) { background: var(--paper); }
.cp-cmp__note {
  margin-top: 16px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--body);
}
.cp-cmp__note a { color: var(--accent); font-weight: 600; }

/* --------------------------------------------------------- differences -- */
.cp-diff { margin-top: clamp(56px, 6.5vw, 104px); }
.cp-diff__list {
  margin-top: clamp(22px, 2.4vw, 36px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.cp-diff__row {
  padding: clamp(18px, 1.8vw, 26px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ink);
}
.cp-diff__pair {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
}
.cp-diff__pair a { color: var(--ink); }
.cp-diff__pair a:hover { color: var(--accent); }
.cp-diff__vs {
  display: inline-block;
  margin: 0 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.cp-diff__line { margin-top: 10px; font-size: 16.5px; line-height: 1.55; color: var(--body); }

/* ------------------------------------------------------------- ask box -- */
.cp-ask {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: clamp(24px, 3vw, 48px);
}

/* -------------------------------------------------------------- tables -- */
@media (max-width: 1100px) {
  .cp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-prog__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cp-diff__list { grid-template-columns: minmax(0, 1fr); }
  .cp-prog__row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 700px) {
  .cp-grid { grid-template-columns: minmax(0, 1fr); }
  .cp-card__acts .btn { flex: 1 1 100%; }
  /* The comparison reads as cards on a phone: a seven-column table on a 380px
     screen is a dense grid, which her brief says to avoid. Each row becomes its
     own block and each cell carries its column name from data-label. */
  .cp-cmp__scroll { overflow-x: visible; }
  .cp-table, .cp-table tbody, .cp-table tr, .cp-table th, .cp-table td { display: block; width: 100%; }
  .cp-table thead { display: none; }
  .cp-table { border: 0; background: transparent; }
  .cp-table tbody tr {
    margin-bottom: 18px;
    border: 1px solid var(--line);
    background: var(--surface);
  }
  .cp-table tbody th {
    background: var(--ink);
    color: var(--page);
    border: 0;
    font-size: 17px;
    padding: 13px 15px;
  }
  .cp-table tbody th a { color: var(--page); }
  .cp-table tbody td {
    border: 0;
    border-bottom: 1px solid var(--line-2);
    padding: 11px 15px;
    font-size: 16px;
  }
  .cp-table tbody td:last-child { border-bottom: 0; }
  .cp-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
  }
  .cp-table__cap { font-size: 14.5px; }
}


/* ===========================================================================
   The restructured catalogue, 29 October 2026 (her brief, approved with "Ok").

   Three additions, nothing else restyled:

   - .cp-chip--outcome  the outcome word on each card (BUILD / MANAGE / SELL / PRODUCE).
                        Solid and bold: her standing rule is that nothing she must read is
                        faint or small, so this is ink on paper, not a tinted label.
   - .cp-card__out      the one sentence saying what that course lets you make.
   - .cp-intro          the introductory course's band, kept clearly apart from the four
                        courses while its November intake is still running.
   ========================================================================= */

.cp-chip--outcome {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cp-card__out {
  font-size: 16.5px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
}

/* Her word, 30 October 2026: "On laptop, make 3 courses in one row." Three per row from 1180px
   up, so the six cards are two tidy rows; one column on a phone and two on a tablet. */
@media (min-width: 1180px) {
  .cp-grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cp-grid--cards .cp-card { padding: 0; }
  .cp-grid--cards .cp-card__body { padding: 18px 18px 22px; }
  .cp-grid--cards .cp-card__title { font-size: 20px; }
  .cp-grid--cards .cp-card__who,
  .cp-grid--cards .cp-card__out { font-size: 15.5px; }
  .cp-grid--cards .cp-card__learn li { font-size: 15.5px; }
}

.cp-intro {
  margin-top: clamp(36px, 5vw, 64px);
  padding-top: clamp(28px, 4vw, 46px);
  border-top: 1px solid var(--line);
}
.cp-intro .cp-lede { max-width: 68ch; }

/* Four cards in one row must line up: her rule of 28 October 2026, "Make sure the titles are
   on the same height." A long title wraps to three lines on a laptop while a short one wraps to
   two, so the sentence under it and the "Who it is for" line would sit at different heights
   across the row. The title and the outcome sentence each hold a fixed three-line and two-line
   space at the four-across width, so every card's blocks start at the same y. */
@media (min-width: 1180px) {
  .cp-grid--cards .cp-card__title { min-height: 3.6em; }
  .cp-grid--cards .cp-card__out { min-height: 3em; }
}