/* ============================================================
   Aush — responsive.css
   Mobile-first media queries
   Breakpoints: 576 · 768 · 992 · 1200 · 1400px
   ============================================================ */

/* ── Base mobile defaults (< 576px) ───────────────────────── */
.container {
  padding-inline: var(--space-4);
}

/* ── ≥ 576px — Small phones landscape / large phones ──────── */
@media (min-width: 576px) {
  .container {
    padding-inline: var(--space-5);
  }

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

/* ── ≥ 768px — Tablets ─────────────────────────────────────── */
@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-6);
  }

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

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

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

}

/* ── ≥ 992px — Small desktops / large tablets ─────────────── */
@media (min-width: 992px) {
  /* Footer grid: 4 columns */
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
    gap: var(--space-6);
  }

  /* Product grid: 3 columns */
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Blog grid: 3 columns */
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }

}

/* ── ≥ 1200px — Standard desktop ──────────────────────────── */
@media (min-width: 1200px) {
  .container {
    padding-inline: var(--space-8);
  }
}

/* ── ≥ 1400px — Wide / ultrawide ──────────────────────────── */
@media (min-width: 1400px) {
  .container {
    padding-inline: var(--space-10);
  }
}

/* ── Mobile Navigation Overrides (< 768px) ─────────────────── */
@media (max-width: 767.98px) {
  /* Hero typography */
  .page-hero__content {
    padding-block: var(--space-16);
  }

  /* Home hero: bottom-anchored on mobile */
  .home-hero .page-hero__content {
    align-items: center;
    text-align: center;
    padding-top: var(--space-4);
    padding-bottom: calc(var(--space-12) + 80px);
  }
  .home-hero .page-hero__title {
    max-width: 100%;
    font-size: clamp(var(--text-lg), 5vw, var(--text-2xl));
  }
  .home-hero .page-hero__subtitle {
    max-width: 100%;
    font-size: var(--text-xs);
  }
  .home-hero .page-hero__actions {
    justify-content: center;
  }

  /* Brand banner (home page + all 4 brand pages): mobile uses a dedicated
     image (see <picture> media source in markup), which is a taller
     shape than the desktop 3:1 graphic — reset the desktop aspect-ratio
     so it isn't force-cropped. Full width, height follows naturally —
     a height cap was tried here but it shrinks width along with it,
     leaving the banner narrow with empty space on both sides; full
     width (taking more vertical space, scrolled past like any other
     section) reads better than a narrow letterboxed image. */
  .brand-banner__img {
    aspect-ratio: auto;
    width: 100%;
    height: auto;
  }

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

  .footer-top {
    /* The extra 80px once reserved here for the WhatsApp FAB is no longer
       needed — mobile-nav.css now floats the FAB above the bottom nav bar
       instead of at the true viewport edge, and body already reserves
       space for that bar (see mobile-nav.css), so stacking a third layer
       of clearance here just left a large empty gap above .footer-bottom. */
    padding-block: var(--space-10);
  }

  .footer-bottom__links {
    gap: var(--space-4);
  }

  /* Accordion heading acts as toggle */
  .footer-col--accordion .footer-col__heading {
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0;
  }

  .footer-col__chevron {
    color: var(--color-accent);
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.25s ease;
    display: inline-block;
  }

  .footer-col--accordion.is-open .footer-col__chevron {
    transform: rotate(45deg);
  }

  /* Collapsed body */
  .footer-col__body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.25s ease;
    padding-top: 0;
  }

  /* Expanded body */
  .footer-col--accordion.is-open .footer-col__body {
    max-height: 600px;
    opacity: 1;
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  /* Brand col: always visible, no border */
  .footer-col--brand {
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-2);
  }

  .footer-bottom__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

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

  /* Blog: single column */
  .blog-grid {
    grid-template-columns: 1fr;
  }

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

  /* Touch targets — min 44px */
  .btn { min-height: 44px; }
  .footer-social__link { width: 44px; height: 44px; }

  /* Typography adjustments */
  .section-title {
    font-size: var(--text-2xl);
  }
}

