/* The videos' page (video/index.html, video.js): dark like the photos' page; the videos as cards — a cover with
   its shape (16:9 wide, 9:16 tall), the title and the description under it. */
:root{
  --bg:#2B2A26;
  --bg-elevated:#35332D;
  --text:#EDE8DD;
  --text-muted:#B3ACA0;
  --accent:#D8B36E;
  --border:#45423A;
}
body{ background:var(--bg); color:var(--text); }

.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top: var(--header-pad, 14px);
  padding-bottom: var(--header-pad, 14px);
  border-bottom:1px solid var(--border);
}
.site-title{ font-family: var(--font-body); font-weight:500; font-size:1.2rem; }
.site-nav{ display:flex; align-items:center; gap: var(--space-3); }
.site-nav a{ color: var(--text-muted); font-size:0.95rem; border-bottom:1px solid transparent; }
.site-nav a:hover{ color:var(--accent); border-color:var(--accent); }

.videos{ max-width: var(--content-max-width, 1400px); margin: 0 auto; padding: var(--space-4) var(--space-3) var(--space-5); }
.videos-title{ font-family: var(--font-display); font-weight:500; font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 var(--space-4); }
.videos-empty{ color: var(--text-muted); }

/* the cards: wide ones two columns' worth, tall ones one (on a phone: one under the other) */
.video-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-auto-flow: dense; gap: var(--space-4) var(--space-3); align-items:start; }
.video-card{ display:flex; flex-direction:column; gap: var(--space-1); cursor:pointer; color: inherit; text-align:left; background:none; border:none; padding:0; font: inherit; }
.video-card.wide{ grid-column: span 2; }
.video-cover{ position:relative; width:100%; overflow:hidden; border-radius:4px; background:#000; }
.video-card.wide .video-cover{ aspect-ratio: 16 / 9; }
.video-card.tall .video-cover{ aspect-ratio: 9 / 16; }
.video-cover img, .video-cover video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform 0.6s ease, opacity 0.3s ease; }
.video-card:hover .video-cover img, .video-card:focus-visible .video-cover img{ transform: scale(1.03); }
.video-play{ position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%;
  background: rgba(20,19,17,0.55); border:1px solid rgba(237,232,221,0.6); display:flex; align-items:center; justify-content:center; transition: background 0.2s ease; }
.video-play::before{ content:''; margin-left:5px; border-style:solid; border-width:11px 0 11px 18px; border-color: transparent transparent transparent var(--text); }
.video-card:hover .video-play{ background: rgba(190,140,74,0.85); }
.video-format{ position:absolute; right:8px; top:8px; font-size:0.72rem; padding:2px 6px; border-radius:3px; background: rgba(20,19,17,0.6); color: var(--text-muted); }
.video-card h2{ font-family: var(--font-display); font-weight:500; font-size:1.25rem; margin: var(--space-1) 0 0; }
.video-card p{ margin:0; color: var(--text-muted); font-size:0.92rem; line-height:1.45; }
.video-card .video-date{ font-size:0.8rem; }
@media (max-width: 560px){
  .video-grid{ grid-template-columns: 1fr; }
  .video-card.wide{ grid-column: auto; }
  .video-card.tall{ max-width: 340px; }
}

/* the player: as large as the screen allows, in the video's shape */
.video-player{ padding:0; border:none; background:transparent; color: var(--text); max-width:none; max-height:none; width:100vw; height:100vh; margin:0; overflow:hidden; }
.video-player[open]{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--space-2); }
.video-player::backdrop{ background: rgba(14,13,12,0.94); }
.video-frame{ position:relative; background:#000; }
.video-frame video, .video-frame iframe{ display:block; width:100%; height:100%; background:#000; border:0; }
.video-frame [hidden]{ display:none; }
.video-player.wide .video-frame{ width: min(92vw, calc((100vh - 9rem) * 16 / 9)); aspect-ratio: 16 / 9; }
.video-player.tall .video-frame{ height: calc(100vh - 9rem); aspect-ratio: 9 / 16; max-width: 92vw; }
.video-info{ max-width: min(92vw, 60rem); text-align:center; }
.video-info h2{ font-family: var(--font-display); font-weight:500; font-size:1.3rem; margin:0 0 0.3rem; }
.video-info p{ margin:0; color: var(--text-muted); font-size:0.92rem; }
.video-close{ position:absolute; top:14px; right:18px; background:none; border:none; color: var(--text); font-size:2rem; line-height:1; cursor:pointer; z-index:2; }
.video-close:hover{ color: var(--accent); }