/*
  responsive.css
  BenQ Bangladesh — Responsive breakpoints

  Breakpoint system (mobile-first content, desktop-first CSS):
    Desktop  : > 1024px   — default styles live in style.css / components.css
    Tablet   : <= 1024px  — nav collapses, grids go from 3 to 2 columns
    Mobile   : <= 768px   — single-column layouts, tighter spacing
    Small    : <= 480px   — phones, smallest type/spacing scale

  All sections that establish the shared 1200px container
  (--container-max / --container-pad, see style.css :root) get
  their side padding scaled down together at each breakpoint so
  the whole site narrows consistently, edge to edge.
*/

/* ======================================================================
   CONTAINER PADDING — scales down together at each breakpoint
====================================================================== */
@media (max-width: 1024px){
  :root{ --container-pad: 24px; }
}

@media (max-width: 768px){
  :root{ --container-pad: 20px; }
}

@media (max-width: 480px){
  :root{ --container-pad: 16px; }
}


/* ======================================================================
   HEADER
====================================================================== */
@media (max-width: 1024px){
  .header-main{ gap: 20px; }
  .primary-nav{ display:none; }
  .burger{ display:flex; }
  .header-phone span{ display:none; }
  .header-phone{ padding:6px; }
  .cta-account span{ display:none; }
  .cta-account{ padding:8px; }
}

@media (max-width: 768px){
  .header-main{ padding-top: 8px; padding-bottom: 8px; gap: 14px; }
  .logo img{ height: 48px; width: 70px; }
  .search-panel-inner{ padding: 14px var(--container-pad); gap: 10px; }
  .search-panel-inner input{ font-size: 15px; }
}

@media (max-width: 480px){
  .header-main{ gap: 10px; }
  .logo img{ height: 40px; width: 58px; }
  .header-phone{ display:none; }
  .search-panel.open{ max-height: 76px; }
  .search-panel-inner{ padding: 12px var(--container-pad); gap: 8px; }
  .search-panel-inner input{ font-size: 14px; }
  .search-panel-close{ width: 28px; height: 28px; font-size: 18px; }
  .mobile-nav{ padding: 8px 16px 16px; }
  .mobile-nav a{ font-size: 14px; padding: 10px 4px; }
}


/* ======================================================================
   HERO
====================================================================== */
@media (max-width: 1024px){
  .hero{ min-height: 72vh; }
}

@media (max-width: 768px){
  .hero{ aspect-ratio: auto; min-height: 56vh; padding: 32px 0; }
}

@media (max-width: 480px){
  .hero{ min-height: 46vh; }
}


/* ======================================================================
   BUSINESS SOLUTIONS
====================================================================== */
@media (max-width: 1024px){
  .solutions{ padding-top: 52px; padding-bottom: 64px; }
  .solutions-grid{ gap: 16px; }
}

@media (max-width: 768px){
  .solutions{ padding-top: 44px; padding-bottom: 52px; }
  .solutions h2{ margin-bottom: 28px; }
  .solutions-grid{ grid-template-columns: 1fr; }
  .sol-card{ min-height: 220px; }
  .sol-card.large{ min-height: 240px; }
}

@media (max-width: 480px){
  .solutions{ padding-top: 36px; padding-bottom: 44px; }
  .sol-card{ min-height: 190px; }
  .sol-card.large{ min-height: 210px; }
  .sol-card .sol-title{ font-size: 14.5px; padding: 0 16px 16px; }
  .sol-card.large .sol-title{ font-size: 16px; padding-right: 16px; }
}


/* ======================================================================
   FIND YOUR BEST PRODUCT — tabs & hero image only.
   (The product grid/carousel itself is styled together with Featured
   Products below, since both sections share identical responsive
   carousel behavior.)
====================================================================== */
@media (max-width: 1024px){
  .product-finder{ padding-bottom: 64px; }
  .pf-tabs{ gap: 28px; }
}

