/*
  Cabecera de página interior
  Título grande, entradilla y foto ancha. Lleva [data-sticky-cta-start]:
  cuando sale de pantalla aparece la llamada fija al registro.

  <header class="page-intro" data-sticky-cta-start>
    <div class="container page-intro__text">
      <h1 class="page-intro__title">…</h1>
      <p class="lead page-intro__lead">…</p>
    </div>
    <div class="container">
      <figure class="page-intro__media media" data-reveal>…</figure>
    </div>
  </header>
*/

.page-intro {
  padding-top: calc(var(--header-height) + var(--padding-12));
}

.page-intro__text {
  display: grid;
  gap: var(--gap-6);
  padding-bottom: var(--padding-10);
}

.page-intro__title {
  font-size: var(--font-size-9);
  line-height: var(--line-height-13);
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
  letter-spacing: -0.03em;
  max-width: 16ch;
}

.page-intro__lead {
  max-width: 38ch;
  color: var(--text-muted);
}

.page-intro__media {
  aspect-ratio: 4 / 3;
  margin-inline: calc(-1 * var(--gutter));
}

.page-intro__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-2);
}

@media (min-width: 768px) {
  .page-intro__title {
    font-size: var(--font-size-10);
    line-height: var(--line-height-14);
  }

  .page-intro__media {
    aspect-ratio: 16 / 9;
    margin-inline: 0;
  }
}

@media (min-width: 1280px) {
  .page-intro {
    padding-top: calc(var(--header-height) + var(--padding-20));
  }

  /* Título a la izquierda, entradilla alineada a su base a la derecha */
  .page-intro__text {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap-6);
    align-items: end;
    padding-bottom: var(--padding-16);
  }

  .page-intro__title {
    grid-column: 1 / 8;
    font-size: var(--font-size-11);
    line-height: var(--line-height-15);
  }

  .page-intro__lead {
    grid-column: 8 / 13;
    font-size: var(--font-size-6);
    line-height: var(--line-height-10);
  }

  .page-intro__media {
    aspect-ratio: 21 / 9;
  }
}