/* ============================================================
   Patagonia Americas — Mobile (≤768px)
   ------------------------------------------------------------
   Single source of truth for mobile-specific styling.
   Loaded LAST in the cascade; wrapped in a single media query
   so >768px is byte-identical to the desktop build.

   Editorial mobile lens: preserve display typography (lower
   clamp minima, never collapse to body-text), keep dark
   full-bleed moments, generous negative space over density.
   ============================================================ */

/* Hide mobile-only DOM at every viewport by default.
   The media query below re-enables what's needed on ≤768px. */
.nav-burger,
.nav-panel,
.nav-panel-backdrop { display: none; }

@media (max-width: 768px) {

  /* ------------------------------------------------------------
     Nav — hamburger reveal + editorial slide-in panel
     ------------------------------------------------------------ */

  /* Reveal the hamburger; remove the inline CTA + lang toggle
     (they re-appear inside the panel). */
  .nav-burger { display: inline-flex; }
  .nav-actions { display: none; }

  /* Hamburger button — 3 hairlines, currentColor matches nav text.
     Sits in the right slot of .nav-inner (space-between flex). */
  .nav-burger {
    position: relative;
    z-index: 120;                       /* above panel + backdrop */
    width: 44px;
    height: 44px;
    margin-right: -6px;                 /* optical alignment with logo edge */
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-accent-gold, #b8954a);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-burger:focus-visible {
    outline: 2px solid var(--color-accent-gold-bright, #d9b978);
    outline-offset: 4px;
  }
  .nav-burger-bar {
    display: block;
    width: 22px;
    height: 1.5px;
    background: currentColor;
    transition: transform .28s var(--ease, cubic-bezier(.4,0,.2,1)),
                opacity   .2s ease;
    transform-origin: center;
  }
  /* When the panel is open the burger steps aside — the explicit
     close button inside the panel takes over (less visual noise). */
  html.nav-open .nav-burger { display: none; }

  /* Backdrop — soft dark wash with a hint of blur. */
  .nav-panel-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(15, 22, 18, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .32s var(--ease, cubic-bezier(.4,0,.2,1));
  }
  html.nav-open .nav-panel-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Panel — slides in from the right.
     Background uses the site's primary dark so it feels native. */
  .nav-panel {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    width: min(86vw, 380px);
    background: var(--color-bg-primary, #1F2D24);
    color: var(--color-bg-cream-soft, #FAF5E8);
    box-shadow: -24px 0 60px rgba(0, 0, 0, .35);
    transform: translateX(100%);
    transition: transform .36s var(--ease, cubic-bezier(.4,0,.2,1));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  html.nav-open .nav-panel { transform: translateX(0); }

  .nav-panel-inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 26px 32px 36px;
  }

  /* Editorial close affordance — sits at the top right of the panel.
     Label + X icon so it's unmistakable. */
  .nav-panel-close {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: -10px -12px 22px auto;
    background: transparent;
    border: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent-gold-bright, #d9b978);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s ease;
  }
  .nav-panel-close:hover,
  .nav-panel-close:focus-visible {
    color: var(--color-bg-cream-soft, #FAF5E8);
    outline: none;
  }
  .nav-panel-close-icon {
    width: 18px;
    height: 18px;
    display: block;
  }

  /* Links — display typography, magazine-TOC feel.
     Letter-spacing borrowed from headings. */
  .nav-panel-link {
    display: block;
    padding: 18px 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: .01em;
    color: var(--color-bg-cream-soft, #FAF5E8);
    text-decoration: none;
    border-bottom: 1px solid rgba(232, 220, 192, .14);
    transition: color .2s ease, padding-left .25s ease;
  }
  .nav-panel-link:first-of-type { border-top: 1px solid rgba(232, 220, 192, .14); }
  .nav-panel-link:hover,
  .nav-panel-link:focus-visible {
    color: var(--color-accent-gold-bright, #d9b978);
    padding-left: 6px;
    outline: none;
  }

  /* Foot — sits at the bottom; pushed down with margin-top:auto. */
  .nav-panel-foot {
    margin-top: auto;
    padding-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: flex-start;
  }
  .nav-panel-foot .lang-toggle {
    display: inline-flex;                /* override components.css:545 hide */
    align-items: center;
    gap: 10px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(232, 220, 192, .55);
  }
  .nav-panel-foot .lang-toggle button {
    background: transparent;
    border: 0;
    padding: 4px 2px;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: color .2s ease;
  }
  .nav-panel-foot .lang-toggle button.is-active { color: var(--color-accent-gold-bright, #d9b978); }
  .nav-panel-foot .btn {
    align-self: stretch;
    text-align: center;
    justify-content: center;
  }

  /* Lock body scroll while the panel is open. */
  html.nav-open,
  html.nav-open body { overflow: hidden; }

  /* Reduced motion — no slide, no fade transitions. */
  @media (prefers-reduced-motion: reduce) {
    .nav-panel,
    .nav-panel-backdrop,
    .nav-burger-bar { transition: none; }
  }

  /* ------------------------------------------------------------
     A. Global reset — no horizontal overflow, media is contained
     ------------------------------------------------------------ */
  html, body { overflow-x: hidden; max-width: 100%; }
  img, svg, iframe, video { max-width: 100%; height: auto; }
  iframe { width: 100%; }

  /* ------------------------------------------------------------
     B. Container + section paddings → uniform 20px gutter
     ------------------------------------------------------------ */
  .container { padding: 0 20px; max-width: 100%; }

  .contact-brand    { padding: 40px 20px 32px; min-height: auto; }
  .contact-form-wrap{ padding: 36px 20px; }
  .sc-intro         { padding: 36px 20px 40px; }
  .priority-center  { padding: 48px 20px; }
  .sc-card-wrap     { padding: 28px 20px; }
  .r-diagram-wrap   { padding: 20px; min-height: 0; }
  .r-sector-panel   { padding: 24px 20px; }
  .r-philo-panel    { padding: 20px; max-width: 100%; margin-left: 0; }
  .r-node-detail    { padding: 20px; }
  .r-region-detail  { padding: 20px; min-height: 100px; }

  /* ------------------------------------------------------------
     C. Neutralize decorative bleed (the real overflow culprits)
     ------------------------------------------------------------ */
  .contact-brand::after,
  .contact-brand::before { display: none; }
  .botanical             { display: none; }
  .products::after       { display: none; }
  .priority-img::after   { background: transparent !important; }
  .r-philo::after        { background: linear-gradient(180deg, rgba(20,28,24,.86), rgba(20,28,24,.55)); }
  .form-success p        { max-width: 100%; }

  /* ------------------------------------------------------------
     D. Typography — editorial display retained, lower floors
     ------------------------------------------------------------ */
  .hero h1          { font-size: clamp(30px, 8vw, 44px); margin-bottom: 22px; }
  .hero-eyebrow     { margin-bottom: 20px; }
  .hero-divider     { margin-bottom: 22px; }
  .hero-lead        { font-size: 15px; margin-bottom: 28px; }
  .stat-num         { font-size: clamp(28px, 7vw, 36px); }
  .contact-brand h1 { font-size: clamp(30px, 8vw, 44px); }
  .about-hero h1    { font-size: clamp(28px, 7vw, 40px); }
  .r-philo h2       { font-size: clamp(26px, 7vw, 38px); }
  .r-node-ttl       { font-size: 18px; }

  /* ------------------------------------------------------------
     E. Grids → 1 column (defensive !important against existing MQs)
     ------------------------------------------------------------ */
  .stats-grid,
  .r-diagram-row,
  .r-sectors-grid,
  .r-pillars-grid,
  .r-principles,
  .r-philo-grid,
  .r-caps-grid,
  .r-why-grid,
  .r-twocol,
  .r-model-grid { grid-template-columns: 1fr !important; }

  .r-sector {
    border-left: none !important;
    border-top: 1px solid #E2DAC4;
    padding: 18px 20px;
  }
  .r-sector:first-child { border-top: none; }
  .r-sector:nth-child(n+4) { border-top: 1px solid #E2DAC4; } /* override autana.css:194 */

  /* ------------------------------------------------------------
     F. Autana SPV diagram — collapse, hide connectors, full-width nodes
     ------------------------------------------------------------ */
  .r-diagram-svg    { display: none; }
  .r-diagram-core   { margin-bottom: 12px; }
  .r-node           { min-height: 80px; padding: 14px 16px; }
  .r-node.core      { width: 100% !important; max-width: none !important; }

  /* ------------------------------------------------------------
     G. Maps — constrain SVG, bigger hub tap targets
     ------------------------------------------------------------ */
  .world-map { width: 100%; height: auto; max-height: 280px; }
  .trade-map .world-map-wrap { grid-template-columns: 1fr; gap: 20px; max-width: 100%; }
  #coverage .world-map .hub  { r: 1.8; }

  /* ------------------------------------------------------------
     H. Hero misc — kill parallax effect + center dots safely
     ------------------------------------------------------------ */
  .hero-content { transform: none !important; opacity: 1 !important; }
  .hero-dots    { left: 0; transform: none; padding-left: 20px; bottom: 60px; }
  .logo-text .sub { display: none; }

  /* ------------------------------------------------------------
     I. Reveal animations off — no half-revealed sections on phone
     ------------------------------------------------------------ */
  .reveal { opacity: 1 !important; transform: none !important; }

}