/*
SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
*/

/* Dataset page: the hero wall of training episodes and the episode dialog.
   The hero follows the visitor's light / dark preference like the rest of the site. */
:root { --hero-bg:#f3f4ee; --hero-fg:#1b1f1a; --hero-card:#dfe3dc; --hero-line:rgba(0,0,0,.22); }
@media (prefers-color-scheme: dark) { :root { --hero-bg:#0b0e0a; --hero-fg:#fff; --hero-card:#141814; --hero-line:rgba(255,255,255,.3); } }
.layout-hero { grid-template-columns:minmax(0,1fr); max-width:none; }
.layout-hero main { max-width:none; padding:0 0 3rem; }

/* hero: title, action and eight revolving rows of clips */
.hero { background:var(--hero-bg); color:var(--hero-fg); padding:2.5rem 3rem 1.75rem; min-height:calc(100vh - 64px); box-sizing:border-box; display:flex; flex-direction:column; }
.hero-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; margin:0 0 1.25rem; }
.hero .eyebrow { display:block; font:700 .72rem/1.4 ui-monospace, Menlo, monospace; letter-spacing:.16em; color:var(--accent-dark); margin-bottom:.7rem; }
.hero h1 { margin:0; font-size:clamp(2.4rem, 4.2vw, 3.6rem); line-height:1.04; letter-spacing:-.04em; color:var(--hero-fg); }
.hero h1 .green { color:var(--accent-dark); }
.hero-actions { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; padding-bottom:.4rem; }
/* Note beside "View an episode" until the downloadable sample dataset is published. */
.soon { display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .95rem; border:1px dashed var(--hero-line); border-radius:999px; color:var(--hero-fg); font:600 .82rem/1.2 "Inter", system-ui, sans-serif; opacity:.8; }
.soon::before { content:""; width:.45rem; height:.45rem; border-radius:50%; background:var(--accent); }
.button { display:inline-block; padding:.65rem 1.25rem; border-radius:999px; border:1px solid var(--hero-line); color:var(--hero-fg); background:transparent; text-decoration:none; font:600 .9rem/1.2 "Inter", system-ui, sans-serif; cursor:pointer; }
.button:hover { border-color:var(--accent); }
.button.primary { background:var(--accent); border-color:var(--accent); color:#0b0e0a; }
.hero-wall { position:relative; margin:0 -3rem; padding:0 .5rem; -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.wall-row { overflow:clip; margin-bottom:.55rem; }  /* clip, not hidden: focus cannot scroll the row against its transform */
.wall-track { display:flex; gap:.55rem; width:max-content; animation:wall-scroll var(--wall-duration, 140s) linear infinite; will-change:transform; }
.wall-row.reverse .wall-track { animation-direction:reverse; }
.hero-wall:hover .wall-track, .hero-wall.paused .wall-track, .hero-wall:focus-within .wall-track { animation-play-state:paused; }
@keyframes wall-scroll { to { transform:translateX(-50%); } }
.wall-card { width:clamp(170px, 11.5vw, 240px); aspect-ratio:16/10; flex:0 0 auto; border:0; border-radius:6px; overflow:hidden; background:var(--hero-card); padding:0; cursor:pointer; display:block; position:relative; }
.wall-card video { display:block; width:100%; height:100%; object-fit:cover; }
.wall-card:hover { outline:2px solid var(--accent); outline-offset:-2px; }
.hero-controls { display:flex; justify-content:flex-end; margin:.1rem 0 0; }
.hero-controls button:disabled, .button:disabled { opacity:.5; cursor:default; }
.hero-note { color:var(--muted); padding:2rem .5rem; margin:0; }
.clip-modal:focus { outline:none; }
.hero-controls button { border:1px solid var(--hero-line); background:transparent; color:var(--hero-fg); border-radius:6px; padding:.4rem .9rem; font:600 .8rem/1.2 "Inter", system-ui, sans-serif; cursor:pointer; }
.hero-controls button:hover { border-color:var(--accent); }
@media (prefers-reduced-motion: reduce) { .wall-track { animation:none; } .wall-row { overflow-x:auto; } .hero-wall { mask-image:none; -webkit-mask-image:none; } }
@media (max-width:900px) { .hero { padding:1.75rem 1.25rem 1.25rem; } .hero-wall { margin:0 -1.25rem; } .wall-card { width:150px; } .hero-controls { margin-right:0; } }

/* episode dialog: three views in lockstep, the instruction, previous / next */
.clip-modal { border:0; border-radius:12px; padding:1.5rem 1.75rem 1.4rem; width:min(960px, calc(100vw - 2rem)); max-height:calc(100vh - 2rem); background:var(--bg); color:var(--fg); box-shadow:0 30px 80px rgba(0,0,0,.45); }
.clip-modal::backdrop { background:rgba(0,0,0,.6); }
.clip-modal .modal-close { position:absolute; right:1rem; top:1rem; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--bg); color:var(--fg); font-size:1.25rem; line-height:1; cursor:pointer; }
.clip-modal .eyebrow { display:block; font:700 .66rem/1.4 ui-monospace, Menlo, monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-dark); }
.clip-modal h3 { margin:.3rem 2.5rem .9rem 0; font-size:1.9rem; line-height:1.1; letter-spacing:-.03em; }
.modal-media { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); grid-template-rows:1fr 1fr; gap:.45rem; background:#0b0e0a; border-radius:10px; padding:.45rem; }
.modal-media figure { margin:0; position:relative; min-height:0; min-width:0; }
.modal-media figure.head { grid-row:1 / span 2; }
.modal-media video { display:block; width:100%; height:100%; object-fit:cover; border-radius:6px; background:#000; }
.modal-media figure.head video { aspect-ratio:4/3; }
.modal-media figcaption { position:absolute; left:.5rem; bottom:.5rem; font:600 .66rem/1 "Inter", system-ui, sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.55); padding:.3rem .5rem; border-radius:4px; }
.modal-controls { display:flex; align-items:center; gap:1rem; margin:.9rem 0 1.2rem; }
.modal-controls input[type=range] { flex:1; accent-color:var(--accent); }
.modal-controls .time { font-variant-numeric:tabular-nums; color:var(--muted); font-size:.82rem; min-width:5.5rem; text-align:right; }
.modal-controls button, .modal-nav button { border:1px solid var(--line); background:var(--bg); color:var(--fg); border-radius:6px; padding:.5rem .9rem; font:600 .84rem/1.2 "Inter", system-ui, sans-serif; cursor:pointer; }
.modal-controls button:hover, .modal-nav button:hover { border-color:var(--accent); }
.modal-instruction { margin:.3rem 0 1.1rem; font-size:1.05rem; line-height:1.55; padding-bottom:1.1rem; border-bottom:1px solid var(--line); }
.modal-nav { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:.82rem; }
@media (max-width:700px) { .modal-media { grid-template-columns:1fr 1fr; grid-template-rows:auto; } .modal-media figure.head { grid-column:1 / -1; grid-row:auto; } .clip-modal h3 { font-size:1.4rem; } }