/* ==========================================================================
   Colorearte Kids — responsive.css
   Media queries (mobile-first). Base styles live in main/components.
   Breakpoints:
     tablet:     480px
     desktop-sm: 768px
     desktop:    1024px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet — 480px and up
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
  h1 {
    font-size: 2.4rem;
  }

  .hero__title {
    font-size: 2.6rem;
  }

  /* Books grid becomes 2 columns */
  .books-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Newsletter form inline */
  .newsletter__form {
    flex-direction: row;
  }

  /* Show CTA in header on slightly larger phones */
  .header__cta {
    display: inline-flex;
  }
}

/* --------------------------------------------------------------------------
   Desktop-sm — 768px and up
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-md);
  }

  .section {
    padding: var(--space-xl) 0;
  }

  /* Show desktop nav, hide hamburger + mobile menu */
  .nav {
    display: flex;
  }

  .hamburger {
    display: none;
  }

  .mobile-menu {
    display: none !important;
  }

  /* Hero becomes two-up (text + books side by side) */
  .hero__inner {
    text-align: left;
    align-items: flex-start;
  }

  .hero__title {
    font-size: 3rem;
  }

  .hero__books {
    max-width: 100%;
  }

  /* Three column grids */
  .books-grid,
  .value-grid,
  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Feature grid two columns */
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Gallery three columns */
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* About preview side-by-side */
  .about-preview__inner {
    flex-direction: row;
    text-align: left;
    justify-content: center;
  }

  /* Book hero side-by-side */
  .book-hero__inner {
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: var(--space-lg);
    text-align: left;
  }

  .book-hero__info {
    align-items: flex-start;
  }

  .book-hero__actions {
    justify-content: flex-start;
  }

  .book-hero__media {
    max-width: 100%;
  }

  /* Footer multi-column */
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  /* Contact two columns */
  .contact-grid {
    grid-template-columns: 1.4fr 1fr;
  }
}

/* --------------------------------------------------------------------------
   Desktop — 1024px and up
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .hero__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
  }

  .hero__content {
    flex: 1;
  }

  .hero__books {
    flex: 1;
  }

  .hero__title {
    font-size: 3.4rem;
  }

  .section__title {
    font-size: 2.2rem;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}