/**
 * home.css
 *
 * Styling for views/home.php — loaded only on the homepage (see
 * layouts/head.php's $page === 'home' check). Same palette as
 * search.css/listing-detail.css (#12233D text, #DCE1E8 borders, #F7F8FA
 * panel bg, #1E40AF accent) for visual consistency across the site.
 *
 * search.css (also loaded on this page) supplies the .sr-grid/.sr-card
 * card component the New Listings/Featured Listings sections reuse as-is
 * — this file only owns the hero, section chrome, and Featured
 * Communities cards.
 */

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

.hp-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* /images/hero-placeholder.jpg is a placeholder path — the file doesn't
     exist yet, so #12233D (this site's dark navy text color, reused here
     as a background) shows through until a real photo is dropped in. */
  background-color: #12233D;
  background-image: url('/images/hero-placeholder.jpg');
  background-size: cover;
  background-position: center;
}

.hp-hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  padding: 24px 16px;
  text-align: center;
}

.hp-hero-heading {
  color: #FFFFFF;
  font-size: 40px;
  font-weight: 800;
  margin: 0 0 24px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.hp-hero-search {
  display: flex;
  gap: 10px;
}

.hp-hero-search-input {
  flex: 1 1 auto;
  /* Same fix category as listing-detail.css's .ld-top-address/.ld-row-value
     (and the tab row below 720px there): a flex item defaults to
     min-width: auto, which for a plain text <input> is its own UA-default
     intrinsic width — wide enough that, next to .hp-hero-search-btn's
     fixed content width plus this row's gap, it wouldn't shrink to fit a
     narrow phone viewport, forcing .hp-hero-search (and everything above
     it, up to the page itself) wider than the viewport. min-width: 0 lets
     it actually shrink to the space this row has. */
  min-width: 0;
  font-size: 16px;
  padding: 14px 16px;
  border: none;
  border-radius: 8px;
  color: #12233D;
}

.hp-hero-search-input:focus {
  outline: 2px solid #1E40AF;
}

.hp-hero-search-btn {
  font-size: 15px;
  font-weight: 700;
  background: #1E40AF;
  color: #FFFFFF;
  border: none;
  padding: 0 26px;
  border-radius: 8px;
  cursor: pointer;
}

.hp-hero-search-btn:hover {
  background: #16327F;
}

/* ---- Section chrome ---- */

.hp-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 16px 48px;
  color: #12233D;
}

/* views/home.php splits .hp-wrap into two separate divs (New Listings
   above, Featured Communities below) so the full-bleed .hp-featured-band
   between them can sit OUTSIDE both as a full-width sibling — see that
   band's own comment below. Without this override, the FIRST .hp-wrap's
   own padding-bottom: 48px (meant for the page's true bottom edge, in
   the second/last .hp-wrap) would fire prematurely right before the
   band, adding an extra, redundant gap on top of the band's own padding. */
.hp-wrap--top {
  padding-bottom: 0;
}

.hp-section {
  padding-top: 40px;
}

/* text-align: center here (not scoped to .hp-section-header's own
   heading below) so the one section that keeps a bare .hp-section-heading
   with no wrapper — Featured Communities — gets a plain centered title
   for free, with no rule of its own needed. Verified in isolation: this
   heading is a block-level h2 spanning its parent's full width (no
   sibling CTA, no wrapper row to fight with), so text-align: center
   alone genuinely centers it across the section — no position/transform
   trick needed there the way New Listings/Featured Listings need below. */
.hp-section-heading {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 20px;
  color: #12233D;
  text-align: center;
}

/* New Listings/Featured Listings' heading + CTA row (see views/home.php)
   — Featured Communities keeps a bare .hp-section-heading with no
   wrapper, so this rule never touches that section. An earlier 3-column
   grid (empty spacer | title | CTA) approach was tried and reverted: it
   only truly centers the title if the spacer column's width matches the
   CTA's own rendered width, which isn't reliable. position: relative on
   this row + position: absolute/left: 50%/transform: translate(-50%,
   -50%) on the heading (below) instead centers it against the row's
   actual full width/height directly, with no dependency on the CTA's
   size at all — .hp-section-cta stays a normal in-flow child, pushed to
   the row's right edge by justify-content: flex-end, which is also what
   gives this row its real height now that the heading is taken out of
   flow by its own absolute positioning. */
.hp-section-header {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 40px;
  margin: 0 0 20px;
}

/* Absolutely positioned against .hp-section-header's own box (that
   rule's position: relative, above) — top/left: 50% + translate(-50%,
   -50%) centers this both horizontally AND vertically within the row
   regardless of the CTA's width or this row's own height, unlike the
   reverted grid approach's two-equal-columns dependency. margin: 0
   (not the base rule's own margin-bottom: 20px) since an absolutely
   positioned element doesn't participate in normal-flow margins/layout
   at all — that margin would just be dead weight here. */
.hp-section-header .hp-section-heading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  white-space: nowrap;
}

/* Same filled-blue CTA treatment as this page's own .hp-hero-search-btn
   (the only other button/link styled as a real call-to-action here),
   just sized for an inline slot next to a heading instead of a large
   hero search bar. display: inline-block so padding/height behave
   predictably even in the mobile breakpoint below, where
   .hp-section-header stops being a flex container. */
.hp-section-cta {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  background: #1E40AF;
  color: #FFFFFF;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.hp-section-cta:hover {
  background: #16327F;
}

