/* responsive.css — every SHARED @media rule (design-system.md §0/§1/§5/§7). Loaded last so these overrides
   beat the base rules in main.css. Header/footer carry their own @media blocks (header.css / footer.css).
   Breakpoints: 1366 laptop · 1200 tablet-wide · 1024 tablet · 880 mobile-wide · 767 mobile · 768 min-width guard. */

/* ---------- §1 token overrides ---------- */
@media (max-width: 1366px) { :root { --container-pad: 30px; --space-section: 40px; } }
@media (max-width: 1024px) { :root { --header-h: 85px; --space-section-gap: 40px; } }
@media (max-width: 880px)  { :root { --header-h: 82px; --space-section: 20px; } }
@media (max-width: 767px)  { :root { --container-pad: 20px; --space-section: 30px; --space-section-gap: 30px; } }

/* ---------- §5.0 responsive type ---------- */
@media (max-width:1200px){ body{font-size:16px} .text-intro{font-size:16px} .t-cta{font-size:40px} .t-panel{font-size:30px} }
@media (max-width:880px){ h2,.t-section{font-size:30px} .t-panel{font-size:24px} }
@media (min-width:768px) and (max-width:1024px){ .t-tagline{line-height:68px} }   /* guarded: must not beat the ≤767 rule below */
@media (max-width:767px){ body{font-size:16px;line-height:26px} h1,.t-display{font-size:36px} .t-cta{font-size:30px}
  .t-panel{font-size:30px} h3,.t-card{font-size:36px} .text-lg{font-size:18px} .text-intro{line-height:26px}
  .t-tagline{font-size:28px;line-height:1.2} }

/* ---------- §5.1 layout ---------- */
@media (max-width:767px){ .row{flex-direction:column;gap:20px} }

/* ---------- §5.2 buttons ---------- */
@media (max-width:1200px){ .btn{padding:15px 18px 12px} .btn-submit{padding:14px 42px} }
@media (max-width:767px){ .btn{padding:12px 18px} .btn-submit{padding:14px 42px} }
@media (prefers-reduced-motion:reduce){ .btn,.btn-primary:hover{transition:none;transform:none} }

/* ---------- §5.6 cards ---------- */
@media (max-width:767px){ .card{padding:10px} .card__title{font-size:36px} }

/* ---------- §5.7 page-title band ---------- */
@media (max-width:767px){ .page-title{padding:10px} }

/* ---------- §5.8 celebration ---------- */
@media (max-width:1366px){ .celebration__inner{padding:0} }
@media (max-width:767px){ .celebration h2{margin-bottom:40px} .celebration p{margin-bottom:36px} }   /* the original keeps min-height 900px here too */

/* ---------- §5.9 forms ---------- */
@media (max-width:768px){ .form-card{padding:25px} }             /* Contact; Booking page CSS: .booking-card .form-card{padding:30px 20px} */

/* ---------- §7 reduced motion (global) ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}