/* ==================================================================
   The programme pages and the Programmes list.

   Loaded after site.css, and only on those pages (inc/programme-list.php). Every
   size and gap is a token from site.css :root, and the rhythm is the site's own:
   each module carries var(--flow) above and below, and inside every ruled block the
   space from the rule to the first capitals is the space from the last baseline, or
   the button's edge, to the next rule. text-box trims the half-leading and the room
   above the capitals off the first line and the room under the baseline off the
   last, so those distances are measured to the letters, as they are for .signup and
   the feedback form. A browser without text-box shows a few pixels more and nothing
   else.
   ================================================================== */

/* ---- the trade mark ---------------------------------------------------------
   A small raised mark after BARE, ANNEAL, FORGE and BARE: The Return, in title
   positions only. The face draws the mark as a superior glyph whose top meets the
   capitals, a quarter of their height at seven tenths of the size, so it is raised
   just enough to put its top back on the capitals' top. Its line height is nothing,
   so it never makes a line taller; it moves by position rather than vertical-align,
   so the line's baseline stays where it was; and it follows the last letter with no
   space, so a line cannot break before it. */
.tm{font-size:.7em;line-height:0;letter-spacing:0;font-style:normal;text-transform:none;
  position:relative;top:-.31em;margin-left:.06em}

/* ---- the hero ---------------------------------------------------------------
   The section hero, with the rubric's capitals on its top padding and the brief's
   last baseline on its bottom padding, so the space over the words equals the space
   under them. The brief is printed whole, so it keeps to a reading measure. */
.sechero.idz-prog-hero .inner > .rubric{text-box:trim-start cap alphabetic}
.sechero.idz-prog-hero .inner > :last-child{text-box:trim-end cap alphabetic}
.sechero.idz-prog-hero .sub{max-width:52ch;margin-inline:auto}
/* The site's section hero holds its words to 780px, which left THERAPEUTIC and
   AUTOBIOGRAPHY a line each at every desktop width. A programme hero takes a wider
   measure; its block still shrinks to its words, so shorter titles do not move, and
   the brief keeps its own reading measure above. */
.sechero.idz-prog-hero .inner{max-width:1160px}

/* On the narrowest phones the section hero's title size put BARE: The Return and its
   mark just over one line, leaving BARE: alone on the first. A size a little smaller
   holds the whole title on one line, for the programme hero only. */
@media(max-width:400px){.sechero.idz-prog-hero h1{font-size:1.8rem}}
/* At 360 the same size left Working alone over the Steps; a step smaller holds it. */
@media(max-width:374px){.sechero.idz-prog-hero h1{font-size:1.7rem}}

/* ---- one axis ---------------------------------------------------------------
   Every module after the hero is set on the text measure's left edge: its header,
   its words and its rows. The band header is the site's, set left rather than
   centred over text that is set left. */
.idz-prog-page .hdr{text-align:left}
.idz-prog-page .hdr h2{text-box:trim-both cap alphabetic}
.idz-prog-page .hdr .stamp{margin-top:var(--s3);text-box:trim-both cap alphabetic}

/* ---- the opening: the programme's summary, whole ---- */
.idz-prog-open .measure > p{font-family:var(--text);font-size:12pt;line-height:1.7;color:var(--ink)}
.idz-prog-open .measure > p + p{margin-top:1.15em}
.idz-prog-open .measure > p:first-child{text-box-trim:trim-start;text-box-edge:cap alphabetic}
.idz-prog-open .measure > p:last-child{text-box-trim:trim-end;text-box-edge:cap alphabetic}
.idz-prog-open .measure > p:only-child{text-box-trim:trim-both}

/* ---- the path ----------------------------------------------------------------
   One row per part: its number, its title, its whole summary and its session count.
   The number is set in the title's face at the title's size, and both start on the
   row's top padding at their capitals, so they share a capital top and a baseline.
   The words run the full width of the rule over them. */
.idz-path{list-style:none;margin:0;padding:0}
.idz-path > li{display:grid;grid-template-columns:2.6rem minmax(0,1fr);column-gap:var(--s4);
  align-items:start;padding-block:var(--row-pad);border-bottom:1px solid var(--rule)}
.idz-path > li:first-child{border-top:1px solid var(--rule)}
.idz-path-num,.idz-path h3{font-family:var(--display);font-weight:700;line-height:1.08;
  font-size:clamp(1.3rem,2.2vw,1.65rem);font-variation-settings:'opsz' 32;
  text-box:trim-start cap alphabetic}
.idz-path-num{display:block;color:var(--ink-faint);letter-spacing:0;
  font-variant-numeric:lining-nums tabular-nums}
/* Bodoni Moda draws its 5 taller than its capitals: the flag rises .055em over the cap
   line the row is trimmed to, so the fifth part's numeral stood 1.5px above its title at
   1280 while every other digit met it. A numeral ending in 5 is lowered by that rise and
   its leading digit is lifted back by the same, so both digits meet the capitals. The
   5 keeps its own height, so its foot now sits that .055em under the title's baseline:
   the tops are what the eye reads across the row, and the digit is not redrawn. */