@media (max-width: 768px){
  .product-finder{ padding-bottom: 52px; }
  .product-finder h2{ margin-bottom: 28px; }
  .pf-tabs{ gap: 22px; }
  .pf-tab{ font-size: 13.5px; padding-bottom: 12px; }
  .pf-products{ margin-top: 40px; }
  .pf-products-head{ padding-top: 32px; }
  .pf-products-carousel{ margin-top: 24px; }
}

@media (max-width: 480px){
  .product-finder{ padding-bottom: 44px; }
  .pf-tabs{ gap: 18px; }
  .pf-tab{ font-size: 13px; }
  .pf-products-carousel{ margin-top: 20px; }
}


/* ======================================================================
   "FIND YOUR BEST PRODUCT" CAROUSEL — responsive logic for
   #pfProductsGrid only. Desktop (> 1024px) is untouched: it keeps the
   original CSS-grid layout defined in components.css, with the same
   card count, sizing, spacing, and nav arrows as before.

   Tablet (769px–1024px): 3 cards visible at a time.
   Mobile (<= 768px)    : 2 cards visible at a time.

   Both breakpoints turn the grid into a horizontal flex track with
   scroll-snap, so Prev/Next arrows slide smoothly one set at a time
   without any change to the product card markup, styling, or content.
====================================================================== */
@media (min-width: 769px) and (max-width: 1024px){
  #pfProductsGrid{
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    grid-template-rows: none;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  #pfProductsGrid::-webkit-scrollbar{ display: none; }

  #pfProductsGrid .pf-product-card{
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc((100% - 40px) / 3);
    width: calc((100% - 40px) / 3);
    max-width: calc((100% - 40px) / 3);
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .pf-carousel-btn{ width: 40px; height: 40px; }
  .pf-carousel-btn svg{ width: 17px; height: 17px; }
  .pf-carousel-prev{ left: -22px; }
  .pf-carousel-next{ right: -22px; }

  /* Featured Products has no carousel — plain wrapping grid at every
     size, 2 columns at this breakpoint. */
  .featured-products .featured-products-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px){
  #pfProductsGrid{
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    grid-template-rows: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  #pfProductsGrid::-webkit-scrollbar{ display: none; }

  #pfProductsGrid .pf-product-card{
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc((100% - 14px) / 2);
    width: calc((100% - 14px) / 2);
    max-width: calc((100% - 14px) / 2);
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  #pfProductsGrid .pf-product-actions{
    min-width: 0;
  }

  #pfProductsGrid .pf-btn{
    min-width: 0;
  }

  .pf-carousel-btn{ width: 38px; height: 38px; }
  .pf-carousel-btn svg{ width: 16px; height: 16px; }
  .pf-carousel-prev{ left: -19px; }
  .pf-carousel-next{ right: -19px; }

  /* Featured Products has no carousel — plain wrapping grid at every
     size, 2 columns at this breakpoint (same as #pfProductsGrid's
     card width here, just wrapping to more rows instead of scrolling). */
  .featured-products .featured-products-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .featured-products .pf-product-actions,
  .featured-products .pf-btn{
    min-width: 0;
  }
}

@media (max-width: 480px){
  #pfProductsGrid{ gap: 10px; }

  #pfProductsGrid .pf-product-card{
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc((100% - 10px) / 2);
    width: calc((100% - 10px) / 2);
    max-width: calc((100% - 10px) / 2);
    min-width: 0;
    padding: 16px;
  }

  .featured-products .featured-products-grid{ gap: 10px; }

  .featured-products .pf-product-card{
    padding: 16px;
  }

  /* At 2-cards-per-view widths this narrow, "BUY NOW" + "CONTACT US"
     no longer both fit on one row without clipping — stack them so
     the full button text stays readable, per the mobile requirement
     that buttons remain legible. Card design/colors are unchanged. */
  #pfProductsGrid .pf-product-actions,
  .featured-products .pf-product-actions{
    flex-direction: column;
    align-items: stretch;
  }

  .pf-carousel-btn{ width: 32px; height: 32px; }
  .pf-carousel-btn svg{ width: 15px; height: 15px; }
  .pf-carousel-prev{ left: -16px; }
  .pf-carousel-next{ right: -16px; }
}


