/* ===========================================================
   Desa Duri Emas — Responsive Design
   =========================================================== */

/* ---------------- TABLET (1024px) ---------------- */
@media (max-width: 1024px) {
  .info-cards,
  .stats-grid,
  .why-grid,
  .varieties-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tourism-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 250px;
  }

  .tourism-large {
    grid-column: span 2;
    grid-row: span 1;
  }

  .masonry { columns: 3; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .footer-brand { grid-column: span 2; }
}

/* ---------------- MOBILE LARGE (768px) ---------------- */
@media (max-width: 768px) {
  :root {
    --section-padding: 4rem 0;
  }

  /* Mobile Navigation */
  .nav-toggle { display: block; }

  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 360px;
    height: 100vh;
    background: rgba(255, 248, 231, 0.98);
    backdrop-filter: blur(20px);
    padding: 6rem 2rem 2rem;
    transition: right 0.4s var(--ease-out);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }

  .nav-menu.active { right: 0; }

  .nav-menu ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-menu li {
    border-bottom: 1px solid var(--border);
  }

  .nav-link,
  .nav-menu .nav-cta {
    display: block;
    padding: 1.25rem 0 !important;
    color: var(--text-primary) !important;
    text-align: left;
  }

  .nav-menu .nav-cta {
    margin-top: 1rem;
    text-align: center;
  }

  /* Layout Adjustments */
  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .info-cards,
  .stats-grid,
  .why-grid {
    grid-template-columns: 1fr 1fr;
  }

  .varieties-grid {
    grid-template-columns: 1fr 1fr;
  }

  .tourism-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
  }

  .tourism-large {
    grid-column: span 1;
    grid-row: span 1;
  }

  .masonry { columns: 2; }

  /* Modal */
  .modal-grid { grid-template-columns: 1fr; }
  .modal-image img { min-height: 200px; max-height: 300px; }
  .modal-info { padding: 2rem; }

  /* Lightbox */
  .lightbox-close { top: 1rem; right: 1rem; }
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }

  /* Stats divider removal */
  .stat-card::after { display: none; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-brand p { max-width: 100%; margin: 0 auto; }
  .footer-brand .logo { justify-content: center; }
  .social-links { justify-content: center; }
  .newsletter-form { max-width: 400px; margin: 0 auto; }

  /* Timeline */
  .timeline-month span:first-child {
    font-size: 0.7rem !important;
  }
}

/* ---------------- MOBILE SMALL (480px) ---------------- */
@media (max-width: 480px) {
  .info-cards,
  .stats-grid,
  .why-grid,
  .varieties-grid {
    grid-template-columns: 1fr;
  }

  .masonry { columns: 1; }

  .hero-cta { flex-direction: column; width: 100%; }
  .hero-cta .btn { width: 100%; }

  .testimonial-card { padding: 2rem 1rem; }
  .testimonial-author { flex-direction: column; text-align: center; }
  .author-info { text-align: center; }

  .modal { padding: 1rem; }
  .modal-content { max-height: 95vh; }

  .back-to-top {
    bottom: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
  }

  .section-title { font-size: 1.85rem; }
}

/* ---------------- VERY SMALL (360px) ---------------- */
@media (max-width: 360px) {
  .hero-title { font-size: 2rem; }
  .timeline-month span:first-child { display: none; }
  .timeline-months { gap: 0; }
}

/* ---------------- LARGE DESKTOP (1440px+) ---------------- */
@media (min-width: 1440px) {
  :root {
    --container-width: 1400px;
  }
}