/* ── Footer accordion: always visible on tablet+ ─────────── */
@media (min-width: 768px) {
  .footer-col__body    { display: block; max-height: none !important; opacity: 1 !important; padding-top: 0 !important; }
  .footer-col__chevron { display: none; }
  .footer-col--accordion .footer-col__heading { cursor: default; border-bottom: none; padding-block: 0; }
  .footer-col--brand   { border-bottom: none; padding-bottom: 0; }
}


/* ── Print styles ──────────────────────────────────────────── */
@media print {
  .site-header,
  .nav-overlay,
  .site-footer,
  .scroll-indicator,
  .btn { display: none !important; }

  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
  .container { max-width: 100%; padding: 0; }
}

/* ── Kitchen Showcase — Mobile ──────────────────────────── */
@media (max-width: 767px) {
  .kitchen-showcase__grid {
    grid-template-columns: 1fr;
  }

  .ksc-card,
  .ksc-card:last-child:nth-child(odd) {
    min-height: max(300px, 72vw);
    grid-column: auto;
  }

  /* Darker bottom gradient on mobile so text is always legible */
  .ksc-card__overlay {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.00)  0%,
      rgba(0,0,0,0.00) 38%,
      rgba(0,0,0,0.60) 65%,
      rgba(0,0,0,0.88) 100%
    );
  }

  .ksc-card__content {
    padding: var(--space-5) var(--space-5) var(--space-6);
  }

  .ksc-card__title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-2);
    /* Ensure title is readable over any image */
    text-shadow: 0 1px 6px rgba(0,0,0,0.7);
  }

  .ksc-card__desc {
    max-width: 100%;
    font-size: var(--text-xs);
    line-height: 1.55;
    /* Limit to 3 lines on mobile */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  }

  /* .ksc-card--product (AushCool/AushAir) title sits on its own white
     floating panel, not directly on the photo — the legibility shadow
     above reads as blur on dark text over a light background instead of
     helping, so cancel it here. */
  .ksc-card--product .ksc-card__title {
    text-shadow: none;
  }
}

/* ── Mobile Hero Fixes ──────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Ensure hero fills full mobile screen */
  .page-hero {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
  }

  /* Guarantee picture+img fill the bg on all mobile browsers */
  .page-hero__bg,
  .page-hero__bg picture,
  .page-hero__bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .page-hero__bg picture { display: block; position: absolute; }
  .page-hero__bg img     { position: static; }

  /* Home hero: tighten bottom padding so text sits higher */
  .home-hero .page-hero__content {
    padding-bottom: calc(var(--space-10) + 72px);
  }

  /* Hero title: slightly larger on phones */
  .home-hero .page-hero__title {
    font-size: clamp(var(--text-xl), 6vw, var(--text-2xl));
  }

  /* Scroll indicator: smaller on mobile */
  .scroll-indicator {
    bottom: var(--space-5);
    font-size: 10px;
  }
  .scroll-indicator__line { height: 28px; }

  /* Brand pages (AushCool/Fresh/Chill/Air): their hero background image
     now carries all its marketing text/badges baked in (the HTML
     title/subtitle were removed once the new images were supplied).
     The full-screen-height treatment above centre-crops a 1920x1080
     image down to ~30% of its width on a phone, cutting off that
     baked-in content no matter where the crop is positioned. Drop the
     forced full-screen box for these pages specifically and size the
     hero to the image's own aspect ratio instead — nothing gets
     cropped. (Higher specificity than the rules above, so this wins
     regardless of source order.) */
  .page-hero--brand {
    min-height: 0;
    display: block;
  }
  .page-hero--brand .page-hero__bg,
  .page-hero--brand .page-hero__bg picture {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
  }
  .page-hero--brand .page-hero__bg img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: initial;
  }
  .page-hero--brand .page-hero__content {
    padding-block: 0;
  }
  .page-hero--brand .scroll-indicator {
    display: none; /* hero is no longer full-screen, "scroll" hint doesn't apply */
  }

  /* Legal pages readable on mobile */
  .legal-page__title { font-size: var(--text-2xl); }
  .legal-content     { font-size: var(--text-sm); }
  .sitemap-grid      { grid-template-columns: 1fr; }

  /* About page pillars: single column already handled; stat cards */
  .about-stat-card { padding: var(--space-4) var(--space-5); }
  .about-problem__card { padding: var(--space-6); }
}