/* ============================================================================
   Homeboss Theme — HOMEPAGE (front-page.php)
   ----------------------------------------------------------------------------
   Consumes tokens.css. The homepage renders its regions from /site-data, each
   hiding when empty (the PHP emits no markup for an empty region). This sheet is
   layout + rhythm only: a light palette with navy ink and gold accents, alternating
   --surface-base / --surface-alt bands for separation (not borders), and a shared
   section rhythm — eyebrow -> headline -> gold rule -> intro -> content.

   Agent brand COLORS never enter here; only the token palette + the gold accent
   are used, so nothing pairs --action over --footer-bg (tests/themeFooter.test.ts).
   ============================================================================ */

/* --- Shared section shell + rhythm ---------------------------------------- */
.hb-section {
  background-color: var(--surface-base);
  padding: 4rem 1.25rem;
}

.hb-section--alt {
  background-color: var(--surface-alt);
}

.hb-section__inner {
  max-width: var(--container);
  margin: 0 auto;
}

.hb-section__inner--narrow {
  max-width: var(--measure);
}

.hb-section__head {
  text-align: center;
  margin: 0 auto 2.5rem;
  max-width: var(--measure);
}

.hb-eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-eyebrow);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--action);
  margin: 0 0 0.5rem;
}

.hb-section__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--text-heading);
  margin: 0;
}

/* The gold rule under every section headline. */
.hb-rule {
  display: block;
  width: 3.5rem;
  height: 3px;
  margin: 1rem auto 0;
  background-color: var(--accent-gold);
  border-radius: 2px;
}

.hb-section__intro {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin: 1.25rem auto 0;
  max-width: var(--measure);
}

/* --- Buttons --------------------------------------------------------------- */
.hb-btn {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.hb-btn--gold {
  background-color: var(--accent-gold);
  color: var(--accent-gold-ink);
}

.hb-btn--gold:hover {
  background-color: var(--accent-gold-hover);
  color: var(--accent-gold-ink);
}

.hb-btn--outline {
  background-color: transparent;
  border-color: var(--action);
  color: var(--action);
}

.hb-btn--outline:hover {
  border-color: var(--action-hover);
  color: var(--action-hover);
}

.hb-btn--outline-light {
  background-color: transparent;
  border-color: var(--surface-base);
  color: var(--surface-base);
}

.hb-btn--outline-light:hover {
  background-color: rgba(255, 255, 255, 0.14);
  color: var(--surface-base);
}

/* --- (2) Hero: a CLEAN full-bleed photograph, NO text/scrim/CTA over it ---- *
   The old scrim-over-photo hero (text sitting on the image) was the complaint. The
   hero is now just the photograph, full-bleed, at a capped viewport height. The
   headline + prose live in the intro banner (2b) directly below it. */
.hb-hero--photo {
  height: clamp(280px, 46vh, 560px);
  background-color: var(--footer-bg);
  background-size: cover;
  background-position: center;
}

/* --- (2b) Intro banner: page H1 + credential line + attested prose --------- *
   Sits on the base surface UNDER the hero photo, centered, carrying the SEO H1
   (kept on the page, off the image), the agent's credential line, the attested
   intro prose and the primary CTA. */
.hb-herobanner {
  background-color: var(--surface-base);
  padding: 3.5rem 1.25rem;
  text-align: center;
}

.hb-herobanner__inner {
  max-width: var(--measure);
  margin: 0 auto;
}

/* Two-column variant (photo left, text panel right) — used when an agent portrait/
   headshot is available. Falls back to the centered single column above with no photo. */
.hb-herobanner--split {
  text-align: left;
}

.hb-herobanner--split .hb-herobanner__inner {
  max-width: var(--container);
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.hb-herobanner__media {
  order: 0;
}

.hb-herobanner__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

.hb-herobanner--split .hb-herobanner__cta {
  justify-content: flex-start;
}

.hb-herobanner__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  color: var(--text-heading);
  margin: 0 0 0.75rem;
}

.hb-herobanner__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 2rem;
}

