/* Home lede — H1, sub, CTAs (left) with optional photo (right). */

.savvy-lede {
  background: var(--surface-base);
}

.savvy-lede__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-7) var(--container-padding) var(--space-8);
}

/* Single-column fallback when no lede photo is set */
.savvy-lede:not(.savvy-lede--split) .savvy-lede__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Two-column split when lede photo is set */
.savvy-lede--split .savvy-lede__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

.savvy-lede__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.savvy-lede__headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw + 0.5rem, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: var(--fw-bold);
  color: var(--text-default);
  margin: 0;
  max-width: 22ch;
}

.savvy-lede__sub {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  margin: 0;
  max-width: 56ch;
}
.savvy-lede__sub strong,
.savvy-lede__response {
  color: var(--text-default);
  font-weight: var(--fw-semibold);
  background-color: var(--brand-emphasis);
  padding: 0 0.2em;
}

.savvy-lede__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.savvy-lede__phone-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Photo column — break out of the centred container to the right viewport
   edge. calc(50% - 50vw) is negative on wide screens and pulls the right
   edge exactly to the viewport edge; it self-cancels at narrow widths. */
/* Contained, framed photo — mirrors the service-page lead figure
   (.savvy-svc-lead__media): a 4:3 card with a 1px border and small radius,
   sitting inside the container rather than bleeding to the viewport edge. */
.savvy-lede__media {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid var(--border-default);
  aspect-ratio: 4 / 3;
  min-height: 280px;
}
.savvy-lede__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 900px) {
  .savvy-lede--split .savvy-lede__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .savvy-lede__copy {
    padding: 0;
  }
  /* Stacked: photo on top, contained (matches the service-page lead). */
  .savvy-lede__media {
    order: -1;
    aspect-ratio: 16 / 10;
    min-height: 220px;
  }
}

@media (max-width: 640px) {
  .savvy-lede__inner {
    padding: var(--space-7) var(--container-padding);
  }
  .savvy-lede__copy {
    gap: var(--space-4);
  }
  .savvy-lede__media {
    min-height: 220px;
  }
}