/* ============================================================
   HOMEPAGE — hero, search bar, category strip and the two-column band.
   Loaded by index.html after app.css, which still owns the listing rows,
   cards and footer this builds on top of.

   Layout note: content runs to a single reused gutter rather than a capped
   centred column, so a wide monitor does not read as dead margin.
   ============================================================ */
/* the homepage inherits the site container (css/site.css --page-max /
   --page-gutter) and keeps its own aliases for the rules below */
:root { --page-gutter: 20px; --page-max: 1560px;
         --bx-gutter: var(--page-gutter); --bx-max: var(--page-max); }

/* ---- 1. nav on white ---------------------------------------- */
#desktop-gate .dgn-wrap {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid rgba(51, 51, 51, 0.08);
  padding: 10px 0;
}
#desktop-gate .dgn { box-shadow: none; }
/* The logo size and the nav's padding now live in css/site.css, so every page
   gets them — they were homepage-only, which is why the links sat at a
   different x here than everywhere else. */
#desktop-gate .dgn,
#desktop-gate .dg-listings,
#desktop-gate .dg-row,
/* The legal block belongs on the same rail as the rest of the footer. It was
   left behind on the older 1200px container while .dg-footer-inner moved to
   the homepage's, so the logo and the link columns sat 55px left of the CREA
   notice underneath them — the only page where the footer failed to line up
   with itself. .dg-footer-bottom is nested inside legal and follows it. */
#desktop-gate .dg-footer-legal,
#desktop-gate .dg-footer-inner {
  width: min(var(--bx-max), calc(100% - 2 * var(--bx-gutter)));
  max-width: none;
}

