/**
 * Block: about-hero
 */

.tidal-wave-about-hero .tidal-wave-wave-panel.tidal-wave-page-hero__panel {
  /* Wider than the 56rem inner-page hero cluster, but not full homepage width. */
  max-width: min(100%, 68rem);
  width: 100%;
  overflow: visible;
}

/* ——— About hero layout ——— */

.tidal-wave-about-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 52%) minmax(0, 48%);
  grid-template-areas:
    "lead visual"
    "body visual"
    "actions visual";
  column-gap: var(--wp--preset--spacing--xl, 2rem);
  /* Vertical rhythm owned by title-support + copy-action tokens — not row-gap. */
  row-gap: 0;
  align-items: stretch;
  width: 100%;
}

.tidal-wave-about-hero__lead {
  grid-area: lead;
  align-self: center;
  min-width: 0;
}

.tidal-wave-about-hero__body {
  grid-area: body;
  min-width: 0;
  margin-block: 0 !important;
}

.tidal-wave-about-hero__actions {
  grid-area: actions;
}

.tidal-wave-about-hero__actions.tidal-wave-hero__actions {
  /* Vertical CTA stack — a bit tighter than the default block gap. */
  gap: 0.55rem;
  row-gap: 0.55rem;
  margin-block-start: var(--tidal-wave-copy-action-gap) !important;
}

.tidal-wave-about-hero__visual {
  grid-area: visual;
  align-self: stretch;
  justify-self: stretch;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.tidal-wave-about-hero .tidal-wave-hero__illustration--family,
.tidal-wave-about-hero .wp-block-image.tidal-wave-hero__illustration--family {
  overflow: visible;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.tidal-wave-about-hero .tidal-wave-hero__illustration--family img,
.tidal-wave-about-hero .wp-block-image.tidal-wave-hero__illustration--family img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: 1295 / 965;
  object-fit: contain;
  object-position: right bottom;
}

/*
 * Desktop: How It Works / FAQ / booking stay clustered.
 * About uses a slightly wider panel than those heroes and scales
 * the family illustration to the left-column content height.
 */
@media (min-width: 782px) {
  .tidal-wave-about-hero .tidal-wave-wave-panel.tidal-wave-page-hero__panel {
    padding-inline: calc(var(--tidal-wave-gutter-inline) + 15px);
    margin-inline: auto;
  }

  .tidal-wave-about-hero .tidal-wave-about-hero__layout {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    column-gap: clamp(1.5rem, 3vw, 3rem);
  }

  .tidal-wave-about-hero .tidal-wave-hero__illustration--family img {
    /* Grow with the left stack; stay within the visual column. */
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: none;
  }
}

@media (max-width: 979px) {
  .tidal-wave-about-hero {
    --tidal-wave-about-hero-illus-width: min(88vw, 15rem);
  }

  .tidal-wave-about-hero.tidal-wave-wave-section,
  .tidal-wave-about-hero.tidal-wave-page-hero,
  .tidal-wave-about-hero .tidal-wave-page-hero__panel {
    overflow: visible;
  }

  .tidal-wave-about-hero__layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Same tokens as other page heroes — don’t inflate with +10px. */
    gap: 0;
  }

  /* WP is-layout-flow adds margin-block-start to children — tokens handle spacing. */
  .tidal-wave-about-hero__layout.is-layout-flow
    > *:not(.tidal-wave-hero__actions):not(.tidal-wave-about-hero__actions):not(.tidal-wave-about-hero__visual),
  .tidal-wave-about-hero__layout.wp-block-group-is-layout-flow
    > *:not(.tidal-wave-hero__actions):not(.tidal-wave-about-hero__actions):not(.tidal-wave-about-hero__visual) {
    margin-block: 0 !important;
  }

  .tidal-wave-about-hero__layout .tidal-wave-hero__actions,
  .tidal-wave-about-hero__layout .tidal-wave-about-hero__actions {
    margin-block-start: var(--tidal-wave-copy-action-gap) !important;
    margin-block-end: 0 !important;
  }

  .tidal-wave-about-hero__lead.is-layout-flow > *:not(.tidal-wave-headline),
  .tidal-wave-about-hero__lead.wp-block-group-is-layout-flow > *:not(.tidal-wave-headline),
  .tidal-wave-about-hero__body.is-layout-flow > *,
  .tidal-wave-about-hero__body.wp-block-group-is-layout-flow > * {
    margin-block: 0 !important;
  }

  .tidal-wave-about-hero__lead .tidal-wave-headline--page {
    margin-block-end: var(--tidal-wave-title-support-gap) !important;
  }

  .tidal-wave-about-hero__body.is-layout-flow,
  .tidal-wave-about-hero__body.wp-block-group-is-layout-flow {
    margin-block: 0 !important;
  }

  .tidal-wave-about-hero__lead p,
  .tidal-wave-about-hero__body p {
    margin-block-start: 0;
    margin-block-end: 0;
  }

  .tidal-wave-about-hero__body {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 100%;
  }

  .tidal-wave-about-hero__lead {
    width: 100%;
    max-width: 100%;
    padding-inline-end: 0;
  }

  .tidal-wave-about-hero__layout.is-layout-flow > .tidal-wave-about-hero__visual,
  .tidal-wave-about-hero__layout.wp-block-group-is-layout-flow > .tidal-wave-about-hero__visual,
  .tidal-wave-about-hero__layout > .tidal-wave-about-hero__visual {
    align-self: center;
    width: var(--tidal-wave-about-hero-illus-width);
    max-width: 100%;
    margin-block: 1.15rem !important;
  }

  .tidal-wave-about-hero .tidal-wave-hero__illustration--family {
    display: flex;
    overflow: visible !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .tidal-wave-about-hero .tidal-wave-hero__illustration--family img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1295 / 965 !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    margin: 0;
  }

  .tidal-wave-about-hero__actions.tidal-wave-hero__actions {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
  }

  .tidal-wave-about-hero__actions .wp-block-button {
    width: min(100%, 16rem);
    margin: 0;
  }

  .tidal-wave-about-hero__actions .wp-block-button__link {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 479px) {
  .tidal-wave-about-hero__lead .tidal-wave-headline--page {
    font-size: clamp(1.5rem, 6.5vw, 1.85rem);
  }
}

@media (max-width: 781px) {
  /* Scope to About only — HIW/FAQ heroes need copy-then-visual, not reverse. */
  .tidal-wave-about-hero .tidal-wave-page-hero__columns {
    flex-direction: column-reverse;
  }

  .tidal-wave-about-hero__layout.tidal-wave-hero__columns {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  /*
   * Illustration ≈ 3/4 of the title/description measure (same as Contact / How It Works).
   */
  .tidal-wave-about-hero {
    --tidal-wave-about-hero-illus-width: 75%;
  }

  .tidal-wave-about-hero__layout.is-layout-flow > .tidal-wave-about-hero__visual,
  .tidal-wave-about-hero__layout.wp-block-group-is-layout-flow > .tidal-wave-about-hero__visual,
  .tidal-wave-about-hero__layout > .tidal-wave-about-hero__visual {
    align-self: center;
    width: 75%;
    max-width: 75%;
    margin-inline: auto;
    margin-block: 1.15rem !important;
  }
}