/* ═══════════════════════════════════════════════════════════════════
   Jasmine Resort — mobile responsive corrections
   Loaded AFTER the main stylesheet, so these rules win on small screens.
   Desktop (≥769px) is deliberately untouched.
   Covers 320 · 360 · 375 · 390 · 412 · 430 · 480 · 768px, portrait+landscape.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Global: never allow sideways scrolling or content outside the screen */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
*, *::before, *::after { box-sizing: border-box; }

@media (max-width: 768px) {

  /* Nothing may exceed the viewport width */
  img, video, iframe, table, pre { max-width: 100%; height: auto; }
  .pub-container { width: 100%; padding-left: 16px; padding-right: 16px; }

  /* ── 4. Header: compact, leaves room for the hero ─────────────────── */
  .pub-header-inner { height: 56px; }
  .pub-logo-mark { width: 34px; height: 34px; font-size: 15px; border-radius: 9px; }
  .pub-logo-name { font-size: 15px; line-height: 1.15; }
  .pub-logo-sub, .pub-brand-tagline { font-size: 10.5px; }

  /* ── 5. Mobile navigation (was display:none with no replacement) ──── */
  #jr-navtoggle {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;           /* touch target */
    background: transparent; border: 1px solid var(--pub-line, #e4e9e8);
    border-radius: 10px; color: var(--pub-teal, #0e3b37);
    font-size: 19px; line-height: 1; cursor: pointer; margin-inline-start: 8px;
  }
  .pub-nav {
    position: fixed; inset-inline: 0; top: 56px;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--pub-line, #e4e9e8);
    box-shadow: 0 14px 30px rgba(8, 40, 38, .16);
    padding: 6px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100vh - 56px); overflow-y: auto; z-index: 60;
  }
  body.jr-nav-open .pub-nav { display: flex; }
  /* the original rule hid every link on phones — bring them back inside the drawer */
  body.jr-nav-open .pub-nav a,
  body.jr-nav-open .pub-nav a:not(.pub-nav-keep) {
    display: flex; align-items: center;
    min-height: 48px; padding: 10px 6px; font-size: 15.5px;
    border-bottom: 1px solid #f0f4f3;
  }
  body.jr-nav-open .pub-nav a:last-child { border-bottom: 0; }

  /* ── 1–3, 6, 13. Hero: fits the screen, no clipping, no overflow ──── */
  .pub-hero {
    min-height: auto;                 /* was 520px — pushed the form off-screen */
    padding: 20px 0 26px;
    align-items: flex-start;
  }
  /* `.pub-hero-content { padding: 3rem 0 }` in the compiled stylesheet reset the
     container's horizontal padding to ZERO — that is why the title and the
     booking card touched both screen edges. Side padding is restored here. */
  .pub-hero-content {
    max-width: 100%;
    padding: 1.1rem 16px 0;
    overflow-wrap: anywhere;          /* long words can never spill sideways */
  }
  .pub-hero > .pub-container { padding-left: 16px; padding-right: 16px; }
  .pub-hero h1 {
    font-size: clamp(1.5rem, 7.4vw, 2.05rem);   /* was min 2.2rem = clipped */
    line-height: 1.16;
    margin: 0 0 .55rem;
    hyphens: auto;
  }
  .pub-hero p,
  .pub-hero .pub-lead,
  .pub-hero-content p {
    font-size: 14.5px;                /* never below the 14px readability floor */
    line-height: 1.5;
    margin: 0 0 .9rem;
    max-width: 46ch;
  }
  .pub-hero .eyebrow { font-size: 11px; letter-spacing: 3px; }

  /* ── 7, 8, 11. Booking card: compact, fully visible ───────────────── */
  .pub-hero-form { margin-top: 14px; max-width: 100%; }
  .pub-search {
    padding: 12px;
    gap: 10px;
    border-radius: 14px;
    grid-template-columns: 1fr 1fr;   /* dates side by side = shorter card */
  }
  .pub-search > *:last-child { grid-column: 1 / -1; }   /* full-width Search */
  .pub-field { gap: .25rem; margin-bottom: 0; }
  .pub-field label,
  .pub-search label { font-size: 12px; font-weight: 600; }
  .pub-search input,
  .pub-search select,
  .pub-input, input[type="date"], input[type="number"], input[type="text"],
  input[type="email"], input[type="tel"], select, textarea {
    min-height: 44px;                 /* touch target */
    font-size: 16px;                  /* 16px stops iOS auto-zoom */
    padding: 9px 11px;
    border-radius: 10px;
    width: 100%;
  }
  .pub-btn, button, .btn {
    min-height: 44px;
    font-size: 15px;
    padding: .7rem 1.1rem;
  }
  .pub-search .pub-btn { width: 100%; }

  /* ── 12. Balanced vertical rhythm below the fold ──────────────────── */
  .pub-section { padding: 26px 0; }
  .pub-section h2, .pub-h2 { font-size: 1.35rem; line-height: 1.25; }
  .pub-grid, .pub-cards { grid-template-columns: 1fr; gap: 14px; }
  .pub-card-title { font-size: 15.5px; }
  .pub-card-body, .pub-card p { font-size: 14px; }

  /* Unit / sale detail pages */
  .pub-detail-layout, .pub-sale-detail { grid-template-columns: 1fr; gap: 16px; }
  .pub-detail-title, .pub-sale-hero h1 { font-size: clamp(1.35rem, 6.4vw, 1.85rem); line-height: 1.2; }
  .pub-sale-hero { min-height: auto; padding: 30px 0; }
  .pub-gallery, .pub-images { grid-template-columns: 1fr 1fr; gap: 8px; }

  /* Checkout / booking pages */
  .pub-co-grid, .pub-co-layout { grid-template-columns: 1fr; gap: 14px; }
  .pub-co-title { font-size: 1.25rem; }
  .pub-summary { position: static; }   /* sticky summaries must not trap the page */

  /* Tables never force sideways scrolling of the whole page */
  .pub-table-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── 14. Floating widgets: safe areas, no overlap with form fields ── */
  /* Reserve space so fixed widgets can never sit on top of page content. */
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }

  /* The floating language button used to overlap the Adults / Children fields.
     On phones it is removed entirely and language selection lives inside the
     menu drawer instead, where it can never cover a form control. */
  #jr-lang-pill { display: none !important; }
  #jr-nav-langs { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 6px 4px; border-top: 1px solid #f0f4f3; }
  #jr-nav-langs button {
    flex: 1 1 auto; min-height: 44px; min-width: 72px;
    border: 1px solid var(--pub-line, #e4e9e8); border-radius: 10px;
    background: #fff; color: var(--pub-teal, #0e3b37); font-size: 14px; font-weight: 600; cursor: pointer;
  }
  #jr-nav-langs button[aria-current="true"] { background: var(--pub-teal, #0e3b37); color: #fff; border-color: var(--pub-teal, #0e3b37); }

  #jr-chat-launcher {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    inset-inline-end: 12px !important;
    width: 52px; height: 52px; padding: 0 !important;
    justify-content: center;
    font-size: 20px !important;
  }
  #jr-chat-launcher span:nth-child(2) { display: none; }  /* icon only on phones */
  /* while the visitor is filling a form, the launcher steps out of the way */
  body.jr-typing #jr-chat-launcher { opacity: 0; pointer-events: none; }
  #jr-chat-panel {
    inset-inline: 10px !important;
    width: auto !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: min(70vh, calc(100vh - 150px)) !important;
  }
  /* keyboard open: the input must stay visible */
  #jr-chat-panel #jr-chat-input { font-size: 16px; }

  #jr-ad-bar { padding: 9px 40px !important; font-size: 13px !important; }
  #jr-ad-bar a { font-size: 12.5px !important; }

  #jr-visit-widget { margin: 16px 10px !important; padding: 14px !important; }

  /* Sales status badges: readable on phones, never overlapping the photo edge */
  .jr-status-badge {
    font-size: 12px !important; padding: 5px 10px !important;
    max-width: calc(100% - 8px); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  .jr-status-note { font-size: 13px !important; }
  .jr-status-cta { width: 100%; margin-top: 8px; }
  #jr-inq-extra { grid-template-columns: 1fr !important; }
}

