/* =========================================================================
   Aster — Hero section
   An asymmetric spread. The words keep to the container grid; the photograph
   runs off the right edge of the page; a smaller photograph overlaps its
   corner so the two planes read as one composition rather than two pictures.
   ========================================================================= */

/* First section on the page, so it carries the clearance for the fixed
   header itself rather than relying on a section above it. */
.aster-hero {
  padding-top: calc(
    var(--wp--custom--header-height) +
    clamp(var(--wp--preset--spacing--60), 5vw, var(--wp--preset--spacing--80))
  );
  padding-bottom: var(--wp--custom--section-space);
  background: var(--wp--preset--color--base);
}

.aster-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  align-items: center;
  gap: clamp(var(--wp--preset--spacing--70), 7vw, var(--wp--preset--spacing--100));
  /* Padded rather than centred: the left edge lands exactly on the container
     grid, and the right column is free to reach the page edge. */
  padding-left: max(
    var(--wp--custom--gutter),
    calc((100% - var(--wp--custom--container)) / 2 + var(--wp--custom--gutter))
  );
}


/* -------------------------------------------------------------------------
   Words
   ------------------------------------------------------------------------- */
.aster-hero__title {
  margin: 0 0 var(--wp--preset--spacing--50);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xxl);
  font-weight: var(--wp--custom--weight-medium);
  line-height: var(--wp--custom--leading-snug);
  letter-spacing: var(--wp--custom--tracking-display);
  color: var(--wp--preset--color--contrast);
  text-wrap: balance;
}

.aster-hero__body {
  max-width: var(--wp--custom--measure);
  margin: 0 0 var(--wp--preset--spacing--70);
  color: var(--wp--preset--color--ink-secondary);
  font-size: var(--wp--preset--font-size--md);
  line-height: var(--wp--custom--leading-relaxed);
}

.aster-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);
}


/* -------------------------------------------------------------------------
   Photographs
   ------------------------------------------------------------------------- */
.aster-hero__media { position: relative; }

.aster-hero__portrait,
.aster-hero__inset { margin: 0; }

.aster-hero__portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--wp--custom--ratio-portrait);
  object-fit: cover;
  object-position: center 26%;
  background: var(--wp--custom--image-fill);
}

/* The smaller frame sits on the corner of the larger one. The white padding
   on the two touching sides is the only separation — no border, no shadow. */
.aster-hero__inset {
  position: absolute;
  left: 0;
  bottom: clamp(var(--wp--preset--spacing--70), 9%, var(--wp--preset--spacing--90));
  width: clamp(9rem, 40%, 15rem);
  transform: translateX(-30%);
  background: var(--wp--preset--color--base);
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) 0;
}
.aster-hero__inset img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--wp--custom--ratio-landscape);
  object-fit: cover;
  background: var(--wp--custom--image-fill);
}


/* -------------------------------------------------------------------------
   A hairline of practical detail closes the section on the grid line
   ------------------------------------------------------------------------- */
.aster-hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--70);
  margin-top: clamp(var(--wp--preset--spacing--80), 6vw, var(--wp--preset--spacing--90));
  padding-top: var(--wp--preset--spacing--50);
  border-top: var(--wp--custom--line-hairline) solid var(--wp--preset--color--line);
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading-relaxed);
  color: var(--wp--preset--color--ink-secondary);
}
.aster-hero__meta p { margin: 0; }

.aster-hero__meta-label {
  margin-right: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--xxs);
  letter-spacing: var(--wp--custom--tracking-label);
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-muted);
}

.aster-hero__meta a {
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
  border-bottom: var(--wp--custom--line-hairline) solid var(--wp--preset--color--line-strong);
  transition: border-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}
.aster-hero__meta a:hover { border-bottom-color: var(--wp--preset--color--contrast); }


/* -------------------------------------------------------------------------
   Tablet — the hero stacks and the photograph returns to the grid
   ------------------------------------------------------------------------- */
@media (max-width: 62rem) {
  .aster-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(var(--wp--preset--spacing--80), 8vw, var(--wp--preset--spacing--90));
    max-width: var(--wp--custom--container);
    margin-inline: auto;
    padding-inline: var(--wp--custom--gutter);
  }
  .aster-hero__media { width: min(100%, 30rem); }
  .aster-hero__inset {
    left: 0;
    bottom: 0;
    transform: none;
    width: clamp(8rem, 36%, 12rem);
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) 0 0;
  }
}


/* -------------------------------------------------------------------------
   Phone
   ------------------------------------------------------------------------- */
@media (max-width: 46rem) {
  .aster-hero__media { width: 100%; }
  .aster-hero__inset { width: clamp(7rem, 38%, 10rem); }
  .aster-hero__actions { gap: var(--wp--preset--spacing--50); }
  .aster-hero__actions .aster-button { width: 100%; justify-content: center; }
  .aster-hero__meta { flex-direction: column; }
}


/* -------------------------------------------------------------------------
   Editor — the block preview is iframed at the canvas width, so give the
   section the same clearance it has on the front end minus the fixed header.
   ------------------------------------------------------------------------- */
.editor-styles-wrapper .aster-hero {
  padding-top: clamp(var(--wp--preset--spacing--60), 5vw, var(--wp--preset--spacing--80));
}