/* =========================================================================
   Aster — "What we do differently"
   A wide statement against a narrow lede, then three points that each step
   a little lower than the last, with the photograph filling the space the
   stepped text leaves behind.
   ========================================================================= */

.aster-difference {
  padding-block: var(--wp--custom--section-space-large);
}


/* -------------------------------------------------------------------------
   Opening statement
   ------------------------------------------------------------------------- */
.aster-difference__opening {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  column-gap: var(--wp--custom--grid-gap);
  align-items: end;
}
.aster-difference__opening .aster-eyebrow { grid-column: 1 / -1; }

.aster-difference__statement {
  grid-column: 1;
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xxxl);
  font-weight: var(--wp--custom--weight-medium);
  line-height: var(--wp--custom--leading-tight);
  letter-spacing: var(--wp--custom--tracking-display);
  color: var(--wp--preset--color--contrast);
  /* Deliberately NOT balanced: the line breaks are the owner's own. */
  text-wrap: initial;
}
/* The one accented phrase in the statement. */
.aster-difference__statement em {
  font-style: normal;
  color: var(--wp--preset--color--accent);
}

.aster-difference__lede {
  grid-column: 2;
  max-width: var(--wp--custom--measure-narrow);
  margin: 0;
  padding-bottom: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--leading-relaxed);
  color: var(--wp--preset--color--ink-muted);
}


/* -------------------------------------------------------------------------
   The three points
   ------------------------------------------------------------------------- */
.aster-difference__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--custom--grid-gap);
}
/* Deliberate asymmetry: each column sits a little lower than the last. */
.aster-difference__points > :nth-child(2) { margin-top: var(--wp--preset--spacing--80); }
.aster-difference__points > :nth-child(3) { margin-top: var(--wp--preset--spacing--100); }

.aster-point__number {
  margin: 0 0 var(--wp--preset--spacing--50);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading-relaxed);
  letter-spacing: var(--wp--custom--tracking-label);
  color: var(--wp--preset--color--accent);
}

.aster-point__title {
  margin: 0 0 var(--wp--preset--spacing--40);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--weight-medium);
  line-height: var(--wp--custom--leading-snug);
  letter-spacing: var(--wp--custom--tracking-tight);
  color: var(--wp--preset--color--contrast);
  text-wrap: balance;
}

.aster-point__body {
  margin: 0 0 var(--wp--preset--spacing--50);
  max-width: 32ch;
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--leading-relaxed);
  color: var(--wp--preset--color--ink-secondary);
}
.aster-point__body:last-child { margin-bottom: 0; }


/* -------------------------------------------------------------------------
   Photograph — anchored bottom left, under the shortest column
   ------------------------------------------------------------------------- */
.aster-difference__figure {
  margin-top: var(--wp--preset--spacing--70);
  width: min(42%, 28rem);
}
.aster-difference__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--wp--custom--ratio-landscape);
  object-fit: cover;
  background: var(--wp--custom--image-fill);
}


/* -------------------------------------------------------------------------
   Tablet
   ------------------------------------------------------------------------- */
@media (max-width: 62rem) {
  .aster-difference__opening { grid-template-columns: minmax(0, 1fr); }
  .aster-difference__statement,
  .aster-difference__lede { grid-column: 1; }
  .aster-difference__lede {
    max-width: var(--wp--custom--measure);
    margin-top: var(--wp--preset--spacing--60);
    padding-bottom: 0;
  }

  .aster-difference__points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aster-difference__points > :nth-child(2) { margin-top: var(--wp--preset--spacing--80); }
  .aster-difference__points > :nth-child(3) { margin-top: 0; }

  .aster-difference__figure {
    margin-top: var(--wp--preset--spacing--80);
    width: min(60%, 26rem);
  }
}


/* -------------------------------------------------------------------------
   Phone
   ------------------------------------------------------------------------- */
@media (max-width: 46rem) {
  .aster-difference__points {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp--preset--spacing--80);
  }
  .aster-difference__points > :nth-child(2),
  .aster-difference__points > :nth-child(3) { margin-top: 0; }

  .aster-point__body { max-width: none; }

  .aster-difference__figure {
    width: 100%;
    margin-top: var(--wp--preset--spacing--80);
  }
}