/* ============================================================
   HOUSKI — dedicated MOBILE stylesheet (≤768px only).
   Loaded via:  <link rel="stylesheet" href="/mobile.css" media="(max-width:768px)">
   placed AFTER each page's inline <style>, so these rules win on phones.
   Desktop (>768px) never loads this file → desktop design untouched.
   Built incrementally, page by page. Works for HE (RTL) and EN (LTR).
   ============================================================ */

/* ---------- Site-wide mobile base (safe on every page) ---------- */
.container { padding-left: 18px; padding-right: 18px; }

/* Calmer vertical rhythm than the 100px desktop sections — equal across every section */
.section, .resorts, .services, .faq, .contact-section { padding: 52px 0; }

/* Headings sized for a phone */
.sec-h2 { font-size: 27px; line-height: 1.15; }
.sec-p  { font-size: 15px; line-height: 1.7; }

/* ===================== HOME ===================== */

/* Hero headline: bigger on phones, breaks to two lines (second half on its own line) */
.hero-headline { font-size: 28px; line-height: 1.25; }
.hero-headline .hl-break { display: block; }

/* Hero search bar + chips span the column comfortably */
.hero-content { padding: 0 16px; width: 100%; box-sizing: border-box; }
.ai-prompt    { width: 100%; max-width: none; }
.ai-examples  { width: 100%; max-width: none; }   /* keep 3 narrow chips per row */
/* iOS auto-zooms on focus when an input is <16px — keep it at 16px so tapping
   the search field never zooms the page. */
.ai-input     { font-size: 16px; }

/* Stacked feature/why cards (1st section) — smaller for phones */
.why-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
.why-card { padding: 18px 18px; border-radius: 12px; }
.why-ico  { width: 44px; height: 44px; border-radius: 11px; margin-bottom: 12px; }
.why-ico svg { width: 22px; height: 22px; }
.why-title { font-size: 16px; margin-bottom: 6px; }
.why-text  { font-size: 13px; line-height: 1.65; }

/* Resort squares: 2 per row on phones */
.resorts-grid { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }
/* Blur the ENTIRE card image (not just the bottom half as on desktop) so the
   eyebrow/name/stats read clearly over any part of the photo. */
.resort-tile::after {
  top: 0;
  background: linear-gradient(180deg, rgba(12,18,32,.32) 0%, rgba(12,18,32,.46) 55%, rgba(12,18,32,.80) 100%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Services cards (3rd section) — smaller for phones */
.services-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
.service-card { padding: 22px 18px; border-radius: 12px; }
.service-ico  { width: 52px; height: 52px; margin: 0 auto 12px; }
.service-ico svg { width: 26px; height: 26px; }
.service-name { font-size: 16px; }
.service-desc { font-size: 13px; line-height: 1.6; }