/*
  product_gallery/related-products.css
  BenQ Bangladesh — "Related Products" section (RE8605A page)

  Styling for the Related Products cards in
  pages/product_gallery/Interactive-Displays-RE8605A.html. Those cards
  are plain static HTML (not built by JS) — this file is kept separate
  from product_gallery/product.css so this section can be restyled
  without touching the main product page's stylesheet.

  Depends on the design tokens in css/style.css (--container-max,
  --container-pad, --font-display, --ink, etc.) and the
  .pf-product-card / .pf-btn component styles in css/components.css,
  which the cards in this section reuse.
*/

.pd-related{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad) 64px;
}

.pd-related h2{
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--ink);
  margin: 0 0 24px;
}

.pd-related-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* ======================================================================
   RESPONSIVE
   Desktop (default, >1024px): 4-up — unchanged.
   Tablet (769px–1024px): 3-up side by side.
   Mobile (≤768px): 2-up side by side.
====================================================================== */
@media (min-width: 769px) and (max-width: 1024px){
  .pd-related-grid{ grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .pd-related-grid .pf-product-card{ padding: 16px; }
}

@media (max-width: 768px){
  .pd-related-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* Two-up cards are narrow, so trim padding/spacing and stack the
     Buy Now / Contact Us buttons instead of squeezing them side by
     side — scoped to this grid only, other card grids are untouched. */
  .pd-related-grid .pf-product-card{ padding: 12px; }
  .pd-related-grid .pf-product-thumb{ margin-bottom: 12px; }
  .pd-related-grid .pf-product-tag{ font-size: 11px; margin-bottom: 4px; }
  .pd-related-grid .pf-product-name{ font-size: 13px; line-height: 1.35; margin-bottom: 6px; }
  .pd-related-grid .pf-product-price-row{ margin-bottom: 10px; }
  .pd-related-grid .pf-product-price{ font-size: 13px; }
  .pd-related-grid .pf-product-actions{ flex-direction: column; gap: 6px; }
  .pd-related-grid .pf-btn{ width: 100%; padding: 9px 10px; font-size: 11.5px; }
}

@media (max-width: 480px){
  .pd-related{ padding-bottom: 48px; }
}