/* Cabecera de página: franja baja de foto con el título a la izquierda (antetítulo pequeño en naranja y título
   grande en blanco) y las migas. Un degradado oscuro abajo y arriba deja leer el texto y la barra del sitio sea la
   foto clara u oscura. La portada no la usa (tiene su carrusel). */

@layer componentes {
  .hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: calc(var(--alto-barra) + 150px);
    padding-block: calc(var(--alto-barra) + var(--espacio-4)) var(--espacio-5);
    background-color: var(--color-marino-fondo);
    background-image: var(--imagen, none);
    background-position: center;
    background-size: cover;
    color: var(--color-texto-invertido);
    isolation: isolate;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to top, color-mix(in srgb, black 72%, transparent), color-mix(in srgb, black 15%, transparent) 70%),
      linear-gradient(to bottom, color-mix(in srgb, black 55%, transparent), transparent 50%);
  }

  /* Foto de poca resolución (menos de 1280 px de ancho): desenfocada y algo más oscura, para que se lea como fondo
     y no se vean los píxeles. La foto va en ::after, por debajo del degradado, y se recorta en los bordes. */
  .hero--suave {
    overflow: hidden;
    background-image: none;
  }

  .hero--suave::after {
    content: "";
    position: absolute;
    inset: -12px;
    z-index: -2;
    background-image: var(--imagen);
    background-position: center;
    background-size: cover;
    filter: blur(2.5px);
  }

  .hero--suave::before {
    background:
      linear-gradient(to top, color-mix(in srgb, black 72%, transparent), color-mix(in srgb, black 15%, transparent) 70%),
      linear-gradient(to bottom, color-mix(in srgb, black 55%, transparent), transparent 50%),
      color-mix(in srgb, black 12%, transparent);
  }

  .hero__encabezado {
    margin: 0;
    color: inherit;
  }

  .hero__antetitulo {
    display: block;
    margin-bottom: var(--espacio-1);
    color: var(--color-acento);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: var(--sombra-texto-barra);
  }

  .hero__titulo {
    display: block;
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
    font-weight: 700;
    line-height: 1.15;
    text-shadow: var(--sombra-texto);
  }

  .hero__subtitulo {
    max-width: 60ch;
    margin: var(--espacio-2) 0 0;
    font-size: var(--paso-0);
    text-shadow: var(--sombra-texto-barra);
  }

  /* Las migas, sobre la foto: en blanco */
  .hero .migas ol {
    margin: var(--espacio-3) 0 0;
    color: var(--color-texto-invertido);
    text-shadow: var(--sombra-texto-barra);
  }

  .hero .migas a {
    color: var(--color-texto-invertido);
    opacity: 0.85;
  }

  .hero .migas a:hover {
    opacity: 1;
  }

  .hero .migas [aria-current] {
    color: var(--color-texto-invertido);
  }
}