.idz-path > li:nth-child(10n+5) .idz-path-num{position:relative;top:.055em}
.idz-path > li:nth-child(10n+5) .idz-path-num::first-letter{vertical-align:.055em}
.idz-path .dek{font-size:15.5px;margin-top:var(--s2);max-width:none}
.idz-path .stamp{margin-top:var(--s3);text-box:trim-end cap alphabetic}
@media(max-width:680px){.idz-path > li{grid-template-columns:2.2rem minmax(0,1fr);column-gap:var(--s3)}}

/* ---- how it works: the dark band --------------------------------------------
   Its rubric's capitals sit on the band's top padding and its last line's baseline
   on the bottom padding, the same distance each way. */
.idz-prog-how .copy > :first-child{text-box:trim-start cap alphabetic}
.idz-prog-how .copy > :last-child{text-box:trim-end cap alphabetic}

/* ---- what is held ---- */
.idz-held-text{font-family:var(--text);font-size:12pt;line-height:1.7;color:var(--ink);
  text-box:trim-both cap alphabetic}
.idz-held-text a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
.idz-held-text a:hover{text-decoration-thickness:2px}

/* ---- Enquire ------------------------------------------------------------------
   One block on every programme page and on the list. It is a section in a page, so
   var(--flow) over it and after it come from .signup in site.css. In place of the
   section's heavy rule it is a box, the practice page's programmes box: the same
   hairline, the same tint and the same padding, the full width of the text, and all
   of it centred on the box's middle. The heading's capitals start on the top padding
   and the button's lower edge ends on the bottom one, or on a phone the number's
   baseline does. The phone number is a line of its own beside the button, set in the
   field's type, trimmed to its capitals and centred on the button's height. Where the
   button runs the full width, the number wraps under it, centred like the rest. */
.idz-enquire.signup{border:1px solid var(--rule-ink);background:var(--tint);
  padding:var(--s6) var(--s5);text-align:center}
@media(max-width:560px){.idz-enquire.signup{padding:var(--s5) var(--s4)}}
.idz-enquire.signup > p{font-family:var(--text);font-size:15.5px;line-height:1.6;color:var(--ink-soft);
  margin-top:var(--s3);margin-inline:auto;max-width:52ch}
.idz-enquire .idz-enq-act{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--s3) var(--s5);margin-top:var(--s4)}
.idz-enquire .idz-enq-act .btn{flex:0 0 auto;text-decoration:none}
.idz-enquire .idz-enq-act .idz-enq-phone{margin:0;max-width:none;font-family:var(--sans);font-size:15px;
  font-weight:400;line-height:1.4;letter-spacing:.04em;color:var(--ink-soft);text-box:trim-both cap alphabetic}
.idz-enquire .idz-enq-phone a{color:var(--ink);white-space:nowrap;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.2em}
/* The number hovers to ink, as the button beside it does, and the oxblood goes to
   focus alone. It already rests in ink, so this hover no longer moves it. */
.idz-enquire .idz-enq-phone a:hover{color:var(--ink)}
@media(max-width:680px){
  .idz-enquire .idz-enq-act .btn{flex:1 1 100%;text-align:center}
  .idz-enquire .idz-enq-act .idz-enq-phone{flex:1 1 100%;text-align:center}
}

/* ---- the Programmes list ------------------------------------------------------
   The rows are ruled as the path's are, with the same symmetric padding. The opening
   paragraph ends on its baseline var(--row-pad) over the first rule, as far as the
   first title sits under it. */
.idz-prog-list .body > p:has(+ .idz-progs){text-box:trim-end cap alphabetic}
.idz-prog-list .body > .idz-progs{margin-top:var(--row-pad)}
.idz-progs .idz-prog-rows{list-style:none;margin:0;padding:0}
.idz-progs .idz-prog-rows > li{margin:0;padding-block:var(--row-pad);border-bottom:1px solid var(--rule)}
.idz-progs .idz-prog-rows > li:first-child{border-top:1px solid var(--rule)}
.idz-progs .idz-prog-rows h2{margin:0;font-family:var(--display);font-weight:700;line-height:1.08;
  font-size:clamp(1.3rem,2.2vw,1.65rem);font-variation-settings:'opsz' 32;text-box:trim-start cap alphabetic}
.idz-progs .idz-prog-rows h2 a{color:var(--ink);text-decoration:none}
.idz-progs .idz-prog-rows h2 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
.idz-progs .idz-prog-rows .dek{font-size:15.5px;margin-top:var(--s2);max-width:none}
.idz-progs .idz-prog-rows .stamp{margin-top:var(--s3);text-box:trim-end cap alphabetic}
/* The list's last row ends on its stamp's baseline and the Enquire box follows, so the
   row gives up its hairline and bottom padding there. Otherwise a rule stood one module
   gap over the box with nothing between them, and the baseline sat further from the box
   than the held text does on a programme page. */
.idz-progs .idz-prog-rows:has(+ .idz-enquire) > li:last-child{border-bottom:0;padding-bottom:0}