/* ======================================================
   STYLES.CSS — Ultra Responsive Consolidation (Vitronet)
   Place AFTER styles.css to ensure max compatibility.
   ====================================================== */

/* Safety */
*,*::before,*::after{ box-sizing:border-box }
html,body{ max-width:100%; overflow-x:hidden }
img,video{ max-width:100%; height:auto; display:block }

/* Fluid headings */
.hero h1, .section .h2, .faq-title{
  font-size: clamp(1.4rem, 4.8vw, 2.2rem);
  line-height:1.16;
}

/* Containers on huge screens */
@media (min-width:1400px){ .container{ max-width: 1200px } }
@media (min-width:1680px){ .container{ max-width: 1300px } }

/* Hero image ratio sanity on phones */
.hero-card{ aspect-ratio: auto; }
@media (max-width: 520px){
  .hero-card{ aspect-ratio: 4/3 }
}

/* Benefits grid wraps */
.benefits-grid{ grid-template-columns: 1fr }
@media (min-width: 720px){ .benefits-grid{ grid-template-columns: repeat(3,1fr) } }

/* Booking wrapper full-width on mobile */
@media (max-width: 640px){
  .section-booking .container{ padding-left: 12px; padding-right: 12px }
  #booking-root{ width:100vw; max-width:100vw; margin-left: calc(50% - 50vw) }
  #booking-root .wrap{ border-radius: 14px; padding: 14px }
}

/* Slot rows: wrap, no horizontal scroll */
#booking-root .slot-row, .slot-row{
  display:flex; flex-wrap:wrap; gap:8px; overflow:visible !important; scroll-snap-type:none !important;
}

/* Footer grid responsive */
.f-grid{ grid-template-columns: 1fr; gap: 14px }
@media (min-width: 900px){ .f-grid{ grid-template-columns: 1.2fr 1fr 1fr } }

/* iOS fixes */
html { height: -webkit-fill-available; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; min-height: -webkit-fill-available; }
input, select, textarea { font-size: 16px; -webkit-appearance: none; }
button, .btn { -webkit-appearance: none; }