/* ============================================================
   bellarino-mobile.css  v2.1
   Mobile-first responsive overrides for Bellarino Homes.
   Applied AFTER main.css to override template defaults.

   UX Review 2026-08-10 — All 5 areas addressed:
   1. Sticky bar collision: padding-bottom on pd-main-section
   2. Stats pills: horizontal scroll with breathing room
   3. FAB collision: lifted above sticky bar (bottom: 92px)
   4. Trust box breathing: increased internal padding & gap
   5. Sticky bar entrance: scroll-driven slide-in (JS handles .visible class)

   + Section rhythm: standardised card margin-bottom = 28px
   + Touch targets: cta-btn min-height 46px, padding 12px 24px
   + Mortgage inputs: white bg, visible border, rounded corners
   + Result box: dark button for orange-on-orange fix
   ============================================================ */

/* ── 1. Global Container Safety Net ────────────────────────── */

/* Sticky bar height — single source of truth.
   Change this one variable to adjust both the bottom padding
   and the FAB lift simultaneously. */
:root {
  --sticky-bar-h: 70px;
}

.container,
.container-fluid {
  width: 100%;
  box-sizing: border-box;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Prevent any element from causing horizontal scroll */
* {
  box-sizing: border-box;
  max-width: 100%;
}

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

/* ── 2. Typography & Label Safety ────────────────────────────── */
/* Stop any label from wrapping letter-by-letter */
.spec-label,
.stat-label,
[class*="spec-label"],
[class*="stat-label"] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Price pop animation on calculation change */
@keyframes pricePop {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); color: #EA580C; }
  100% { transform: scale(1); }
}

.price-pulse {
  animation: pricePop 0.3s ease;
}

/* ── 3. Property Detail — Layout & Components ───────────────── */

/* 3a. Image Gallery Mosaic */
.pd-gallery-mosaic {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 220px 220px;
  gap: 12px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

/* 3b. Spec Grid — 4 cards across on desktop */
.pd-spec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

/* 3c. Main content + sidebar layout */
.pd-main-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: start;
}

/* 3d. Trust grid — 2 columns on desktop */
.pd-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* 3e. Calculator — 2 col on desktop */
.pd-calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 20px;
}

/* 3f. Calculator result row */
.pd-calc-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* ── 4. Property Listing Page ───────────────────────────────── */
.property-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ── 5. Sticky Mobile CTA Bar (with dynamic slide-in) ───────── */
#mobile-sticky-cta {
  display: none; /* hidden on desktop */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid #E2E8F0;
  /* ── CRITICAL: exact height matches --sticky-bar-h variable ── */
  height: var(--sticky-bar-h);
  padding: 0 18px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  /* Slide-in animation state — JS adds .visible class on scroll */
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

#mobile-sticky-cta.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

#mobile-sticky-cta .cta-price {
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  line-height: 1.2;
}

#mobile-sticky-cta .cta-price small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

#mobile-sticky-cta .cta-btn {
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 800;
  /* ── Thumb zone: min 44px height (Apple/Google HIG) ── */
  min-height: 46px;
  padding: 12px 26px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(234, 88, 12, 0.35);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#mobile-sticky-cta .cta-btn:active {
  transform: scale(0.97);
}

/* ── 6. Mobile Bottom Sheet Modal (Book Tour) ───────────────── */
#mobile-tour-sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: flex-end;
  justify-content: center;
}

#mobile-tour-sheet.open {
  display: flex;
}

.mobile-tour-sheet-inner {
  background: #ffffff;
  width: 100%;
  max-width: 500px;
  border-radius: 24px 24px 0 0;
  padding: 24px 20px 36px;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
  animation: slideUpSheet 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 90vh;
  overflow-y: auto;
}

