/* ============================================================
   GLOBAL RESPONSIVE SYSTEM
   Breakpoints: >=1440 desktop-xl · 1024-1439 laptop ·
   768-1023 tablet · 481-767 mobile-l · <=480 mobile-s
   ============================================================ */

.hide-mobile{ display:initial; }
.show-mobile{ display:none; }
.hide-tablet{ display:initial; }
.show-tablet{ display:none; }

img,video{ max-width:100%; height:auto; }
table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---- Laptop / small desktop ---- */
@media (max-width:1439px){
  :root{ --container:1140px; }
}

/* ---- Tablet (portrait iPad, 768–1023) ---- */
@media (max-width:1023px){
  :root{ --nav-h:74px; --sp-9:4.5rem; --sp-8:3.4rem; }
  .hide-tablet{ display:none !important; }
  .show-tablet{ display:initial !important; }
  section{ padding-block:var(--sp-8); }
  .container{ padding-inline:var(--sp-5); }
}

/* ---- Large mobile / small tablet ---- */
@media (max-width:767px){
  :root{ --sp-9:3.4rem; --sp-8:2.6rem; --sp-7:2.2rem; }
}

/* ---- Mobile ---- */
@media (max-width:640px){
  .hide-mobile{ display:none !important; }
  .show-mobile{ display:initial !important; }
  section{ padding-block:var(--sp-7); }
  :root{ --nav-h:68px; }
  .container{ padding-inline:var(--sp-4); }
}

/* ---- Small mobile ---- */
@media (max-width:400px){
  html{ font-size:15px; }
  :root{ --sp-9:2.6rem; --sp-8:2.1rem; }
  .container{ padding-inline:var(--sp-3); }
}

/* ---- Landscape phones (short viewport height) ---- */
@media (max-height:480px) and (max-width:900px) and (orientation:landscape){
  :root{ --nav-h:56px; }
  .hero,.page-hero{ min-height:auto !important; padding-top:calc(var(--nav-h) + var(--sp-5)) !important; }
}