/* ============================================================
   TERRAVAULT OUTDOORS — responsive.css
   Breakpoints: 1280 / 1024 / 768 / 480 / 360
   ============================================================ */

/* ─── 1280px — Large Desktop ────────────────────────────────── */
@media (max-width: 1280px) {
  .footer-grid {
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 2rem;
  }

  .vault-categories {
    grid-template-columns: repeat(5, 1fr);
    gap: .75rem;
  }
}

/* ─── 1024px — Tablet Landscape / Small Laptop ─────────────── */
@media (max-width: 1024px) {

  /* Nav */
  .nav-links,
  .nav-actions .btn {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  /* Hero */
  .hero-stats {
    position: static;
    flex-direction: row;
    gap: 2rem;
    margin-top: 2rem;
  }

  .hero-stat { text-align: left; }

  /* About story */
  .about-story {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .about-image-frame .img-main {
    aspect-ratio: 16/7;
  }

  .about-image-frame::before {
    display: none;
  }

  /* Contact */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 3rem;
  }

  /* Team stats */
  .team-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Vault categories */
  .vault-categories {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Modal */
  .modal-box {
    grid-template-columns: 1fr;
    max-height: 90vh;
  }

  .modal-image {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    aspect-ratio: 16/7;
  }
}

/* ─── 768px — Tablet Portrait ───────────────────────────────── */
@media (max-width: 768px) {

  :root {
    --nav-h: 68px;
  }

  /* Sections */
  .section {
    padding-block: clamp(48px, 8vw, 80px);
  }

  /* Hero */
  .hero {
    align-items: flex-end;
    padding-bottom: 120px;
    text-align: center;
    min-height: 92svh;
  }

  .hero > .container {
    width: min(90%, 1280px) !important;
  }

  /* Hide right-side anchor stats on tablet — show inline stats row instead */
  .hero-stats-anchor {
    display: none !important;
  }

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

  .hero-content .eyebrow::before {
    display: none;
  }

  .hero-subtitle {
    max-width: 100%;
    margin-inline: auto;
  }

  .hero-cta-row {
    justify-content: center;
  }

  /* Inline stats row shown on mobile/tablet */
  .hero-stats-row {
    display: flex !important;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2.5rem;
  }

  .hero-stat {
    text-align: center;
  }

  .hero-stat .num {
    font-size: 2rem;
  }

  /* Categories strip */
  .categories-strip {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Products grid */
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

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

  /* Vault categories */
  .vault-categories {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  /* Section header */
  .section-header h2 {
    font-size: clamp(1.6rem, 5vw, 2.5rem);
  }

  /* Reviews */
  .review-card {
    flex: 0 0 min(320px, 84vw);
  }

  /* Newsletter form */
  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-input {
    min-width: unset;
  }

  /* CTA banner */
  .cta-banner-inner {
    flex-direction: column;
    text-align: center;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: .75rem;
  }

  /* Shop toolbar */
  .shop-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .shop-search { min-width: 100%; }

  .filter-tabs {
    width: 100%;
  }

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

  /* About values */
  .values-grid {
    grid-template-columns: 1fr;
  }

  /* Team stats */
  .team-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Page hero */
  .page-hero {
    padding-bottom: 40px;
  }

  /* Map placeholder */
  .map-placeholder {
    height: 220px;
  }

  /* Modal */
  .modal-box {
    width: 100%;
    max-height: 95vh;
  }

  /* CTA banner watermark */
  .cta-banner::before {
    font-size: 10rem;
    opacity: .05;
  }
}

/* ─── 480px — Mobile ────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Typography */
  .hero-title {
    font-size: clamp(2.8rem, 12vw, 4.5rem);
    letter-spacing: -.02em;
  }

  /* Nav */
  .nav-logo .logo-sub { display: none; }

  /* Categories strip */
  .categories-strip {
    grid-template-columns: repeat(3, 1fr);
  }

  .cat-strip-item {
    padding: 1.25rem .5rem;
  }

  .cat-strip-item span {
    font-size: .62rem;
  }

  /* Products */
  .products-grid {
    grid-template-columns: 1fr;
  }

  /* Vault categories */
  .vault-categories {
    grid-template-columns: 1fr 1fr;
  }

  /* Features */
  .features-grid {
    grid-template-columns: 1fr;
  }

  /* Team stats */
  .team-stats {
    grid-template-columns: 1fr 1fr;
  }

  /* Hero stats — anchor always hidden on mobile, inline row shown */
  .hero-stats-anchor { display: none !important; }
  .hero-stats-row { display: flex !important; }
  .hero-stat .num { font-size: 1.8rem; }

  /* Mega menu not applicable */
  .mega-menu { display: none; }

  /* Review card */
  .review-card {
    flex: 0 0 88vw;
    padding: 1.5rem;
  }

  /* Buttons */
  .btn-lg {
    padding: 1rem 2rem;
    font-size: .85rem;
  }

  /* Section header */
  .section-header {
    margin-bottom: 2.5rem;
  }

  /* Footer social */
  .footer-social {
    flex-wrap: wrap;
  }

  /* Vault intro text */
  .vault-intro-text .brand-name {
    font-size: clamp(2rem, 12vw, 4rem);
    letter-spacing: .15em;
  }

  /* Skip button */
  .vault-skip {
    bottom: 1.5rem;
    right: 1.5rem;
  }

  /* Toast */
  .toast {
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    transform: translateY(calc(100% + 2rem));
  }

  .toast.show {
    transform: translateY(0);
  }
}

/* ─── 360px — Very Small Mobile ─────────────────────────────── */
@media (max-width: 360px) {

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

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

  .cat-strip-item:last-child {
    display: none; /* 6-in-2 columns on tiny screens */
  }

  .vault-categories {
    grid-template-columns: 1fr;
  }

  .nav-logo .logo-text {
    display: none;
  }
}

/* ─── Landscape Mobile Fix ──────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {

  #vault-intro {
    flex-direction: row;
    gap: 3rem;
    padding: 1rem 3rem;
  }

  #vault-door-svg {
    width: min(180px, 35vw);
  }

  .vault-intro-text {
    margin-top: 0;
  }

  .vault-intro-text .brand-name {
    font-size: clamp(1.8rem, 6vw, 3rem);
  }

  .hero {
    min-height: unset;
    padding-top: calc(var(--nav-h) + 2rem);
    padding-bottom: 3rem;
  }
}

/* ─── High DPI / Retina ─────────────────────────────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Ensure crisp borders */
  .product-card,
  .feature-card,
  .review-card {
    border-width: .5px;
  }
}

/* ─── Print ─────────────────────────────────────────────────── */
@media print {
  #vault-intro,
  #navbar,
  .mobile-nav,
  .hero-scroll-indicator,
  .newsletter-section,
  .tagline-strip,
  .cta-banner,
  .footer { display: none !important; }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  h1, h2, h3, h4 { color: #000 !important; }
  p { color: #333 !important; }

  .container { width: 100% !important; }
}

/* ─── Dark mode respect (already dark, but override any OS light) ── */
@media (prefers-color-scheme: light) {
  /* TerraVault is intentionally dark — keep it dark */
  body {
    background: var(--black) !important;
    color: var(--white) !important;
  }
}