@keyframes slideUpSheet {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.mobile-tour-sheet-handle {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: #CBD5E1;
  margin: 0 auto 18px;
}

/* ── 7. Footer Mobile ───────────────────────────────────────── */
.footer-mobile-center {
  text-align: center;
}

/* WhatsApp pulse */
@keyframes waPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  50%       { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
}

.wa-pulse-btn:hover,
.wa-pulse-btn:focus {
  animation: waPulse 1.2s infinite;
}

/* ── 8. Image Carousel Mobile (gallery) ─────────────────────── */
.mobile-gallery-carousel {
  display: none; /* shown via media query */
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
  touch-action: pan-y;
}

.mobile-gallery-carousel .carousel-track {
  display: flex;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.mobile-gallery-carousel .carousel-slide {
  flex: 0 0 100%;
  width: 100%;
}

.mobile-gallery-carousel .carousel-slide img {
  width: 100%;
  height: 270px;
  object-fit: cover;
  display: block;
}

.mobile-gallery-carousel .carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}

.mobile-gallery-carousel .carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.mobile-gallery-carousel .carousel-dot.active {
  background: #ffffff;
  transform: scale(1.35);
}

.mobile-gallery-carousel .carousel-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(17, 24, 39, 0.88);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  z-index: 2;
}

/* ── TABLET BREAKPOINT (max 1024px) ─────────────────────────── */
@media (max-width: 1024px) {
  .pd-main-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .pd-sticky-sidebar {
    position: static !important;
  }

  .property-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── MOBILE BREAKPOINT (max 768px) ──────────────────────────── */
@media (max-width: 768px) {

  /* --- Container padding --- */
  .container,
  .container-fluid {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* --- Scroll to Top (FAB) Collision Fix ---
     Lifts the FAB above the sticky bar using the same --sticky-bar-h variable.
     No more thumb-zone collision — user can always tap "Book Tour" safely. */
  .progress-wrap {
    bottom: calc(var(--sticky-bar-h) + 22px) !important;
    right: 16px !important;
    width: 42px !important;
    height: 42px !important;
    z-index: 9980 !important;
  }

  /* --- Avoid bottom content hiding underneath fixed sticky bar --- */
  /* Uses --sticky-bar-h so one variable controls both padding & FAB lift */
  .pd-main-section {
    padding-bottom: calc(var(--sticky-bar-h) + 50px) !important;
  }

  /* ---- Property Detail ---- */

  /* Hide desktop mosaic, show mobile carousel */
  .pd-gallery-mosaic {
    display: none !important;
  }

  .mobile-gallery-carousel {
    display: block;
  }

  /* 360 Virtual Tour button */
  #btn-360-tour-mobile {
    display: flex !important;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    background: rgba(255, 255, 255, 0.98);
    border: 1.5px solid #E2E8F0;
    color: #111827;
    font-size: 13.5px;
    font-weight: 700;
    padding: 12px 16px;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  /* Spec cards: Smooth horizontal scrolling pill row with breathing room */
  .pd-spec-grid {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding-top: 4px;
    padding-bottom: 8px;
    padding-right: 20px;
    margin-bottom: 28px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .pd-spec-grid::-webkit-scrollbar {
    display: none;
  }

  .spec-card {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
    padding: 10px 16px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    min-width: max-content;
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  }

  .spec-icon-box {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    font-size: 13.5px !important;
    flex-shrink: 0;
  }

  .spec-label {
    font-size: 10.5px !important;
    margin-bottom: 1px !important;
    white-space: nowrap !important;
  }

  .spec-value {
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* Main layout: single column, consistent vertical rhythm */
  .pd-main-layout {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }

  .pd-card-block {
    margin-bottom: 28px !important;
  }

  /* Un-stick sidebar on mobile */
  .pd-sticky-sidebar {
    position: static !important;
    top: auto !important;
  }

  /* Trust block: single column with generous internal breathing room */
  .pd-trust-container {
    padding: 24px 20px !important;
    margin-bottom: 28px !important;
  }

  .pd-trust-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .trust-item {
    font-size: 13.5px !important;
    gap: 12px !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Calculator: single column stacked, clean white input fields */
  .pd-calc-container {
    padding: 24px 20px !important;
    margin-bottom: 28px !important;
  }

  .pd-calc-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .calc-select-custom {
    background: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    font-size: 13px !important;
    padding: 12px 36px 12px 14px !important;
  }

  /* Calculator result: stack vertically with distinct high-contrast button */
  .pd-calc-result {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    padding: 20px !important;
    background: #FFFBF7 !important;
    border: 1.5px solid #FDBA74 !important;
    border-radius: 14px !important;
  }

  .pd-calc-result a,
  .pd-calc-result button {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 13px 20px !important;
    font-size: 14px !important;
    background: #0F172A !important; /* High contrast Dark Slate to stop orange-on-orange clash */
    color: #FFFFFF !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2) !important;
  }

  /* Breadcrumb header: stack title and share buttons */
  .pd-breadcrumb-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px;
  }

  .pd-breadcrumb-row h1 {
    font-size: 24px !important;
  }

  /* Share and wishlist buttons: wrap */
  .pd-action-btns {
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  .pd-action-btns button,
  .pd-action-btns a {
    flex: 1;
    justify-content: center;
    font-size: 12.5px !important;
    padding: 9px 12px !important;
  }

  /* Hide sticky sidebar concierge form on mobile (replaced by sticky CTA + bottom sheet) */
  .pd-sidebar-hide-mobile {
    display: none !important;
  }

  /* Show sticky bottom CTA on mobile */
  #mobile-sticky-cta {
    display: flex !important;
  }

  /* ---- Property listing page ---- */
  .property-grid {
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  /* ---- Narrative feature tags: wrap naturally ---- */
  .narrative-tag {
    font-size: 11.5px !important;
    padding: 6px 12px !important;
  }

  /* ---- Typography scale-down ---- */
  h1 { font-size: 26px !important; line-height: 1.25 !important; }
  h2 { font-size: 22px !important; }
  h3 { font-size: 18px !important; }

  /* ---- Footer: single column, center ---- */
  .footer-col {
    text-align: center;
  }

  .footer-col .footer-logo {
    margin: 0 auto;
  }

  .social-list {
    justify-content: center;
  }

  .address-list__item {
    justify-content: center;
    text-align: center;
  }

  .footer a,
  .footer button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── SMALL PHONE BREAKPOINT (max 480px) ──────────────────────── */
@media (max-width: 480px) {

  .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .spec-card {
    padding: 9px 14px !important;
  }

  .spec-value {
    font-size: 12.5px !important;
  }

  #mobile-sticky-cta {
    padding: 10px 14px;
  }

  #mobile-sticky-cta .cta-price {
    font-size: 14px;
  }

  #mobile-sticky-cta .cta-btn {
    font-size: 13.5px;
    padding: 10px 18px;
    min-height: 44px;
  }

  h1 {
    font-size: 22px !important;
  }

  .property-item .property-item__img img {
    width: 100%;
    height: 220px;
    object-fit: cover;
  }
}

/* ── UTILITY: Clamp long text on cards ───────────────────────── */
.text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Global image safety ─────────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Newsletter row: pill input stacks on mobile ─────────────── */
@media (max-width: 600px) {
  form[id*="newsletter-form"] {
    flex-direction: column !important;
    border-radius: 14px !important;
    padding: 14px !important;
    gap: 10px;
  }

  form[id*="newsletter-form"] input[type="email"] {
    width: 100% !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
  }

  form[id*="newsletter-form"] button[type="submit"] {
    width: 100% !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    justify-content: center;
    text-align: center;
  }

  iframe[src*="maps.google"],
  iframe[title*="map"],
  iframe[title*="Map"] {
    height: 300px !important;
  }
}

/* ── Bootstrap col fixes (prevent horizontal overflow) ──────── */
@media (max-width: 768px) {
  [class*="col-"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .row {
    margin-left: -12px !important;
    margin-right: -12px !important;
  }

  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  [style*="width:"] {
    max-width: 100% !important;
  }
}

/* ============================================================
   UX REVIEW POLISH — 2026-08-10
   All 5 checklist items plus micro-polish additions.
   ============================================================ */

/* ── FIX 1: Section Vertical Rhythm ─────────────────────────────
   Every major card gets the same 28px bottom margin so the scroll
   rhythm feels calm and predictable. Applied globally to the
   property detail left column. */
.pd-card-block {
  margin-bottom: 28px !important;
}

/* ── FIX 2: Green Trust Box internal breathing ───────────────────
   Increased padding so the check items don't press against the
   green border. gap bumped to 16px on desktop so each line has
   visual separation. */
.pd-trust-container {
  padding: 28px 26px !important;
}

.pd-trust-grid {
  gap: 16px;
}

.trust-item {
  /* Ensure items have minimum breathing room */
  padding: 2px 0;
}

/* ── FIX 3: Mortgage Result Box — orange-on-orange fix ───────────
   Container: light orange bg with orange border = fine
   Button: DARK SLATE (#0F172A) for maximum contrast
   This is already set inline, but we enforce it here too. */
.pd-calc-result > a,
.pd-calc-result > button {
  background: #0F172A !important;
  color: #FFFFFF !important;
}

/* ── FIX 4: Mortgage Inputs — visible, interactive appearance ────
   White background, 1.5px border, rounded corners = feel tappable */
.calc-select-custom {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 10px !important;
}

.calc-select-custom:focus {
  border-color: #EA580C !important;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15) !important;
  background: #FFFFFF !important;
}

/* ── FIX 5: Desktop — calc result row — ensure button doesn't overflow ── */
@media (min-width: 769px) {
  .pd-calc-result {
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
  }

  .pd-calc-result > a,
  .pd-calc-result > button {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* ── STICKY BAR: ensure it never covers the last child of main section ──
   The main section desktop padding is already 80px. On mobile this is
   overridden to calc(--sticky-bar-h + 50px) above. But we also add a
   global rule for any page that has a fixed bottom bar pattern. */
body.has-sticky-bottom {
  padding-bottom: var(--sticky-bar-h, 70px);
}

/* ── SPEC PILLS: last pill gets extra breathing room ─────────────
   The last spec card gets a right-padding ghost so it never gets
   cut off at the screen edge during horizontal scroll. */
.pd-spec-grid > .spec-card:last-child {
  margin-right: 20px;
}

/* ── GALLERY TILE: hover zoom effect ─────────────────────────────
   Desktop only — tiles zoom gently on hover for premium feel */
@media (min-width: 769px) {
  .gallery-tile:hover img {
    transform: scale(1.04);
  }
}

/* ── FORM INPUT: consistent luxury input across all pages ────────
   form-input-luxury is used in sidebar + bottom sheet forms */
.form-input-luxury {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.form-input-luxury:focus {
  outline: none;
  background: #FFFFFF;
  border-color: #EA580C;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15);
}

/* ── MOBILE: standardise all card margins to 28px ───────────────
   Enforces the consistent vertical rhythm on small screens */
@media (max-width: 768px) {
  .pd-card-block,
  .pd-trust-container,
  .pd-calc-container {
    margin-bottom: 28px !important;
  }

  /* Trust box mobile: generous internal padding */
  .pd-trust-container {
    padding: 24px 20px !important;
  }

  /* Trust items: single column with gap */
  .pd-trust-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .trust-item {
    font-size: 13.5px !important;
    gap: 12px !important;
  }

  /* Calc inputs: full white + visible border on mobile */
  .calc-select-custom {
    background: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
  }

  /* Calc result: stack vertically, dark button */
  .pd-calc-result {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }

  .pd-calc-result > a,
  .pd-calc-result > button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    background: #0F172A !important;
    color: #FFFFFF !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  /* Price pop: ensure animation only on the number element */
  #calc-result-monthly.price-pulse {
    animation: pricePop 0.3s ease;
  }

  /* Sticky bar small phone */
  #mobile-sticky-cta {
    padding: 0 14px;
  }

  #mobile-sticky-cta .cta-price {
    font-size: 15px;
  }

  #mobile-sticky-cta .cta-btn {
    font-size: 13.5px;
    padding: 10px 20px;
    min-height: 44px;
  }
}

/* ── SECTION RHYTHM: page-level card spacing (non-detail pages) ──
   Ensure consistent margins on About, Blog, Estates etc. */
.work-process-item,
.property-type-item,
.blog-sidebar-item,
.contact-card {
  margin-bottom: 24px;
}

/* ── ACCESSIBILITY: ensure all interactive elements have focus ring ─ */
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2.5px solid #EA580C !important;
  outline-offset: 2px !important;
}

/* ── PRINT: hide sticky bar & FAB when printing ──────────────── */
@media print {
  #mobile-sticky-cta,
  .progress-wrap,
  .floating-chat {
    display: none !important;
  }
}