/* =============================================================
   OneThera — Responsive Styles
   6 Breakpoints per design blueprint
   ============================================================= */

/* ══════════════════════════════════════════════════════════════
   BP1: Desktop Standard (1200px–1439px)
   Container adapts fluidly
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1439px) {
  .container {
    padding-inline: var(--spacing-xl); /* 24px */
  }
}

/* ══════════════════════════════════════════════════════════════
   BP2: Tablet Landscape (1024px–1199px)
   Product grid: 3 → 2 columns, nav compresses
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  /* Product grid: 3 → 2 */
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-card--expanded {
    grid-column: span 2;
  }

  /* Non-expanded cards are handled by the global fallback in components.css (position: absolute + opacity: 0) */

  /* Override desktop width restriction to use full width vertically on tablet/mobile */
  .product-card__details {
    max-width: none !important;
  }

  /* Ingredient grid: 3 → 2 */
  .ingredient-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer: 4 → 2×2 */
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xxxl) var(--spacing-xxl);
  }

  .footer-brand-col {
    grid-column: 1 / -1;
  }

  /* Nav links spacing */
  .nav-links {
    gap: var(--spacing-xl);
  }

  /* Category grid: 4 → 2 */
  .category-nav__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ══════════════════════════════════════════════════════════════
   BP3: Tablet Portrait (768px–1023px)
   All 2-col layouts collapse, product stays 2-col
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* ── Section padding reduction ────────────────────────── */
  .section--editorial {
    padding-block: var(--spacing-section); /* 128 → 96px */
  }

  /* ── Hero: prevent header overlap ──────────────────────── */
  .hero-fullscreen {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 80px; /* Clear 64px fixed global-nav */
    box-sizing: border-box;
  }

  .hero-fullscreen__content {
    margin-top: auto; /* Push content to bottom when space is available */
  }

  /* ── Hero: stack vertically ───────────────────────────── */
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-image {
    order: -1; /* Image on top */
  }

  .hero-image img {
    max-height: 400px;
    object-fit: cover;
  }

  .hero-body {
    max-width: 100%;
  }

  /* ── Philosophy: stack ────────────────────────────────── */
  .philosophy-inner {
    grid-template-columns: 1fr;
  }

  /* ── Founder: stack ───────────────────────────────────── */
  .founder-pillar {
    grid-template-columns: 1fr;
  }

  .founder-image {
    max-width: 400px;
    margin-inline: auto;
  }

  .founder-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ── Product grid: stays 2-col ────────────────────────── */
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-card--expanded {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
  }

  .product-card--expanded .product-card__details {
    border-left: none;
    border-top: 1px solid var(--color-hairline);
    padding-left: 0;
    padding-top: var(--spacing-lg);
    margin-top: var(--spacing-sm);
    max-height: 1200px !important;
    opacity: 1 !important;
  }


  /* ── One Sisters: stack ───────────────────────────────── */
  .sisters-inner {
    grid-template-columns: 1fr;
  }

  /* ── B2B: stack ───────────────────────────────────────── */
  .b2b-inner {
    grid-template-columns: 1fr;
  }

  /* ── Footer: 2-col ────────────────────────────────────── */
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }



  /* ── Impact metrics: 3-col maintained ────────────────── */
  .impact-metrics {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ── Ingredient: 2 col ────────────────────────────────── */
  .ingredient-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Market Opportunity stats: 2 columns ──────────────── */
  .about-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Compliance: stack vertically ─────────────────────── */
  .compliance-pillar {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }
}

