/* WORKSHOPS AND TRAINING (founder briefs 2026-10-17).
   1. One screen on a desktop: header, the 2 x 2 gallery and the request bar fill the window's height exactly; the
      photographs take whatever height is left (never below 8.5rem, so a short window scrolls instead of clipping).
   2. The card photographs come from the shared gallery's own picture style (entry-gallery.css).
   3. The drawer: what a workshop preview adds to the Production Checklist's drawer (.pc-dlg). */

/* ---- 1. the page ------------------------------------------------------------- */
.tr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s4); margin: 0 0 var(--s4); max-width: none; }
.tr-head .lc-h1 { margin: 0; font-size: var(--t-2xl); line-height: 1.05; }
.tr-head .lc-job { margin: 0; font-size: var(--t-base); }
.tr-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5);
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.tr-bar__facts { margin: 0; flex: 1 1 20rem; font: var(--t-sm)/1.5 var(--ui); color: var(--ink-2); }
/* the site's floating Feedback button sits at the bottom right of every page: the bar keeps that corner clear */
@media (min-width: 64rem) { .tr-bar { padding-right: 9.5rem; } }
.ia .tr-bar__facts a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.ia .btn.tr-bar__cta { flex: none; gap: var(--s2); background: var(--brand); border-color: var(--brand); color: var(--paper); font-weight: 600; }
.ia .btn.tr-bar__cta:hover, .ia .btn.tr-bar__cta:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--paper); }

@media (min-width: 64rem) {
  .ia:has(.tr-screen) { margin-top: 0; }
  main:has(.tr-screen) { padding-top: var(--s5); padding-bottom: var(--s4); }
  /* the screen is the window less main's own padding (set just above), never shorter than 34rem */
  .tr-screen { display: flex; flex-direction: column; height: max(34rem, calc(100dvh - var(--s5) - var(--s4))); }
  .tr-screen .eg-wrap { flex: 1 1 auto; min-height: 0; }
  /* the gallery's own subgrid (each card spans four rows: picture, title, line, "Details"), with the two picture rows
     sharing whatever height is left, so pictures and captions stay level across each row */
  .tr-screen .eg-gal { height: 100%; grid-template-rows: minmax(8.5rem, 1fr) auto auto auto minmax(8.5rem, 1fr) auto auto auto; }
  .tr-screen .eg-gal > li:nth-child(-n+2) .eg-card__go { padding-bottom: var(--s4); } /* the gap between the rows */
  .tr-screen .eg-card__pic { height: auto; min-height: 0; aspect-ratio: auto; }
  .tr-screen .eg-card__name { margin-top: var(--s2); }
  .tr-screen .eg-card__line { margin-top: 2px; font-size: var(--t-sm); max-width: none; }
}
/* tablets and phones: the gallery's own 16:9 pictures, and the page scrolls */

/* ---- 3. the drawer: a short workshop preview ------------------------------------ */
.tr-dlg__time { margin: 0; width: 100%; font: var(--t-sm)/1 var(--mono); color: var(--ink-3); order: 2; }
.tr-dlg__value { margin: 0; font: 600 var(--t-md)/1.4 var(--ui); color: var(--ink); max-width: 36rem; }
.tr-dlg__h { margin: var(--s5) 0 var(--s2); font: var(--t-xs)/var(--lh-meta) var(--mono); font-weight: 400; color: var(--brand); letter-spacing: 0; }
.tr-dlg__list { margin: 0; padding: 0; list-style: none; }
.tr-dlg__list li { position: relative; padding: var(--s1) 0 var(--s1) var(--s4); font: var(--t-base)/1.45 var(--ui); color: var(--ink); }
.tr-dlg__list li::before { content: ""; position: absolute; left: 0; top: calc(var(--s1) + .55em); width: .4rem; height: .4rem; background: var(--brand); }
.tr-dlg__p { margin: 0; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink-2); max-width: 36rem; }
.tr-dlg__meta { margin: 0; display: grid; }
.tr-dlg__meta > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--rule); }
.tr-dlg__meta > div:last-child { border-bottom: 1px solid var(--rule); }
.tr-dlg__meta dt { font: var(--t-xs)/1.7 var(--mono); color: var(--ink-3); }
.tr-dlg__meta dd { margin: 0; font: var(--t-sm)/1.5 var(--ui); color: var(--ink); }
.ia .tr-dlg__meta dd a, .ia .tr-dlg__curr a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.tr-dlg__leave { margin: 0; padding-left: var(--s3); border-left: 2px solid var(--brand); font: 600 var(--t-base)/1.45 var(--ui); color: var(--ink); max-width: 36rem; }
.tr-dlg__curr { margin: var(--s4) 0 0; font: var(--t-sm)/1.5 var(--ui); color: var(--ink-2); }
.tr-dlg__more { margin-top: var(--s5); border-top: 1px solid var(--rule); }
.tr-dlg__more summary { display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; cursor: pointer; list-style: none;
  font: 600 var(--t-sm)/1.2 var(--ui); color: var(--ink); }
