/* ==========================================================================
   Media Page Styles — PLEldenRing
   ==========================================================================
   Notes: Uses base.css variables and utilities. Keeps styles modular and minimal.
   */

/* Hero */
.hero-media {
  position: relative;
  padding: var(--space-16) 0 var(--space-12);
  background: linear-gradient(
      180deg,
      rgba(10,10,15,0.5) 0%,
      rgba(10,10,15,0.85) 100%
    ),
    url('../images/lore-hero.webp') center/cover no-repeat;
  box-shadow: var(--shadow-xl) inset 0 0 0 9999px rgba(0,0,0,0.0);
}
.hero-media .hero-inner { max-width: var(--container-max-width); margin: 0 auto; padding: 0 var(--container-padding); }
.hero-media h1 { margin-bottom: var(--space-4); }


/* Sections */
.section-block { padding: var(--space-12) 0; }
.section-header { margin-bottom: var(--space-6); }

/* Media grid */
.media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1024px) {
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .media-grid { grid-template-columns: 1fr; }
}

/* Card tweaks for media */
.media-item .card-img-top { max-height: 320px; object-fit: cover; }
.media-item .card-body p { color: var(--color-text-muted); }

/* Search */
.media-search { margin-top: var(--space-6); }
.media-search .form-input { max-width: 560px; }

/* Utility for hidden results when filtered */
.media-item.is-hidden { display: none !important; }