/* ============================================
   RESPONSIVE / MEDIA QUERIES - AbiYarn
   All pages covered
   ============================================ */

/* ---- Large Desktop (1200px) ---- */
@media (max-width: 1200px) {
  .products-grid,
  .featured-grid   { grid-template-columns: repeat(3, 1fr); }
  .highlights-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Tablet Landscape (1024px) ---- */
@media (max-width: 1024px) {
  /* Home */
  .highlights-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-grid   { grid-template-columns: repeat(2, 1fr); }
  .hero-grid       { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .hero-title      { font-size: 2.5rem; }

  /* About */
  .story-grid      { grid-template-columns: 1fr; gap: 2.5rem; }
  .story-image img { height: 340px; }
  .features-grid   { grid-template-columns: repeat(2, 1fr); }
  .maker-card,
  .maker-card-bot  { flex-direction: column; align-items: center; text-align: center; }

  /* Menu */
  .products-grid   { grid-template-columns: repeat(2, 1fr); }

  /* Inquiry */
  .inquiry-layout  { grid-template-columns: 1fr; }
  .inquiry-sidebar { position: static; display: grid; grid-template-columns: repeat(2, 1fr); }

  /* Contact */
  .contact-layout  { grid-template-columns: 1fr; gap: 2.5rem; }

  /* Footer */
  .footer-grid     { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Tablet Portrait (768px) ---- */
@media (max-width: 768px) {
  /* Header */
  .nav       { display: none; }
  .hamburger { display: flex; }

  /* Page Hero */
  .page-hero    { padding: 3rem 0 2rem; }
  .page-hero h1 { font-size: 2.25rem; }

  /* Home - Hero */
  .hero            { padding: 2rem 0; }
  .hero-grid       { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero-content    { padding-right: 0; }
  .hero-image      { order: -1; width: 100%; }
  .hero-video-wrap { height: 280px; border-radius: var(--radius-lg); }
  .hero-video      { height: 280px; }
  .hero-title      { font-size: 2rem; }
  .hero-desc       { font-size: 0.95rem; }

  /* Home - Highlights */
  .highlights      { padding: 3rem 0; }
  .highlights-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

  /* Home - Featured */
  .featured      { padding: 3rem 0; }
  .featured-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

  /* About */
  .our-story      { padding: 3rem 0; }
  .about-features { padding: 3rem 0; }
  .features-grid  { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .maker          { padding: 3rem 0; }
  .maker-card,
  .maker-card-bot { padding: 2rem; gap: 1.5rem; flex-direction: column; align-items: center; text-align: center; }
  .about-cta      { padding: 3rem 0; }
  .cta-buttons    { flex-direction: column; align-items: center; }

  /* Menu */
  .menu-section  { padding: 3rem 0 4rem; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

  /* Inquiry */
  .inquiry-section  { padding: 3rem 0 4rem; }
  .inquiry-layout   { gap: 2rem; }
  .inquiry-form     { padding: 1.75rem; }
  .inquiry-form h2  { font-size: 1.75rem; }
  .inquiry-sidebar  { position: static; grid-template-columns: 1fr; }

  /* Contact */
  .contact-section  { padding: 3rem 0 4rem; }
  .contact-layout   { gap: 2rem; }
  .contact-form     { padding: 1.75rem; }
  .contact-info h2  { font-size: 1.75rem; }
  .contact-info > p { font-size: 0.95rem; }

  /* Shared form rows */
  .form-row { grid-template-columns: 1fr; gap: 0; }

  /* Footer */
  .footer        { padding: 2.5rem 0 1.5rem; }
  .footer-grid   { grid-template-columns: 1fr; text-align: center; }
  .footer-socials { justify-content: center; }

  /* Cart */
  .cart-content { max-width: 100%; }

  /* Checkout Modal */
  .checkout-steps span { display: none; }
  .checkout-form-row   { grid-template-columns: 1fr; }

  /* Section headers */
  .section-header    { padding: 0 0.5rem; max-width: 100%; }
  .section-header h2 { font-size: 2rem; }

  /* Notification toast */
  .notification { right: 1rem; left: 1rem; text-align: center; }
}

/* ---- Mobile (480px) ---- */
@media (max-width: 480px) {
  .container { padding: 0 1rem; }

  /* Hero */
  .hero-title      { font-size: 1.8rem; }
  .hero-video-wrap { height: 200px; }
  .hero-video      { height: 200px; }

  /* Highlights — keep 2 columns, they still fit at 480px */
  .highlights-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .highlight-card  { padding: 1.25rem 0.75rem; }

  /* Features — keep 2 columns */
  .features-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }

  /* Featured / Products — drop to 1 column below 480px for readability */
  .featured-grid,
  .products-grid { grid-template-columns: repeat(2, 1fr); }

  /* Buttons — stay inline, only stack at 360px */
  .hero-buttons { flex-wrap: wrap; }

  /* About */
  .maker-avatar    { font-size: 3.5rem; width: 80px; height: 80px; }
  .story-image img { height: 260px; }
  .about-cta h2   { font-size: 2rem; }

  /* Page hero */
  .page-hero h1 { font-size: 1.9rem; }

  /* Filters */
  .category-filters { gap: 0.5rem; }
  .filter-btn       { padding: 0.4rem 1rem; font-size: 0.8rem; }

  /* Section header */
  .section-header h2 { font-size: 1.75rem; }

  /* Modals */
  .modal         { padding: 0.5rem; }
  .modal-content { border-radius: var(--radius-md); }
  .checkout-step   { padding: 1rem; }
  .checkout-footer { padding: 1rem; }

  /* Inquiry sidebar */
  .inquiry-sidebar { gap: 1rem; }
  .inquiry-form    { padding: 1.25rem; }
  .inquiry-form h2 { font-size: 1.5rem; }
  .sidebar-card    { padding: 1.25rem; }
  .inquiry-success { padding: 2.5rem 1.25rem; }
  .inquiry-success h3 { font-size: 1.6rem; }

  /* Contact */
  .contact-form    { padding: 1.25rem; }
  .contact-info h2 { font-size: 1.5rem; }
  .info-icon       { width: 38px; height: 38px; font-size: 1.2rem; }
  .contact-success { padding: 2.5rem 1.25rem; }
  .contact-success h3 { font-size: 1.6rem; }

  /* CTA */
  .cta-buttons .btn { width: 100%; justify-content: center; }
}

/* ---- Small Mobile (360px) ---- */
@media (max-width: 360px) {
  .hero-title      { font-size: 1.75rem; }
  .hero-video-wrap { height: 160px; }
  .hero-video      { height: 160px; }
  .hero-buttons    { flex-direction: column; }
  .hero-buttons .btn { width: 100%; justify-content: center; }

  /* Drop to 1 column only at truly tiny screens */
  .highlights-grid,
  .features-grid   { grid-template-columns: 1fr; }
  .featured-grid,
  .products-grid   { grid-template-columns: 1fr; }

  .logo-img  { height: 50px; width: 50px; }
  .cart-btn  { font-size: 1.25rem; }
  .page-hero h1 { font-size: 1.65rem; }
}