/* =============== Multimedia page-specific styles =============== */

.multimedia-hero {
  margin-bottom: var(--space-8);
  text-align: center;
  padding: var(--space-12) var(--space-4);
  background: linear-gradient(rgba(23, 23, 23, 0.75), rgba(23, 23, 23, 0.75)),
              url('../images/mystical-forest-with-glowing-mushrooms-and-ancient-trees-5657.webp');
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-md);
  color: var(--white);
}

.multimedia-hero h1 {
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.multimedia-hero p {
  margin: 0 auto;
  max-width: 54ch;
  color: var(--gray-100);
}

.multimedia-featured-blocks {
  align-items: stretch;
}

.multimedia-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.gallery-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  transition: transform var(--duration-fast);
}

.gallery-item:hover {
  transform: scale(1.02);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  color: white;
  padding: var(--space-4);
  transform: translateY(100%);
  transition: transform var(--duration-fast);
}

.gallery-item:hover .gallery-overlay {
  transform: translateY(0);
}

.gallery-overlay h4 {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--font-size-lg);
}

.gallery-overlay p {
  margin: 0;
  font-size: var(--font-size-sm);
  opacity: 0.9;
}

@media (max-width: 900px) {
  .grid-cols-2.multimedia-featured-blocks { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  main#mainContent .card, .multimedia-featured-blocks .card {
    padding: var(--space-4) var(--space-2);
    margin-bottom: var(--space-4);
  }
}

/* Emphasize call-to-action area */
.card-success.flex-center {
  text-align: center;
  justify-content: center;
  background: linear-gradient(92deg, var(--color-success) 0%, var(--gray-800) 60%);
  color: #fff;
}

.card-success.flex-center a {
  color: #fff;
  text-decoration: underline;
}