/* ── Very small phones (320–360px): tighten one more step ───────────── */
@media (max-width: 380px) {
  .pub-container { padding-left: 12px; padding-right: 12px; }
  .pub-hero h1 { font-size: clamp(1.35rem, 7.6vw, 1.7rem); }
  .pub-hero p, .pub-hero-content p { font-size: 14px; }
  .pub-search { grid-template-columns: 1fr; padding: 11px; }   /* stack fully */
  .pub-logo-name { font-size: 14px; }
  #jr-chat-launcher { width: 48px; height: 48px; }
}

/* ── Landscape phones: the hero must not eat the whole screen ───────── */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .pub-hero { padding: 14px 0 18px; }
  .pub-hero h1 { font-size: 1.5rem; margin-bottom: .4rem; }
  .pub-hero p, .pub-hero-content p { font-size: 14px; margin-bottom: .6rem; }
  .pub-search { grid-template-columns: 1fr 1fr 1fr; }
  #jr-chat-panel { max-height: calc(100vh - 120px) !important; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Tablets (769–1024px): two-column comfort, untouched desktop above */
@media (min-width: 769px) and (max-width: 1024px) {
  .pub-search { grid-template-columns: 1fr 1fr 1fr auto; }
  .pub-grid, .pub-cards { grid-template-columns: 1fr 1fr; }
}

/* ── Arabic RTL: mirrored spacing for the floating widgets ──────────── */
[dir="rtl"] #jr-lang-pill,
[dir="rtl"] #jr-chat-launcher { inset-inline-end: 12px; }

/* ── Accessibility: visible focus everywhere on touch devices ───────── */
@media (max-width: 768px) {
  a:focus-visible, button:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible {
    outline: 3px solid #0e3b37;
    outline-offset: 2px;
  }
}