/* ══════════════════════════════════════════════
   RC-32 — Single Noticia
   Figma: Recoplast - Noticia Entrada (nodeId 90:656)

   Secciones:
    - Hero / Banner (RC-32) — mismo patrón que archive hero
      pero height 320px y sin texto bajada
    - Contenido del artículo (RC-33+) — stub base
══════════════════════════════════════════════ */


/* ══════════════════════════════════════════════
   HERO — Banner superior del single
   Figma: banner 1401×320px | radius 20 | overlay rgba(0,78,90,0.80)
   Tipografía heading: Roboto ExtraBold 32px blanco
   Botón volver: Roboto Bold 16px uppercase letter-spacing 2px
══════════════════════════════════════════════ */

.single-noticia {
    background: #FAFAFA;
}

.noticia-hero {}

/* Mismo contenedor que archive hero: max 1600px + 100px padding */
.noticia-hero__inner {
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: 100px;
}

/* Banner: imagen de fondo + overlay + contenido */
.noticia-hero__banner {
    position: relative;
    border-radius: 20px;
    height: 320px;
    background-color: #004E5A; /* fallback sin imagen */
    background-size: cover;
    background-position: center;
    overflow: hidden;

    /* Flex column: nav arriba → heading abajo */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 38px 68px 38px 121px;
}

/* Overlay teal semitransparente */
.noticia-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 78, 90, 0.80);
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

/* Nav y content relativo al overlay */
.noticia-hero__nav,
.noticia-hero__content {
    position: relative;
    z-index: 1;
}

/* ── Botón "← VOLVER ATRÁS" ── */
.noticia-hero__back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #FFFFFF;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.174;
    transition: opacity 0.2s ease;
}

.noticia-hero__back-btn:hover,
.noticia-hero__back-btn:focus-visible {
    opacity: 0.75;
}

.noticia-hero__back-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.noticia-hero__back-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* ── Heading "Noticias" ── */
.noticia-hero__content {
    display: flex;
    flex-direction: column;
}

.noticia-hero__title {
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    font-size: 32px;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.25;
    letter-spacing: 0;
}


/* ══════════════════════════════════════════════
   CONTENIDO DEL ARTÍCULO (RC-33+)
   Layout: imagen izquierda | fecha+título+texto derecha
   padding-inline: 100px → alineado al banner
══════════════════════════════════════════════ */

.noticia-content {
    margin-top: 85px;
}

.noticia-content__inner {
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: 100px;
    display: flex;
    flex-direction: row;
    gap: 41px;
    align-items: flex-start;
}

/* ── Imagen izquierda ── */
.noticia-content__thumbnail {
    flex: 0 0 679px;
    width: 679px;
    height: 655px;
    border-radius: 10px;
    overflow: hidden;
}

