/* ============================================================
   RESPONSIVE — Mobile-first breakpoints
   ALL @media queries live here. Other CSS files have zero.

   Breakpoints:
   xs  <480px   — mobile small  (base, no query needed)
   sm  480px+   — mobile large
   md  768px+   — tablet portrait
   lg  900px+   — tablet landscape / small laptop
   xl  1200px+  — desktop
   ============================================================ */

/* ============================================================
   SM — 480px+
   ============================================================ */
@media (min-width: 480px) {

  /* Hero actions — row on larger phones */
  .bnf-hero__actions {
    flex-direction: row;
  }

  /* Service grid — 2 columns */
  .bnf-service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* ============================================================
   MD — 768px+
   ============================================================ */
@media (min-width: 768px) {

  /* Section gap increase */
  :root {
    --section-gap: 80px;
  }

  /* Hero — switch to 2-column */
  .bnf-hero {
    padding: 96px 24px;
    min-height: 70vh;
  }

  .bnf-hero__inner {
    flex-direction: row;
    align-items: center;
    gap: 56px;
  }

  .bnf-hero__content {
    flex: 1;
  }

  .bnf-hero__img {
    flex: 1;
    justify-content: flex-end;
  }

  .bnf-hero__sub {
    font-size: 20px;
  }

  /* Trust bar — 3 columns */
  .bnf-trust-bar__inner {
    flex-direction: row;
    gap: 40px;
  }

  .bnf-trust-item {
    flex: 1;
  }

  /* Product grid — 2 columns */
  .bnf-product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  /* Product detail — 2-column */
  .bnf-product-detail {
    flex-direction: row;
    align-items: start;
    gap: 56px;
    padding: 56px 24px;
  }

  .bnf-product-detail__gallery {
    flex: 1;
    padding: 32px;
  }

  .bnf-product-detail__info {
    flex: 1;
  }

  /* About snippet — side by side */
  .bnf-about-snippet {
    flex-direction: row;
    gap: 64px;
    align-items: center;
  }

  .bnf-about-snippet__img {
    width: auto;
    flex: 1;
  }

  /* Footer widget — 2 columns */
  .ast-footer-widget-area .ast-footer-widget-2,
  .footer-widget-area {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

}

/* ============================================================
   LG — 900px+
   ============================================================ */
@media (min-width: 900px) {

  /* Section gap — desktop */
  :root {
    --section-gap: 96px;
  }

  /* Hero — full height */
  .bnf-hero {
    padding: 120px 24px;
    min-height: 80vh;
  }

  .bnf-hero__inner {
    gap: 80px;
  }

  /* Product grid — 3 columns */
  .bnf-product-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Service grid — 3 columns */
  .bnf-service-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Footer — 4 columns */
  .ast-footer-widget-area .ast-footer-widget-2,
  .footer-widget-area {
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
  }

}

/* ============================================================
   XL — 1200px+
   ============================================================ */
@media (min-width: 1200px) {

  /* Hero — wider gap and larger image */
  .bnf-hero__inner {
    gap: 96px;
  }

  /* Section inner max-width already handled by --max-width */

  /* Product detail — more breathing room */
  .bnf-product-detail {
    gap: 80px;
    padding: 72px 24px;
  }

}

/* ============================================================
   PRINT
   ============================================================ */
@media print {

  .site-header,
  .bnf-cta,
  .bnf-hero__img,
  .site-footer {
    display: none;
  }

  body {
    font-size: 12pt;
    color: #000;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

}