/* =============================================
   SORELI KE HOMES — MOBILE RESPONSIVE SYSTEM
   Clean, compact layouts for phones & tablets
   Inspired by: Jumia · Oraimo · Booking.com
   Last updated: 2026-07
   ============================================= */

/* -----------------------------------------------
   GLOBAL: Prevent horizontal scroll on all pages
   ----------------------------------------------- */
html, body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
* { box-sizing: border-box; }

/* -----------------------------------------------
   iOS FIX: background-attachment:fixed causes
   blank/black hero on iPhones — use scroll instead
   ----------------------------------------------- */
.hero-bg {
  background-attachment: scroll;
}
@supports (-webkit-touch-callout: none) {
  /* iOS Safari only */
  .hero-bg {
    background-attachment: scroll !important;
    background-position: center top !important;
  }
}

/* -----------------------------------------------
   TOUCH DEVICES: disable card lift hover effects
   (prevents jumpy scroll on phones)
   ----------------------------------------------- */
@media (hover: none) {
  .card-hover-effect:hover,
  [class*="hover:-translate-y"]:hover,
  [class*="hover:scale-"]:hover,
  [class*="hover:shadow"]:hover {
    transform: none !important;
    box-shadow: inherit !important;
  }
}

/* ===============================================
   PHONE LAYOUT  (max-width: 767px)
   =============================================== */
