/* KITWEB shared mobile + motion polish for template demos */
:root {
  --kitweb-touch: 44px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

img,
video {
  max-width: 100%;
  height: auto;
}

.btn,
button.btn,
a.btn,
.nav-cta,
.menu-toggle,
[data-menu-toggle] {
  min-height: var(--kitweb-touch);
}

@media (max-width: 720px) {
  /* Demo bar: don't steal sticky viewport with header */
  .demo-bar {
    position: relative !important;
    top: auto !important;
    flex-wrap: wrap;
    gap: 0.45rem 0.65rem;
    padding: 0.5rem 0.85rem;
  }

  .demo-bar__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .demo-bar a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  /* Hero: keep CTA in first view */
  .hero {
    min-height: auto !important;
    min-height: min(78vh, 640px) !important;
  }

  .hero__inner,
  .hero-copy,
  .hero__content {
    padding-top: 3.25rem !important;
    padding-bottom: 2.25rem !important;
  }

  /* Soften heavy dark overlays so photos read on small screens */
  .hero__media::after,
  .hero-shade,
  .hero::before {
    opacity: 0.85;
  }

  .btn-row {
    gap: 0.65rem;
  }

  .btn-row .btn {
    flex: 1 1 auto;
  }

  /* Forms: prevent iOS zoom */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Common grids collapse safely if a demo missed a breakpoint */
  .rooms,
  .packages,
  .catalog,
  .svc-grid,
  .usp-grid,
  .process,
  .quotes,
  .book-split,
  .stay-split,
  .feature-split,
  .nearby-grid,
  .pkg-row,
  .xp-grid,
  .amenity-grid,
  .occ-grid,
  .proof-stats {
    grid-template-columns: 1fr !important;
  }
}

/* Reveal fallback if page markup uses .reveal but missed CSS */
.reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__media img,
  .hero img {
    animation: none !important;
    transform: none !important;
  }
}