/* ---- 2. full-width shallow hero ------------------------------ */
.bx-hero-wrap { position: relative; }
.bx-hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  /* the ground the photo's opacity resolves against */
  background: #141810;
  /* shallow on purpose: 1280×~330 on a laptop, so the fold lands on the
     first row of homes rather than on the bottom of a photo */
  height: clamp(280px, 26vw, 360px);
}
.bx-hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 46%; z-index: 0;
  /* The photo stays fully opaque. The even darkening it used to get from
     opacity: 0.6 now comes from a flat layer in the scrim instead — visually
     identical (60% of the image over #141810 is the same result as 40% of
     #141810 over the image), but it does not rely on the renderer blending a
     semi-transparent image against its parent's background, which is exactly
     where this fell over and painted the whole hero black. */
}
.bx-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  /* Centred copy needs a centred scrim. The old left-edge gradient darkened the
     wrong third of the photo and left the headline sitting on bright balcony
     green. A soft radial keeps the darkening under the text and lets the
     building read at both edges. */
  background:
    radial-gradient(ellipse 70% 90% at 50% 45%, rgba(20, 24, 16, 0.34) 0%, rgba(20, 24, 16, 0.10) 68%, rgba(20, 24, 16, 0) 100%),
    linear-gradient(0deg, rgba(20, 24, 16, 0.20) 0%, rgba(20, 24, 16, 0) 42%),
    /* the flat 40% that replaces the photo's old opacity */
    linear-gradient(0deg, rgba(20, 24, 16, 0.4), rgba(20, 24, 16, 0.4));
}
.bx-hero-copy {
  /* Spanning left-to-right rather than sitting at left:50%. An absolutely
     positioned box anchored at 50% can only ever be half the hero wide, which
     silently wrapped the one-line headline no matter how high max-width went. */
  position: absolute; top: 50%; left: 0; right: 0; z-index: 2;
  /* -54% with the subhead back: centres the two-element stack optically rather
     than geometrically, so it does not sit low against the search bar below. */
  transform: translateY(-54%);
  text-align: center;
  padding: 0 var(--bx-gutter);
}
.bx-hero-copy h1 {
  /* Zillow's hero weight: heavy, large, tight leading, tight tracking. 800 is
     the heaviest real cut available here — 900 would synthesise and smear. */
  font-size: clamp(34px, 4.4vw, 58px); font-weight: 800; line-height: 1.02;
  letter-spacing: -0.03em; margin: 0 0 12px; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.3);
}
.bx-hero-copy h1 .dot { color: var(--orange); }
.bx-hero-copy p {
  /* scaled up with the headline — the old 15.5px was set against a 46px h1 and
     reads as a caption under this one */
  font-size: clamp(14px, 1.35vw, 18px); line-height: 1.5; margin: 0;
  color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 20px rgba(0, 0, 0, 0.35);
}
.bx-hero-play {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 12.5px; color: #fff;
  background: rgba(20, 24, 16, 0.42); border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px; padding: 6px 15px 6px 6px; backdrop-filter: blur(6px);
  transition: background 0.18s ease;
}
.bx-hero-play:hover { background: rgba(20, 24, 16, 0.6); }
.bx-hero-play-orb { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #1c1c1c; }
.bx-hero-play-orb svg { width: 12px; height: 12px; }

/* ---- 3. pill search bar, centred on the hero's bottom edge -- */
.bx-searchbar {
  position: relative; z-index: 3;
  width: min(1080px, calc(100% - 2 * var(--bx-gutter)));
  margin: -38px auto 0;
  /* Six criteria, unequal widths. Equal columns wasted space: "Any type" and
     "Any beds" are short fixed vocabularies, while rent, hood and features
     hold free text or long option labels. Weighting the columns to their
     content let the whole bar come back from 1240 to 1080. */
  display: grid;
  grid-template-columns:
    minmax(0, 0.95fr)  /* Monthly rent — "e.g. $2,100" is short */
    minmax(0, 1.75fr)  /* Where — the only true free-text field, and hood names
                          run long ("Rutherford (Edmonton)"), so it gets the
                          slack the other cells give up */
    auto               /* Type — sized to "Any type" */
    auto               /* Size — sized to "1,200–1,800" */
    minmax(0, 1.15fr)  /* Must have */
    auto              /* Beds — sized to "Any beds" */
    auto;             /* go button */
  align-items: stretch;
  background: #fff; border-radius: 999px;
  box-shadow: 0 18px 50px -18px rgba(20, 24, 16, 0.4), 0 0 0 1px rgba(51, 51, 51, 0.06);
}
.bx-cell {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 8px 13px 18px; min-width: 0; cursor: text;
  border-right: 1px solid rgba(51, 51, 51, 0.1);
  border-radius: 999px 0 0 999px; transition: background 0.15s ease;
}
.bx-cell + .bx-cell { border-radius: 0; }

/* Neighbourhood suggestions. A real dropdown, because the <datalist> this
   replaced was rendered by iOS Safari as options in the keyboard's QuickType
   strip — cramped, easy to miss, and not reliably tappable. */
.bx-cell { position: relative; }
.bx-ac {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 260px; max-width: 92vw; max-height: 320px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--grid, #e6e4df); border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .16);
}
.bx-ac[hidden] { display: none; }
.bx-ac li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 14px; border-radius: 10px; cursor: pointer;
  font-size: 15px; color: var(--ink, #1c1c1c);
}
.bx-ac li em { font-style: normal; font-size: 12.5px; color: var(--ink-3, #8a8a8a); }
.bx-ac li:hover, .bx-ac li.is-on { background: var(--orange-soft, #fff1ea); color: var(--orange-deep, #d94512); }

@media (max-width: 760px) {
  /* Full width of the stacked field, and tall enough rows for a thumb. */
  .bx-ac { left: 0; right: 0; min-width: 0; max-width: none; }
  .bx-ac li { padding: 13px 14px; }
}
.bx-cell:hover, .bx-cell:focus-within { background: #f2efe9; }
.bx-cell-ico { color: #4e4f4f; flex: 0 0 auto; }
.bx-cell-ico svg { width: 24px; height: 24px; display: block; }
.bx-cell-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
/* never let a two-word label wrap and grow the bar's height */
.bx-cell-label { font-size: 13.5px; font-weight: 600; color: #1c1c1c; white-space: nowrap; }
.bx-cell input, .bx-cell select {
  width: 100%; font-family: inherit; font-size: 16px; color: #1c1c1c;
  background: transparent; border: 0; padding: 1px 0 0; margin: 0;
  appearance: none; -webkit-appearance: none; outline: none;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.bx-cell input::placeholder { color: #8a8a8a; }
.bx-cell select { cursor: pointer; padding-right: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%234E4F4F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0 center; background-size: 10px;
}
.bx-go {
  align-self: center; margin: 6px 8px 6px 6px;
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--orange); color: #fff; display: grid; place-items: center;
  transition: background 0.18s ease, transform 0.12s ease;
}
.bx-go svg { width: 24px; height: 24px; }
.bx-go:hover { background: #b93c10; transform: scale(1.04); }

/* ---- 4 + 5. two columns: categories & first row | promo -------
   The sample puts its promo panel level with the category icons, not below
   them, so the grid starts at the icon row rather than under it. */
.bx-main {
  width: min(var(--bx-max), calc(100% - 2 * var(--bx-gutter))); margin: 22px auto 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: stretch;
}
.bx-main-left { min-width: 0; }

.bx-cats {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid rgba(51, 51, 51, 0.08);
}
.bx-cats-scroll {
  /* space-between so the last chip lands on the column's right edge, level
     with the row's ‹ › arrows below it. Left to its natural width the strip
     stopped ~47px short and left a gap that read as broken alignment. The gap
     property is the minimum spacing, which takes over once the chips overflow
     and the row scrolls instead. */
  flex: 1; display: flex; justify-content: space-between; gap: 6px;
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
}
.bx-cats-scroll::-webkit-scrollbar { display: none; }
.bx-cat {
  flex: 0 0 auto; scroll-snap-align: start; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  min-width: 78px; padding: 12px 10px 14px;
  font-family: inherit; font-size: 12px; font-weight: 500; color: #6f7069;
  /* these are <a> now, not <button> — they navigate to a filtered search page */
  text-decoration: none; white-space: nowrap;
  background: none; border: 0; border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.bx-cat svg { width: 24px; height: 24px; opacity: 0.75; }
.bx-cat:hover { color: #1c1c1c; }
.bx-cat:hover svg { opacity: 1; }
.bx-cat.is-active { color: var(--orange-deep); border-bottom-color: var(--orange); }
.bx-cat.is-active svg { opacity: 1; }
/* hidden by script when the strip does not overflow — belt and braces, in case
   a later display rule outranks the attribute's default styling */
.bx-cats-more[hidden] { display: none; }
/* Orange with a white arrow. As a white circle on a white strip it read as
   decoration, and people did not know there was more to the right — which
   mattered rather a lot once it started working. */
.bx-cats-more {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  background: var(--orange, #f4551f); border: 1px solid var(--orange, #f4551f); color: #fff;
  font-size: 18px; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(244, 85, 31, .3);
}
.bx-cats-more:hover { background: var(--orange-deep, #d94512); border-color: var(--orange-deep, #d94512); }

/* the moved row loses its own outer gutter — the column provides it */
/* Reserve the row's height before it arrives.

   js/home.js lifts the first listing row out of #dg-rows and into this slot
   once app.js has painted. Until that happens the slot is empty, so the whole
   page below it jumped down by ~306px the moment the row landed — a 0.329
   cumulative layout shift on desktop, three times Google's 0.1 threshold and
   a Core Web Vitals failure. Mobile scored 0 because this two-column band is
   desktop-only, which is what gave the cause away.

   306px is the measured height of the rendered row: a 53px head plus a 239px
   card grid plus the gap. min-height, not height, so a taller row still
   grows — it just never starts from nothing. */
.bx-band-main { margin-top: 22px; min-height: 306px; }
.bx-band-main .dg-row { width: 100%; margin: 0; padding: 0; }
.bx-band-main .dg-row-head { padding: 0; }
/* The rows below scroll horizontally, so a card clipped at the right edge reads
   as "more this way". This one cannot scroll — the sidebar sits where the rest
   of the row would go — so a sliver there is just a widow. Fit whole cards to
   the column instead and drop any that do not fit. */
.bx-band-main .dg-row-scroll {
  padding: 0;
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
  grid-template-rows: auto;
  grid-auto-rows: 0;
  overflow: hidden;
}

.bx-promo {
  /* Bottom-aligned with the listing row rather than running past it.
     height:0 keeps the promo from contributing to the grid row, so the row
     is sized by the categories + row on the left; min-height then fills it.
     Sticky is gone with it — there is nothing left to scroll past. */
  height: 0; min-height: 100%; overflow: hidden;
  display: flex; flex-direction: column;
  background: #fff5f0; border-radius: 22px; padding: 22px 22px 20px;
  border: 1px solid rgba(244, 85, 31, 0.14);
}
/* the tile card sits against the bottom edge, so both columns end level */
.bx-promo-eyebrow { font-size: 14px; font-weight: 600; color: var(--orange-deep); }
.bx-promo h3 { font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; margin: 3px 0 6px; color: #1c1c1c; }
.bx-promo > p { font-size: 13.5px; line-height: 1.5; color: #4e4f4f; margin: 0 0 4px; }
.bx-promo-cta {
  font-family: inherit; font-weight: 600; font-size: 13.5px; color: #fff; cursor: pointer;
  background: var(--orange-deep); border: 0; border-radius: 999px; padding: 10px 18px;
  transition: background 0.18s ease;
}
.bx-promo-cta:hover { background: #b93c10; }
.bx-promo-card {
  /* An inset card floating inside the panel. It now fills whatever is left
     under the text rather than being pinned to the bottom with dead space
     above it — the tiles take that space, which is worth more than a gap.
     Padding matches the panel's own, so the ring of space around the tiles
     reads the same as the ring around the text above them. */
  margin: 12px 0 0; padding: 16px;
  flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
  background: #fff; border-radius: 16px;
  box-shadow: 0 10px 30px -18px rgba(20, 24, 16, 0.4);
}
.bx-promo-card-title { font-size: 14px; font-weight: 600; line-height: 1.3; color: #1c1c1c; margin: 0 0 10px; }
/* Two rows of three now. Square tiles overran the card's fixed height (it is
   pinned to the listing row beside it), so the crops are slightly landscape —
   which suits these photographs anyway. */
.bx-promo-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr;
  gap: 10px 8px; flex: 1 1 auto; min-height: 0;
}
.bx-promo-tiles a {
  display: flex; flex-direction: column; gap: 6px; min-height: 0;
  text-decoration: none; font-size: 12px; font-weight: 500; color: #4e4f4f;
}
.bx-promo-tiles a:hover { color: var(--orange-deep); }
/* no fixed ratio: each photo takes the height its row gives it, so the tiles
   grow with the card instead of leaving a gap beneath them */
.bx-promo-tile-img {
  display: block; flex: 1 1 auto; min-height: 64px; border-radius: 10px;
  background: #f2efe9 center/cover no-repeat;
}

/* the remaining rows come after the band, as before. app.css gives
   .dg-listings a 190px top pad (for the old overhanging panel) and 56px side
   pads inside a 1240px cap; both fight the thin-gutter layout, so the rows
   are put on the same gutter as everything else. */
#desktop-gate .dg-listings { max-width: none; padding-left: 0; padding-right: 0; }
/* the band row is a .dg-row that lost its own 40px bottom margin, so the gap to
   the next section has to come from here to match the row-to-row rhythm below */
#dg-rows { padding-top: 40px; }
#dg-results { padding-top: 24px; }
#desktop-gate .dg-row { width: 100%; }

/* ---- responsive ------------------------------------------------ */
@media (max-width: 1000px) {
  .bx-main { grid-template-columns: 1fr; gap: 20px; }
  /* stacked: let it size to its own content again */
  .bx-promo { height: auto; min-height: 0; }
}
@media (max-width: 900px) {
  :root { --bx-gutter: 20px; }
  .bx-hero { height: clamp(260px, 44vw, 320px); }
  .bx-searchbar { grid-template-columns: 1fr 1fr; border-radius: 22px; margin-top: -30px; }
  /* six cells stack as three rows of two; only the last of each pair loses its
     right border, and only the final row loses its bottom border */
  .bx-cell:nth-child(-n+4) { border-bottom: 1px solid rgba(51, 51, 51, 0.1); }
  .bx-cell { border-radius: 0; padding: 12px 8px 12px 16px; }
  .bx-cell:nth-child(2n) { border-right: 0; }
  .bx-cell:nth-child(-n+2) { border-bottom: 1px solid rgba(51, 51, 51, 0.1); }
  .bx-go { grid-column: 1 / -1; justify-self: end; margin: 8px 12px 10px; }
}
@media (max-width: 560px) {
  .bx-hero { height: 300px; }
  .bx-hero-copy { padding: 0 18px; }
  .bx-searchbar { grid-template-columns: 1fr; }
  .bx-cell { border-right: 0; border-bottom: 1px solid rgba(51, 51, 51, 0.1); }
  .bx-cell:nth-child(4) { border-bottom: 0; }
}

/* the band row pages by hiding cards (js/home.js); [hidden] has to beat the
   grid item's display for that to do anything */
.bx-band-main .dg-card[hidden] { display: none; }
/* a chevron that cannot go further reads as disabled rather than broken */
.bx-band-main ~ * [data-nav][disabled],
#bx-band-main .dg-row-nav button[disabled],
.bx-main-left .dg-row-nav button[disabled] { opacity: 0.35; cursor: default; }