/* Responsive Styles */

/* Tablet: 768px - 1023px */
@media (max-width: 1023px) {
  .quick-links__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer__columns {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .hero__slide {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  .hero__code {
    order: 1;
  }
  
  .hero__content {
    order: 2;
  }
}

/* Mobile: < 768px */
@media (max-width: 767px) {
  :root {
    --container-padding: 15px;
  }
  
  /* Top Nav */
  .top-nav__list {
    gap: var(--spacing-md);
    flex-wrap: wrap;
    justify-content: center;
  }
  
  /* Header */
  .header__container {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  
  .header__actions {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .search-form__input {
    width: 120px;
  }
  
  /* Main Nav */
  .main-nav__list {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .main-nav__item > a {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }
  
  /* Hero */
  .hero__slide {
    grid-template-columns: 1fr;
  }
  
  .hero__code code {
    font-size: var(--font-size-xs);
  }
  
  .hero__content h1 {
    font-size: var(--font-size-xl);
  }
  
  .hero__tagline p {
    font-size: var(--font-size-base);
  }
  
  /* Quick Links */
  .quick-links__grid {
    grid-template-columns: 1fr;
  }
  
  /* News Events */
  .news-events__container {
    grid-template-columns: 1fr;
  }
  
  /* Stories Usage */
  .stories-usage__container {
    grid-template-columns: 1fr;
  }
  
  /* Footer */
  .footer__columns {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer__bottom-container {
    flex-direction: column;
    text-align: center;
  }
  
  .footer__links {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Small Mobile: < 480px */
@media (max-width: 479px) {
  .footer__columns {
    grid-template-columns: 1fr;
  }
  
  .psf-section__buttons {
    flex-direction: column;
  }
  
  .btn--psf {
    margin-right: 0;
    margin-bottom: var(--spacing-sm);
  }
}