/* ============================================================
   Rooftop / Igloo — mobile adaptation layer
   Loaded AFTER main bundle CSS. Desktop (≥1024px) mostly untouched.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

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

iframe {
  max-width: 100%;
}

/* Horizontal carousels must not expand the page */
.overflow-x-auto,
.overflow-x-scroll {
  max-width: 100%;
  width: 100%;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

/* Keep animated/absolute children from widening the document */
#root,
#root > div {
  overflow-x: clip;
  max-width: 100%;
}

section {
  max-width: 100vw;
}

/* Touch: don't rely on hover-only affordances */
@media (hover: none) {
  .group:hover .group-hover\:scale-\[1\.05\] {
    transform: none;
  }
}

/* ---------- Fluid tokens (phones / small tablets) ---------- */
@media (max-width: 1023.98px) {
  :root {
    --space-2xl: 36px;
    --space-3xl: 48px;
    --space-4xl: 64px;
    --space-5xl: 72px;
    --container-padding: clamp(16px, 4.5vw, 24px);
    --card-radius: 14px;
    --section-radius: 18px;
  }

  .container-main {
    width: 100%;
    max-width: 100%;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  /* Section vertical rhythm */
  .py-\[var\(--space-5xl\)\] {
    padding-top: var(--space-5xl) !important;
    padding-bottom: var(--space-5xl) !important;
  }
  .py-\[var\(--space-4xl\)\] {
    padding-top: var(--space-4xl) !important;
    padding-bottom: var(--space-4xl) !important;
  }
  .py-\[var\(--space-3xl\)\] {
    padding-top: var(--space-3xl) !important;
    padding-bottom: var(--space-3xl) !important;
  }

  /* Navbar height + safe area */
  nav.fixed {
    height: calc(64px + env(safe-area-inset-top, 0px)) !important;
    padding-top: env(safe-area-inset-top, 0px);
  }

  nav.fixed .container-main {
    height: 64px;
  }

  /* Burger touch target */
  nav.fixed button.lg\:hidden {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: -6px;
  }

  /* Brand text slightly tighter on narrow screens */
  nav.fixed a.flex.flex-col span:first-child {
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  /* Fullscreen mobile menu */
  .fixed.inset-0.z-40.bg-\[\#0a0a0a\].lg\:hidden {
    padding-top: calc(64px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .fixed.inset-0.z-40.bg-\[\#0a0a0a\].lg\:hidden .flex.flex-col {
    min-height: calc(100dvh - 64px - env(safe-area-inset-top, 0px));
    padding-bottom: 32px;
    gap: 20px !important;
    padding-top: 28px !important;
  }

  .fixed.inset-0.z-40.bg-\[\#0a0a0a\].lg\:hidden button,
  .fixed.inset-0.z-40.bg-\[\#0a0a0a\].lg\:hidden a {
    min-height: 44px;
    padding: 10px 16px;
  }

  /* Hero */
  section.relative.min-h-\[100dvh\] {
    min-height: 100svh;
    min-height: 100dvh;
    align-items: flex-start;
    padding-top: calc(72px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  }

  /* Ensure hero copy isn't clipped */
  section.relative.min-h-\[100dvh\] p {
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
  }

  section.relative.min-h-\[100dvh\] > .relative.z-10 {
    padding-top: 12px !important;
    width: 100%;
    max-width: 100% !important;
    padding-left: 16px;
    padding-right: 16px;
  }

  section.relative.min-h-\[100dvh\] h1 {
    font-size: clamp(28px, 8.2vw, 40px) !important;
    line-height: 1.12 !important;
    margin-bottom: 20px !important;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  section.relative.min-h-\[100dvh\] > .relative.z-10 > p:first-child {
    font-size: 11px;
    letter-spacing: 0.08em;
    margin-bottom: 14px !important;
    line-height: 1.4;
  }

  /* Hero feature icons: wrap instead of overflow */
  section.relative.min-h-\[100dvh\] .flex.items-center.justify-center.gap-10 {
    flex-wrap: wrap;
    gap: 16px 20px !important;
    margin-bottom: 16px !important;
  }

  section.relative.min-h-\[100dvh\] .flex.items-center.justify-center.gap-10 > div {
    min-width: 96px;
    flex: 1 1 96px;
    max-width: 140px;
  }

  section.relative.min-h-\[100dvh\] .flex.items-center.justify-center.gap-10 span {
    font-size: 12px !important;
    line-height: 1.3;
    text-align: center;
  }

  section.relative.min-h-\[100dvh\] .text-\[16px\] {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* Hero stats chips */
  section.relative.min-h-\[100dvh\] .flex.items-center.justify-center.gap-4.mb-8 {
    flex-wrap: wrap;
    gap: 8px 12px !important;
    margin-bottom: 16px !important;
  }

  /* Hero CTA group */
  section.relative.min-h-\[100dvh\] .flex.flex-col.sm\:flex-row {
    width: 100%;
    gap: 12px !important;
  }

  section.relative.min-h-\[100dvh\] .flex.flex-col.sm\:flex-row > button,
  section.relative.min-h-\[100dvh\] .flex.flex-col.sm\:flex-row > a {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Sticky mobile CTA — safe area + room for cookie */
  .fixed.bottom-0.left-0.right-0.z-40.md\:hidden {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 45;
  }

  .fixed.bottom-0.left-0.right-0.z-40.md\:hidden .p-3 {
    padding: 10px 16px !important;
  }

  .fixed.bottom-0.left-0.right-0.z-40.md\:hidden button {
    min-height: 48px;
    font-size: 15px;
  }

  /* Body clearance for sticky CTA */
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  /* When cookie banner visible, lift sticky CTA */
  body.rt-cookie-open .fixed.bottom-0.left-0.right-0.z-40.md\:hidden {
    bottom: auto;
    /* cookie sits above; CTA stays under cookie via lower z — hide CTA while cookie open */
    opacity: 0;
    pointer-events: none;
    transform: translateY(110%);
  }

  /* Typography hierarchy */
  h2 {
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  h2[style*="clamp"],
  .container-main h2 {
    font-size: clamp(24px, 6.5vw, 36px) !important;
  }

  p,
  li,
  label,
  span {
    overflow-wrap: break-word;
  }

  /* Cards / grids: prefer single column under 480 */
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4,
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4,
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 {
    gap: 14px !important;
  }

  .bg-\[var\(--bg-card\)\].border.border-\[\#2a2a2a\] {
    max-width: 100%;
  }

  /* Prevent grid children from forcing overflow */
  .grid {
    min-width: 0;
  }
  .grid > * {
    min-width: 0;
  }

  .grid img,
  .rounded-\[var\(--section-radius\)\] {
    max-width: 100%;
  }

  /* About / two-column blocks stack cleanly */
  .grid.grid-cols-1.lg\:grid-cols-2,
  .grid.grid-cols-1.md\:grid-cols-2 {
    gap: 20px !important;
  }

  /* Card inner padding on small screens */
  .p-8 {
    padding: 20px !important;
  }
  .p-6 {
    padding: 16px !important;
  }

  /* Forms */
  input,
  select,
  textarea {
    font-size: 16px !important; /* prevent iOS zoom */
    max-width: 100%;
    min-height: 48px;
  }

  textarea {
    min-height: 120px;
  }

  form label,
  label.flex.items-start {
    font-size: 13px;
    line-height: 1.45;
  }

  form button[type="submit"],
  button.gold-gradient {
    min-height: 48px;
    width: 100%;
    max-width: 100%;
  }

  /* Dialogs / modals (Radix) */
  [data-slot="dialog-content"],
  [role="dialog"][data-state],
  .sm\:max-w-lg,
  .sm\:max-w-md {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: min(90dvh, 90vh) !important;
    overflow-y: auto !important;
    margin: 12px auto !important;
  }

  /* Gallery cards in horizontal strip */
  .shrink-0.w-\[300px\].h-\[400px\] {
    width: min(260px, 72vw) !important;
    height: min(340px, 58vh) !important;
  }

  /* Package / occasion cards in horizontal strip */
  .shrink-0.cursor-pointer.group {
    width: min(200px, 58vw);
    flex: 0 0 auto;
  }

  /* Footer */
  footer .grid {
    gap: 28px !important;
  }

  footer .text-\[14px\] {
    font-size: 13px !important;
  }

  .rt-legal-footer-extra {
    justify-content: flex-start !important;
    gap: 10px 14px !important;
    padding: 0 4px;
  }

  /* Fixed rating badge — hide on phones (collides with hero/CTA); show from tablet */
  .fixed.bottom-6.right-6.z-30 {
    display: none !important;
  }

  /* Maps / embeds */
  iframe,
  .map,
  [class*="ymaps"] {
    max-width: 100% !important;
  }
}

/* ---------- Extra-narrow phones ≤360 ---------- */
@media (max-width: 360px) {
  :root {
    --container-padding: 16px;
  }

  section.relative.min-h-\[100dvh\] h1 {
    font-size: clamp(26px, 8vw, 34px) !important;
  }

  section.relative.min-h-\[100dvh\] .flex.items-center.justify-center.gap-10 {
    gap: 12px 10px !important;
  }

  section.relative.min-h-\[100dvh\] .flex.items-center.justify-center.gap-10 > div {
    min-width: 84px;
    max-width: 110px;
    flex: 1 1 84px;
  }

  section.relative.min-h-\[100dvh\] .flex.items-center.justify-center.gap-10 svg {
    width: 22px;
    height: 22px;
  }

  section.relative.min-h-\[100dvh\] .flex.items-center.justify-center.gap-10 span {
    font-size: 11px !important;
  }

  nav.fixed a.flex.flex-col span:first-child {
    font-size: 10px;
    max-width: 150px;
  }
}

/* ---------- 361–479: two-up cards when useful ---------- */
@media (min-width: 361px) and (max-width: 639.98px) {
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > *,
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 > * {
    min-width: 0;
  }
}

@media (min-width: 640px) and (max-width: 1023.98px) {
  .fixed.bottom-6.right-6.z-30 {
    display: block !important;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
    max-width: 240px;
    transform: scale(0.95);
    transform-origin: bottom right;
  }
}

/* ---------- Tablet 640–1023 ---------- */
@media (min-width: 640px) and (max-width: 1023.98px) {
  :root {
    --space-5xl: 88px;
    --container-padding: clamp(20px, 3vw, 32px);
  }

  section.relative.min-h-\[100dvh\] h1 {
    font-size: clamp(36px, 5.5vw, 52px) !important;
  }

  section.relative.min-h-\[100dvh\] .flex.items-center.justify-center.gap-10 {
    gap: 28px !important;
    flex-wrap: nowrap;
  }

  section.relative.min-h-\[100dvh\] .flex.items-center.justify-center.gap-4 {
    flex-direction: row !important;
  }

  section.relative.min-h-\[100dvh\] .flex.items-center.justify-center.gap-4 > button,
  section.relative.min-h-\[100dvh\] .flex.items-center.justify-center.gap-4 > a {
    width: auto;
  }

  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- Desktop: neutralize mobile body padding ---------- */
@media (min-width: 768px) {
  /* MobileCTA is md:hidden — remove body pad from md up */
  body {
    padding-bottom: 0;
  }
}

@media (min-width: 1024px) {
  body {
    padding-bottom: 0;
  }
}

/* Prefers reduced motion */
@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;
  }
}