/* ============================================================
   Home page — section-specific styles
   ============================================================ */

/* ---- Hero ---- */

.hero {
  position: relative;
  min-height: min(85vh, 760px);
  display: flex; align-items: center;
  color: var(--c-text-on-dark);
  overflow: hidden;
}
/* The photo scrolls at half speed on its own layer (see [data-parallax]).
   Prod does the same and uses no background-attachment: fixed, which pins a
   background at zero speed rather than half. The overlay stays put. */
.hero__bg {
  background-image: url('../images/1920/13871333/evening-view-of-an-outdoor-pool-located-on-a-deck-2024-01-22-20-47-52-utc1-min.webp');
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: rgba(10, 22, 12, .55);   /* darkened .42 -> .55 for WCAG text contrast */
}
.hero .scroll-down { z-index: 2; }
.hero__inner {
  position: relative; z-index: 2;
  text-align: center;
  padding-block: var(--space-9);
  width: 100%;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);   /* inherited by title+subtitle for legibility */
}
.hero__title {
  color: var(--c-text-on-dark);
  font-size: clamp(1.75rem, 5vw, var(--text-3xl));
  font-family: var(--font-display);
  margin-bottom: var(--space-4);
  letter-spacing: normal;
}
.hero__subtitle {
  font-family: var(--font-body);                  /* prod subtitle is Inter sans, NOT serif/italic */
  font-style: normal;
  font-size: clamp(1.125rem, 2vw, 1.5rem);        /* prod = 24px */
  font-weight: var(--fw-regular);
  margin: 0 0 var(--space-6);
  color: var(--c-text-on-dark);
  letter-spacing: 0.01em;
}

.scroll-down {
  position: absolute;
  bottom: var(--space-5); left: 50%; transform: translateX(-50%);
  width: 30px; height: 50px; border: 2px solid var(--c-text-on-dark);
  border-radius: 15px; z-index: 2;
}
.scroll-down::before {
  content: ''; position: absolute;
  top: 8px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 8px; background: var(--c-text-on-dark);
  border-radius: 2px;
  animation: scroll-down-bob 2s ease-in-out infinite;
}
@keyframes scroll-down-bob {
  0%, 100% { opacity: 1; transform: translate(-50%, 0); }
  50% { opacity: .3; transform: translate(-50%, 14px); }
}

/* ---- Hero entrance animation (prod: staggered fade-in on load) ---- */
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.hero__title    { animation: hero-rise .9s ease-out both .3s; }
.hero__subtitle { animation: hero-rise .9s ease-out both .6s; }
.hero .btn      { animation: hero-rise .9s ease-out both .9s; }
@media (prefers-reduced-motion: reduce) { .hero__title, .hero__subtitle, .hero .btn { animation: none; } }

/* ---- Meet Betty (text-with-image) ---- */

