/* The lesson videos page (index.html, written by platform/scripts/build-lesson-gallery.mjs).
   External: the site's policy blocks inline styles. Colours, edges and type are theme.css's roles,
   so both themes work; this file keeps the layout. One link per card goes to the player (the card
   is its target); Download video, the card's own .mp4, sits beside it as its own target. The page
   opens on the film of the whole path beside the eight questions, then one block per question. */
body.tutorial-gallery { margin: 0; }
/* main clips sideways overflow (styles.css), so the column keeps 8px of its own room on each side: the
   cards' hard shadow, a lifted card and a focus ring are never cut at its edge. The words stay 16px in. */
.gallery { width: min(77rem, 100% - 16px); margin: 1.4rem auto 3rem; padding-inline: 8px; }
.gallery-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
}
.gallery h1 { margin: 0.4rem 0 0.5rem; font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; }
.gallery-lede { margin: 0 0 1.25rem; color: var(--text-dim); font-size: 1.05rem; font-weight: 600; line-height: 1.45; }
/* The start: the film's card and the short path, side by side; stacked on a phone. */
.gallery-start { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 1rem 1.75rem; align-items: start; scroll-margin-top: 1rem; }
.gallery-path ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; }
.gallery-path a {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 0.6rem;
  min-height: 44px;
  padding: 0.6rem 0;
  border-bottom: var(--ol-thin) solid var(--divider);
  color: var(--text);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
.gallery-path a:hover .gallery-path-question { text-decoration: underline 3px var(--link-line); text-underline-offset: 0.3em; }
.gallery-path-count { color: var(--text-dim); font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.gallery-part { margin-top: 2.25rem; scroll-margin-top: 1rem; }
.gallery-part h2 { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.4rem; font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 800; line-height: 1.2; }
.gallery-why { margin: 0 0 1rem; color: var(--text-dim); font-size: 0.95rem; font-weight: 600; line-height: 1.4; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gallery-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 0 14px;
  overflow: hidden;
}
/* The poster is a screen: it stays dark in both themes (theme.css's night islands). */
.gallery-poster { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: var(--ol) solid var(--edge); background: var(--screen); container-type: inline-size; }
.gallery-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The drawn poster: the lesson's own name on the night room. A poster image covers it. */
.gallery-drawn {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: var(--bg);
}
.gallery-drawn-name { color: var(--text); font-size: clamp(1.15rem, 8cqi, 1.7rem); font-weight: 800; line-height: 1.15; text-align: center; text-wrap: balance; overflow-wrap: anywhere; }
/* The play mark sits in the poster's empty caption band (the bottom fifth of the frame, 11.25%
   of its width), so at any card width it never covers the picture's words. Neutral: many sit on
   one screen. */
.gallery-play {
  position: absolute;
  right: 1.6cqi;
  bottom: 1.6cqi;
  display: grid;
  place-items: center;
  width: min(8cqi, 2.25rem);
  height: min(8cqi, 2.25rem);
  border: var(--ol-thin) solid var(--control-edge);
  border-radius: 50%;
  color: var(--text);
  background: var(--surface);
}
.gallery-play [data-ui-icon] { width: 50%; height: 50%; }
/* The card's kicker stays on one line at every width (step, app, case): the tags' 0.04em tracking and the card's
   right inset give the longest one ("1 of 8 · Product · CreatorCircle") its room in the four-across grid. */
.gallery-meta { margin: 0.85rem 0.5rem 0 1rem; overflow: hidden; letter-spacing: 0.04em; text-overflow: ellipsis; white-space: nowrap; }
.gallery-title { margin: 0.25rem 1rem 0; font-size: 1.3rem; font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; }
.gallery-line { flex: 1; margin: 0.35rem 1rem 0; color: var(--text-dim); font-size: 0.95rem; font-weight: 600; line-height: 1.4; }
.gallery-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; margin: 0.4rem 1rem 0; }
.gallery-watch, .gallery-download {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
}
/* The whole card opens the player through its one Watch link; Download video stays its own target, above it. */
.gallery-watch::after { content: ""; position: absolute; inset: 0; }
.gallery-download { position: relative; z-index: 1; white-space: nowrap; }
@media (max-width: 52rem) {
  .gallery-start { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  /* On a phone the path is a plain numbered list, one question per line, under the film's card. */
  .gallery-path ol { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 26rem) {
  .gallery { width: calc(100% - 16px); margin-top: 1rem; }
}