/* =====================================================================
   VIDEOS PAGE (المواد المرئية): masthead + a grid of video cards, each a
   poster thumbnail with a gold play affordance that opens a native <dialog>
   lightbox preview.
   Page-specific layout. Loaded only on pages/videos.html.
   Built on shared tokens + the page-hero masthead. No new hues, no raw
   values beyond the scrim rgba already used by the card components, no
   box-shadows (the shadow rule), no gradient text. Selectors namespaced
   under .vid-*.
   ===================================================================== */

/* ---------- 1. MASTHEAD ----------
   Reuses the shared `.page-hero` component (assets/css/base.css). No
   page-specific rules required. */

/* ---------- 2. VIDEO GRID ---------- */
.vid-grid { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 2.4vw, 36px); align-items: start; }
.vid-card { display: flex; flex-direction: column; }

/* thumbnail: rounded poster frame with a play overlay */
.vid-thumb { position: relative; border-radius: var(--radius-xl); overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--aeblack-100); }
.vid-thumb > img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease-standard); }
.vid-card:hover .vid-thumb > img { transform: scale(1.05); }
/* scrim: sinks the lower image so the gold disc reads on any poster (same
   rgba ink wash the category/news card scrims use) */
.vid-thumb::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(21,20,15,.34), rgba(21,20,15,0) 55%);
  transition: background var(--duration-base) var(--ease-standard); }
.vid-card:hover .vid-thumb::after {
  background: linear-gradient(to top, rgba(21,20,15,.46), rgba(21,20,15,0) 62%); }

/* play button fills the thumbnail for a large hit target; the gold disc is
   the visible affordance, centred */
.vid-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0;
  border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.vid-play:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -3px;
  border-radius: var(--radius-xl); }
.vid-disc { width: 62px; height: 62px; border-radius: var(--radius-full);
  background: var(--grad-gold); color: #fff; display: grid; place-items: center;
  border: 1.5px solid rgba(255,255,255,.5);
  transition: transform var(--duration-base) var(--ease-emphasis),
              border-color var(--duration-base) var(--ease-standard); }
/* optical-centre the right-pointing play triangle; transform (not a logical
   inset) so the nudge stays rightward in both RTL and LTR */
.vid-disc .ic { width: 26px; height: 26px; transform: translateX(2px); }
.vid-card:hover .vid-disc, .vid-play:focus-visible .vid-disc {
  transform: scale(1.08); border-color: #fff; }

/* meta under the thumbnail */
.vid-meta { padding-block-start: var(--space-10); padding-inline: var(--space-2); }
.vid-meta .n-date { display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-size: 13px; color: var(--aegold-700);
  margin-block-end: var(--space-5); }
.vid-meta .n-date .ic { width: 15px; height: 15px; }
.vid-title { font-family: var(--font-heading-ar); font-weight: 700; font-size: 18px;
  line-height: var(--leading-snug); color: var(--ink); margin: 0;
  transition: color var(--duration-base) var(--ease-standard); }
.vid-card:hover .vid-title { color: var(--aegold-800); }

/* ---------- 3. LIGHTBOX (native <dialog>) ----------
   The dialog fills the viewport and centres its panel, so showModal() gives
   the focus trap + Escape + inert background, and a click on the dialog
   itself (outside the panel) is a backdrop dismiss. */
.vid-dialog { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0;
  padding: clamp(16px, 4vw, 56px); border: 0; background: transparent; overflow: auto; }
.vid-dialog::backdrop { background: rgba(10,7,2,.74); }
.vid-dialog[open] { display: flex; }
.vid-dialog-inner { margin: auto; width: min(960px, 100%); position: relative;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); overflow: hidden; }
.vid-dialog[open] .vid-dialog-inner { animation: vidPop var(--duration-slow) var(--ease-emphasis); }
@keyframes vidPop { from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: none; } }

/* close chip on the end-top corner, over the dark stage */
.vid-close { position: absolute; inset-block-start: var(--space-8); inset-inline-end: var(--space-8);
  z-index: 3; width: 42px; height: 42px; border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,.55); background: rgba(21,20,15,.42); color: #fff;
  cursor: pointer; display: grid; place-items: center;
  transition: background var(--duration-base) var(--ease-standard); }
.vid-close:hover { background: rgba(21,20,15,.64); }
.vid-close:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.vid-close .ic { width: 20px; height: 20px; }

/* stage: the enlarged poster preview (16:9). Real playback mounts here. */
.vid-stage { position: relative; aspect-ratio: 16 / 9; background: var(--ink); }
.vid-stage > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(10,7,2,.32), rgba(10,7,2,0) 60%); }

.vid-dialog-meta { padding: clamp(20px, 2.4vw, 32px); }
.vid-dialog-meta .n-date { display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-size: 14px; color: var(--aegold-700);
  margin-block-end: var(--space-6); }
.vid-dialog-meta .n-date .ic { width: 16px; height: 16px; }
.vid-dialog-title { font-family: var(--font-heading-ar); font-weight: 800;
  font-size: clamp(20px, 2vw, 27px); line-height: var(--leading-snug);
  color: var(--ink); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .vid-dialog[open] .vid-dialog-inner { animation: none; }
  .vid-thumb > img, .vid-disc { transition: none; }
}

/* =====================================================================
   RESPONSIVE: videos grid
   ===================================================================== */
@media (max-width: 1080px) {
  .vid-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
}
@media (max-width: 768px) {
  .vid-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .vid-grid { max-width: 460px; }
}