/* ============================================================
   Hugon Veneer — Responsive
   Mobile-first breakpoint adjustments
   Breakpoints: sm=640, md=768, lg=1024, xl=1280
   ============================================================ */

/* =====================================================
   sm — 640px and up
   ===================================================== */
@media (min-width: 640px) {
  :root {
    --container-pad: 2rem;
  }
}

/* =====================================================
   md — 768px and up (tablets)
   ===================================================== */
@media (min-width: 768px) {
  :root {
    --fs-3xl: 2.5rem;
    --fs-4xl: 3.25rem;
    --fs-5xl: 4rem;
  }

  h1 { font-size: var(--fs-5xl); }
  h2 { font-size: var(--fs-4xl); }
  h3 { font-size: var(--fs-3xl); }

  .section    { padding: var(--space-16) 0; }
  .section--sm{ padding: var(--space-10) 0; }
  .section--lg{ padding: var(--space-20) 0; }

  .lead { font-size: var(--fs-md); }
  .lead-lg { font-size: var(--fs-xl); }
}

/* =====================================================
   lg — 1024px and up (small desktop)
   ===================================================== */
@media (min-width: 1024px) {
  :root {
    --fs-4xl: 3.5rem;
    --fs-5xl: 4.5rem;
    --fs-6xl: 5.5rem;
    --container-pad: 2.5rem;
  }

  /* Show desktop-only nav elements */
  .nav-toggle { display: none !important; }
  .primary-nav { display: block !important; }
  .nav-list { display: flex !important; }

  /* Section spacing */
  .section    { padding: var(--space-20) 0; }
  .section--lg{ padding: var(--space-24) 0; }
}

/* =====================================================
   xl — 1280px and up (large desktop)
   ===================================================== */
@media (min-width: 1280px) {
  :root {
    --container-pad: 3rem;
  }
}

/* =====================================================
   2xl — 1536px and up (extra large)
   ===================================================== */
@media (min-width: 1536px) {
  :root {
    --fs-5xl: 5rem;
    --fs-6xl: 6rem;
  }
  .container { max-width: 1440px; }
}

/* =====================================================
   1024px and below (tablet / mobile)
   ===================================================== */
@media (max-width: 1023px) {
  /* Hero */
  .hero { min-height: 70vh; }
  .hero__content { padding: var(--space-7) 0; }

  /* Solution pillars */
  .solution-pillars { grid-template-columns: 1fr; }
  .solution-card__image { aspect-ratio: 16 / 9; }

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

  /* Stock grid */
  .stock-grid { grid-template-columns: 1fr; }

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

  /* Double CTA */
  .double-cta { grid-template-columns: 1fr; }

  /* Newsletter */
  .newsletter {
    flex-direction: column;
    text-align: center;
  }
  .newsletter__form {
    width: 100%;
  }
  .newsletter__form input {
    width: 100%;
    min-width: unset;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  /* Gallery filter */
  .gallery-filter {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Nav toggle visibility */
  .nav-toggle { display: inline-flex; }

  /* Primary nav becomes off-canvas */
  .primary-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 380px;
    height: 100dvh;
    background: var(--color-white);
    z-index: var(--z-modal);
    transform: translateX(100%);
    transition: transform var(--t-slow) var(--t-ease-out);
    overflow-y: auto;
    padding: var(--space-8) var(--space-6);
  }
  .primary-nav.is-open { transform: translateX(0); }

  .nav-list {
    flex-direction: column;
    gap: var(--space-2);
  }
  .nav-list li { width: 100%; }
  .nav-list a {
    display: block;
    padding: var(--space-4) var(--space-3);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
  }
  .nav-list a:hover,
  .nav-list a[aria-current="page"] {
    color: var(--color-secondary);
  }

  /* Spec table on tablet */
  .spec-table { font-size: var(--fs-xs); }
  .spec-table td,
  .spec-table thead th { padding: var(--space-2) var(--space-3); }

  /* Show mobile utility classes */
  .show-mobile { display: block !important; }
}

/* =====================================================
   768px and below (mobile)
   ===================================================== */
@media (max-width: 767px) {
  /* Hero */
  .hero { min-height: 60vh; }
  .hero__content { padding: var(--space-7) 0; }

  /* Section spacing */
  .section { padding: var(--space-7) 0; }

  /* Section title */
  .section__title { font-size: var(--fs-2xl); }

  /* Species grid */
  .species-grid { grid-template-columns: 1fr; }

  /* Applications grid */
  .applications-grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }
  .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer__contact { text-align: center; }

  /* Brand quote */
  .brand-quote__text { font-size: var(--fs-xl); }

  /* Gallery filter */
  .gallery-filter {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
  }

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

  /* Product detail */
  .product-info { position: static; }

  /* Hide desktop-only */
  .hide-mobile { display: none !important; }

  /* Photo book on mobile */
  .photo-book { grid-template-columns: repeat(2, 1fr); }

  /* Stack CTA banner */
  .cta-banner__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Card body padding */
  .card-body { padding: var(--space-4); }

  /* Product card title */
  .product-card__title { font-size: var(--fs-base); }

  /* Section header */
  .section__header { margin-bottom: var(--space-6); }

  /* Breadcrumb */
  .breadcrumb { padding: var(--space-3) 0; }
}

/* =====================================================
   640px and below (small mobile)
   ===================================================== */
@media (max-width: 640px) {
  :root {
    --container-pad: var(--space-4);
  }

  /* Hero title scales down */
  .hero__title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  /* Buttons */
  .btn {
    padding: 12px 24px;
    font-size: var(--fs-xs);
  }

  /* Solution card */
  .solution-card__title { font-size: var(--fs-lg); }

  /* Stock card details */
  .stock-card__details li {
    font-size: var(--fs-xs);
  }

  /* Sidebar becomes static */
  .sidebar { position: static; }

  /* Photo book single column */
  .photo-book { grid-template-columns: 1fr; }

  /* Product grid single column */
  .product-grid { grid-template-columns: 1fr; }

  /* Spec table with smaller text */
  .spec-table {
    font-size: var(--fs-xs);
  }
  .spec-table td:first-child { min-width: 100px; }

  /* Gallery filter tabs smaller */
  .gallery-filter__tab {
    padding: var(--space-1) var(--space-3);
    font-size: var(--fs-xs);
  }

  /* Contact sidebar */
  .sidebar--contact { padding: var(--space-4); }

  /* CTA banner */
  .cta-banner { padding: var(--space-5); }
  .cta-banner__title { font-size: var(--fs-xl); }

  /* Application card */
  .application-card { padding: var(--space-4); }

  /* Nav list links */
  .nav-list a { font-size: var(--fs-base); }

  /* Hide utility bar */
  .utility-bar { display: none; }
}

/* =====================================================
   Show/hide mobile helpers
   ===================================================== */
@media (min-width: 1024px) {
  .show-mobile { display: none !important; }
}

@media (max-width: 1023px) {
  .show-mobile { display: block !important; }
  .hide-mobile { display: none !important; }
}

/* =====================================================
   Tablet portrait (between 768px and 1023px)
   ===================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-book { grid-template-columns: repeat(3, 1fr); }
}

/* =====================================================
   Print styles
   ===================================================== */
@media print {
  .site-header,
  .utility-bar,
  .nav-toggle,
  .primary-nav,
  .lightbox,
  .btn {
    display: none !important;
  }

  body {
    background: var(--color-white);
    color: var(--color-text);
  }

  a {
    color: var(--color-text);
    text-decoration: underline;
  }

  .container { max-width: 100%; }
  .section   { padding: var(--space-4) 0; }
}

/* =====================================================
   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;
  }
}