/* --- Reusable split band (inc/split-band.php) ------------------------------ *
   ONE image|prose band, shared by the homepage About lockup, the podcast band and
   single.php's post header. .hb-band / .hb-band--alt (surface alternation) live in
   blog.css; this block owns the two-column split, the odd-row flip and the
   text-only fallback. Painted from tokens only — no agent brand color. */
.hb-band__inner {
  max-width: var(--container);
  margin: 0 auto;
}

.hb-split {
  padding: 4rem 1.25rem;
}

.hb-split__inner {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}

/* Odd rows flip the media to the right so the page zig-zags down the column. */
.hb-split--flip .hb-split__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
}

.hb-split--flip .hb-split__media {
  order: 2;
}

/* No image => a single centered prose column at the readable measure. */
.hb-split--textonly .hb-split__inner {
  grid-template-columns: 1fr;
  max-width: var(--measure);
  text-align: center;
}

.hb-split__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}

/* Left-aligned section head (eyebrow -> headline -> gold rule) inside a split. */
.hb-section__head--left {
  text-align: left;
  margin: 0 0 1.5rem;
  max-width: none;
}

.hb-section__head--left .hb-rule {
  margin-left: 0;
}

.hb-split--textonly .hb-section__head--left {
  text-align: center;
}

.hb-split--textonly .hb-section__head--left .hb-rule {
  margin-left: auto;
}

.hb-split__cta {
  margin-top: 1.5rem;
}

/* --- (3) About ------------------------------------------------------------- */
.hb-about__bio {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin: 0 0 1.25rem;
}

.hb-about__credentials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.hb-about__credentials li {
  position: relative;
  padding-left: 1.4rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-body);
}

.hb-about__credentials li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--accent-gold);
}

/* --- (4)/(7) Card grid (services + city boxes) ----------------------------- */
.hb-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.hb-card {
  background-color: var(--surface-base);
  border: 1px solid var(--surface-tint);
  border-radius: 10px;
  padding: 1.75rem;
}

.hb-section--alt .hb-card {
  background-color: var(--surface-base);
}

.hb-card__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-h3);
  font-size: var(--fs-h3);
  color: var(--text-heading);
  margin: 0 0 0.6rem;
}

.hb-card__body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin: 0;
}

/* Service cards: styled panels (the flat cards were the complaint). A gold top rule,
   a soft resting shadow and a hover lift. Scoped to the services grid so the area
   (city) cards keep their own photo/text treatment below. */
.hb-services .hb-card {
  position: relative;
  padding-top: 2rem;
  box-shadow: 0 1px 2px rgba(30, 54, 83, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hb-services .hb-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--accent-gold);
  border-radius: 10px 10px 0 0;
}

.hb-services .hb-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(30, 54, 83, 0.12);
}

/* --- (2c) "Why People Love Living In {market}" band ----------------------- *
   A light copy band directly under the intro banner. The shared section head
   (centred title + gold rule) sits above a single centred paragraph held to a
   comfortable reading measure. The band emits NO markup when the agent leaves
   the field blank, so there is nothing to style in the empty case. */
.hb-market__body {
  max-width: 60ch;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  text-align: center;
}

/* --- (4) "How I Can Help" — a DARK NAVY band ------------------------------ *
   The section became the site's mission line, so it sits on the same dark navy
   as the Areas band: band fill = --footer-bg, all copy = --footer-text. The card
   fill (--action, one shade lighter) is declared in its OWN rule block, never
   mixed with the band fill, so the footer AA guard (which flags any single block
   using BOTH --footer-bg and --action) stays green. Every pairing — light text
   on the navy band, light text on the lighter card, navy ink under the gold rule
   — clears WCAG AA, asserted in tests/themeFrontPage.test.ts. Flat fills only. */
