/**
 * FASCO Pakistan - Responsive Design
 * Mobile-first refinements for desktop, tablet and phone layouts.
 */

/* --------------------------------------------------------------------------
   Large desktop
   -------------------------------------------------------------------------- */
@media (max-width: 1440px) {
  .fasco-hero__title { font-size: clamp(2.75rem, 4vw, 3.5rem); }
}

@media (max-width: 1280px) {
  .fasco-container { max-width: 1180px; }
  .fasco-nav__list { gap: 14px; }
  .fasco-nav__list > li > a { font-size: 0.84rem; }
  .fasco-header-actions { gap: 10px; }
  .fasco-hero__grid { gap: 32px; }
  .fasco-hero__composition { max-width: 520px; }
  .fasco-section { padding-top: 78px; padding-bottom: 78px; }
}

/* --------------------------------------------------------------------------
   Tablet / compact desktop
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .fasco-container { padding-left: 24px; padding-right: 24px; }

  .fasco-nav-desktop,
  .fasco-header__shop-now-btn { display: none; }

  .fasco-mobile-toggle { display: flex; }

  .fasco-header__inner { min-height: 72px; height: 72px; }
  .fasco-header-actions { gap: 9px; }
  .fasco-action-btn { width: 40px; height: 40px; }

  .fasco-hero {
    min-height: auto;
    padding: 58px 0 68px;
  }

  .fasco-hero__grid {
    grid-template-columns: 1fr;
    gap: 22px;
    text-align: center;
  }

  .fasco-hero__content {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .fasco-hero__actions { justify-content: center; }
  .fasco-hero__stats { justify-content: center; }

  .fasco-hero__composition-wrap {
    width: 100%;
    min-height: 440px;
  }

  .fasco-hero__composition {
    width: min(100%, 500px);
    height: 440px;
    margin-inline: auto;
  }

  .fasco-category-grid,
  .fasco-why-grid,
  .fasco-industries-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .fasco-products-grid,
  .fasco-products-grid--catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .fasco-shop-layout { grid-template-columns: 1fr; }
  .fasco-shop-sidebar { order: 2; }
  .fasco-single-product-layout { grid-template-columns: 1fr; gap: 36px; }
  .fasco-cart-collaterals,
  .fasco-checkout-grid { grid-template-columns: 1fr; }

  .fasco-trust-bar__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .fasco-trust-bar__divider { display: none; }

  .fasco-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px;
  }
}

/* --------------------------------------------------------------------------
   Tablet portrait / large phones
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .fasco-container { padding-left: 20px; padding-right: 20px; }

  .fasco-top-bar { display: none; }

  .fasco-header__inner { height: 74px; min-height: 74px; }
  .fasco-brand__logo,
  .fasco-brand-wrap img,
  .custom-logo { max-height: 52px; width: auto; }
  .fasco-header.fasco-header--scrolled .fasco-header__inner { height: 64px; }
  .fasco-header.fasco-header--scrolled .fasco-brand__logo,
  .fasco-header.fasco-header--scrolled .fasco-brand-wrap img,
  .fasco-header.fasco-header--scrolled .custom-logo { max-height: 44px; }

  .fasco-account-btn { display: none; }

  .fasco-hero {
    padding: 44px 0 54px;
  }

  .fasco-hero__label { margin-bottom: 18px; }
  .fasco-hero__title {
    font-size: clamp(2rem, 7vw, 2.75rem);
    line-height: 1.08;
    margin-bottom: 16px;
  }
  .fasco-hero__desc {
    max-width: 620px;
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 26px;
  }

  .fasco-hero__actions {
    gap: 10px;
    margin-bottom: 30px;
  }

  .fasco-hero__stats { gap: 18px; padding-top: 20px; }
  .fasco-hero__stat-num { font-size: 1.55rem; }
  .fasco-hero__stat-label { font-size: 0.68rem; }

  .fasco-hero__composition-wrap {
    min-height: 390px;
    margin-top: 2px;
  }

  .fasco-hero__composition {
    width: min(100%, 390px);
    height: 390px;
  }

  /* Fluid equipment sizing prevents clipping on 360-768px devices. */
  .fasco-comp-item--extinguisher { width: clamp(125px, 25vw, 170px); }
  .fasco-comp-item--helmet { width: clamp(95px, 20vw, 140px); }
  .fasco-comp-item--vest { width: clamp(105px, 21vw, 145px); }
  .fasco-comp-item--firstaid { width: clamp(90px, 18vw, 125px); }
  .fasco-comp-item--flashlight { width: clamp(78px, 16vw, 115px); }
  .fasco-comp-item--detector { width: clamp(64px, 14vw, 96px); }
  .fasco-comp-item--alarm { width: clamp(66px, 14vw, 100px); }
  .fasco-comp-item--gloves { width: clamp(72px, 15vw, 105px); }

  .fasco-floating-pill { padding: 8px 12px; gap: 8px; }
  .fasco-floating-pill__icon { width: 28px; height: 28px; font-size: 13px; }
  .fasco-floating-pill__text strong { font-size: 0.72rem; }
  .fasco-floating-pill__text span { font-size: 0.62rem; }

  .fasco-section { padding: 58px 0; }
  .fasco-section-header { margin-bottom: 34px; }
  .fasco-section-title { font-size: clamp(1.8rem, 6vw, 2.25rem); }
  .fasco-section-desc { font-size: 0.96rem; }

  .fasco-category-card { min-height: 340px; }

  .fasco-trust-bar { padding: 22px 0; }
  .fasco-trust-bar__grid { grid-template-columns: 1fr; gap: 14px; }
  .fasco-trust-bar__item { justify-content: center; text-align: left; }

  .fasco-footer__grid { grid-template-columns: 1fr; gap: 30px; }

  .fasco-search-modal__container { margin-top: 24px; padding: 0 14px; }
}

