/**
 * 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 ---- */

/* min-height: 760px, up from an original 480px (bumped once already to
   680px, then further to this) — at 480px, background-size: cover (with
   the site's wide, short-viewport-relative container) scaled the hero
   photo so nearly its entire vertical extent got cropped symmetrically
   top/bottom, cutting off the pool in the photo's foreground almost
   entirely. 760px leaves enough of the image's vertical extent on screen
   for that foreground to actually show, verified against a stand-in test
   image (the real photo doesn't exist in this checkout) at common
   desktop widths — the real photo may need a further nudge once it's
   actually in place, since the exact crop depends on
   where the pool sits in ITS frame. No corresponding change below
   (@media max-width: 640px) — a narrow mobile viewport is already
   narrower, relative to this container's height, than any realistic
   landscape photo, so background-size: cover there is height-bound (full
   image height shown, sides cropped instead) and was never cutting off
   the pool to begin with. */
.hp-hero {
  position: relative;
  min-height: 760px;
  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;
}

/* New Listings' .hp-wrap ONLY — Featured Communities' .hp-wrap below
   deliberately does NOT get this modifier (stays plain .hp-wrap, full
   48px padding-bottom), even though it's also immediately followed by a
   full-bleed .hp-featured-band (the closing Buying/Selling/Contact CTA
   band — see that band's own comment below). The two cases differ: the
   band after New Listings (Featured Listings) opens with its own
   heading, which already supplies visual separation from the section
   above before its card grid starts, so this modifier's padding-bottom:
   0 — needed to avoid doubling up with the band's own 40px top padding —
   doesn't leave the transition feeling cramped. The closing CTA band has
   no heading; its boxes start right at the band's top edge, so zeroing
   the Featured Communities wrap's own padding-bottom here left the
   community cards and the CTA boxes reading as nearly touching. Keeping
   Featured Communities' full padding-bottom (48px) + the band's own 40px
   top padding gives that transition the same gap a heading would
   otherwise have supplied. */
.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%);
}

/* Reused as-is by two sections — Featured Listings, and the closing
   Buying/Selling/Contact CTA band at the bottom of the page (see
   views/home.php) — 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 above), 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
   (neither section using this has its own .hp-section padding-top, which
   only spaces a section from the one above it) keeps each section's
   content 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;
}

/* ---- Buying/Selling/Contact CTA boxes (closing full-bleed grey band) ---- */
/* Rendered inside .hp-featured-band/.hp-featured-band-inner (see those
   rules above and views/home.php) — the same full-bleed grey band
   Featured Listings uses, reused as-is rather than a second copy, so
   this closing section's grey background genuinely matches that earlier
   one instead of just approximating its color. Card look otherwise
   matches .hp-community-card above (border + hover accent border/shadow)
   for visual consistency with the rest of this page, but background:
   #FFFFFF instead of that card's #F7F8FA — .hp-community-card sits on
   the plain white page, so it needs its own grey fill to read as a card;
   these sit ON TOP of the grey band itself, so they invert to white for
   the same reason Featured Listings' own .sr-card listing cards are
   white against this band — the band supplies the grey, the card
   supplies the contrast. Centered instead of left-aligned, and no photo,
   since none was specified for these three topics. grid-template-columns:
   repeat(3, 1fr), not .hp-communities' own auto-fill/minmax above — that
   pattern exists to handle a variable-length list of communities; this
   grid always has exactly 3 boxes, so fixed equal columns fit the content
   instead of leaving room for a count that never changes. */
.hp-cta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.hp-cta-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 36px 20px;
  border: 1px solid #DCE1E8;
  border-radius: 10px;
  background: #FFFFFF;
  text-decoration: none;
  text-align: center;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

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

.hp-cta-primary {
  font-size: 22px;
  font-weight: 800;
  color: #12233D;
}

.hp-cta-secondary {
  font-size: 14px;
  font-weight: 400;
  color: #5B6B82;
}

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

  .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;
  }
}