/* KARAKTER design system: home page sections (index.html).
   Builds on ds-core.css (tokens, chrome) and ds-page.css (type, components).
   The lead funnel include it mounts is styled by ds-funnel.css. */

/* ── HERO ──
   A full-width photo banner with the copy laid over it, always a dark panel
   (data-theme="dark" in the markup) so the type reads the same in both themes.
   The photo is bright sky on the left, where the copy sits, so the scrim is
   strongest there: --ds-scrim-text under the whole text column, easing off
   only past it, toward Ryan. This is the one gradient in the design system
   (docs/DESIGN.md, Amendments); scripts/test-design-system-unit.mjs holds the
   text over it to 7:1 against a white photo. */
.home-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 76vh, 820px);
  padding: var(--ds-space-8) 0;
  overflow: hidden;
  background: var(--ds-bg);
}

.home-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.home-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 22%;
}

.home-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, var(--ds-scrim-text) 0%, var(--ds-scrim-text) 54%, var(--ds-scrim-soft) 76%, var(--ds-scrim-faint) 100%);
}

.home-hero-inner {
  width: 100%;
}

.home-hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
  max-width: 680px;
}

/* Greedy wrapping keeps "Real estate" together on a phone; balancing would
   leave "Real" alone on the first line. */
.home-hero .hero-h1 {
  text-wrap: wrap;
}

/* Over a photograph every word is the panel's full ink: muted and gold text
   would fall under 7:1 where the sky behind the scrim is white. */
.home-hero .hero-eyebrow,
.home-hero .hero-sub,
.home-hero .home-stat dt,
.home-hero .ds-btn--link {
  color: var(--ds-fg);
}

.home-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-5) var(--ds-space-7);
  margin: var(--ds-space-3) 0 0;
  padding-top: var(--ds-space-5);
  border-top: 1px solid var(--ds-border);
}

/* Value above label; the markup keeps <dt> before <dd> for screen readers. */
.home-stat {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--ds-space-2);
}

.home-stat dd {
  margin: 0;
}

/* Gold at display size: large text, 4.5:1 is the AAA bar and it clears it. */
.home-stat-unit {
  color: var(--ds-accent);
}

/* ── SPECIALTY BAND ── Gold, flat, standing still. */
.home-band {
  background: var(--ds-accent);
  color: var(--ds-on-accent);
}

.home-band-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ds-space-2) 0;
  margin: 0 auto;
  padding-top: var(--ds-space-4);
  padding-bottom: var(--ds-space-4);
  list-style: none;
}

.home-band-list li {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.home-band-list li + li::before {
  content: '';
  width: 5px;
  height: 5px;
  margin: 0 var(--ds-space-4);
  background: currentColor;
  transform: rotate(45deg);
}

/* ── ABOUT ── */
.about .ds-callout {
  margin-bottom: var(--ds-space-8);
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--ds-space-8);
  align-items: start;
}

.about-photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ds-surface-alt);
}

.about-photo picture {
  height: 100%;
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

.about-copy {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
}

.about-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--ds-space-6);
  margin: var(--ds-space-3) 0 0;
  padding: 0;
  list-style: none;
}

.about-pillar {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  padding: var(--ds-space-5) 0;
  border-top: 1px solid var(--ds-border);
}

.about-pillar .ds-icon {
  color: var(--ds-accent-fg);
  margin-bottom: var(--ds-space-1);
}

/* ── FEATURED LISTINGS ──
   Six-column track: three cards in the first row, two wider ones in the second. */
.listing-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--ds-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.listing-cell {
  grid-column: span 2;
}

.listing-cell:nth-child(n + 4) {
  grid-column: span 3;
}

.listing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  overflow: hidden;
  transition: border-color var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease);
}

.listing-card:hover {
  border-color: var(--ds-border-strong);
  box-shadow: var(--ds-shadow-1);
}

/* Image 3:2, square corners, sitting in a surface-alt slot until it loads. */
.listing-card-media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ds-surface-alt);
}

.listing-card-photo {
  width: 100%;
  height: 100%;
  background-color: var(--ds-surface-alt);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: transform var(--ds-slow) var(--ds-ease);
}

.listing-card:hover .listing-card-photo.has-photo {
  transform: scale(1.02);
}

.listing-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--ds-space-2);
  padding: var(--ds-space-5);
}

.listing-card-price {
  margin-bottom: var(--ds-space-1);
}

/* Stretched link: the whole card is the target, while the REALTOR.ca badge
   stays a link of its own above it. */
.listing-card-hit {
  color: var(--ds-fg);
  text-decoration: none;
}

.listing-card-hit::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.listing-card-hit:focus-visible {
  outline: none;
}

.listing-card-hit:focus-visible::after {
  outline: 2px solid var(--ds-focus);
  outline-offset: -2px;
}

.listing-card-attribution {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  margin-top: auto;
  padding-top: var(--ds-space-3);
}

.listing-card-attribution:empty {
  display: none;
}

.listing-card-attribution .ddf-badge {
  position: relative;
  z-index: 2;
}

/* The REALTOR.ca mark is dark artwork: it keeps a light ground in dark mode
   rather than being recoloured, which the DDF rules do not allow. */
[data-theme="dark"] .listing-card-attribution .ddf-badge {
  padding: 4px;
  background: var(--ds-paper);
  border-radius: var(--ds-radius-sm);
}

