/* ═══════════════════════════════════════════════════════════════
   BUKA SPRL — RESPONSIVE
   Mobile-first breakpoints: 320px → 640px → 1024px → 1440px
   ═══════════════════════════════════════════════════════════════ */

/* ── TABLET: ≤ 1024px ──────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Nav */
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .nav-cta { display: none; }

  /* Hero */
  .hero-title { font-size: clamp(3rem, 8vw, 6rem); }

  /* About */
  .about-grid { grid-template-columns: 1fr; gap: 3rem; }

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

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .footer-brand { grid-column: 1 / -1; }

  /* Why Katanga */
  .why-stats { gap: 3rem; }
  .why-stat-value { font-size: clamp(3.5rem, 8vw, 5rem); }

  /* Gallery */
  .gallery-masonry {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .gallery-item--span2-row { grid-row: span 1; }
  .gallery-item--span2-col { grid-column: span 2; }

  /* Section labels */
  .section-label { display: none; }
}

/* ── MOBILE: ≤ 640px ───────────────────────────────────────── */
@media (max-width: 640px) {

  :root { --nav-h: 60px; }

  /* Typography scale */
  .section-title { font-size: clamp(1.9rem, 7vw, 2.8rem); }

  /* Hero */
  .hero-title {
    font-size: clamp(2.6rem, 11vw, 4.5rem);
    line-height: 1;
  }
  .hero-ctas { flex-direction: column; align-items: flex-start; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary { width: 100%; justify-content: center; }
  .hero-stats { gap: 1.25rem; }
  .stat-divider { height: 36px; }
  .scroll-indicator { display: none; }
  .hero-content { padding-top: 3rem; padding-bottom: 5.5rem; }

  /* Promise */
  .promise-grid { grid-template-columns: 1fr; }
  .promise-card { padding: 2rem 1.5rem; }

  /* Services */
  .services-grid { grid-template-columns: 1fr; }
  .service-card { padding: 2rem 1.5rem; }

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

  /* About */
  .about-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .about-lead { font-size: 1.1rem; }
  .values-block, .locations-block { padding: 1.5rem; }
  .about-image { display: none; }

  /* Why Katanga */
  .why-stats { flex-direction: column; gap: 2rem; align-items: flex-start; }
  .why-stat-value { font-size: clamp(3rem, 14vw, 5rem); }

  /* Gallery */
  .gallery-masonry { grid-template-columns: 1fr; }
  .gallery-item--span2-row,
  .gallery-item--span2-col { grid-row: span 1; grid-column: span 1; }

  /* Contact form */
  .contact-form-wrap { padding: 1.75rem; }
  .form-row { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-brand { grid-column: auto; }
  .footer-bottom .container { flex-direction: column; align-items: flex-start; gap: 0.35rem; }

  /* Nav logo smaller */
  .logo-svg { height: 26px; }
}

/* ── VERY SMALL: ≤ 380px ───────────────────────────────────── */
@media (max-width: 380px) {
  .hero-title { font-size: 2.2rem; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary { padding: 0.8rem 1.5rem; font-size: 0.85rem; }
  .minerals-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── LARGE DESKTOP: ≥ 1440px ───────────────────────────────── */
@media (min-width: 1440px) {
  :root { --container: 1320px; }
  .hero-title { font-size: 9rem; }
  .services-grid { grid-template-columns: repeat(4, 1fr); }
  .minerals-grid { grid-template-columns: repeat(7, 1fr); }
}

/* ── 4K: ≥ 2560px ──────────────────────────────────────────── */
@media (min-width: 2560px) {
  :root { --container: 1600px; }
  html { font-size: 18px; }
}

/* ── HIGH DPI OPTIMIZATIONS ────────────────────────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo-svg { image-rendering: crisp-edges; }
}

/* ── PRINT ──────────────────────────────────────────────────── */
@media print {
  .navbar, .cursor, .cursor-trail, .scroll-progress,
  .hero-canvas, .scroll-indicator, .hamburger, .mobile-menu { display: none !important; }
  body { background: white; color: black; }
  .section-title, .promise-card h3, .service-card h3 { color: black; }
  .section-title em { -webkit-text-fill-color: #8B4513; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}