/* ==========================================================================
   Home Page — Editorial Luxury
   ========================================================================== */

/* Shared: eyebrow label */
/* Local: home spaces its eyebrows further from the heading below. */
.eyebrow { margin-bottom: var(--space-4); }

/* The hero owns its own header clearance, so the page must defeat the base
   rule `body:not(.header-transparent) .main-content { padding-top: … }`
   (specificity 0,2,1). A bare `.main-content` loses that fight and the
   difference renders as a white slab between the nav and the hero band —
   hence the matching-specificity selector, same trick as services.css. */
body .main-content:has(.home-hero) {
  padding-top: 0;
  padding-bottom: 0;
}

/* ==========================================================================
   HERO — split composition
   Headline on the site's light ground, one framed photograph beside it.
   Replaced the full-bleed CSS-background render: the photo is a real <img>
   (preload-scannable, srcset-served), the nav is solid white (HeroHeader is
   false in vm_home.go), and there is no entrance animation — nothing should
   delay the first read of the storefront.
   ========================================================================== */
.home-hero {
  background: var(--warm-white);
  border-bottom: 1px solid var(--border);
  /* Clear the fixed header, then breathe. */
  padding: calc(var(--header-height) + var(--space-10)) 0 var(--space-12);
}

.home-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-10);
}

.home-hero-title {
  /* display-sm at every width: the copy carries its own line break (pre-line),
     and this size is the largest at which "encontramos tu hogar." holds as
     one line inside the 6fr column. display proper orphans "hogar." */
  font-size: var(--font-size-display-sm);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 0 0 var(--space-5);
  white-space: pre-line;
}

.home-hero-subtitle {
  font-size: var(--font-size-lg);
  color: var(--gray-600);
  max-width: 44ch;
  margin: 0 0 var(--space-8);
  line-height: 1.6;
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

@media (max-width: 640px) {
  /* Tighter first fold: Facebook-link visitors should hit the headline fast. */
  .home-hero { padding-top: calc(var(--header-height) + var(--space-8)); }
  /* Full-width stacked CTAs: two ragged-width buttons read as clutter on a
     phone, and the taps get bigger. */
  .home-hero-actions { flex-direction: column; align-items: stretch; }
  .home-hero-actions .btn { justify-content: center; }
  /* No hero photo on phones: after two stacked CTAs it pushed the real
     content (recent listings) a full screen down. The template's media-gated
     <picture> keeps phones from downloading it too. */
  .home-hero-figure { display: none; }
}

.home-hero-figure {
  margin: 0;
  overflow: hidden;
  background: var(--gray-100);
}

.home-hero-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

@media (min-width: 1024px) {
  .home-hero {
    padding: calc(var(--header-height) + var(--space-16)) 0 var(--space-16);
  }
  .home-hero-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    column-gap: var(--space-16);
    align-items: center;
  }
  .home-hero-figure img { aspect-ratio: auto; height: 100%; min-height: 460px; }
}

/* ==========================================================================
   FEATURED LISTINGS
   ========================================================================== */
.home-featured {
  padding: var(--space-20) 0 var(--space-16);
}

@media (min-width: 1024px) {
  .home-featured { padding: var(--space-32) 0 var(--space-24); }
}

.home-featured-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
  flex-wrap: wrap;
}

.home-featured-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0;
  max-width: none;
}

/* ==========================================================================
   FEATURED CAROUSEL — horizontal scroll-snap, 3 visible on desktop
   ========================================================================== */
.featured-carousel-wrap {
  position: relative;
  /* Give nav arrows room to sit on top of the track without visual clipping
     of card hover lifts. Overflow stays visible so shadows aren't cropped. */
}

.featured-carousel {
  display: grid;
  grid-auto-flow: column;
  /* Desktop: exactly 3 visible cards at a time. */
  grid-auto-columns: calc((100% - (var(--space-8) * 2)) / 3);
  gap: var(--space-8);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Top/bottom breathing room so `:hover` transform on cards isn't clipped
     by the scroll container in browsers that quietly set overflow-y:auto. */
  padding: var(--space-1) 0 var(--space-8);
  /* Extend scroll area under padding on the sides so arrows don't appear to
     overlap cards awkwardly when scrolled to extremes. */
  scroll-padding: 0;
  outline: none;
}

.featured-carousel::-webkit-scrollbar { display: none; }

.featured-carousel > .listing-card {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-width: 0;            /* prevent card width blow-up inside grid auto column */
}

/* Tablet: 2 cards visible */
@media (max-width: 1023px) {
  .featured-carousel {
    grid-auto-columns: calc((100% - var(--space-6)) / 2);
    gap: var(--space-6);
  }
}

/* Mobile: ~1 card + peek of next so users know they can swipe */
@media (max-width: 640px) {
  .featured-carousel {
    grid-auto-columns: 85%;
    gap: var(--space-4);
    /* Small left inset so first card doesn't touch the container edge */
    padding: var(--space-1) var(--space-4) var(--space-8) 0;
  }
}

/* ==========================================================================
   NAV ARROWS — desktop only; auto-hide when content fits
   ========================================================================== */
.featured-nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--border);
  border-radius: var(--radius-circle);
  box-shadow: 0 1px 2px rgba(12, 35, 64, 0.06),
              0 10px 24px -8px rgba(12, 35, 64, 0.2);
  cursor: pointer;
  transition: background var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base),
              opacity var(--transition-base),
              transform var(--transition-base);
}

@media (min-width: 768px) {
  .featured-nav { display: inline-flex; }
}

