/**
 * tutorial-videos.css
 * The "Video tutorials" section of tutorial.html: a grid of narrated videos,
 * each with its title, length and a short description.
 *
 * Dependencies: the colour variables defined in tutorial.html's own <style>
 * (--bg-dark, --border, --text-*, --gradient-main).
 */

/* ============================================
   GRID
   ============================================ */
.vt-intro { color: var(--text-secondary); margin-bottom: 1.2rem; }

.vt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

/* ============================================
   ONE VIDEO
   ============================================ */
.vt-card {
  display: flex; flex-direction: column;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  scroll-margin-top: 90px;
}

/* width/height on the tag reserve 16:9 before the poster loads */
.vt-card video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  background: #14122e;
}

/* ============================================
   PLAY BUTTON (added by tutorial-videos.js)
   ============================================ */
/* Chrome's own controls show no clear play button on a poster, so a large one
   sits over it until the video starts, and comes back when it ends. It sits on
   the poster's logo, above the title the poster spells out, and is sized from
   the video's width so it stays clear of that title at any width. */
.vt-frame { position: relative; }
.vt-play {
  position: absolute; left: 50%; top: 36%;
  width: 13%; min-width: 44px; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(10, 10, 10, 0.72)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='%23fff'/%3E%3C/svg%3E")
    center / 55% no-repeat;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 8px 24px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.vt-play:hover { transform: translate(-50%, -50%) scale(1.06); background-color: rgba(10, 10, 10, 0.85); }
.vt-play:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.vt-frame.is-playing .vt-play { display: none; }

.vt-body { padding: 0.9rem 1rem 1.05rem; }

.vt-meta {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.35rem;
}
.vt-num {
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center;
  font-size: 0.8rem; font-weight: 800;
  background: var(--gradient-main); color: #0a0a0a;
}
.vt-len {
  font-size: 0.78rem; font-weight: 600; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.step .vt-card h3 { margin: 0 0 0.3rem; font-size: 1rem; color: var(--text-primary); }
.step .vt-card p { margin: 0; font-size: 0.9rem; line-height: 1.55; }

/* ============================================
   MOBILE
   ============================================ */
@media (max-width: 700px) {
  .vt-grid { grid-template-columns: 1fr; }
}