.hb-services--dark {
  background-color: var(--footer-bg);
}

.hb-services--dark .hb-section__title,
.hb-services--dark .hb-eyebrow,
.hb-services--dark .hb-section__intro {
  color: var(--footer-text);
}

/* Cards are capped at six and laid out three-across on two rows. Flex (not the
   auto-fit grid) so a short trailing row of one or two cards CENTRES instead of
   left-aligning; each card takes a third of the row minus the gap. */
.hb-services--dark .hb-card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.hb-services--dark .hb-card {
  flex: 0 1 calc((100% - 3rem) / 3);
  min-width: 260px;
  background-color: var(--action);
}

.hb-services--dark .hb-card__title,
.hb-services--dark .hb-card__body {
  color: var(--footer-text);
}

@media (max-width: 780px) {
  .hb-services--dark .hb-card {
    flex-basis: 100%;
  }
}

/* --- (7) Search + Home-Value tool bands ---------------------------------- *
   Theme-shipped art, gated on the agent's outbound BoldTrail link. The image is
   constrained to a FIXED 3:2 box with object-fit cover (never rendered at native
   size), the same standing image rule the area cards follow. */
.hb-toolband__body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin: 0;
}

/* Tool bands read as FULL-WIDTH split bands: a large image on one side, the headline +
   two-line pitch + button on the other, the sides alternating (Search leads left, Home-
   Value leads right). The media column is an equal half (not the narrow 360px portrait
   column the About band uses), so the art is large. Placed AFTER the generic flip rule so
   it wins on the flipped (Home-Value) band too. */
.hb-toolband .hb-split__inner,
.hb-toolband.hb-split--flip .hb-split__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
}

.hb-toolband .hb-split__media {
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  overflow: hidden;
}

.hb-toolband .hb-split__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Area (city) cards — TEXT tiles on a LIGHT GREY band (two dark bands stacked heavily, so
   the section grounds on the light grey surface). The band is --surface-alt (light grey); the
   section head reads dark-on-light with the DEFAULT tokens (eyebrow --action, title
   --text-heading, intro --text-body, gold rule --accent-gold) — no colour override here. Each
   card keeps the --action blue fill with light --footer-text copy, so it stands out against the
   grey band. Flat fills only (no gradient). Every text pair — dark head text on the grey band,
   light card text on the blue card, the light "Learn more" button text on the blue card — clears
   WCAG AA, asserted numerically in tests/themeFrontPage.test.ts. The per-city photo is NOT
   rendered on the homepage (it still lives on the city pages), and the stored category tag is
   no longer rendered as a pill. */
.hb-areas {
  background-color: var(--surface-alt);
}

/* THREE across at the 1200px container, wrapping to a second row (six cities = 3 + 3), each grid
   cell an equal fraction so every tile in a row is the same height (align-items stretch, default).
   Steps down to two across at tablet, one on mobile. */
.hb-areas .hb-card-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}

@media (max-width: 900px) {
  .hb-areas .hb-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .hb-areas .hb-card-grid {
    grid-template-columns: 1fr;
  }
}

/* The tile: a flat blue (--action) panel with light text, no border/gradient. A flex column so the
   "Learn more" button sits at the bottom (margin-top:auto) and cards stay equal height per row. */
.hb-area-card {
  border: 0;
  background-color: var(--action);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
}

.hb-area-card .hb-card__title {
  color: var(--footer-text);
  font-size: var(--fs-h3);
  margin-bottom: 0.35rem;
}

/* The sub-neighbourhoods line: small light text under the city name. */
.hb-area-card__sub {
  color: var(--footer-text);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  margin: 0 0 0.6rem;
}