/* New Listings ONLY (see views/home.php) — a second CTA on the LEFT side
   of the header row, mirroring the existing right-side .hp-section-cta
   visually. A separate modifier class layered on TOP of .hp-section-cta
   (never edited directly) rather than any change to .hp-section-header/
   .hp-section-cta themselves, so Featured Listings — which reuses those
   same two shared classes for its own header — is structurally unable
   to be affected by this; it simply never gets this second class.
   position: absolute takes this element completely OUT of
   .hp-section-header's own flex layout, so it can't disturb the
   existing right CTA's justify-content: flex-end positioning or the
   title's own left: 50%/translate(-50%, -50%) centering math (see those
   rules above) — both keep behaving exactly as before, with this new
   button just visually overlaid on the row's left edge. top: 50% +
   translateY(-50%) vertically centers it against the row's real height
   (still set by the right CTA via flex, as before) — the same one-axis
   version of the title's own two-axis centering trick, since left is a
   fixed edge here rather than a centered point. */
.hp-section-cta--left {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* Featured Listings ONLY — New Listings/Featured Communities stay plain
   page background. #F7F8FA is this project's own established light
   neutral grey (search.css/listing-detail.css/home.css's own docblocks;
   already used for .hp-community-card's background below), not a new
   color. Spans the full viewport width (see views/home.php's own
   docblock for why this sits outside .hp-wrap's own max-width instead of
   nested inside it like every other section) — no border-radius here
   unlike a typical contained panel, since a rounded corner would look
   like a rendering glitch at either raw viewport edge. Padding on every
   side (not just .hp-section's own padding-top, which only spaces THIS
   section from the one above it) keeps the heading/CTA row and grid from
   sitting flush against the band's own top/bottom edges — the left/right
   edges are instead spaced by .hp-featured-band-inner's own 1140px
   max-width + side padding below, not by padding on this element. */
.hp-featured-band {
  background: #F7F8FA;
  padding: 40px 0;
}

.hp-featured-band-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 16px;
}

.hp-empty {
  font-size: 14px;
  color: #5B6B82;
  padding: 24px 0;
}

/* ---- Featured Communities ---- */

.hp-communities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.hp-community-card {
  /* Grid items get the same "won't shrink below min-content" default
     (min-width: auto) flex items do — belt-and-suspenders alongside the
     minmax(220px, ...) track floor above, same fix category as
     .hp-hero-search-input's min-width: 0. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 20px;
  border: 1px solid #DCE1E8;
  border-radius: 10px;
  background: #F7F8FA;
  text-decoration: none;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.hp-community-card:hover {
  border-color: #1E40AF;
  box-shadow: 0 4px 14px rgba(18, 35, 61, 0.1);
}

.hp-community-name {
  font-size: 18px;
  font-weight: 700;
  color: #12233D;
}

.hp-community-count {
  font-size: 13px;
  color: #5B6B82;
}

@media (max-width: 640px) {
  .hp-hero {
    min-height: 380px;
  }

  .hp-hero-heading {
    font-size: 28px;
  }

  .hp-hero-search {
    flex-direction: column;
  }

  /* Belt-and-suspenders alongside min-width: 0 above: flex-direction:
     column relies on align-items: stretch (the default) to fill these to
     the row's full width, but mobile Safari specifically has a
     long-standing bug where flex items that are form controls
     (input/button) don't reliably stretch and keep their intrinsic width
     instead — an explicit width: 100% removes any dependency on that
     stretch behavior working correctly. */
  .hp-hero-search-input,
  .hp-hero-search-btn {
    width: 100%;
    box-sizing: border-box;
  }

  .hp-hero-search-btn {
    padding: 12px;
  }

  /* Narrower vertical padding than the desktop 40px — no horizontal
     change needed here (.hp-featured-band itself has none; side spacing
     always comes from .hp-featured-band-inner's own 16px, the same
     figure .hp-wrap already uses everywhere else at every width). */
  .hp-featured-band {
    padding: 32px 0;
  }

  /* .hp-section-header's desktop position: absolute/translate(-50%,
     -50%) centered title (base rule, above) relies on the CTA alone
     giving the row its real height/width via flex — on a narrow phone
     viewport, a long heading centered UNDER a right-aligned CTA risks
     visually overlapping it (the title has no room of its own reserved
     beside the button the way the row's width does on desktop). Back to
     a plain stacked, static layout instead: title a normal block above,
     CTA centered below, no absolute positioning at this width. */
  .hp-section-header {
    position: static;
    display: block;
    min-height: 0;
  }

  .hp-section-header .hp-section-heading {
    position: static;
    transform: none;
    white-space: normal;
    text-align: center;
    margin: 0 0 12px;
  }

  .hp-section-cta {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
  }

  /* .hp-section-cta--left's own desktop position: absolute (base rule,
     above) resolves against .hp-section-header's position: relative —
     which the rule directly above this one already switches to
     position: static at this width, same as the title's own centering
     trick. Left with no override, this element would escape to the
     next positioned ancestor up the tree instead and render somewhere
     else entirely. Reset to the same plain stacked/centered block shape
     .hp-section-cta itself uses here, since both are the same button
     look now sharing the header's single-column mobile stack — this one
     sits FIRST (see views/home.php's own markup order), so its bottom
     margin (rather than .hp-section-heading's own top margin) is what
     spaces it from the title below it. */
  .hp-section-cta--left {
    position: static;
    top: auto;
    transform: none;
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 12px;
  }
}