/* FILE: assets/css/responsive.css */
/* ============================================================
   Energiephase · Responsive
   Central media queries. Mobile-first base lives in the section
   files; this file handles cross-cutting adjustments and the
   required breakpoints: 320 / 375 / 430 / 768 / 1024 / 1280 /
   1440+ / 1920+. Load this LAST.
   ============================================================ */

/* ---------- Ultra-wide (1920px+) ---------- */
@media (min-width:1920px){
  :root{--ep-container:1320px;--ep-container-wide:1520px}
  body{font-size:1.06rem}
}

/* ---------- Large desktop (1440–1919) ---------- */
@media (min-width:1440px) and (max-width:1919px){
  :root{--ep-container:1280px}
}

/* ---------- Desktop (1280) baseline is default ---------- */

/* ---------- Small laptop (1024–1279) ---------- */
@media (max-width:1279px){
  :root{--ep-section-y:clamp(4rem,8vw,6.5rem)}
}

/* ---------- Tablet (768–1023) ---------- */
@media (max-width:1023px){
  .hero__title{font-size:clamp(2.6rem,7vw,4rem)}
}

/* ---------- Large phones (430–767) ---------- */
@media (max-width:767px){
  :root{
    --ep-container-pad:1.25rem;
    --ep-section-y:clamp(3.2rem,10vw,4.5rem);
  }
  .ep-section__head{margin-bottom:var(--ep-space-6)}
  /* Stack any two-column blocks safely */
  .hero__actions .ep-btn{flex:1 1 auto;min-width:0}
}

/* ---------- iPhone (375–429) ---------- */
@media (max-width:429px){
  .ep-btn{--_pad-x:1.4rem}
  .hero__badges{gap:var(--ep-space-2) var(--ep-space-4)}
  .stat__num{font-size:clamp(2rem,9vw,2.6rem)}
}

/* ---------- Small phones (320–374) ---------- */
@media (max-width:374px){
  :root{--ep-container-pad:1rem}
  .hero__title{font-size:2.3rem}
  .ep-btn{font-size:.95rem}
  .service-card,.why-card,.review-card{padding:1.3rem}
}

/* ---------- Safety: prevent horizontal overflow everywhere ---------- */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video{max-width:100%}

/* Touch targets ≥ 44px on coarse pointers */
@media (pointer:coarse){
  .ep-nav__link,.footer__col a,.service-card__link{min-height:44px;display:inline-flex;align-items:center}
}

/* Landscape phones: reduce vertical padding */
@media (max-height:520px) and (orientation:landscape){
  :root{--ep-section-y:3rem}
}