/* ==========================================================================
   Global responsive tweaks (component-level responsive rules live inline
   with their component in components.css / layout.css)
   ========================================================================== */

@media (max-width: 1200px) {
  :root { --container-pad: 32px; }
}

@media (max-width: 768px) {
  .hero-content { padding-bottom: 70px; }
  .hero-content .container { justify-content: center; text-align: center; }
  .hero-ctas { justify-content: center; }
  .page-banner { padding: 150px 0 70px; }
  section { padding: 64px 0; }

  /* Header CTA is hidden and the mobile sticky bar already offers "Book
     Your Stay" — the hero itself only needs its "View Our Rooms" action. */
  .hero .hero-ctas .btn-primary { display: none; }
}

@media (max-width: 480px) {
  .btn { padding: 14px 22px; font-size: 0.75rem; }
  .tea-feature .copy { padding: 32px 22px; }
}