/* ================================
   Media & Publications Page Styles
   ================================ */

/* Media Section Wrapper */
.media-section {
  margin: 40px auto;
  max-width: 1000px;
  text-align: center;
}

.media-section h1 {
  font-size: 2.2rem;
  margin-bottom: 40px;
  color: var(--brand-accent);
}
.media-section p{
  text-align: justify;
}

/* Book Card */
.card.book {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin: 40px auto;
  padding: 30px 20px;
  text-align: center;
}

.card.book img {
  max-width: 300px;
  margin: 20px auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.card.book h2 {
  color: var(--brand-accent);
  margin-bottom: 15px;
}

.card.book p {
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Video Cards (Documentary + Interview) */
.card.video,
.card.interview {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin: 40px auto;
  padding: 30px 20px;
  text-align: left;
}

.card.video h2,
.card.interview h2 {
  color: var(--brand-accent);
  margin-bottom: 15px;
  text-align: center;
}

.card.video p,
.card.interview p {
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 15px;
}

/* Video Container */
.video-container {
  margin-top: 20px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Interview Card */
.card.interview p {
  margin-bottom: 15px;
}

/* CTA Buttons inside cards */
.card .cta-button {
  margin-top: 20px;
  text-align: center;
  display: block;
}

/* Navigation Buttons */
.nav-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 40px auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .media-section h1 {
    font-size: 1.8rem;
    margin-bottom: 30px;
  }

  .card.book,
  .card.video,
  .card.interview {
    margin: 20px auto;
    padding: 20px;
  }

  .card.book img {
    max-width: 90%; /* scale better on mobile */
  }

  .nav-buttons {
    flex-direction: column;
    gap: 12px;
  }

  .nav-buttons a {
    padding: 10px 16px;
    font-size: 0.95rem;
  }
}


/* Mobile Menu Toggle */
.menu-toggle {
  display: block;
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #1d3557; /* dark blue */
  position: absolute;
  top: 20px;
  right: 8px;
  cursor: pointer;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .main-nav ul {
    flex-direction: column;
    gap: 10px;
    display: none;
    margin-top: 15px;
  }

  .main-nav ul.show {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }
}