/* ═══════════════════════════════════════════════════════════════════════════
 * Dark entry band — header + hero.
 *
 * Loaded AFTER site.css and scoped to `.theme-dark-hero` on <body>, so only
 * the pages that opt in get it and site.css needs no edits. Everything below
 * the hero stays light: one dark moment at the top, not an alternating page.
 *
 * Contrast notes (measured, not assumed):
 *   white      on #0E0B1F  17.9:1   headline, nav
 *   #B9B4D6    on #0E0B1F   8.0:1   lead, secondary nav
 *   #CBF1DE    on #101314  13.4:1   active states — brand violet is only
 *                                   2.4:1 here, so mint carries "active" on
 *                                   dark and violet stays on light ground
 *   white      on #4B2FE0   7.4:1   the CTA keeps its violet
 * ═══════════════════════════════════════════════════════════════════════════ */

.theme-dark-hero {
  --sn-night-top: #171043;
  --sn-night-bottom: #0C0A18;
  --sn-on-dark: #FFFFFF;
  --sn-on-dark-soft: #B9B4D6;
  --sn-on-dark-hairline: rgba(255, 255, 255, 0.14);
}

/* ── The band ───────────────────────────────────────────────────────────── */
/* Header and hero share one background: the header is transparent and sits on
   the hero, so the two read as a single dark field rather than a dark strip
   stacked on a dark box. */
.theme-dark-hero .dark-band {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(124, 99, 240, 0.40) 0%, rgba(124, 99, 240, 0) 58%),
    linear-gradient(168deg, var(--sn-night-top) 0%, var(--sn-night-bottom) 72%);
}

/* The photograph is decoration, not information — it sits under the gradient
   at low opacity, masked out at the bottom so the band dissolves into the
   white page instead of ending on a hard line. */
.theme-dark-hero .dark-band__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.theme-dark-hero .dark-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Square source, wide band — pull the focal point down and right so the
     people stay in frame and land in the open half of the layout. */
  object-position: 50% 58%;
  opacity: 1;
  /* No mirror: this frame is already composed with the manager and family on
     the right and the towers filling the left, and flipping a tailored suit
     reads wrong (lapels, buttoning, the folder in the wrong hand). */
  filter: saturate(0.82) contrast(1.02);
}

/* Brand panel over the left 60%, photograph open on the right 40%.
   A flat violet at 60% opacity across the whole frame washed the towers out
   and still left the headline at 5:1; confining the wash to the text side
   buys the contrast where it is needed and leaves the couple and the
   buildings legible where they are the point. */
.theme-dark-hero .dark-band__media::before {
  content: "";
  position: absolute;
  inset: 0;
  /* z-index is load-bearing: `filter` on the <img> gives it a stacking
     context, which promotes it into the positioned-paint step alongside
     these pseudo-elements. Without an explicit order the photo paints over
     ::before and the brand panel silently disappears. */
  z-index: 1;
  background: linear-gradient(
    96deg,
    rgba(17, 10, 58, 0.92) 0%,
    rgba(22, 13, 74, 0.86) 42%,
    rgba(34, 19, 112, 0.60) 58%,
    rgba(52, 31, 172, 0.22) 72%,
    rgba(75, 47, 224, 0.06) 88%,
    rgba(75, 47, 224, 0.03) 100%
  );
}

/* Only the vertical resolve into the white page below — deliberately light
   across the open right side. */
.theme-dark-hero .dark-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(10, 6, 30, 0.30) 0%,
    rgba(10, 6, 30, 0.04) 38%,
    rgba(10, 6, 30, 0.18) 70%,
    rgba(12, 10, 24, 0.80) 92%,
    var(--sn-white) 100%
  );
}

