/* =====================================================================
   GARDWEL — RESPONSIVE LAYER
   Load this AFTER css/style.css (see header.php note).
   It only adds/overrides what is needed so every page works on
   phones, tablets, laptops and large monitors. Desktop look is unchanged.

   Breakpoints used (match Bootstrap):
     ≥1600 large monitors | ≤1199 small laptop / tablet landscape
     ≤991 tablet          | ≤767 mobile | ≤575 small phone | ≤380 tiny phone
===================================================================== */

/* ---------- 0. Safety net (all screens) ---------- */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:130px; }
img, video, iframe{ max-width:100%; }
.row > *{ min-width:0; }                         /* lets columns shrink instead of overflowing */
h1,h2,h3,h4,h5,h6,p,a,li{ overflow-wrap:break-word; }
a, button{ -webkit-tap-highlight-color:transparent; }

/* Hero blobs (.paint-bg::before/::after) were sitting ON TOP of the hero buttons and
   swallowing the clicks (dealers.php / home page). Let clicks pass through and lift the content. */
.paint-bg::before, .paint-bg::after{ pointer-events:none; }
.paint-bg > .container{ position:relative; z-index:2; }

/* Contact "info" cards: always visible (animated with CSS, no JS needed) */
.company-modern .info-card-modern:not(:hover){ opacity:1; transform:none; }
.company-modern .info-card-modern{ animation:fadeUp .8s ease backwards; }

/* Sticky filter bar must sit BELOW the fixed navbar */
.filter-wrap{ top:120px; }

/* ---------- 1. Large monitors ---------- */
@media (min-width:1600px){
  .container{ max-width:1480px; }
  .hero-title{ font-size:56px; }
  .hero-img{ max-width:520px; }
}

/* ---------- 2. Small laptop / tablet landscape ---------- */
@media (max-width:1199px){
  .pd-hero{ padding:120px 0 90px; }
  .pd-details{ padding:70px 0; }
  .why-bubble{ padding:40px 24px; }
}

/* ---------- 3. Tablet (≤991) ---------- */
@media (max-width:991px){

  html{ scroll-padding-top:90px; }

  /* heroes: let height follow content (50vh could clip text on short screens) */
  .about-hero{ height:auto !important; min-height:0 !important; padding:100px 20px 120px; }
  .hero{ text-align:center; padding:140px 0 70px; }
  .hero-text{ margin-left:auto; margin-right:auto; }
  .hero-img{ max-width:min(380px,85%); }

  /* product detail: image above text, not sticky */
  .pd-sticky-img{ position:static; margin-bottom:10px; }
  .pd-sticky-img img{ max-height:280px; }
  .pd-hero{ min-height:0; }
  .pd-img-panel img{ max-height:300px; }
  .pd-img-panel::before{ width:260px; height:260px; }

  /* mobile menu: scroll if it is taller than the screen (landscape phones) */
  .navbar-collapse{ max-height:calc(100vh - 90px); overflow-y:auto; -webkit-overflow-scrolling:touch; }

  .products-section{ padding:60px 0 80px; }
  .why-section, .gallery-section{ padding:70px 0; }
  .cta-section{ padding:90px 0; }
}

@supports (height:100dvh){
  @media (max-width:991px){ .navbar-collapse{ max-height:calc(100dvh - 90px); } }
}

