/* media.css — ONE stylesheet for every media surface: /videos, /gallery and
   the admin-created in-page sections rendered by assets/js/media-sections.js.
   Theme-driven (uses the site variables), so all six themes stay correct. */

/* ---------- category chips ---------- */
.mm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.mm-chip {
  padding: 7px 16px; border-radius: 999px; font-size: .8rem; font-weight: 600;
  border: 1px solid var(--line-strong); background: none; color: var(--text-dim);
  cursor: pointer; font-family: var(--font-body);
}
.mm-chip.on { background: linear-gradient(135deg, var(--saffron), var(--saffron-deep)); color: #1c0d02; border-color: transparent; }

/* ---------- video grid + inline player ---------- */
.mv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: clamp(14px, 2.2vw, 26px); }
.mv-card { margin: 0; }
.mv-thumb {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: rgba(11, 7, 22, .6); cursor: pointer; display: block;
}
.mv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.mv-thumb:hover img { transform: scale(1.05); }
.mv-thumb iframe { width: 100%; height: 100%; border: 0; display: block; }
.mv-play {
  position: absolute; inset: 0; margin: auto; width: 62px; height: 62px;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  border-radius: 999px; font-size: 1.5rem; color: #1c0d02;
  background: linear-gradient(135deg, var(--saffron), var(--saffron-deep));
  box-shadow: 0 8px 26px -8px rgba(0, 0, 0, .8);
}
.mv-card figcaption { display: block; padding: 10px 2px 0; }
.mv-card figcaption b { display: block; font-size: .95rem; color: var(--text); }
.mv-card figcaption span { display: block; font-size: .8rem; color: var(--text-faint); margin-top: 3px; }

/* ---------- image grid ---------- */
.mg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: clamp(10px, 1.6vw, 18px); }
.mg-card { margin: 0; cursor: zoom-in; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: rgba(11, 7, 22, .5); }
.mg-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .35s; }
.mg-card:hover img { transform: scale(1.06); }
.mg-card figcaption { font-size: .76rem; color: var(--text-dim); padding: 7px 10px 9px; }

/* ---------- horizontal (carousel) layout ---------- */
.mm-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.mm-carousel > figure { flex: 0 0 clamp(240px, 74vw, 320px); scroll-snap-align: start; }

/* ---------- block headings on the media pages ---------- */
.mm-h { margin: 8px 0 16px; font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
#vid-latest, #gal-latest { margin-bottom: 34px; }
#vid-audio { margin-top: 40px; }
#vid-audio-list > * + * { margin-top: 12px; }

/* ---------- in-page sections ---------- */
.mm-section { padding: clamp(30px, 5vw, 56px) 0 0; }
.mm-section h2 { margin: 0 0 16px; }
.mm-audio { list-style: none; padding: 0; margin: 0; }
.mm-audio li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }

/* ---------- lightbox (plain JS, no library) ---------- */
.mm-lb { position: fixed; inset: 0; z-index: 995; background: rgba(6, 4, 12, .95); display: flex; align-items: center; justify-content: center; }
.mm-lb img { max-width: 92vw; max-height: 82vh; border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.mm-lb .mm-cap { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: var(--text-dim); font-size: .85rem; padding: 0 20px; }
.mm-lb button {
  position: absolute; background: rgba(26, 16, 48, .85); color: var(--gold-pale);
  border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer;
  width: 46px; height: 46px; font-size: 1.3rem; line-height: 1; font-family: var(--font-body);
}
.mm-lb .mm-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.mm-lb .mm-next { right: 14px; top: 50%; transform: translateY(-50%); }
.mm-lb .mm-close { right: 14px; top: 14px; }

.mm-status { color: var(--text-faint); font-size: .88rem; text-align: center; padding: 22px 0; }

/* a published-but-still-empty page section: quiet, never broken-looking */
.mm-empty {
  color: var(--text-faint); font-size: .88rem; font-style: italic;
  padding: 16px 18px; margin: 0; border: 1px dashed var(--line);
  border-radius: var(--radius-sm); background: rgba(255, 255, 255, .02);
}

@media (max-width: 640px) {
  .mv-grid { grid-template-columns: 1fr; }
  .mg-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .mv-play { width: 52px; height: 52px; font-size: 1.2rem; }
}