.meet {
  padding-block: var(--space-9);
}
.meet__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-9);
  align-items: start;
}
.meet__body h2 {
  margin-bottom: var(--space-2);
  text-align: left;
  font-family: var(--font-display);
  color: var(--c-primary);   /* prod: navy, not black */
}
.meet__body .role {
  font-family: var(--font-display);
  color: #175378;                 /* prod teal-navy accent for these heading lines */
  font-size: 20px;
  font-weight: var(--fw-regular);
  margin-bottom: var(--space-1);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.meet__body .credentials {
  font-family: var(--font-display);
  font-size: 20px;
  color: #175378;
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  margin-bottom: var(--space-5);
  letter-spacing: var(--ls-wide);
  line-height: 1.3;
}
.meet__body .languages {
  margin-bottom: var(--space-4);
  font-style: italic;
  color: var(--c-text-soft);
}
.meet__body p { font-size: var(--text-lg); line-height: var(--lh-loose); color: var(--c-text-soft); margin-bottom: var(--space-4); }

.meet__awards-list {
  margin: var(--space-5) 0;
  padding-left: 0;
  list-style: none;
  color: #175378;   /* prod: awards items in teal-navy, not black */
}
.meet__awards-list li {
  padding: var(--space-1) 0;
  padding-left: var(--space-4);
  font-size: var(--text-sm);
  position: relative;
}
.meet__awards-list li::before {
  content: '\25B8';  /* prod: small right-pointing triangle bullet */
  position: absolute;
  left: 0;
  color: #175378;
}

.meet__contact { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.meet__contact .btn { display: inline-block; width: fit-content; padding: 10px 24px; font-size: var(--text-sm); }

.meet__image {
  position: relative;
  display: flex;
  justify-content: center;
}
.meet__image::before {          /* prod's light-gray diagonal panel behind Betty */
  content: '';
  position: absolute;
  top: 4%; bottom: 4%; left: 20%; right: 0;
  background: #eef0f2;
  transform: skewX(-7deg);
  z-index: 0;
}
.meet__image > img {
  /* Betty.webp is the full portrait with the BN logo baked into the top-right corner. */
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  display: block;
}
.meet__badges {
  display: flex;
  justify-content: flex-start;     /* prod: badges sit left, under the awards text */
  align-items: center;
  gap: var(--space-6);
  margin: var(--space-5) 0;
  flex-wrap: wrap;
}
.meet__badges img {
  /* Medallion seal + Platinum + Top 10% — prod renders these ~140px wide */
  height: 96px;
  width: auto;
}

@media (max-width: 900px) {
  .meet__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .meet__image { order: -1; }
}

/* ---- Two-column (Sold + Featured) ---- */

.listings-twocol {
  padding-block: var(--space-9);
  background: #f7f7f7;   /* prod: light-gray section band behind Sold/Featured */
}
.listings-twocol__grid {
  display: grid;
  grid-template-columns: 1fr;   /* prod: two stacked full-width sections (not side-by-side) */
  gap: var(--space-9);
}
.listings-twocol__card {
  text-align: center;
}
.listings-twocol__card h2 {
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  color: var(--c-primary);
  font-size: var(--text-2xl);
  letter-spacing: normal;
  text-transform: uppercase;
}
.listings-twocol__card iframe,
.single-house__iframe {
  width: 100%;
  height: 880px;                /* prod desktop iframe height */
  margin-bottom: var(--space-5);
  border: 0;
  display: block;
}

@media (max-width: 900px) {
  .listings-twocol__grid { grid-template-columns: 1fr; }
  .listings-twocol__card iframe,
  .single-house__iframe { height: 600px; }   /* prod mobile iframe height */
}

/* ---- City cards: zigzag image + navy block ---- */

.city-cards { padding-block: 0; }

/* Prod splits the card 40% text / 60% photo (576px / 864px at a 1440 viewport),
   not 50/50. Reverse cards put the photo first in the DOM, so their track
   sizes are mirrored. The photo column's width and the card's height together
   decide how hard the parallax layer has to magnify the image — get these
   wrong and the photo reads as zoomed-in and soft. */
.city-card {
  display: grid;
  grid-template-columns: 2fr 3fr;
  min-height: 360px;
  align-items: stretch;
  overflow: hidden;
}
.city-card--reverse { grid-template-columns: 3fr 2fr; }
.city-card__photo {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}
/* Prod runs each card photo as a slick fade slider: 4.5s dwell, 2s crossfade.
   Slides stack on top of each other; only .is-active is opaque. */
.city-card__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}
.city-card__slide.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  /* No cycling (main.js bails out too) — the first slide just stays put. */
  .city-card__slide { transition: none; }
}

/* The generic [data-parallax] / .parallax__layer rules live in base.css —
   inner-page banners use them too. */
.city-card__body {
  background: var(--c-footer);   /* prod: dark charcoal, not navy (rgb 57,58,60) */
  color: var(--c-text-on-dark);
  display: flex; flex-direction: column; justify-content: center;
  padding: 128px 80px;           /* prod; drives the 484px card height */
}
/* For reverse cards, the photo is FIRST in HTML so already lands in the
   left grid slot — no order CSS needed. */

.city-card__eyebrow {
  font-family: var(--font-display);   /* prod: 20px Manrope */
  font-size: 20px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--fw-regular);
}
.city-card h2 {
  color: var(--c-text-on-dark);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
  letter-spacing: normal;
}
.city-card p {
  color: rgba(255,255,255,.92);
  line-height: var(--lh-loose);
  margin-bottom: var(--space-5);
  max-width: 50ch;
  font-size: 20px;   /* prod */
}
.city-card .btn { width: fit-content; }
.city-card .btn--outline.on-dark {
  border-color: var(--c-text-on-dark);
  color: var(--c-text-on-dark) !important;
  background: transparent;
}
.city-card .btn--outline.on-dark:hover {
  background: var(--c-text-on-dark);
  color: var(--c-primary) !important;
}