/* ---------- 4. Mobile (≤767) ---------- */
@media (max-width:768px){

  .filter-wrap{ top:64px; padding:12px 0 0; }

  /* filter tabs become ONE swipeable row instead of a tall sticky block */
  .filter-tabs{
    flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; gap:8px;
    padding:0 16px 14px; margin:0 -12px;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .filter-tabs::-webkit-scrollbar{ display:none; }
  .filter-btn{ flex:0 0 auto; scroll-snap-align:start; padding:8px 16px; font-size:13px; }

  /* section spacing */
  .products-section{ padding:44px 0 64px; }
  .pd-details{ padding:56px 0; }
  .why-section, .gallery-section, .section-light, .section-grey{ padding:56px 0; }
  .cta-section{ padding:76px 0; }
  .cta-band{ padding:54px 0; }
  .products-section .section-title{ margin-bottom:30px; }

  /* headings + text */
  .hero{ padding:110px 0 50px; }
  .hero-title{ font-size:30px; }
  .hero-text{ font-size:16px; }
  .pd-hero{ padding:100px 0 80px; }
  .pd-desc{ font-size:15.5px; line-height:1.75; }
  .pd-hero .tagline{ font-size:16px; }

  /* product detail buttons: full width, centred text */
  .pd-cta-wrap a{ text-align:center; width:100%; }
  .spec-chip{ min-width:0; width:100%; }

  /* trust bar */
  .trust-bar{ padding:20px 0; }
  .trust-bar .trust-item{ font-size:12.5px; gap:8px; }
  .trust-bar .trust-item .ti{ font-size:18px; }

  /* cards */
  .why-bubble{ padding:36px 22px; border-radius:36px; }
  .prod-img-area{ height:190px; }
  .prod-body{ padding:18px 18px 22px; }
  .prod-card:hover{ transform:none; }              /* no big hover jump on phones */
  .feat-card{ padding:16px; }

  /* forms: 16px stops iPhone from zooming in on focus */
  .contact-form-card .form-control-custom{ font-size:16px; }
  .contact-form-card .form-group-custom label{ font-size:16px; }
  .contact-form-card .form-control-custom:focus + label,
  .contact-form-card .form-control-custom:not(:placeholder-shown) + label,
  .contact-form-card .static-label{ font-size:11px; }
  .map-card iframe{ height:240px; }

  /* hero buttons wrap neatly */
  .cta-buttons a, .hero .gradient-btn, .hero .cta-outline-btn{ text-align:center; }
}

/* ---------- 5. Small phones (≤575) ---------- */
@media (max-width:575px){
  .section-title{ font-size:24px; }
  .cta-title{ font-size:26px; }
  .about-hero h1{ font-size:28px; }
  .about-hero{ padding:80px 16px 100px; }
  .hero-title{ font-size:27px; }
  .pd-details .features-title{ font-size:24px !important; }

  .gradient-btn, .btn-outline-fire, .cta-outline-btn{ padding:12px 22px; font-size:14px; }
  .pd-cta-wrap .gradient-btn{ padding:13px 22px; }

  .contact-form-card{ padding:24px 18px; border-radius:20px; }
  .prod-img-area{ height:170px; }
  .prod-img-area img{ height:120px; }
  .cta-band p, .cta-text{ font-size:15px; }
  .products-count{ margin-bottom:20px; }
}

/* ---------- 6. Tiny phones (≤380) ---------- */
@media (max-width:380px){
  .hero-title{ font-size:25px; }
  .section-title{ font-size:22px; }
  .filter-btn{ font-size:12.5px; padding:7px 14px; }
  .trust-bar .trust-item{ font-size:11.5px; }
  .navbar-brand{ font-size:14px; }
}

/* ---------- 7. Touch screens (no hover): show hidden text, drop hover-only layout ---------- */
@media (hover:none){

  /* home page product cards: description normally appears on hover — show it always */
  .product-card{ height:auto; padding:50px 20px 0; }
  .product-content{
    position:relative; height:auto !important; margin:18px -20px 0;
    padding:14px 16px 18px; border-radius:0 0 24px 24px;
  }
  .product-desc{ opacity:1; transform:none; }
  .product-card:hover{ transform:none; }

  .why-bubble:hover, .info-card-modern:hover{ transform:none; }
  .tx-item:hover img{ transform:none; }
}

/* ---------- 8. Landscape phones (very short screens) ---------- */
@media (max-height:520px) and (orientation:landscape){
  .hero{ padding:96px 0 40px; }
  .about-hero{ margin-top:70px; padding:50px 16px 80px; }
  .pd-hero{ padding:90px 0 70px; }
  .navbar-collapse{ max-height:calc(100vh - 70px); }
  .tx-lb-inner img{ max-height:60vh; }
}

/* ---------- 9. Notches / safe areas ---------- */
.tx-lb-close{ top:max(18px, env(safe-area-inset-top)); right:max(18px, env(safe-area-inset-right)); }

/* ---------- 10. Respect "reduce motion" settings ---------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .prod-card, .feat-card, .tx-item, .reveal, .reveal-left, .reveal-right{ opacity:1 !important; transform:none !important; }
}