@media (max-width: 767px) {

  /* ---- ANNOUNCEMENT BARS ---- */
  /* Top yellow bar */
  body > div.bg-gradient-to-r.text-slate-900 {
    font-size: 0.7rem !important;
    padding: 0.3rem 0.75rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Header amber bar */
  header > div.bg-gradient-to-r {
    font-size: 0.68rem !important;
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
  }
  header > div.bg-gradient-to-r .ml-auto { display: none !important; }

  /* ---- HEADER / NAV ---- */
  header nav > div { padding-top: 0 !important; padding-bottom: 0 !important; }
  header nav > div > div { height: 3rem !important; }

  /* ---- HERO SECTION ---- */
  .hero-bg {
    min-height: auto !important;
    padding-top: 1rem !important;
    padding-bottom: 1.25rem !important;
  }
  .hero-bg > div { gap: 0.875rem !important; }

  /* Hero heading */
  .hero-bg h1 {
    font-size: 1.875rem !important;
    line-height: 1.18 !important;
    margin-bottom: 0.375rem !important;
  }

  /* Hero subtext */
  .hero-bg p {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
  }

  /* Hero buttons row */
  .hero-bg .flex-col.sm\:flex-row { gap: 0.625rem !important; }
  .hero-bg .flex-col button,
  .hero-bg .flex-col a {
    padding: 0.75rem 1.25rem !important;
    font-size: 0.875rem !important;
  }

  /* Hero trust stats — hide (saves ~200px of scroll) */
  .hero-bg .border-t { display: none !important; }

  /* Badge pill in hero */
  .hero-bg .inline-flex.items-center.gap-2 {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.75rem !important;
  }

  /* ---- SEARCH WIDGET ---- */
  #unified-search-widget {
    border-radius: 1rem !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12) !important;
  }
  #unified-search-widget > div {
    padding: 0.875rem !important;
  }

  /* Widget header text */
  #unified-search-widget h3 {
    font-size: 1rem !important;
    margin-bottom: 0.125rem !important;
  }
  #unified-search-widget .text-center p {
    font-size: 0.7rem !important;
  }
  #unified-search-widget .text-center.mb-6 {
    margin-bottom: 0.625rem !important;
  }

  /* Service type tabs → 2×2 grid */
  #unified-search-widget .flex.flex-wrap.gap-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.375rem !important;
    margin-bottom: 0.625rem !important;
    padding-bottom: 0.625rem !important;
  }
  .search-tab-btn {
    min-width: unset !important;
    padding: 0.5rem 0.375rem !important;
    font-size: 0.72rem !important;
    gap: 0.25rem !important;
  }
  .search-tab-btn i { font-size: 0.8rem !important; }

  /* Form inputs & selects */
  #unified-search-widget input,
  #unified-search-widget select {
    padding: 0.6rem 0.875rem !important;
    font-size: 0.875rem !important;
  }
  /* Date inputs: explicit height to prevent iOS native oversizing */
  #unified-search-widget input[type="date"],
  #unified-search-widget input[type="time"] {
    height: 2.75rem !important;
    padding: 0 0.875rem !important;
    line-height: 2.75rem !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: #fff !important;
  }
  #unified-search-widget label {
    font-size: 0.72rem !important;
    margin-bottom: 0.2rem !important;
    display: block;
  }

  /* Date fields — force single column even if grid-cols-2 */
  #unified-search-widget .grid {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }

  /* space-y-4 gap reduction */
  #unified-search-widget .space-y-4 > * + * {
    margin-top: 0.5rem !important;
  }

  /* Search action button */
  #unified-search-widget button[type="button"] {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
  }

  /* ---- SECTION PADDING REDUCTION ---- */
  /* All sections: py-32 → 40px, py-24 → 32px, py-20 → 28px */
  .py-32 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .py-24 { padding-top: 2rem !important;   padding-bottom: 2rem !important;   }
  .py-20 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
  .py-16 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }

  /* Margin helpers */
  .mb-20 { margin-bottom: 1.25rem !important; }
  .mb-16 { margin-bottom: 1rem !important; }
  .mb-12 { margin-bottom: 0.875rem !important; }
  .mt-12 { margin-top: 0.875rem !important; }
  .mt-16 { margin-top: 1rem !important; }

  /* Gap reductions for large gaps */
  .gap-16 { gap: 1.25rem !important; }
  .gap-12 { gap: 1rem !important; }
  .gap-8  { gap: 0.75rem !important; }

  /* ---- HEADING FONT SIZES ---- */
  .text-7xl, .text-6xl { font-size: 1.875rem !important; line-height: 1.15 !important; }
  .text-5xl { font-size: 1.625rem !important; line-height: 1.2 !important; }
  .text-4xl { font-size: 1.375rem !important; line-height: 1.2 !important; }
  .text-3xl { font-size: 1.125rem !important; line-height: 1.25 !important; }

  /* ---- FEATURED LISTINGS SECTION ---- */
  /* Section header label pill */
  #featured-listings .inline-block.mb-8 {
    margin-bottom: 0.5rem !important;
  }
  #featured-listings .inline-block span.relative {
    padding: 0.375rem 1rem !important;
    font-size: 0.65rem !important;
  }

  /* Stats bar */
  #featured-listings .flex.flex-wrap.justify-center.gap-8 {
    gap: 1.25rem !important;
    margin-top: 0.75rem !important;
  }
  #featured-listings .flex.flex-wrap.justify-center.gap-8 .text-3xl {
    font-size: 1.25rem !important;
  }
  #featured-listings .flex.flex-wrap.justify-center.gap-8 .text-sm {
    font-size: 0.65rem !important;
  }

  /* Location filter pill container — horizontal scroll */
  #featured-listings .flex.flex-wrap.justify-center.gap-4 {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 0.375rem !important;
    margin-bottom: 0.875rem !important;
    scrollbar-width: none !important;
  }
  #featured-listings .flex.flex-wrap.justify-center.gap-4::-webkit-scrollbar { display: none; }
  #featured-listings .flex.flex-wrap.justify-center.gap-4 > div {
    padding: 0.25rem !important;
    border-radius: 0.75rem !important;
  }
  #featured-listings .flex.flex-wrap.gap-2 {
    flex-wrap: nowrap !important;
    gap: 0.375rem !important;
  }

  /* Filter buttons: compact */
  .stay-filter {
    padding: 0.5rem 0.875rem !important;
    font-size: 0.75rem !important;
    border-radius: 0.625rem !important;
    white-space: nowrap !important;
  }
  .stay-filter span.flex { gap: 0.25rem !important; }
  .stay-filter svg { width: 0.875rem !important; height: 0.875rem !important; }

  /* ==============================================
     CURATED STAYS GRID — vertical card layout
     Matches properties.html card style exactly
     ============================================== */
  #curated-stays-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
  }

  /* Card: full-width vertical, clean white */
  #curated-stays-grid .stay-card {
    display: block !important;
    width: 100% !important;
  }

  /* Image: slightly shorter on mobile to show more cards */
  #curated-stays-grid .h-56 {
    height: 200px !important;
  }

  /* Content area: tighter padding on small screens */
  #curated-stays-grid .p-4 {
    padding: 0.875rem !important;
  }

  /* Spacing rows */
  #curated-stays-grid .mb-4, #curated-stays-grid .mb-3 { margin-bottom: 0.25rem !important; }
  #curated-stays-grid .mb-6 { margin-bottom: 0.375rem !important; }
  #curated-stays-grid .mt-4, #curated-stays-grid .mt-3 { margin-top: 0.25rem !important; }

  /* No hover lift on touch */
  #curated-stays-grid .group:hover { transform: none !important; box-shadow: 0 2px 12px rgba(0,0,0,0.09) !important; }

  /* ---- SERVICES SECTION (Why #1 Choice) ---- */
  /* Grid: 1 column */
  [class*="md:grid-cols-3"],
  [class*="md:grid-cols-4"] {
    grid-template-columns: 1fr !important;
  }
  /* 2-column exceptions for stats */
  .grid.grid-cols-2,
  [class*="grid-cols-2"][class*="sm:grid-cols-4"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* lg:grid-cols-2 pairs → single col */
  [class*="lg:grid-cols-2"] { grid-template-columns: 1fr !important; }

  /* Service cards: horizontal icon + text layout */
  .grid[class*="md:grid-cols-3"] > div.p-8 {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0.875rem !important;
    padding: 1rem !important;
  }
  .grid[class*="md:grid-cols-3"] > div.p-8 > div:first-child {
    width: 2.75rem !important;
    height: 2.75rem !important;
    min-width: 2.75rem !important;
    font-size: 1rem !important;
    border-radius: 0.75rem !important;
    margin-bottom: 0 !important;
  }
  .grid[class*="md:grid-cols-3"] > div.p-8 > div:first-child svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }
  .grid[class*="md:grid-cols-3"] > div.p-8 h3 {
    font-size: 0.9rem !important;
    margin-bottom: 0.25rem !important;
  }
  .grid[class*="md:grid-cols-3"] > div.p-8 p {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    margin-bottom: 0 !important;
  }

  /* ---- HOW IT WORKS ---- */
  [class*="sm:grid-cols-3"] { grid-template-columns: 1fr !important; }

  /* ---- CTA / JOURNEY SECTIONS ---- */
  .gap-12.lg\:gap-20 { gap: 1.25rem !important; }

  /* ---- ABOUT SECTION ---- */
  #about .gap-16 { gap: 1.5rem !important; }

  /* ---- FOOTER ---- */
  footer [class*="md:grid-cols-4"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem !important;
  }
  footer [class*="md:grid-cols-3"] {
    grid-template-columns: 1fr !important;
  }
  footer .py-20 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

  /* ---- DECORATIVE OVERFLOW FIX ---- */
  /* Blurred blobs with negative margins cause horizontal scroll — hide them */
  section.relative.overflow-hidden .absolute.-mr-20,
  section.relative.overflow-hidden .absolute.-ml-20,
  section.relative.overflow-hidden .absolute.-mt-20,
  section.relative.overflow-hidden .absolute.-mb-20 {
    display: none !important;
  }
  /* Also catch any blur blobs that extend beyond viewport */
  [class*="-mr-"][class*="blur"],
  [class*="-ml-"][class*="blur"] {
    display: none !important;
  }

  /* ---- SCROLL REVEAL: disable heavy animations on mobile ---- */
  .scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .scroll-reveal.revealed {
    opacity: 1 !important;
    transform: none !important;
  }

  /* ---- WHATSAPP FLOAT BUTTON ---- */
  .fixed.bottom-6.right-6,
  [class*="fixed"][class*="bottom"][class*="right"] {
    bottom: 1rem !important;
    right: 0.875rem !important;
  }

}

/* ===============================================
   TABLET LAYOUT (768px – 1023px)
   =============================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .py-32 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .py-24 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .py-20 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  #curated-stays-grid { grid-template-columns: 1fr 1fr !important; }
  .hero-bg { background-attachment: scroll !important; }
  [class*="lg:grid-cols-2"] { grid-template-columns: 1fr 1fr !important; }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
  #curated-stays-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Wide desktop: 4 columns */
@media (min-width: 1536px) {
  #curated-stays-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ===============================================
   PROPERTY DETAIL / ALL INNER PAGES
   =============================================== */
@media (max-width: 767px) {

  /* Booking summary sidebar stacks below */
  .grid.lg\:grid-cols-3 { grid-template-columns: 1fr !important; }

  /* Image gallery on property detail */
  .grid.grid-cols-2.md\:grid-cols-4 { grid-template-columns: 1fr 1fr !important; }

  /* Amenity pills */
  .flex.flex-wrap.gap-2 > span { font-size: 0.72rem !important; padding: 0.25rem 0.5rem !important; }

  /* Car cards grid */
  #vehicles-grid,
  #flights-grid { grid-template-columns: 1fr !important; }

  /* Pricing table: horizontal scroll */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

}