/* =========================================================
   RESPONSIVE REFINEMENTS
   Core layout already adapts via CSS Grid/clamp() in style.css.
   This file layers on the specific breakpoint polish requested:
   360 / 390 / 430 / 768 / 1024.
   ========================================================= */

/* ---------- 1024px : tighten section rhythm on small laptops/tablets landscape ---------- */
@media (max-width: 1024px) {
  :root { --section-pad: clamp(48px, 7vw, 88px); }
  .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .vp-hero__grid { gap: 36px; }
}

/* ---------- 768px : tablet portrait ---------- */
@media (max-width: 768px) {
  .wrap { padding: 0 22px; }
  h2.section-title { max-width: 100%; }
  .project-card__body { padding: 26px; }
  .detail-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .gallery-item--big { grid-column: span 2; grid-row: span 2; }
  .footer-top { padding-top: 56px; }
  .page-hero { min-height: 380px; padding: 84px 0 60px; }
}

/* ---------- 430px : large phones ---------- */
@media (max-width: 430px) {
  .site-header__logo img { width: 118px; }
  .site-header.is-scrolled .site-header__logo img { width: 98px; }
  .page-hero { padding: 76px 0 52px; min-height: 340px; }
  .hero-slide__actions { flex-direction: column; }
  .hero-slide__actions .btn { width: 100%; }
  .vp-hero__logo-plate img { width: 108px; }
  .cta-band { flex-direction: column; align-items: flex-start; text-align: left; }
  .cta-band__actions { width: 100%; }
  .cta-band__actions .btn { flex: 1; justify-content: center; }
}

/* ---------- 390px : standard phones ---------- */
@media (max-width: 390px) {
  .section { padding: 48px 0; }
  h2.section-title { font-size: 26px; }
  .value-card { padding: 24px 20px; }
  .contact-quick .btn, .footer-bottom { font-size: 13px; }
  .detail-grid { grid-template-columns: 1fr; }
}

/* ---------- 360px : smallest supported width ---------- */
@media (max-width: 360px) {
  .wrap { padding: 0 16px; }
  .site-header__logo img { width: 104px; }
  .hero-count { display: none; }
  .btn { padding: 12px 20px; font-size: 13.5px; }
}

/* ---------- Landscape phones : cap the hero so it never dominates the screen ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { height: 100vh; min-height: 380px; }
}