.tr-dlg__more summary::-webkit-details-marker { display: none; }
.tr-dlg__more summary::after { content: "+"; font: 400 var(--t-md)/1 var(--mono); color: var(--ink-3); }
.tr-dlg__more[open] summary::after { content: "−"; }
.tr-dlg__more summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tr-dlg__more .tr-dlg__meta { margin-bottom: var(--s2); }
/* the footer is the drawer's own (sticky: the body scrolls above it); the request on the left, the next format right */
.tr-dlg .pc-dlg__foot { flex-wrap: nowrap; align-items: flex-start; }
.tr-dlg .pc-dlg__foot > .pc-btn--quiet { flex: none; margin-top: .25rem; }
@media (max-width: 30rem) { .tr-dlg .pc-dlg__foot { flex-wrap: wrap; } }
.tr-dlg__req { display: grid; gap: var(--s1); min-width: 0; }
.tr-dlg__req .pc-dlg__meta { margin: 0; }
.ia .tr-dlg__req .pc-dlg__meta a { color: var(--ink-2); }
.pc-btn.tr-dlg__cta { min-height: 3rem; padding-inline: var(--s5); font-size: var(--t-base); }
/* production-checklist.css colours every .pc-btn inside .ia as a filled button; the quiet one keeps the drawer's ink */
.ia .tr-dlg .pc-btn--quiet { color: var(--ink-2); background: none; }
.ia .tr-dlg .pc-btn--quiet:hover { color: var(--ink); background: var(--paper-3); }
/* while a drawer is open on a wide screen the page narrows to make room for it (as on the Production Checklist) */
@media (min-width: 64rem) { html.pc-drawer-open .tr-head .lc-h1 { font-size: var(--t-xl); } }
/* a line under the bullets, and an understated line after Who it's for (Guest lecture) */
.tr-dlg__note { margin: var(--s2) 0 0; font: var(--t-sm)/1.5 var(--ui); color: var(--ink-2); }
.tr-dlg__mission { margin: var(--s3) 0 0; font: italic var(--t-sm)/1.5 var(--ui); color: var(--ink-3); max-width: 36rem; }

/* WHOLE-CARD AFFORDANCE (founder, 2026-10-18): each card was already one link to its drawer, but nothing said so
   until you hovered. "Details →" is the gallery's own call-to-action row (Start Here's "Explore →"), so the cards say
   they open; hover and keyboard focus light the picture, underline the title and nudge the arrow. */
.tr-screen .eg-card { cursor: pointer; }
.tr-screen .eg-card__go span { display: inline-block; transition: transform .15s ease; }
.tr-screen .eg-card:is(:hover, :focus-visible) .eg-card__go span { transform: translateX(3px); }
@media (min-width: 64rem) { .tr-screen .eg-card__go { padding-top: var(--s1); } }
@media (prefers-reduced-motion: reduce) { .tr-screen .eg-card__go span { transition: none; } }