/* ==========================================================================
   AVIRA ADHARSH GLOBAL LIMITED — Responsive Stylesheet
   Breakpoints tested: 1920 / 1440 / 1280 / 1024 / 768 / 480 / 375
   Mobile-first overrides layered on top of style.css (desktop baseline)
   ========================================================================== */

/* -------------------------------------------------------------------------
   1920px and up — roomier container, larger rhythm
   ------------------------------------------------------------------------- */
@media (min-width: 1920px){
  :root{ --container-max: 1480px; }
  html{ font-size: 64%; }
}

/* -------------------------------------------------------------------------
   up to 1440px
   ------------------------------------------------------------------------- */
@media (max-width: 1440px){
  :root{ --container-pad: 5vw; }
}

/* -------------------------------------------------------------------------
   up to 1280px — tighten spacing scale slightly
   ------------------------------------------------------------------------- */
@media (max-width: 1280px){
  :root{
    --space-xxl: 7.2rem;
    --space-xl: 4.6rem;
  }
  .main-nav ul{ gap: var(--space-md); }
}

/* -------------------------------------------------------------------------
   up to 1024px (tablet landscape) — collapse to mobile navigation,
   restructure multi-column layouts to 2-up
   ------------------------------------------------------------------------- */
@media (max-width: 1024px){
  :root{ --container-pad: 4.5vw; --header-h: 84px; --header-h-scrolled: 66px; }

  .main-nav{ display: none; }
  .header-actions .btn{ display: none; }
  .nav-toggle{ display: flex; }

  /* Header logo is sized generously on desktop — cap it here (as a
     proportion of the same --logo-header-height-base an admin can set in
     Settings) so it never outgrows the shorter mobile header bar and clips. */
  .brand-logo{ height: calc(var(--logo-header-height-base) * 0.714); }
  .site-header.is-scrolled .brand-logo{ height: calc(var(--logo-header-height-base) * 0.548); }

  .split{ grid-template-columns: 1fr; gap: var(--space-lg); }
  .split-media{ aspect-ratio: 16/10; }
  .split.split--reverse{ direction: ltr; }
  .split.split--reverse .split-media{ order: -1; }

  .category-grid{ grid-template-columns: repeat(2, 1fr); }
  .category-card:nth-child(1), .category-card:nth-child(2){ grid-column: span 2; aspect-ratio: 16/9; }
  .category-card:nth-child(n+3){ grid-column: span 1; aspect-ratio: 4/3; }

  .product-grid{ grid-template-columns: repeat(2, 1fr); }
  .feature-grid{ grid-template-columns: repeat(2, 1fr); }
  .feature-grid--4{ grid-template-columns: repeat(2, 1fr); }
  .process-grid, .process-grid--3{ grid-template-columns: repeat(2, 1fr); row-gap: var(--space-lg); }
  .process-grid::before{ display: none; }
  .mission-teaser-grid{ grid-template-columns: 1fr 1fr; }

  .product-detail{ grid-template-columns: 1fr; }
  .product-gallery-main{ aspect-ratio: 16/10; }

  .enquiry-layout{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }

  .footer-top{ grid-template-columns: 1fr 1fr; row-gap: var(--space-lg); }
  .stats-strip{ grid-template-columns: repeat(2,1fr); row-gap: var(--space-md); }
}

/* -------------------------------------------------------------------------
   up to 768px (tablet portrait / large phone) — genuine mobile layout
   ------------------------------------------------------------------------- */
@media (max-width: 768px){
  html{ font-size: 58%; }
  :root{ --space-xxl: 5.6rem; --space-xl: 3.8rem; --container-pad: 6vw; }

  .section{ padding-block: var(--space-xxl); }

  .hero{ min-height: 92vh; align-items: flex-end; }
  .hero-inner{ padding-block: var(--space-xl) var(--space-lg); }
  .hero-title{ max-width: 14ch; }
  .hero-actions{ flex-direction: column; align-items: stretch; }
  .hero-actions .btn{ width: 100%; }
  .hero-scroll{ display: none; }
  .hero-arrow{ display: none; }
  .hero-dots{ bottom: var(--space-md); }

  .page-hero{ min-height: 40vh; }

  .category-grid{ grid-template-columns: 1fr; }
  .category-card:nth-child(1), .category-card:nth-child(2), .category-card:nth-child(n+3){
    grid-column: span 1; aspect-ratio: 4/3.2;
  }
  .category-card p{ max-height: 6em; opacity: 1; margin-bottom: .4rem; } /* always show summary on touch */
  .category-card-body{ transform: translateY(0); }

  .product-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
  .feature-grid{ grid-template-columns: 1fr; }
  .feature-grid--4{ grid-template-columns: 1fr; }
  .process-grid, .process-grid--3{ grid-template-columns: 1fr; row-gap: var(--space-lg); }
  .mission-teaser-grid{ grid-template-columns: 1fr; }
  .mission-teaser-grid{ gap: var(--space-sm); }

  .form-grid{ grid-template-columns: 1fr; }

  .footer-top{ grid-template-columns: 1fr; gap: var(--space-md); padding-block: var(--space-lg); }
  .footer-bottom{ flex-direction: column; align-items: flex-start; }

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

  .mission-item{ grid-template-columns: 64px 1fr; gap: var(--space-sm); }
  .mission-index{ font-size: 3.2rem; }

  .whatsapp-float{ right: 1.6rem; bottom: 1.6rem; width: 54px; height: 54px; }
  .whatsapp-float .tooltip{ display: none; }
  .instagram-float{ left: 1.6rem; bottom: 1.6rem; width: 54px; height: 54px; }
  .instagram-float .tooltip{ display: none; }
}

/* -------------------------------------------------------------------------
   up to 480px (mobile)
   ------------------------------------------------------------------------- */
@media (max-width: 480px){
  html{ font-size: 55%; }
  :root{ --container-pad: 5.5vw; }

  .brand-name{ font-size: 1.6rem; }
  .brand-tagline{ display: none; }

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

  .mobile-nav a{ font-size: 2.6rem; }

  .split-media-badge{ padding: 1.2rem 1.6rem; }
  .split-media-badge strong{ font-size: 2rem; }

  .contact-card{ padding: var(--space-md); }
}

/* -------------------------------------------------------------------------
   up to 375px (small mobile)
   ------------------------------------------------------------------------- */
@media (max-width: 375px){
  html{ font-size: 52%; }
  .hero-actions{ gap: 1.2rem; }
  .whatsapp-float{ width: 50px; height: 50px; right: 1.2rem; bottom: 1.2rem; }
  .whatsapp-float svg{ width: 24px; height: 24px; }
  .instagram-float{ width: 50px; height: 50px; left: 1.2rem; bottom: 1.2rem; }
  .instagram-float svg{ width: 24px; height: 24px; }
}

/* -------------------------------------------------------------------------
   Fine pointer / hover-capable devices only — keeps hover FX off touch
   ------------------------------------------------------------------------- */
@media (hover: none){
  .category-card-body{ transform: translateY(0); }
  .category-card p{ max-height: 6em; opacity: 1; }
  .product-card:hover{ transform: none; }
}