/* ======================================================================
   SUCCESS STORY & POPULAR ARTICLES (share .articles-grid)
====================================================================== */
@media (max-width: 1024px){
  .success-story,
  .articles{ padding-top: 52px; padding-bottom: 64px; }
  .articles-grid{ grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 768px){
  .success-story,
  .articles{ padding-top: 44px; padding-bottom: 52px; }
  .success-story h2,
  .articles h2{ margin-bottom: 28px; }
  .articles-grid{ grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 480px){
  .success-story,
  .articles{ padding-top: 36px; padding-bottom: 44px; }
  .article-title{ font-size: 16.5px; }
}


/* ======================================================================
   HELP CTA
====================================================================== */
@media (max-width: 1024px){
  .help-cta{ padding: 60px 0; }
  .help-card{ flex: 1 1 calc(50% - 10px); }
}

@media (max-width: 768px){
  .help-cta{ padding: 48px 0; }
  .help-cta-head{ margin-bottom: 28px; }
  .help-cta p{ max-width: none; }
}

@media (max-width: 480px){
  .help-cta{ padding: 40px 0; }
  .help-card{ flex: 1 1 100%; padding: 24px 18px; }
}


/* ======================================================================
   FOOTER
====================================================================== */
@media (max-width: 1024px){
  .footer-main{ grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
}

@media (max-width: 768px){
  .site-footer{ padding-top: 44px; }
  .footer-main{ grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .footer-bottom{
    margin-top: 32px;
    padding-top: 24px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  .footer-copy{
    white-space: normal;
    text-align: center;
    width: 100%;
  }
}

@media (max-width: 480px){
  .footer-main{ grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom{
    padding-top: 24px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }
  .footer-copy{
    white-space: normal;
    text-align: center;
    width: 100%;
  }
}


/* ======================================================================
   BACK TO TOP
====================================================================== */
@media (max-width: 768px){
  .back-to-top{ right: 20px; bottom: 20px; width: 46px; height: 46px; }
}

@media (max-width: 480px){
  .back-to-top{ right: 16px; bottom: 16px; width: 42px; height: 42px; font-size: 8px; }
}


/* ======================================================================
   BREADCRUMB (shared: product & category pages)
====================================================================== */
@media (max-width: 480px){
  .pd-breadcrumb{ font-size: 12px; padding-top: 16px; }
}


/* ======================================================================
   INTERIOR PAGES (about / services / portfolio / contact / other-pages)
====================================================================== */
@media (max-width: 768px){
  .page-hero{ padding-top: 48px; padding-bottom: 48px; }
  .page-section{ padding-top: 36px; padding-bottom: 36px; }
}

@media (max-width: 480px){
  .page-hero{ padding-top: 40px; padding-bottom: 40px; }
  .page-hero-inner p{ font-size: 15.5px; }
  .page-section{ padding-top: 28px; padding-bottom: 28px; }
  .page-section-inner h2{ font-size: 20px; }
  .page-section-inner p{ font-size: 15px; }
}

/* ======================================================================
   PORTABLE PROJECTORS PROMO
====================================================================== */
@media (max-width: 768px){
  .portable-promo{ padding: 44px var(--container-pad) 56px; }
  .portable-promo-title{ margin-bottom: 22px; }
  .portable-promo-btn{ padding: 11px 32px; margin-bottom: 30px; }
}

@media (max-width: 480px){
  .portable-promo{ padding: 36px var(--container-pad) 44px; }
  .portable-promo-btn{ width: 100%; }
}

/* ======================================================================
   SHOPPING ADVANTAGES
====================================================================== */
@media (max-width: 900px){
  .advantages-grid{
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }
}

@media (max-width: 480px){
  .shopping-advantages{ padding: 0 var(--container-pad) 56px; }
  .shopping-advantages h2{ margin-bottom: 34px; }
  .advantages-grid{
    grid-template-columns: 1fr;
    row-gap: 36px;
  }
  .advantage-icon{ width: 96px; height: 96px; }
}