/* ============================================================
   GLOBALSPICETECH — Responsive Styles
   ============================================================ */

/* ---------- 1200px ---------- */
@media (max-width: 1200px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--sp-10);
  }

  .featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- 1024px ---------- */
@media (max-width: 1024px) {
  .why-grid   { grid-template-columns: 1fr; }
  .why-visual { height: 360px; }

  .globe-wrap { grid-template-columns: 1fr; }
  .globe-canvas-container { height: 360px; }

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

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 768px — Tablet ---------- */
@media (max-width: 768px) {
  /* Nav */
  .nav-links,
  .nav-cta    { display: none; }
  .hamburger  { display: flex; }

  /* Section spacing */
  section.section { padding-block: clamp(var(--sp-10), 6vw, var(--sp-16)); }

  /* Typography */
  .hero-title { font-size: clamp(2.4rem, 8vw, var(--fs-5xl)); }
  .section-title { font-size: clamp(1.8rem, 5vw, var(--fs-3xl)); }
  .page-hero-title { font-size: clamp(2rem, 6vw, var(--fs-4xl)); }

  /* Grids */
  .category-cards    { grid-template-columns: 1fr; }
  .grid-2            { grid-template-columns: 1fr; }
  .grid-3            { grid-template-columns: repeat(2, 1fr); }
  .grid-4            { grid-template-columns: repeat(2, 1fr); }
  .stats-grid        { grid-template-columns: repeat(2, 1fr); }
  .featured-grid     { grid-template-columns: 1fr; }
  .team-grid         { grid-template-columns: 1fr 1fr; }
  .products-grid     { grid-template-columns: 1fr; }

  /* Category cards — full photo on mobile */
  .category-card     { min-height: 300px; }

  /* Services strip — horizontal scroll */
  .services-strip .container { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .services-strip .container::-webkit-scrollbar { display: none; }
  .service-strip-nav { white-space: nowrap; width: max-content; min-width: 100%; }

  /* Hero */
  .hero-ctas         { flex-direction: row; flex-wrap: wrap; }
  .hero-stats        { max-width: 100%; }
  .hero-stat         { padding: var(--sp-4) var(--sp-3); }

  /* Footer */
  .footer-grid       { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .footer-brand      { grid-column: 1 / -1; }
  .footer-bottom     { flex-direction: column; text-align: center; }

  /* Timeline */
  .timeline::before  { left: 0; }
  .timeline-item,
  .timeline-item:nth-child(even) { flex-direction: column; padding-left: var(--sp-8); }
  .timeline-dot      { position: absolute; left: -5px; }
  .timeline-item     { position: relative; }
  .timeline-year,
  .timeline-item:nth-child(even) .timeline-year { justify-content: flex-start; }
  .timeline-content,
  .timeline-item:nth-child(even) .timeline-content { text-align: left; }

  /* Modals */
  .modal-content     { padding: var(--sp-6); }
  .modal-specs       { grid-template-columns: 1fr; }

  /* Page hero */
  .page-hero         { min-height: 44vh; }

  /* Globe layout */
  .globe-wrap        { grid-template-columns: 1fr; }
  .globe-canvas-container { height: 300px; }
}

/* ---------- 1024px ---------- (feature + commodity tiles) */
@media (max-width: 1024px) {
  .feature-tiles              { grid-template-columns: repeat(2, 1fr); }
  .feature-tiles.cols-4       { grid-template-columns: repeat(2, 1fr); }
  .stat-tiles                 { grid-template-columns: repeat(2, 1fr); }
  .commodity-tiles            { grid-template-columns: repeat(2, 1fr); }
  .detail-grid                { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 600px ---------- */
@media (max-width: 600px) {
  .grid-3            { grid-template-columns: 1fr; }
  .grid-4            { grid-template-columns: 1fr; }
  .team-grid         { grid-template-columns: 1fr; }
  .stats-grid        { grid-template-columns: 1fr 1fr; }
  .feature-tiles,
  .feature-tiles.cols-2,
  .feature-tiles.cols-4      { grid-template-columns: 1fr; }
  .stat-tiles                { grid-template-columns: repeat(2, 1fr); }
  .commodity-tiles           { grid-template-columns: 1fr; }
  .detail-grid               { grid-template-columns: 1fr; }
  .detail-specs              { grid-template-columns: 1fr 1fr; }

  .certs-row         { gap: var(--sp-2); }
  .cert-pill         { font-size: 0.58rem; padding: 0.4rem 0.75rem; }

  .filter-bar        { flex-direction: column; align-items: flex-start; }
  .filter-tabs       { flex-wrap: wrap; }

  .form-row          { grid-template-columns: 1fr; }
  .pack-sizes        { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 480px — Mobile ---------- */
@media (max-width: 480px) {
  .hero-stats        { flex-direction: column; }
  .hero-stat         { border-right: none; border-bottom: 1px solid var(--clr-border); }
  .hero-stat:last-child { border-bottom: none; }

  .contact-form-card { padding: var(--sp-5); }
  .modal-content     { padding: var(--sp-5); }

  .scroll-top        { bottom: var(--sp-4); right: var(--sp-4); }

  .canvas-bg         { opacity: 0.5; }

  /* Buttons full-width on small screens */
  .hero-ctas .btn    { width: 100%; justify-content: center; }

  /* Category card single column with better photo */
  .category-card     { min-height: 260px; }

  /* Contact grid */
  .contact-grid      { gap: var(--sp-6); }

  /* Modal specs */
  .modal-specs       { grid-template-columns: 1fr; }

  /* Footer nav inline wrap */
  .footer-grid       { grid-template-columns: 1fr; }
}

/* ---------- Large / Retina ---------- */
@media (min-width: 1600px) {
  .container { max-width: 1440px; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
}