/* ==========================================================================
   APM Bricks and Pavers — Responsive layer (mobile-first)
   Base styles target small phones (360px). These queries progressively
   enhance the layout for larger screens.
   ========================================================================== */

/* ≤ 380px — very small phones */
@media (max-width: 380px) {
  :root {
    --gutter: 14px;
  }

  .brand__apm { font-size: 1.35rem; }
  .brand__sub { font-size: 0.56rem; letter-spacing: 0.14em; }
  .brand__emblem { width: 38px; height: 38px; }
  .header-actions .icon-btn--wa { display: none; }
  .btn { padding-inline: 1.15rem; }
  .p-card__actions { grid-template-columns: 1fr; }
  .hero__badge { width: 96px; height: 96px; }
  .hero__badge img { width: 38px; height: 38px; }
}

/* ≥ 560px — large phones */
@media (min-width: 560px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .masonry { columns: 2; }
  .mini-gallery { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); }
  .guide-grid { grid-template-columns: repeat(2, 1fr); }
  .patterns { grid-template-columns: repeat(4, 1fr); }
  .form-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .form-grid .span-2 { grid-column: 1 / -1; }
  .form-actions { grid-template-columns: 1fr 1fr; }
  .pd__cta { grid-template-columns: 1fr 1fr; }
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .values { grid-template-columns: repeat(2, 1fr); }
}

/* ≥ 768px — tablets */
@media (min-width: 768px) {
  :root {
    --gutter: 28px;
  }

  .header-actions .btn--quote { display: inline-flex; }
  .section-head--split { grid-template-columns: 1.2fr 1fr; }
  .split { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .split--reverse .split__media { order: 2; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .modal__grid { grid-template-columns: 1.1fr 1fr; }
  .modal__body { padding: 2.4rem 2rem 2rem 1rem; }
  .app-block { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .app-block:nth-child(even) .app-block__media { order: 2; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-grid > :last-child { grid-column: 1 / -1; }
  .lb-nav--prev { left: -8px; }
  .lb-nav--next { right: -8px; }
  .bento__item { min-height: 300px; }
}

/* ≥ 1024px — laptops */
@media (min-width: 1024px) {
  .menu-toggle { display: none; }
  .mobile-nav { display: none; }
  .nav { display: block; }
  .header-actions .icon-btn--call { display: none; }

  .hero__grid { grid-template-columns: 1.15fr 1fr; gap: 3rem; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .product-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .masonry { columns: 3; }
  .mini-gallery { grid-template-columns: repeat(4, 1fr); }
  .mini-gallery { grid-auto-rows: 220px; }
  .mini-gallery .g-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .features { grid-template-columns: repeat(3, 1fr); }
  .features--5 .feature:nth-child(4) { grid-column: 1 / 2; }
  .guide-grid { grid-template-columns: repeat(3, 1fr); }

  /* Bento — asymmetric editorial grid */
  .bento {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 240px;
  }
  .bento__item { min-height: 0; }
  .bento__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .bento__item:nth-child(2) { grid-column: span 2; }
  .bento__item:nth-child(3) { grid-column: span 1; }
  .bento__item:nth-child(4) { grid-column: span 1; }
  .bento__item:nth-child(5) { grid-column: span 2; }
  .bento__item:nth-child(6) { grid-column: span 2; }

  .toolbar { grid-template-columns: 1fr 320px; align-items: center; }
  .pd { grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: start; }
  .pd__media { position: sticky; top: calc(var(--header-h) + 20px); }
  .contact-grid { grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items: start; }
  .contact-cards { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.4fr; }
  .footer-grid > :last-child { grid-column: auto; }
  .values { grid-template-columns: repeat(2, 1fr); }
  .cta { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 2rem; }
  .cta .btn-row { flex-direction: column; align-items: stretch; width: min(100%, 300px); margin-left: auto; }
  .cta p { margin-bottom: 0; }
}

/* ≥ 1180px — compact nav gets more breathing room */
@media (min-width: 1180px) {
  .nav__link { padding-inline: 0.95rem; }
}

/* 1024–1179px — tighten nav so everything fits */
@media (min-width: 1024px) and (max-width: 1179px) {
  .nav__link { padding-inline: 0.55rem; font-size: 0.85rem; }
  .brand__sub { display: none; }
  .header-actions .btn--quote { padding-inline: 1rem; }
}

/* ≥ 1440px — wide desktops */
@media (min-width: 1440px) {
  :root { --container: 1320px; }
  .masonry { columns: 4; }
}

/* Short landscape phones: keep hero compact */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; }
  .hero__stack { display: none; }
}

/* Touch devices — no hover-only affordances */
@media (hover: none) {
  .p-card__zoom { opacity: 1; transform: none; }
  .g-item__cap { opacity: 1; transform: none; }
}

/* Print */
@media print {
  .site-header, .wa-float, .to-top, .mobile-nav, .marquee, .site-footer { display: none !important; }
  .page-hero, .hero { padding-top: 2rem; min-height: auto; }
}

/* Two-up bento variant (About page) */
@media (min-width: 1024px) {
  .bento--two { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .bento--two .bento__item { grid-column: auto !important; grid-row: auto !important; }
}

/* Values list sits inside a two-column split: keep it single-column until there is room */
.split .values { grid-template-columns: 1fr; }
.values > * { min-width: 0; }
@media (min-width: 1180px) {
  .split .values { grid-template-columns: repeat(2, 1fr); }
}

/* Contact form has a single WhatsApp submit button */
.form-actions--single { grid-template-columns: 1fr !important; }