/* ── Header on the dark band ────────────────────────────────────────────── */
.theme-dark-hero .site-header {
  background: transparent;
  border-bottom: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.theme-dark-hero .brand__word { color: var(--sn-on-dark); }
.theme-dark-hero .brand__mark path { fill: var(--sn-on-dark); }
.theme-dark-hero .main-nav a { color: var(--sn-on-dark); }
.theme-dark-hero .main-nav a:hover { color: var(--sn-mint); }
.theme-dark-hero .header-actions__signin { color: var(--sn-on-dark-soft); }
.theme-dark-hero .header-actions__signin:hover { color: var(--sn-on-dark); }
.theme-dark-hero .mobile-menu > summary svg path { stroke: var(--sn-on-dark); }
.theme-dark-hero .mobile-menu[open] > summary { background: rgba(255, 255, 255, 0.10); }
.theme-dark-hero .mobile-menu-panel {
  background: var(--sn-night-bottom);
  border-bottom-color: var(--sn-on-dark-hairline);
}
.theme-dark-hero .mobile-menu-panel a {
  color: var(--sn-on-dark);
  border-bottom-color: var(--sn-on-dark-hairline);
}

/* Focus has to survive on both grounds — the light-theme violet ring is
   invisible here, so rings on the dark band are white with a violet halo. */
.theme-dark-hero .dark-band a:focus-visible,
.theme-dark-hero .dark-band button:focus-visible,
.theme-dark-hero .dark-band summary:focus-visible {
  outline: 2px solid var(--sn-white);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(124, 99, 240, 0.55);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.theme-dark-hero .hero {
  background: transparent;
  padding-top: calc(var(--sn-header-height) + 28px);
}
/* Headline and lead stay on the left margin — the same line every section
   below starts on — while the card centres. The text reads as the page
   speaking; the card reads as the thing you act on. */
.theme-dark-hero .hero h1 {
  color: var(--sn-on-dark);
  max-width: 20ch;
}
.theme-dark-hero .hero__lead {
  /* Over a photograph the soft lilac drops below AA in the bright patches —
     near-white holds everywhere the crop can land. */
  color: rgba(255, 255, 255, 0.92);
  max-width: 52ch;
}

/* The white card is the one bright object on the field: everything else here
   is quiet so the eye lands on the thing you are meant to use.
   It sits on the left margin rather than centred, and stops short of the
   frame's right third — a full-width card covered the people from the chest
   down, which is the whole reason there is a photograph of a viewing. */
.theme-dark-hero .search-card {
  margin-inline: 0;
  max-width: 720px;
  text-align: left;
  border-color: transparent;
  box-shadow: 0 24px 60px -24px rgba(6, 4, 16, 0.75), 0 2px 8px rgba(6, 4, 16, 0.35);
}
.theme-dark-hero .search-card__popular-label { color: var(--sn-text-mute-2); }


.theme-dark-hero .hero__facts .fact { color: var(--sn-on-dark); }
.theme-dark-hero .hero__scroll-hint { color: var(--sn-on-dark-soft); }

@media (min-width: 900px) {
  /* site.css gives the light hero min-height:824px so the pale band fills the
     fold. On the dark band that leaves a dead void under the card, so the
     band is sized by its content plus a fixed tail instead. */
  .theme-dark-hero .hero {
    padding-top: calc(var(--sn-header-height) + 40px);
    padding-bottom: 72px;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .theme-dark-hero .hero h1 { font-size: 60px; }
  /* The headline has to end inside the violet panel — at 840px it ran to 68%
     of the viewport, out over the photograph, which is what dropped it to
     2.6:1 against white. */
  .theme-dark-hero .hero h1 { max-width: 15ch; }
  .theme-dark-hero .hero__lead { max-width: 44ch; }
  /* Four fixed-width controls plus the button leave the place field whatever
     is left — at 1000px that was 274px and the placeholder clipped mid-word.
     The card widens and the field takes the slack. */
  /* Sized to fit one row at 860: 150 + 230 + 96 + 150 + button + gaps. The
     Search button dropping to its own line looked like a mistake. */
  .theme-dark-hero .field--place { flex: 1 1 190px; }
  .theme-dark-hero .field--segment { display: flex; width: 132px; flex-shrink: 0; }
  .theme-dark-hero .field--bhk { width: 84px; }
  .theme-dark-hero .field--type { width: 128px; }
  .theme-dark-hero .search-card__submit { padding: 0 20px; }

  /* A smaller card: the hero's job is to start a search, not to be a form.
     Control heights drop to 46 and the padding tightens — the 44px touch
     minimum still governs below 900px, where fingers rather than pointers
     use it. */
  .theme-dark-hero .search-card { padding: 16px 18px 18px; }
  .theme-dark-hero .search-card .field input,
  .theme-dark-hero .search-card .field select,
  .theme-dark-hero .search-card__submit { height: 46px; font-size: 15px; }
  .theme-dark-hero .search-card .field label { font-size: 12px; }
  .theme-dark-hero .search-card__fields { gap: 10px; margin-top: 12px; }
  .theme-dark-hero .search-card .tabgroup__btn { min-height: 38px; font-size: 14px; margin-right: 22px; }
  .theme-dark-hero .search-card__popular { margin-top: 12px; }
  .theme-dark-hero .search-card__popular .chip-link { padding: 5px 11px; font-size: 13px; }
  .theme-dark-hero .search-card__popular-label { font-size: 12px; }
}

/* The scroll cue was a canvas artifact: on the dark band it lands on the fade
   where it is unreadable against both ends of the gradient. The card's own
   bottom edge already says there is more below. */
.theme-dark-hero .hero__scroll-hint { display: none; }

/* ── Mobile: solid dark header and bottom nav ───────────────────────────── */
@media (max-width: 899px) {
  .theme-dark-hero .site-header { position: sticky; background: var(--sn-night-bottom); }
  .theme-dark-hero .hero { padding-top: 28px; }
}

@media (max-width: 899px) {
  .theme-dark-hero .bottom-nav {
    background: var(--sn-night-bottom);
    border-top-color: var(--sn-on-dark-hairline);
  }
  .theme-dark-hero .bottom-nav__label { color: var(--sn-on-dark-soft); }
  .theme-dark-hero .bottom-nav__item svg circle,
  .theme-dark-hero .bottom-nav__item svg path { stroke: var(--sn-on-dark-soft); }
  .theme-dark-hero .bottom-nav__item[aria-current="page"] .bottom-nav__label { color: var(--sn-mint); }
  .theme-dark-hero .bottom-nav__item[aria-current="page"] svg circle,
  .theme-dark-hero .bottom-nav__item[aria-current="page"] svg path { stroke: var(--sn-mint); }
}