.gallery-more {
  margin-top: var(--ds-space-6);
}

/* ── SERVICE AREAS ── */
.area-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ds-border);
}

.area-card {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  padding: var(--ds-space-6) var(--ds-space-5) var(--ds-space-6) 0;
}

.area-card + .area-card {
  padding-left: var(--ds-space-5);
  border-left: 1px solid var(--ds-border);
}

.area-num {
  color: var(--ds-accent-fg);
}

.area-card .spec-desc {
  color: var(--ds-fg-muted);
}

.area-card .spec-desc a {
  color: var(--ds-fg);
}

/* ── WHO RYAN SERVES ── */
.serve-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-5);
}

.serve-card {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
}

.serve-card .ds-icon {
  color: var(--ds-accent-fg);
}

.serve-title a {
  color: var(--ds-fg);
  text-decoration: none;
}

.serve-title a:hover {
  color: var(--ds-accent-fg);
}

.serve-detail {
  margin-top: auto;
  padding-top: var(--ds-space-4);
  border-top: 1px solid var(--ds-border);
  color: var(--ds-fg-muted);
}

/* ── DOWNSIZING ── */
.downsize-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--ds-space-8);
  align-items: start;
}

.downsize-main {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
}

.downsize-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ds-step;
}

.downsize-steps li {
  position: relative;
  padding: var(--ds-space-4) 0 var(--ds-space-4) var(--ds-space-8);
  border-top: 1px solid var(--ds-border);
  counter-increment: ds-step;
}

.downsize-steps li::before {
  content: counter(ds-step, decimal-leading-zero);
  position: absolute;
  top: var(--ds-space-3);
  left: 0;
  font-family: var(--ds-font-display);
  font-size: 32px;
  line-height: 1;
  color: var(--ds-accent-fg);
}

.downsize-steps strong {
  font-weight: 700;
}

.downsize-guides {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
}

.downsize-guides ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.downsize-guides li + li {
  border-top: 1px solid var(--ds-border);
}

.downsize-guides a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-4);
  min-height: 56px;
  padding: var(--ds-space-2) 0;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ds-fg);
  text-decoration: none;
}

.downsize-guides a::after {
  content: '\2192';
  flex-shrink: 0;
  color: var(--ds-accent-fg);
  transition: transform var(--ds-fast) var(--ds-ease);
}

.downsize-guides a:hover {
  color: var(--ds-accent-fg);
}

.downsize-guides a:hover::after {
  transform: translateX(3px);
}

/* ── PROCESS ── */
.process-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--ds-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.process-step {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  padding-top: var(--ds-space-4);
  border-top: 2px solid var(--ds-border-strong);
}

.process-num {
  color: var(--ds-accent-fg);
}

/* ── REVIEWS ── */
.reviews {
  margin-bottom: var(--ds-space-6);
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ds-space-5);
  margin: 0 0 var(--ds-space-5);
  padding: 0;
  list-style: none;
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
}

.review-stars {
  color: var(--ds-accent-fg);
  font-size: 17px;
  letter-spacing: 0.12em;
}

.review-text {
  margin: 0;
  font-family: var(--ds-font-serif);
  font-size: 20px;
  font-style: italic;
  line-height: 1.5;
}

.review-author {
  margin-top: auto;
  color: var(--ds-fg-muted);
}

.review-stats {
  text-align: center;
}

.review-stats strong {
  color: var(--ds-fg);
}

/* ── CTA ── */
.cta-band .ds-section-head {
  margin-bottom: 0;
}

/* ── RESPONSIVE ── */
@media (max-width: 1199px) {
  .area-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .area-card:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .area-card:nth-child(n + 3) {
    border-top: 1px solid var(--ds-border);
  }

  .process-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .home-hero {
    min-height: 0;
    padding: var(--ds-space-8) 0;
  }

  /* No photo on a tablet or phone: cropped that tight it is an unreadable
     close-up. The hero is the dark panel with the KARAKTER mark behind the copy,
     a step more present than a section watermark. The <picture> sources are
     media-gated to 900px up, so the photo is never downloaded here. */
  .home-hero-media,
  .home-hero-scrim {
    display: none;
  }

  .home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--ds-watermark);
    /* Behind the headline, clear of the white primary button. */
    background-position: center 24%;
    background-repeat: no-repeat;
    background-size: min(88%, 560px) auto;
    opacity: var(--ds-watermark-opacity-hero);
    pointer-events: none;
  }

  .about-grid,
  .downsize-grid {
    grid-template-columns: 1fr;
    gap: var(--ds-space-6);
  }

  .about-photo {
    max-width: 480px;
  }

  .listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .listing-cell,
  .listing-cell:nth-child(n + 4) {
    grid-column: span 1;
  }

  .listing-cell:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .serve-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 639px) {
  .about-pillars,
  .listing-grid,
  .area-grid,
  .process-steps {
    grid-template-columns: 1fr;
  }

  .listing-cell:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .area-card,
  .area-card + .area-card {
    padding: var(--ds-space-5) 0;
    border-left: 0;
  }

  .area-card + .area-card {
    border-top: 1px solid var(--ds-border);
  }

  .home-stats {
    gap: var(--ds-space-5);
  }

  .home-band-list li {
    font-size: 12px;
  }

  .home-band-list li + li::before {
    margin: 0 var(--ds-space-3);
  }
}