/* Alternating cards use prod's medium-blue hue, darkened from prod's #3182b9
   so white body copy still clears WCAG AA 4.5:1 (prod's exact shade only hit ~4.2:1) */
.city-card--alt .city-card__body { background: #276894; }

@media (max-width: 900px) {
  .city-card,
  .city-card--reverse { grid-template-columns: 1fr; }
  /* The 128px/80px desktop padding is far too generous once stacked. */
  .city-card__body { padding: var(--space-7); }
  /* On mobile every card stacks photo-then-body */
  .city-card .city-card__photo { order: -1; }
  .city-card .city-card__body  { order: 0; }
}

/* ---- Single House Listings — own row, with iframe (prod has 3rd MLS iframe here) ---- */

.single-house {
  padding-block: var(--space-9);
  text-align: center;
}
.single-house h2 {
  font-family: var(--font-display);
  margin-bottom: var(--space-3);
  color: var(--c-primary);
  letter-spacing: normal;
  text-transform: uppercase;
  font-size: var(--text-2xl);
}
.single-house p { color: var(--c-text-soft); max-width: 60ch; margin: 0 auto var(--space-5); }

/* ---- MLS map search CTA — SPLIT layout (photo left + navy right) ---- */

.mls-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 420px;
}
.mls-cta__photo {
  min-height: 320px;
}
/* The image lives on the parallax layer, not the container — the container is
   the fixed viewport that crops it. */
.mls-cta__photo-img {
  background-image: url('../images/1920/13871315/contemporary-luxury-home-with-glass-balconies-in-poole-uk-showcasing-modern-architectural-design.webp');
  background-size: cover; background-position: center;
}
.mls-cta__body {
  background: var(--c-footer);   /* prod: charcoal rgb(57,58,60), not navy */
  color: var(--c-text-on-dark);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-7);
}
.mls-cta__body .label {
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  margin-bottom: var(--space-2);
  display: block;
}
.mls-cta__body h2 {
  color: var(--c-text-on-dark);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: normal;
  margin-bottom: var(--space-3);
}
.mls-cta__body p {
  color: rgba(255,255,255,.85);
  margin-bottom: var(--space-5);
  max-width: 50ch;
  font-size: var(--text-lg);   /* prod: 18px */
}
.mls-cta__body .btn { width: fit-content; }

@media (max-width: 900px) {
  .mls-cta { grid-template-columns: 1fr; }
}

/* ---- Get in touch CTA (white bg, dark text, matches prod) ---- */

/* Prod pads this block 128px top and runs straight into the contact form,
   which sits only 60px below the email line. The form's own section supplies
   the bottom padding, so this one has none. */
.touch-cta {
  padding: 128px 0 0;
  background: var(--c-bg);
  text-align: center;
}
.touch-cta h2 {
  color: var(--c-heading);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1;                  /* prod: 32px/32px */
  letter-spacing: normal;
  margin-bottom: var(--space-4);   /* prod: 16px */
}
/* Tagline and both contact rows share one type spec on prod:
   21px/1.5 Manrope, weight 300, 3px tracking, uppercase. */
.touch-cta p,
.touch-cta .contact-row {
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: var(--fw-light);
  line-height: 1.5;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.touch-cta p { margin-bottom: 30px; }
.touch-cta .contact-row { margin: 0 0 10px; }
.touch-cta a { color: var(--c-text); }   /* prod: dark, not blue */
.touch-cta a:hover { color: var(--c-primary); }

/* 10px of that 60px comes from the last row's margin, so 50px lands here. */
.touch-cta + .contact-section {
  padding-top: 50px;
  padding-bottom: 128px;
}

/* ---- Contact section wrapper (form styles live in css/forms.css) ---- */

.contact-section {
  padding-block: var(--space-9);
}
.contact-section h2 {
  text-align: center;
  margin-bottom: var(--space-6);
  font-family: var(--font-display);
  letter-spacing: normal;
}