/* --------------------------------------------------------------------------
   Phones
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .fasco-container { padding-left: 16px; padding-right: 16px; }

  .fasco-brand__logo,
  .fasco-brand-wrap img,
  .custom-logo { max-width: 170px; max-height: 48px; height: auto; }
  .fasco-header-actions { gap: 7px; }
  .fasco-action-btn,
  .fasco-mobile-toggle { width: 38px; height: 38px; }

  .fasco-hero {
    padding: 34px 0 44px;
  }

  .fasco-hero__label { padding: 5px 11px; }
  .fasco-hero__label-text { font-size: 0.68rem; letter-spacing: 0.06em; }
  .fasco-hero__title { font-size: clamp(1.9rem, 9vw, 2.35rem); }
  .fasco-hero__desc { font-size: 0.94rem; }

  .fasco-hero__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .fasco-hero__actions .fasco-btn {
    width: 100%;
    min-height: 48px;
  }

  .fasco-hero__stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .fasco-hero__stat-divider { display: none; }
  .fasco-hero__stat-num { font-size: 1.25rem; }
  .fasco-hero__stat-label { font-size: 0.58rem; line-height: 1.3; }

  .fasco-hero__composition-wrap {
    min-height: 88vw;
    max-height: 370px;
  }

  .fasco-hero__composition {
    width: min(100%, 370px);
    height: min(88vw, 370px);
    min-height: 300px;
  }

  /* Keep decorative pills from competing with the product composition. */
  .fasco-floating-pill { display: none; }

  .fasco-category-grid,
  .fasco-why-grid,
  .fasco-industries-grid,
  .fasco-products-grid,
  .fasco-products-grid--catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .fasco-category-card {
    min-height: 300px;
    padding: 22px 16px;
    border-radius: 12px;
  }

  .fasco-category-card__visual { height: 120px; margin: 12px 0; }
  .fasco-category-card__img { max-height: 105px; }
  .fasco-category-card__badge { top: 12px; left: 12px; font-size: 0.58rem; }
  .fasco-category-card__title { font-size: 0.95rem; }
  .fasco-category-card__desc { font-size: 0.76rem; }

  .fasco-product-card { min-width: 0; }
  .fasco-product-card__actions { gap: 6px; }
  .fasco-product-card__actions .fasco-btn,
  .fasco-product-card__actions a { font-size: 0.65rem; padding: 9px 6px; }

  .fasco-cta-section { padding: 58px 0; }
  .fasco-cta-box__heading { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .fasco-cta-box__desc { font-size: 0.95rem; }
  .fasco-cta-box__actions { flex-direction: column; align-items: stretch; }
  .fasco-cta-box__actions .fasco-btn { width: 100%; }

  .fasco-back-to-top { right: 16px; bottom: 82px; }
  .fasco-floating-speed-dial { right: 16px; bottom: 18px; }
}

/* --------------------------------------------------------------------------
   Very small phones
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .fasco-brand__logo,
  .fasco-brand-wrap img,
  .custom-logo { max-width: 145px; max-height: 42px; height: auto; }
  .fasco-action-btn,
  .fasco-mobile-toggle { width: 36px; height: 36px; }
  .fasco-header-actions { gap: 5px; }

  .fasco-hero__composition-wrap { min-height: 78vw; }
  .fasco-hero__composition {
    width: 100%;
    height: 78vw;
    min-height: 270px;
    max-height: 330px;
  }

  .fasco-comp-item--extinguisher { width: clamp(100px, 31vw, 125px); }
  .fasco-comp-item--helmet { width: clamp(78px, 23vw, 100px); }
  .fasco-comp-item--vest { width: clamp(82px, 25vw, 108px); }
  .fasco-comp-item--firstaid { width: clamp(70px, 21vw, 88px); }
  .fasco-comp-item--flashlight { width: clamp(60px, 18vw, 78px); }
  .fasco-comp-item--detector { width: clamp(52px, 15vw, 66px); }
  .fasco-comp-item--alarm { width: clamp(52px, 16vw, 70px); }
  .fasco-comp-item--gloves { width: clamp(58px, 17vw, 76px); }

  .fasco-category-grid,
  .fasco-why-grid,
  .fasco-industries-grid,
  .fasco-products-grid,
  .fasco-products-grid--catalog { grid-template-columns: 1fr; }

  .fasco-hero__stats { grid-template-columns: 1fr; gap: 10px; }
  .fasco-hero__stat-item { align-items: center; }

  .fasco-section { padding: 48px 0; }
  .fasco-section-header { margin-bottom: 28px; }
  .fasco-section-badge { font-size: 0.68rem; }
  .fasco-section-title { font-size: 1.75rem; }
}

/* --------------------------------------------------------------------------
   Accessibility / motion
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  .fasco-comp-item:hover,
  .fasco-category-card:hover,
  .fasco-product-card:hover,
  .fasco-industry-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .fasco-comp-item,
  .fasco-floating-pill,
  .fasco-composition__halo,
  .fasco-pulse-dot { animation: none !important; }

  .fasco-hero__canvas { display: none !important; }
}