.featured-nav svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.featured-nav:hover:not(:disabled) {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.featured-nav:disabled {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.9);
}

.featured-nav--prev { left: calc(var(--space-4) * -1); }
.featured-nav--next { right: calc(var(--space-4) * -1); }

@media (min-width: 1280px) {
  .featured-nav--prev { left: calc(var(--space-6) * -1); }
  .featured-nav--next { right: calc(var(--space-6) * -1); }
}

/* When there's nothing to scroll, hide nav entirely (set by JS) */
.featured-carousel-wrap.is-static .featured-nav { display: none; }

/* Keyboard focus ring — subtle cobalt */
.featured-carousel:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(43, 94, 212, 0.5);
  border-radius: var(--radius-none);
}

/* Reduced motion — keep JS smooth-scroll disabled */
@media (prefers-reduced-motion: reduce) {
  .featured-carousel { scroll-behavior: auto; }
}

.featured-link {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: gap var(--transition-base), color var(--transition-fast);
}
.featured-link:hover { color: var(--brand-blue); gap: var(--space-3); }
.featured-link svg { width: 14px; height: 14px; }

/* ==========================================================================
   EDITORIAL STRIP — full-bleed navy
   ========================================================================== */
.editorial-strip {
  background: var(--navy);
  color: var(--white);
  padding: var(--space-20) var(--space-6);
  position: relative;
  overflow: hidden;
}

.editorial-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(43, 94, 212, 0.12), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(43, 94, 212, 0.15), transparent 60%);
  pointer-events: none;
}

.editorial-strip-inner {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.editorial-eyebrow {
  font-size: var(--eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--cobalt-bright); /* cobalt on navy needs the brighter variant for AA */
  margin-bottom: var(--space-6);
}

.editorial-heading {
  font-size: var(--font-size-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0; /* headline-only band: no body below, so no bottom margin */
}
.editorial-heading em {
  font-style: italic;
  color: var(--cobalt-bright); /* cobalt on navy needs the brighter variant for AA */
}

.editorial-body {
  font-size: var(--font-size-lg);
  color: rgba(255, 255, 255, 0.78);
  max-width: 60ch;
  margin: 0 auto;
  line-height: 1.65;
}

@media (min-width: 1024px) {
  .editorial-strip { padding: var(--space-24) var(--space-8); }
}

/* ==========================================================================
   STATS STRIP
   ========================================================================== */
.stats-strip {
  --stats-bg: var(--gray-50);
  --stats-border: var(--border);
  --stats-label-color: var(--gray-600);
}

/* ==========================================================================
   WHY US
   ========================================================================== */
.why-us {
  padding: var(--space-24) 0;
}

@media (min-width: 1024px) {
  .why-us { padding: var(--space-32) 0; }
}

.why-us-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-16);
}

.why-heading {
  font-size: var(--font-size-display-sm);
  font-weight: 400;
  line-height: 1.1;
  color: var(--navy);
  margin: 0 0 var(--space-5);
}

.why-intro {
  font-size: var(--font-size-lg);
  color: var(--gray-600);
  line-height: 1.6;
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10) var(--space-8);
  max-width: 1100px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .why-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-12) var(--space-8); }
}

.why-item {
  text-align: left;
}

.why-icon {
  width: 48px;
  height: 48px;
  color: var(--navy); /* icons default to navy; cobalt is reserved for one accent per section */
  margin-bottom: var(--space-5);
}
.why-icon svg { width: 100%; height: 100%; }

.why-item-title {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}

.why-item-body {
  font-size: var(--font-size-base);
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.home-final-cta {
  padding: var(--space-24) 0;
  text-align: center;
  background: linear-gradient(180deg, var(--white) 0%, var(--gray-50) 100%);
  border-top: 1px solid var(--border);
}

.home-final-cta-title {
  font-size: var(--font-size-display-sm);
  font-weight: 400;
  line-height: 1.1;
  color: var(--navy);
  margin: 0 0 var(--space-4);
  max-width: 20ch;
  margin-left: auto;
  margin-right: auto;
}

.home-final-cta-body {
  font-size: var(--font-size-lg);
  color: var(--gray-600);
  max-width: 48ch;
  margin: 0 auto var(--space-8);
  line-height: 1.55;
}

.home-final-cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ==========================================================================
   MOBILE RHYTHM — single source of truth
   Desktop sections are set for a cinematic editorial scale (--space-20/24/32).
   On phones, that rhythm feels like dead air between sections. This block
   owns the mobile-only compaction so every section stays consistent and
   future sections inherit the same cadence.
   Breakpoint aligns with the rest of the site (640px).
   ========================================================================== */
@media (max-width: 640px) {
  /* Section vertical padding — consistent 48px (space-12) breathing room */
  .home-featured    { padding: var(--space-12) 0; }
  .editorial-strip  { padding: var(--space-16) var(--space-5); }
  .why-us           { padding: var(--space-16) 0; }
  .home-final-cta   { padding: var(--space-16) 0; }

  /* Section internal rhythm — heading → content */
  .home-featured-header { margin-bottom: var(--space-6); }
  .why-us-header        { margin-bottom: var(--space-10); }

  /* Why-us cards — tighten gap so stacked items read as a coherent list,
     not four floating islands on a 360px phone. */
  .why-grid { gap: var(--space-8); }

  /* Featured: the carousel already has its own bottom padding (space-8),
     so drop the section's bottom padding so we don't double up. */
  .home-featured { padding-bottom: var(--space-8); }

  /* Final CTA — tighter title→body→actions stack on narrow screens */
  .home-final-cta-body { margin-bottom: var(--space-6); }
}