/* ============================================================
   LORICALY — MOBILE / WEB-APP LAYER
   Loaded LAST: authoritative over base/components/pages.
   Targets iPhone (SE→Pro Max) and Android (360→412+).
   Handles: safe-areas (notch / home indicator), tap targets,
   iOS input-zoom, no horizontal scroll, stacked bottom bars.
   ============================================================ */

/* ---- global mobile hygiene ---- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: clip; max-width: 100%; }
* { -webkit-tap-highlight-color: transparent; }
img, svg, video { max-width: 100%; }
@media (hover: none) {
  /* disable hover-only transforms that "stick" on touch */
  .card--elevated:hover { transform: none; }
}

/* ============================================================
   ≤ 900px — phones & small tablets
   ============================================================ */
@media (max-width: 900px) {

  :root { --gutter: 18px; }

  /* ---------- TOP APP BAR ---------- */
  .appbar {
    height: calc(var(--appbar-h) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: border-box;
  }
  .appbar__inner { height: var(--appbar-h); gap: .5rem; }
  .nav { display: none; }
  .appbar__cta { display: none !important; }      /* overrides .btn display */
  .menu-toggle { display: grid !important; margin-left: auto; }
  .brand__tag { display: none; }
  .brand__logo { height: 27px; }
  .brand__name { font-size: 1.3rem; }
  .brand__mark { width: 30px; height: 30px; }
  .icon-btn { --sz: 46px; }

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

  /* ---------- generic spacing ---------- */
  .section { padding-block: clamp(2rem, 7vw, 3rem); }
  .headline-l { font-size: clamp(1.6rem, 6.5vw, 2.1rem); line-height: 1.1; }
  .headline-s { font-size: clamp(1.25rem, 5.2vw, 1.6rem); }

  /* ---------- HERO ---------- */
  .hero__inner { padding-block: 1.25rem 2rem; gap: 1.1rem; }
  .hero__art { order: -1; aspect-ratio: 16/11; border-radius: var(--shape-xl); box-shadow: var(--el-2); }
  .hero .display-l { font-size: clamp(2.1rem, 10vw, 3rem); line-height: 1.04; }
  .hero .lead, .hero p { font-size: 1.02rem; }
  .hero__pill { font-size: .9rem; }
  .hero .eyebrow { font-size: .72rem; }
  /* CTA row: full-width, thumb-friendly */
  .hero__cta, .hero__inner .btn-row { display: flex; flex-wrap: wrap; gap: .6rem; }
  .hero__inner .btn { flex: 1 1 46%; min-height: 50px; }

  /* hero stats: even 3-up row that never overflows */
  .hero__stats { gap: 1rem; }
  .hero__stats > * { flex: 1; min-width: 0; }

  /* ---------- AVAILABILITY SEARCH BAR ---------- */
  .searchbar { gap: .35rem; }
  .searchbar__field { padding: .7rem 1rem; }
  .searchbar__btn { height: 52px; font-weight: 600; }

  /* ---------- SECTION HEADINGS ---------- */
  .sec-head { flex-direction: column; align-items: flex-start; gap: .5rem; margin-bottom: 1.25rem; }

  /* ---------- CARD CAROUSELS ---------- */
  .cards-grid { grid-auto-columns: 86%; gap: 1rem; scroll-padding-left: var(--gutter); }
  .cards-grid > * { scroll-snap-align: center; }
  .card__media { aspect-ratio: 4/3; }

  /* ---------- FEATURES / EXP / INFO grids → 1 col, comfy ---------- */
  .features { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .feature { padding: 1.1rem; }
  .exp-grid { gap: 1rem; }

  /* ---------- BOTTOM NAV (active-feel) ---------- */
  .bottom-nav__item:active { opacity: .7; }

  /* ---------- FAB / CHAT ---------- */
  .chat-fab.fab--extended { height: 52px; }
}

/* ============================================================
   Room detail: stack booking bar ABOVE bottom-nav
   ============================================================ */
@media (max-width: 980px) {
  .sticky-bar {
    bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
    padding: .7rem var(--gutter);
    box-shadow: 0 -4px 18px rgba(8, 32, 26, .12);
  }
  .sticky-bar .btn { min-height: 48px; padding-inline: 1.6rem; }
  body.has-sticky {
    padding-bottom: calc(var(--bottomnav-h) + 74px + env(safe-area-inset-bottom, 0px));
  }
  /* chat FAB clears both bars */
  body.has-sticky .chat-fab {
    bottom: calc(var(--bottomnav-h) + 84px + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
   Room detail content tuning ≤900
   ============================================================ */
@media (max-width: 900px) {
  .room-grid { grid-template-columns: 1fr; gap: 0; }
  .room-head .headline-l { font-size: clamp(1.5rem, 6vw, 2rem); }
  .gallery-wrap { margin-inline: calc(-1 * var(--gutter)); }
  .gallery__more { right: var(--gutter) !important; bottom: 1rem !important; }
  .amenities { grid-template-columns: 1fr 1fr; gap: .6rem 1rem; }
  .amenity { font-size: .92rem; }
  .highlight { gap: .75rem; }
  .crumbs { font-size: .82rem; }
}

/* ============================================================
   CHATBOT — full-screen app sheet with safe areas
   ============================================================ */
@media (max-width: 560px) {
  .chat-fab { right: 16px; }
  .chat-panel { width: 100vw; height: 100dvh; border-radius: 0; }
  .chat-head { padding-top: calc(1rem + env(safe-area-inset-top, 0px)); }
  .chat-quick {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-bottom: .6rem;
  }
  .chat-quick::-webkit-scrollbar { display: none; }
  .chat-quick button { flex: 0 0 auto; white-space: nowrap; }
  .chat-input { padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   ESPERIENZE hero ≤600
   ============================================================ */
@media (max-width: 600px) {
  .exp-hero__inner { padding-block: clamp(3rem, 14vw, 5rem); }
  .exp-hero__inner h1 { font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.06; }
  .exp-filters { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .exp-filters .chip { flex: 0 0 auto; min-height: 40px; }
  .info-grid { grid-template-columns: 1fr; }
  .split { gap: 1.5rem; }
}

/* ============================================================
   Very small phones (≤360) — guarantee nothing clips
   ============================================================ */
@media (max-width: 360px) {
  :root { --gutter: 14px; }
  .features { grid-template-columns: 1fr; }
  .hero__inner .btn { flex: 1 1 100%; }
  .brand__logo { height: 24px; }
  .brand__name { font-size: 1.2rem; }
}

/* ============================================================
   Standalone (installed PWA) niceties
   ============================================================ */
@media (display-mode: standalone) {
  /* no text selection flicker on tap; app-like */
  .appbar, .bottom-nav, .sticky-bar { user-select: none; }
}