.noticia-content__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* ── Columna derecha: fecha + título + texto ── */
.noticia-content__body {
    flex: 0 0 560px;
    width: 560px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.noticia-content__date {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #004E5A;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.noticia-content__title {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #004E5A;
    line-height: 1.25;
    margin: 0;
}

.noticia-content__text {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #4E4F4F;
    line-height: 1.65;
    text-align: justify;
    /* Reset indentación WordPress entry-content */
    padding: 0;
    margin-top: 34px; /* gap(16px) + 34px = 50px separación título→texto */
}

/* Neutralizar estilos del editor de bloques de WordPress
   que añaden padding-left / margin-left en <p>, <ul>, <ol>, etc. */
.noticia-content__text.entry-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.noticia-content__text > *,
.noticia-content__text.entry-content > * {
    padding-left: 0;
    margin-left: 0;
    box-sizing: border-box;
}

.noticia-content__text p {
    margin: 0 0 1.25em;
}

.noticia-content__text p:last-child {
    margin-bottom: 0;
}


/* ══════════════════════════════════════════════
   OTRAS PUBLICACIONES (RC-35)
   Figma: bg Rectangle 9214 | título 90:675 | cards 91:365–91:375
   Fondo: #DAF3F0 | padding-inline: 180px (alineado a x=180 en Figma)
   Título: 36px ExtraBold + Light | Divider: #00365F 200×6px
══════════════════════════════════════════════ */

.noticia-related {
    background-color: #DAF3F0;
    padding-block: 86px 105px;
    margin-top: 120px;
}

.noticia-related__inner {
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: 180px;
}

/* ── Encabezado ── */
.noticia-related__header {
    margin-bottom: 62px;
}

.noticia-related__title {
    font-family: 'Roboto', sans-serif;
    font-size: 36px;
    font-weight: 300;      /* Light → "publicaciones" */
    color: #004E5A;
    line-height: 1.17;
    margin: 0 0 12px;
}

.noticia-related__title strong {
    font-weight: 800;      /* ExtraBold → "Otras" */
}

.noticia-related__divider {
    width: 200px;
    height: 6px;
    background-color: #00365F;
    border: none;
    margin: 0;
}

/* ── Grid 2 columnas ── */
.noticia-related__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

/* Cards dentro del related: fondo blanco (Figma Blog 1 = bg-white) */
.noticia-related__grid .noticia-card {
    background-color: #FFFFFF;
}


/* ══════════════════════════════════════════════
   RESPONSIVE
   Breakpoints: 1500 → 1300 → 1024 → 768 → 480
══════════════════════════════════════════════ */

/* ── ≤ 1500px ── imagen + body empiezan a ceder */
@media ( max-width: 1500px ) {
    /* Content — evitar overflow (679+60+560=1299px desborda a partir de ~1500px) */
    .noticia-content__thumbnail {
        flex: 0 0 520px;
        width: 520px;
        height: 520px;
    }

    .noticia-content__body {
        flex: 1;
        width: auto;
    }
}

/* ── ≤ 1300px ── */
@media ( max-width: 1300px ) {
    /* Hero */
    .noticia-hero__inner {
        padding-inline: 40px;
    }

    .noticia-hero__banner {
        padding-inline: 40px;
    }

    /* Content */
    .noticia-content__inner {
        padding-inline: 40px;
        gap: 48px;
    }

    .noticia-content__thumbnail {
        flex: 0 0 440px;
        width: 440px;
        height: 460px;
    }

    /* Otras publicaciones */
    .noticia-related__inner {
        padding-inline: 80px;
    }
}

/* ── ≤ 1024px — tablets ── */
@media ( max-width: 1024px ) {
    /* Hero */
    .noticia-hero__inner {
        padding-inline: 32px;
    }

    .noticia-hero__banner {
        height: 260px;
        padding-inline: 32px;
    }

    .noticia-hero__title {
        font-size: 28px;
    }

    /* Content */
    .noticia-content__inner {
        padding-inline: 32px;
        gap: 36px;
    }

    .noticia-content__thumbnail {
        flex: 0 0 320px;
        width: 320px;
        height: 360px;
    }

    .noticia-content__title {
        font-size: 22px;
    }

    .noticia-content__text {
        font-size: 17px;
    }

    /* Otras publicaciones */
    .noticia-related {
        margin-top: 80px;
    }

    .noticia-related__inner {
        padding-inline: 40px;
    }

    .noticia-related__title {
        font-size: 30px;
    }
}

/* ── ≤ 768px — mobile: columna única ── */
@media ( max-width: 768px ) {
    /* Hero */
    .noticia-hero__inner {
        padding-inline: 20px;
    }

    .noticia-hero__banner {
        height: auto;
        min-height: 220px;
        padding: 24px;
        border-radius: 14px;
        gap: 32px;
    }

    .noticia-hero__overlay {
        border-radius: 14px;
    }

    .noticia-hero__title {
        font-size: 24px;
    }

    .noticia-hero__back-btn {
        font-size: 14px;
        letter-spacing: 1.5px;
    }

    /* Content */
    .noticia-content {
        margin-top: 32px;
    }

    .noticia-content__inner {
        padding-inline: 20px;
        flex-direction: column;
        gap: 20px;
    }

    .noticia-content__thumbnail {
        flex: none;
        width: 100%;
        height: 260px;
    }

    .noticia-content__body {
        flex: none;
        width: 100%;
    }

    .noticia-content__title {
        font-size: 22px;
    }

    .noticia-content__text {
        font-size: 16px;
    }

    /* Otras publicaciones — 1 columna */
    .noticia-related {
        padding-block: 56px 72px;
        margin-top: 64px;
    }

    .noticia-related__inner {
        padding-inline: 20px;
    }

    .noticia-related__header {
        margin-bottom: 40px;
    }

    .noticia-related__title {
        font-size: 28px;
    }

    .noticia-related__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ── ≤ 480px ── */
@media ( max-width: 480px ) {
    /* Hero */
    .noticia-hero__inner {
        padding-inline: 16px;
    }

    .noticia-hero__banner {
        min-height: 200px;
        padding: 20px;
        border-radius: 12px;
    }

    .noticia-hero__overlay {
        border-radius: 12px;
    }

    .noticia-hero__title {
        font-size: 22px;
    }

    /* Content */
    .noticia-content__inner {
        padding-inline: 16px;
    }

    .noticia-content__thumbnail {
        height: 220px;
    }

    .noticia-content__title {
        font-size: 20px;
    }

    /* Otras publicaciones */
    .noticia-related__inner {
        padding-inline: 16px;
    }

    .noticia-related__title {
        font-size: 26px;
    }
}