/* ============================================================
   FECOD Media (Photos / Videos / Media All)
   Vibrant Block / Maximalist brand
   ============================================================ */

/* ── Page hero ─────────────────────────────────────────────── */
.media-page-hero {
  padding: clamp(2rem, 4vw, 3.5rem) 0 2rem;
}

.section-title {
  font-family: var(--mx-font-d, "Bakbak One", sans-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--mx-text, #fff);
  margin: 0;
}

/* ── Grid ──────────────────────────────────────────────────── */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

/* ── Card ──────────────────────────────────────────────────── */
.media-card {
  position: relative;
  overflow: hidden;
  background: var(--mx-surface, #001E46);
  border: 1px solid var(--mx-border, rgba(175,223,249,0.12));
  display: block;
  transition: border-color 0.22s, transform 0.22s;
}

.media-card:hover {
  border-color: var(--mx-accent, #AFDFF9);
  transform: translateY(-2px);
}

.media-card img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.32s ease;
}

.media-card:hover img {
  transform: scale(1.04);
}

/* ── Overlay ───────────────────────────────────────────────── */
.media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(1,7,41,0.92));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  gap: 0.4rem;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.22s ease;
  color: var(--mx-text, #fff);
}

.media-card:hover .media-overlay {
  opacity: 1;
}

.media-overlay i {
  font-size: 2rem;
  color: var(--mx-accent, #AFDFF9);
}

.media-overlay strong {
  font-family: var(--mx-font-d, "Bakbak One", sans-serif);
  font-size: 1rem;
  display: block;
  color: var(--mx-text, #fff);
}

.media-overlay .small,
.media-overlay div.small {
  font-family: var(--mx-font-b, "Space Mono", monospace);
  font-size: 0.75rem;
  color: var(--mx-text-muted, rgba(175,223,249,0.50));
}

/* ── Empty state ───────────────────────────────────────────── */
.media-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--mx-text-muted, rgba(175,223,249,0.50));
  border: 1px dashed var(--mx-border, rgba(175,223,249,0.12));
  font-family: var(--mx-font-b, "Space Mono", monospace);
  font-size: 0.84rem;
}

/* override Bootstrap alert in media context */
.media-grid .alert-secondary {
  background: var(--mx-surface, #001E46);
  border: 1px dashed var(--mx-border);
  color: var(--mx-text-muted);
  font-family: var(--mx-font-b, "Space Mono", monospace);
  font-size: 0.84rem;
}