/* ══════════════════════════════════════════════════════════════
   BP4: Mobile Large (480px–767px)
   Single column, hamburger nav, full-width CTAs
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* ── Container ────────────────────────────────────────── */
  .container {
    padding-inline: var(--spacing-lg); /* 16px */
  }

  /* ── Navigation ───────────────────────────────────────── */
  .nav-links {
    display: none; /* Hidden, shown in mobile overlay */
  }

  .nav-actions .btn-primary {
    display: none; /* Hidden, shown in mobile overlay */
  }

  .mobile-menu-btn {
    display: flex;
  }

  /* ── Product grid: 2 → 1 ──────────────────────────────── */
  .product-grid {
    grid-template-columns: 1fr;
  }

  .product-card--expanded {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
  }

  .product-card--expanded .product-card__details {
    border-left: none;
    border-top: 1px solid var(--color-hairline);
    padding-left: 0;
    padding-top: var(--spacing-lg);
    margin-top: var(--spacing-sm);
    max-height: 1200px !important;
    opacity: 1 !important;
  }

  /* ── Hero CTAs: full width ────────────────────────────── */
  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }

  .hero-cta-group .btn-primary,
  .hero-cta-group .btn-secondary {
    width: 100%;
    justify-content: center;
  }

  /* ── Fullscreen Hero: mobile tweaks ─────────────────── */
  .hero-fullscreen {
    min-height: 82vh !important;
  }

  .hero-fullscreen__bg img {
    object-position: center 20% !important;
    filter: brightness(0.92);
    width: 130% !important;
    max-width: 130% !important;
    left: -15%;
    position: relative;
    will-change: transform;
    animation: heroMobilePan 12s ease-in-out infinite alternate !important;
    transition: transform 0.3s cubic-bezier(0.1, 0.4, 0.2, 1);
  }

  .hero-fullscreen__overlay {
    background: linear-gradient(180deg, rgba(17, 17, 17, 0.3) 0%, rgba(17, 17, 17, 0.55) 50%, rgba(17, 17, 17, 0.92) 100%) !important;
  }

  .hero-fullscreen__content {
    padding: var(--spacing-xl) var(--spacing-lg);
    padding-bottom: calc(var(--spacing-xl) + 16px);
  }

  .hero-badges-grid {
    gap: 6px !important;
    margin-bottom: var(--spacing-lg) !important;
  }

  .hero-badge-pill {
    font-size: 0.75rem !important;
    padding: 5px 11px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
  }

  .hero-fullscreen__cta {
    flex-direction: column;
    width: 100%;
  }

  .hero-fullscreen__cta .btn-primary,
  .hero-fullscreen__cta .btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .hero-fullscreen__scroll {
    display: none;
  }

  /* ── Category grid: 2 → 1 ──────────────────────────── */
  .category-nav__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }



  /* ── Impact metrics: 3-col compressed ────────────────── */
  .impact-metrics {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
  }

  .impact-metric__value {
    font-size: 1.25rem;
  }

  /* ── Footer: single column ────────────────────────────── */
  .footer-inner {
    grid-template-columns: 1fr;
  }

  .footer-brand-col {
    grid-column: auto;
  }

  /* ── Ingredient: single column ────────────────────────── */
  .ingredient-grid {
    grid-template-columns: 1fr;
  }

  /* ── Newsletter modal ─────────────────────────────────── */
  .modal-panel {
    padding: var(--spacing-xl);
    margin: var(--spacing-lg);
    max-width: calc(100% - 32px);
  }

  /* ── Section padding ──────────────────────────────────── */
  .hero-fullscreen {
    min-height: 85vh; /* Allow slightly shorter on mobile */
  }

  #ingredient-deep-dive {
    padding-block: var(--spacing-section);
  }

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

  /* ── B2B form panel ───────────────────────────────────── */
  .b2b-form-panel {
    padding: var(--spacing-xl);
  }

  /* ── Tracker panel ────────────────────────────────────── */
  .tracker-panel {
    padding: var(--spacing-xl);
  }

  /* ── Filter pills: horizontal scrolling on mobile/tablet portrait ── */
  .filter-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: var(--spacing-sm);
    padding-bottom: 8px; /* avoid cutting off shadows */
    width: 100%;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  .filter-pills::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }

  .btn-tab-filter {
    flex: 0 0 auto;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
  }

  /* ── Compliance Checklist: 1 column ───────────────────── */
  .compliance-checklist-grid {
    grid-template-columns: 1fr;
  }

  /* ── Formula tab buttons mobile sizing ────────────────── */
  .formula-tab-btn {
    padding: 10px 14px;
    font-size: 0.875rem;
  }

  /* ── Newsletter Modal single column ───────────────────── */
  #newsletter-modal {
    grid-template-columns: 1fr;
  }
  #newsletter-modal .modal-right-col {
    display: none !important;
  }

  /* ── Before/After Swipe Hint Mobile Toggle ────────────── */
  .clinical-ba__swipe-hint--desktop {
    display: none !important;
  }
  .clinical-ba__swipe-hint--mobile {
    display: inline !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   BP5: Mobile Minimum (≤479px)
   Minimum padding, max clamp enforcement
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 479px) {
  :root {
    /* Further reduce padding */
    --spacing-editorial: 96px;
    --spacing-section:   64px;
  }

  /* ── Filter pills: scrolling behavior is inherited from 767px media query ── */

  /* ── Impact metrics: single column ───────────────────── */
  .impact-metrics {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  /* ── Footer legal row: column ─────────────────────────── */
  .footer-legal-row {
    flex-direction: column;
    align-items: flex-start;
  }

  /* ── Section editorial padding ────────────────────────── */
  .section--editorial {
    padding-block: var(--spacing-block); /* 64px */
  }

  /* ── Navigation: tighter ──────────────────────────────── */
  .global-nav__inner {
    padding-inline: var(--spacing-lg);
  }

  /* ── Hero badge: smaller ──────────────────────────────── */
  .hero-badge {
    font-size: 0.875rem;
  }

  /* ── B2B badges: wrap ─────────────────────────────────── */
  .b2b-badges {
    flex-direction: column;
    align-items: flex-start;
  }

  /* ── Product card: tighter padding ───────────────────── */
  .product-card {
    padding: var(--spacing-lg);
  }

  /* ── Market Opportunity stats: 1 column ───────────────── */
  .about-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════
   ACCESSIBILITY: Reduced Motion
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .progress-fill {
    transition: none !important;
  }

  section[data-animate] {
    opacity: 1;
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   BP6: Short Viewports (max-height: 750px)
   Optimize hero text sizes, paddings, and badge grids so CTA 
   buttons remain visible above the fold on low-height screens.
   ══════════════════════════════════════════════════════════════ */
@media (max-height: 750px) {
  .hero-fullscreen__content {
    padding-top: var(--spacing-lg) !important;
    padding-bottom: var(--spacing-xl) !important;
    gap: var(--spacing-sm) !important;
  }
  
  .hero-fullscreen__headline {
    font-size: clamp(1.75rem, 3.5vw + 0.6rem, 3.25rem) !important;
    line-height: 1.25 !important;
  }

  .hero-fullscreen__subtitle {
    font-size: 0.95rem !important;
    margin-bottom: var(--spacing-sm) !important;
  }

  .hero-badges-grid {
    margin-bottom: var(--spacing-sm) !important;
    gap: 6px !important;
  }

  .hero-badge-pill {
    padding: 4px 10px !important;
    font-size: 0.75rem !important;
  }

  .hero-fullscreen__cta {
    margin-top: var(--spacing-xs) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE HERO SLOW PAN ANIMATION (X + Y Movement)
   ══════════════════════════════════════════════════════════════ */
@keyframes heroMobilePan {
  0% {
    transform: scale(1.08) translate(-8%, -15px);
  }
  33% {
    transform: scale(1.08) translate(0%, 10px);
  }
  66% {
    transform: scale(1.08) translate(8%, -10px);
  }
  100% {
    transform: scale(1.08) translate(-8%, 15px);
  }
}