/* The one-sentence blurb about the city: light body text (renders nothing when blank). */
.hb-area-card__desc {
  color: var(--footer-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0 0 1.25rem;
}

/* "Learn more" is the single visible affordance — a light outline button pushed to the card
   bottom so every card's button aligns regardless of copy length. */
.hb-area-card__more {
  margin-top: auto;
  align-self: flex-start;
}

/* --- (5) Featured / Homeboss bands ---------------------------------------- */
.hb-featured__inner {
  max-width: var(--measure);
  margin: 0 auto;
  text-align: center;
}

.hb-featured__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--text-heading);
  margin: 0;
}

.hb-featured__inner .hb-rule {
  margin: 1rem auto 1.5rem;
}

.hb-featured__body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin: 0 0 1.75rem;
}

/* The Equity Max tool band leads with the gold accent on a navy field. */
.hb-featured--tool {
  background-color: var(--footer-bg);
}

.hb-featured--tool .hb-featured__title {
  color: var(--surface-base);
}

.hb-featured--tool .hb-featured__body {
  color: var(--footer-text);
}

.hb-featured--tool .hb-eyebrow {
  color: var(--accent-gold);
}

/* --- (9) FAQ accordion ----------------------------------------------------- */
/* Two columns on desktop (a long single narrow column was the complaint), each row
   sizing to its own content so an open <details> only grows its own column. */
.hb-faq__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem 1.5rem;
  align-items: start;
}

@media (max-width: 780px) {
  .hb-faq__list {
    grid-template-columns: 1fr;
  }
}

.hb-faq__item {
  border: 1px solid var(--surface-tint);
  border-radius: 8px;
  background-color: var(--surface-base);
  padding: 0 1.25rem;
}

.hb-faq__q {
  font-family: var(--font-heading);
  font-weight: var(--fw-h3);
  font-size: var(--fs-h3);
  color: var(--text-heading);
  cursor: pointer;
  padding: 1rem 0;
  list-style: none;
}

.hb-faq__q::-webkit-details-marker {
  display: none;
}

.hb-faq__q::after {
  content: "+";
  float: right;
  color: var(--accent-gold);
  font-weight: 600;
}

.hb-faq__item[open] .hb-faq__q::after {
  content: "\2212"; /* minus */
}

.hb-faq__a {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  padding: 0 0 1.1rem;
}

/* --- (10) Contact band ----------------------------------------------------- */
/* Two columns when a calendar embed is present: the intro (headline + reach-out buttons)
   on the left, the booking widget on the right. With no calendar it collapses to the
   single left-aligned intro. */
.hb-contact-band__body--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

@media (max-width: 780px) {
  .hb-contact-band__body--split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.hb-contact-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 1.5rem 0 0;
}

.hb-contact-band__calendar,
.hb-mapband__map {
  border-radius: 10px;
  overflow: hidden;
}

.hb-calendar-embed,
.hb-map-embed {
  display: block;
  width: 100%;
}

/* --- (11) Map band: map left, address + contact right ---------------------- */
.hb-mapband__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

@media (max-width: 780px) {
  .hb-mapband__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.hb-mapband__address {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin: 0 0 1.25rem;
}

.hb-mapband__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* --- Mobile ---------------------------------------------------------------- */
@media (max-width: 780px) {
  .hb-section {
    padding: 3rem 1.25rem;
  }

  .hb-herobanner {
    padding: 2.75rem 1.25rem;
  }

  .hb-herobanner--split,
  .hb-herobanner--split .hb-herobanner__cta {
    text-align: center;
  }

  .hb-herobanner--split .hb-herobanner__inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    justify-items: center;
  }

  .hb-herobanner--split .hb-herobanner__cta {
    justify-content: center;
  }

  .hb-herobanner__media {
    max-width: 360px;
  }

  .hb-split {
    padding: 3rem 1.25rem;
  }

  .hb-split__inner,
  .hb-split--flip .hb-split__inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  /* Stacked: media always leads, whatever the desktop flip order was. */
  .hb-split--flip .hb-split__media {
    order: 0;
  }

  .hb-split__media {
    max-width: 360px;
    margin: 0 auto;
  }
}