/**
 * Puck & Wick Responsive Media Queries
 * Precise adaptations for Desktop (1440x900), Tablet (768px - 1024px), and Mobile (390x844)
 */

/* ==========================================================================
   Tablet & Medium Viewports (<= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  :root {
    --header-height: var(--header-height-mobile);
  }

  /* Header adjustments */
  .nav-menu {
    display: none;
  }

  .nav-pickup-pill {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  /* Hero Section */
  .hero-section {
    padding-block: var(--space-12) var(--space-16);
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    text-align: center;
  }

  .hero-content {
    align-items: center;
  }

  .hero-tagline {
    margin-inline: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-trust-bar {
    justify-content: center;
    gap: var(--space-4);
  }

  .hero-visual {
    min-height: 400px;
  }

  .hero-visual-card {
    max-width: 380px;
    margin-inline: auto;
  }

  /* Story Section */
  .story-editorial-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .story-narrative {
    text-align: left;
  }

  .story-heritage-card {
    max-width: 560px;
    margin-inline: auto;
    width: 100%;
  }

  .qc-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  /* Stockist Section */
  .stockist-showcase {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    padding: var(--space-8);
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
  }

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

/* ==========================================================================
   Mobile Viewports (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .container,
  .container-wide {
    padding-inline: var(--space-4);
  }

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

  .hero-title {
    font-size: 2.25rem;
  }

  .hero-tagline {
    font-size: 1rem;
  }

  .hero-trust-bar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    text-align: left;
  }

  /* Hero atmospheric ambient glows - bounded to prevent horizontal bleed */
  .hero-ambient-glow {
    width: min(280px, 80vw);
    height: min(280px, 80vw);
    right: 0;
    max-width: 100vw;
  }

  .hero-ambient-cold {
    width: min(250px, 70vw);
    height: min(250px, 70vw);
    left: 0;
    max-width: 100vw;
  }

  /* Story & QC */
  .story-headline {
    font-size: 1.85rem;
  }

  .story-lead-quote {
    font-size: 1.15rem;
  }

  .qc-pillars-grid {
    grid-template-columns: 1fr;
  }

  /* Stockist */
  .stockist-showcase {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-6);
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
  }

  .stockist-content,
  .stockist-details-card {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .stockist-actions {
    flex-direction: column;
    width: 100%;
    gap: var(--space-3);
  }

  .stockist-actions .btn {
    width: 100%;
    white-space: normal;
    text-align: center;
    box-sizing: border-box;
  }

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

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--space-4);
  }

  .footer-bottom-brand {
    flex-direction: column;
  }
}

/* ==========================================================================
   Compact Mobile Viewports (<= 480px, including 390x844 iPhone)
   ========================================================================== */
@media (max-width: 480px) {
  .nav-container {
    padding-inline: var(--space-4);
  }

  .nav-actions {
    gap: var(--space-2);
  }

  .brand-name {
    font-size: 1.15rem;
  }

  .brand-subtext {
    font-size: 0.5625rem;
  }

  .hero-title {
    font-size: 2rem;
    line-height: 1.15;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
    gap: var(--space-3);
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-trust-bar {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .hero-visual-card {
    max-width: 100%;
    padding: var(--space-6);
  }

  .hero-flame-container {
    width: 140px;
    height: 190px;
  }

  .story-metrics-grid {
    grid-template-columns: 1fr;
  }

  .stockist-showcase {
    padding: var(--space-4);
  }

  .stockist-actions .btn {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    white-space: normal;
  }

  .stockist-hours-table td {
    font-size: 0.75rem;
  }

  .btn-lg {
    padding: 0.95rem 1.5rem;
    font-size: 0.8125rem;
  }
}

/* ==========================================================================
   Compact Viewports (<= 360px, including 320x568 iPhone SE)
   Zero horizontal overflow: scrollWidth <= clientWidth
   ========================================================================== */
@media (max-width: 360px) {
  .nav-container {
    padding-inline: var(--space-2);
  }

  .nav-brand {
    gap: var(--space-2);
  }

  .brand-mark {
    width: 36px;
    height: 36px;
  }

  .brand-name {
    font-size: 1.02rem;
  }

  .brand-subtext {
    font-size: 0.5rem;
  }

  .nav-actions {
    gap: 6px;
  }

  .cart-btn,
  .nav-toggle {
    width: 38px;
    height: 38px;
    padding: 6px;
  }

  .container,
  .container-wide {
    padding-inline: var(--space-2);
  }

  .stockist-showcase {
    padding: var(--space-3);
  }

  .stockist-details-card {
    padding: var(--space-3);
  }

  .stockist-hours-table td {
    font-size: 0.7rem;
    padding-block: var(--space-1);
  }

  .stockist-boutique-name {
    font-size: 1.35rem;
  }

  .stockist-location-tagline {
    font-size: 0.7rem;
  }

  .stockist-actions .btn {
    padding: 0.65rem 0.75rem;
    font-size: 0.75rem;
    white-space: normal;
  }
}

/* ==========================================================================
   Desktop High-Resolution Viewports (>= 1440px)
   ========================================================================== */
@media (min-width: 1440px) {
  .hero-title {
    font-size: 3.75rem;
  }

  .hero-tagline {
    font-size: 1.15rem;
  }

  .qc-pillars-grid {
    gap: var(--space-8);
  }
}