/* App tutorial video cards: the homepage row and /tutorials/.
   Rendered by scripts/generate_tutorials.py from _data/videos.json (kind "tutorial").
   Click-to-load facade, same idea as the ride POV embeds: the YouTube iframe
   only exists after a visitor presses play. */
.tut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 36px 28px; margin-top: 32px; }
.tut-card { min-width: 0; }
.tut-media { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #000; border: 1px solid var(--border); }
.tut-media--16x9 { aspect-ratio: 16 / 9; }
.tut-facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: #000; cursor: pointer; display: block; }
.tut-facade img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; transition: opacity .2s ease, transform .3s ease; }
.tut-facade:hover img { opacity: 1; transform: scale(1.03); }
.tut-facade:focus-visible { outline: 3px solid var(--sunset-red); outline-offset: -3px; } /* inset: .tut-media clips overflow */
.tut-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 999px; background: rgba(0, 0, 0, .55); border: 2px solid rgba(255, 255, 255, .9); pointer-events: none; }
.tut-play::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-38%, -50%); border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.tut-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* YouTube's player needs at least 200px a side. A card whose player is loading takes the whole row of
   its grid (capped so a 9:16 player stays a phone-sized column), so narrow grids still play in place. */
.tut-card--playing { grid-column: 1 / -1; width: 100%; max-width: 360px; margin-inline: auto; }
.tut-topic { margin: 14px 0 0; font: 700 12px/1.4 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--teal); }
.tut-card h2, .tut-card h3 { margin-top: 6px; font-size: 18px; }
.tut-summary { margin-top: 8px; color: var(--text-dim); font-size: 14px; line-height: 1.55; }
.tut-more { margin-top: 28px; font-size: 14px; }
/* Homepage band: copy on the left, three small cards on the right; summaries stay on /tutorials/. */
.tut-band { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px 48px; align-items: center; }
.tut-band .section-intro { font-size: 16px; }
.tut-band .tut-more { margin-top: 20px; }
.tut-grid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 0; }
.tut-grid--home .tut-topic { margin-top: 10px; font-size: 11px; }
.tut-grid--home h3 { font-size: 15px; margin-top: 4px; }
.tut-page-intro { margin-top: 18px; max-width: 660px; color: var(--text-dim); font-size: 18px; }
.tut-page-intro a { display: inline-block; }
.tut-after { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.tut-after p { margin: 0; color: var(--text-dim); font-size: 15px; }
.tut-support { margin-top: 24px; font-size: 14px; color: var(--text-dim); }
@media (max-width: 860px) {
  .tut-band { grid-template-columns: 1fr; gap: 24px; }
  .tut-grid--home { gap: 14px; }
}
@media (max-width: 600px) {
  .tut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .tut-grid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .tut-grid--home h3 { font-size: 13px; }
  .tut-play { width: 48px; height: 48px; }
  .tut-play::before { border-width: 9px 0 9px 15px; }
}