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

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

/* Hide desktop-only items on mobile */
.desktop-only { display: none !important; }

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

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

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

  .desktop-only { display: revert !important; }
  .mobile-only  { display: none !important; }

  /* Navigation overlay — narrow panel on tablet+ */
  .nav-overlay__panel {
    max-width: 480px;
    right: auto; /* keep left-anchored */
  }

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

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

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

  /* Category grid: 2x2 */
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .category-card { aspect-ratio: 4 / 3; }

  /* Stats: 2x2 */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-item::after { display: none; }

  /* Split section stacks on tablet */
  .split-section {
    grid-template-columns: 1fr;
  }
  .split-section__image { min-height: 360px; }
  .split-section__content {
    padding: var(--space-16) var(--space-8);
  }

  /* Process: 2x2 */
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .process-grid::before { display: none; }

  /* Timeline */
  .timeline { padding-left: var(--space-10); }
}

/* ── ≥ 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-12);
  }

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

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

  /* Category grid: 4 columns */
  .category-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .category-card { aspect-ratio: 3 / 4; }

  /* Stats: 4 columns */
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .stat-item::after { display: block; }

  /* Split section: side by side */
  .split-section {
    grid-template-columns: 1fr 1fr;
  }

  /* Process: 4 columns */
  .process-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .process-grid::before { display: block; }

  /* Utility grids */
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }

  /* Navigation overlay — narrower panel on desktop */
  .nav-overlay__panel {
    max-width: 520px;
    padding: var(--space-20) var(--space-16);
  }
}

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

  .split-section__content {
    padding: var(--space-20) var(--space-20);
  }
}

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

/* ── Mobile Navigation Overrides (< 768px) ─────────────────── */
@media (max-width: 767.98px) {
  .mobile-only { display: revert !important; }

  /* Full-screen overlay on mobile */
  .nav-overlay__panel {
    max-width: 100%;
    padding: var(--space-20) var(--space-6) var(--space-24);
  }

  .nav-overlay__list {
    gap: var(--space-1);
  }

  .nav-overlay__link {
    font-size: clamp(var(--text-sm), 3.5vw, var(--text-lg));
  }

  .nav-overlay__footer {
    left: var(--space-6);
    right: var(--space-6);
    flex-direction: column;
    align-items: flex-start;
  }

  /* Header on mobile: compact */
  .site-header {
    padding: var(--space-4);
  }

  .header-cta {
    display: none; /* hide on small screens */
  }

  /* 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;
  }

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

  .footer-top {
    padding-block: var(--space-16);
    /* Extra bottom space so the fixed WhatsApp FAB (52px + 24px gap) doesn't cover content */
    padding-bottom: calc(var(--space-16) + 80px);
  }

  /* 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 rgba(255,255,255,.08);
    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 rgba(255,255,255,.08);
    margin-bottom: var(--space-2);
  }

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

  /* Category grid: single column */
  .category-grid {
    grid-template-columns: 1fr;
  }
  .category-card { aspect-ratio: 16 / 9; }

  /* Stats: 2 columns */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  .stat-item {
    padding: var(--space-6);
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .stat-item:nth-child(odd)::after {
    display: block;
    height: 40px;
  }

  /* Split: stack */
  .split-section {
    grid-template-columns: 1fr;
  }
  .split-section__image { min-height: 280px; }
  .split-section__content {
    padding: var(--space-12) var(--space-6);
  }

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

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

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

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

  /* Newsletter */
  .newsletter-form {
    flex-direction: column;
    border: none;
    gap: var(--space-3);
  }
  .newsletter-form__input {
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--radius-md);
    padding: var(--space-4);
  }
  .newsletter-form__btn {
    border-radius: var(--radius-md);
    justify-content: center;
    padding: var(--space-4);
  }

  /* 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; }
}

/* ── Tablet portrait (768–991px) ──────────────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
  .nav-overlay__panel {
    max-width: 380px;
  }

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

  .split-section__content {
    padding: var(--space-12) var(--space-8);
  }
}

/* ── 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; }
}

/* ── Home Category Hero — Mobile ─────────────────────── */
@media (max-width: 767px) {
  .home-cat-hero {
    height: 80vw;
    min-height: 320px;
  }

  .home-cat-hero__content {
    padding-inline: var(--space-4);
    padding-bottom: var(--space-12);
  }

  .home-cat-hero__desc {
    max-width: 100%;
    font-size: var(--text-xs);
  }
}

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

  .ksc-card,
  .ksc-card:last-child:nth-child(odd) {
    height: 72vw;
    min-height: 300px;
    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);
  }
}

/* ── 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; }

  /* Site logo: cap height on mobile */
  .site-logo__img { height: 30px; }

  /* 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); }
}