/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  /* Principle grid responsive → components/principles.css */

  .partners-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .contact-wrapper {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 768px) {
  /* Keep partner cards 2×2 when viewport is reduced (override 1024px auto-fill) */
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Swap "By Theme" and "By Session Length" order on mobile */
  .toolkit-explore-themes {
    display: flex;
    flex-direction: column;
  }

  /* "By session length" section - show first on mobile */
  .explore-subheading:last-of-type,
  .explore-subheading:last-of-type+.explore-session-cards {
    order: 1;
  }

  /* "By theme" section - show second on mobile */
  .explore-subheading:first-of-type,
  .explore-subheading:first-of-type+.themes-links {
    order: 2;
  }

  /* Mobile nav → layout/navigation.css */

  .hero-images-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-images-grid .hero-img:nth-child(1) {
    grid-column: span 2;
  }

  .themes-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Principle card responsive → components/principles.css */
  /* Partner card responsive → pages/momentum.css */
  /* Aim section responsive → pages/aim.css */

  /* Form styling consolidated in pages/get-involved.css */
}

@media (max-width: 480px) {
  /* Aim section responsive rules → pages/aim.css */
  /* Principle card responsive → components/principles.css */
  /* Partner card responsive → pages/momentum.css */

  .themes-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Small mobile: tighter form spacing */
  .contact-wrapper {
    gap: 1.5rem;
  }

  .contact-form {
    padding: 1.25rem;
  }

  .form-group {
    margin-bottom: 0.875rem;
  }

  .form-group input:not([type="checkbox"]):not([type="radio"]),
  .form-group select,
  .form-group textarea {
    padding: 0.75rem 0.875rem;
  }

  .hero-images-grid {
    grid-template-columns: 1fr;
  }

  .hero-images-grid .hero-img:nth-child(1) {
    grid-column: span 1;
  }
}

/* YouTube / Video section – left-aligned */
#youtube .youtube-header {
  text-align: left;
  margin-bottom: 1rem;
}

#youtube .video-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

#youtube .video-wrapper--left {
  margin: 0;
}

#youtube .video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.theme-link:hover {
  border-color: var(--green-600);
  color: var(--gray-900);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}