/**
 * El destacado de portada.
 *
 * Foto a sangre con el titular encima en blanco. El texto va sobre una foto que
 * no controlamos, asi que el contraste no se puede dejar al azar: debajo del
 * texto hay un degradado opaco que garantiza que se lee sea cual sea la imagen.
 */

.sites360-destacado {
    position: relative;
    margin-bottom: 2.5rem;
    background: var(--wp--preset--color--header-bg, #111);
    overflow: hidden;
}

.sites360-destacado__enlace {
    display: block;
    position: relative;
    text-decoration: none;
    color: #fff;
    /* Apaisado en pantallas grandes; mas alto en el movil, que es donde el
       titular necesita sitio para respirar. */
    aspect-ratio: 16 / 9;
}

.sites360-destacado__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* `cover` recorta, que es lo que se quiere: la foto llena la caja sin
       deformarse. El encuadre tira hacia arriba porque en una foto de prensa la
       cara suele estar en el tercio superior. */
    object-fit: cover;
    object-position: center 35%;
    display: block;
}

/* El degradado que hace legible el texto. Va de transparente arriba a casi negro
   abajo, y solo cubre la mitad inferior para no apagar la foto entera. */
.sites360-destacado__velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 35%,
        rgba(0, 0, 0, 0.35) 60%,
        rgba(0, 0, 0, 0.82) 100%
    );
}

.sites360-destacado--sin-foto .sites360-destacado__velo {
    background: none;
}

.sites360-destacado__texto {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(1.1rem, 3vw, 2.4rem);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.sites360-destacado__linea {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
}

.sites360-destacado__seccion {
    background: var(--wp--preset--color--header-bg, #0283d4);
    color: var(--wp--preset--color--header-fg, #fff);
    padding: 0.2rem 0.55rem;
    font-weight: 700;
}

.sites360-destacado__fecha {
    font-variant-numeric: tabular-nums;
}

.sites360-destacado__titular {
    margin: 0;
    color: #fff;
    font-size: clamp(1.35rem, 3.6vw, 2.9rem);
    line-height: 1.14;
    font-weight: 700;
    text-wrap: balance;
    /* Un poco de sombra ademas del degradado: en fotos claras el degradado solo
       no siempre basta para el trazo fino de la tipografia. */
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

/* El enlace envuelve toda la pieza, asi que el foco de teclado tiene que verse
   sobre la foto y no solo sobre el texto. */
.sites360-destacado__enlace:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
}

.sites360-destacado__enlace:hover .sites360-destacado__titular {
    text-decoration: underline;
    text-underline-offset: 0.14em;
}

@media (max-width: 781px) {
    .sites360-destacado__enlace {
        aspect-ratio: 4 / 5;
    }

    .sites360-destacado__velo {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 25%,
            rgba(0, 0, 0, 0.4) 55%,
            rgba(0, 0, 0, 0.85) 100%
        );
    }
}

/* Pegado a la cabecera.
 *
 * `main` lleva `padding: 2rem` (css/main.css), asi que entre la banda de color de
 * la cabecera y la foto quedaba una raya blanca de 32px. Medido, no supuesto: el
 * hueco era exactamente el padding de `main`, no un margen del bloque.
 *
 * Se sube el destacado esa misma medida en lugar de quitarle el padding a `main`,
 * que afectaria a todas las paginas del sitio. Y solo cuando es lo PRIMERO que
 * hay: si alguien lo coloca a media portada, ahi el aire si hace falta. */
main > .sites360-destacado:first-child {
    margin-top: calc(-1 * var(--sites360-main-padding, 2rem));
}