.wu-news-detail {
    --wu-detail-accent: var(--color-principal, currentColor);
    --wu-detail-surface: var(--color-fondo, #fff);
    --wu-detail-border: color-mix(in srgb, currentColor 16%, transparent);
    --wu-detail-muted: color-mix(in srgb, currentColor 68%, transparent);
    container-type: inline-size;
    inline-size: 100%;
    margin-block: clamp(1.5rem, 4vw, 4rem);
}

.wu-news-detail__article {
    inline-size: 100%;
    margin-inline: auto;
}

.wu-news-detail__header {
    display: grid;
    gap: clamp(.75rem, 2cqi, 1.35rem);
    margin-block-end: clamp(1.5rem, 4cqi, 3.5rem);
}

.wu-news-detail__date,
.wu-news-detail__reading {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--wu-detail-muted);
    font-size: .82em;
    letter-spacing: .06em;
    line-height: 1.3;
    text-transform: uppercase;
}

.wu-news-detail__reading .bi { font-size: 1rem; }

.wu-news-detail__title {
    max-inline-size: 22ch;
    margin: 0;
    font-size: clamp(2rem, 7cqi, 5.6rem);
    font-weight: 650;
    line-height: .98;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.wu-news-detail__description {
    max-inline-size: 66ch;
    font-size: clamp(1.05rem, 2.1cqi, 1.4rem);
    line-height: 1.65;
    opacity: .86;
    text-wrap: pretty;
}

.wu-news-detail__description:empty { display: none; }

.wu-news-detail__media {
    position: relative;
    overflow: hidden;
    border-radius: clamp(.45rem, 1.5cqi, 1.2rem);
    background: color-mix(in srgb, currentColor 5%, transparent);
}

.wu-news-detail__image {
    display: block;
    inline-size: 100%;
    block-size: auto;
    max-inline-size: 100%;
    object-fit: cover;
}

.wu-news-detail__body {
    max-inline-size: 76ch;
    margin: clamp(2rem, 5cqi, 4.5rem) auto 0;
    font-size: clamp(1rem, 1.55cqi, 1.16rem);
    line-height: 1.82;
    overflow-wrap: anywhere;
}

.wu-news-detail__body > :first-child { margin-block-start: 0; }
.wu-news-detail__body > :last-child { margin-block-end: 0; }
.wu-news-detail__body p { margin-block: 0 1.4em; }
.wu-news-detail__body h1,
.wu-news-detail__body h2,
.wu-news-detail__body h3,
.wu-news-detail__body h4,
.wu-news-detail__body h5,
.wu-news-detail__body h6 {
    margin-block: 1.8em .65em;
    color: inherit;
    font-family: inherit;
    line-height: 1.2;
    text-wrap: balance;
}
.wu-news-detail__body ul,
.wu-news-detail__body ol { padding-inline-start: 1.35em; margin-block-end: 1.4em; }
.wu-news-detail__body blockquote {
    margin-block: 2em;
    padding: .3em 0 .3em 1.25em;
    border-inline-start: .2rem solid var(--wu-detail-accent);
    font-size: 1.15em;
}
.wu-news-detail__body a { color: var(--wu-detail-accent); text-underline-offset: .18em; }
.wu-news-detail__body img,
.wu-news-detail__body video,
.wu-news-detail__body iframe,
.wu-news-detail__body figure { max-inline-size: 100%; }
.wu-news-detail__body img,
.wu-news-detail__body video { block-size: auto; }
.wu-news-detail__body iframe { inline-size: 100%; border: 0; }
.wu-news-detail__body figure { margin: 2em auto; }
.wu-news-detail__body figcaption { margin-block-start: .65em; color: var(--wu-detail-muted); font-size: .86em; }
.wu-news-detail__body table { display: block; max-inline-size: 100%; overflow-x: auto; border-collapse: collapse; }
.wu-news-detail__body th,
.wu-news-detail__body td { padding: .65rem .8rem; border: 1px solid var(--wu-detail-border); }

.wu-news-detail[data-wu-ready="true"] [data-wu-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .65s ease var(--wu-reveal-delay, 0ms), transform .65s cubic-bezier(.2,.75,.3,1) var(--wu-reveal-delay, 0ms);
}
.wu-news-detail[data-wu-ready="true"] [data-wu-reveal].is-visible { opacity: 1; transform: none; }

@container (max-width: 600px) {
    .wu-news-detail__title { font-size: clamp(2rem, 11cqi, 3.4rem); }
    .wu-news-detail__body { line-height: 1.72; }
}

@media (prefers-reduced-motion: reduce) {
    .wu-news-detail [data-wu-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
