/* Actualites: one strong in-game capture establishes the page without turning
   the hero into a collage or article cards into misleading generic covers. */
.news-page {
    --news-hero-height: clamp(340px, 39vw, 470px);
}

.news-world-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: var(--news-hero-height);
    align-items: end;
    overflow: hidden;
    margin-bottom: clamp(26px, 4vw, 42px);
    background: var(--surface-2);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-card);
    box-shadow: var(--mb-shadow-lg);
}

.news-world-visuals {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background: var(--surface-2);
}

.news-world-shot {
    display: block;
    min-width: 0;
    overflow: hidden;
}

.news-world-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-world-shot.is-primary img { object-position: 52% 48%; }

.news-world-hero::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(18, 9, 4, .08) 22%, rgba(18, 9, 4, .82) 100%),
        linear-gradient(90deg, rgba(18, 9, 4, .34), transparent 58%);
    content: "";
}

.news-world-hero::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    height: 3px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--coco-gold-400) 28% 76%, transparent);
    content: "";
}

.news-world-copy {
    position: relative;
    z-index: 3;
    display: grid;
    max-width: 44rem;
    gap: 8px;
    padding: clamp(26px, 5vw, 54px);
}

.news-world-copy .mb-h1 {
    margin: 0;
    text-align: left;
}

.news-world-copy .coco-page-intro {
    max-width: 38rem;
    margin: 0;
    color: var(--coco-stone-100);
    font-size: clamp(14px, 1.4vw, 16px);
    text-shadow: 1px 1px 0 rgba(18, 9, 4, .72);
}

.news-card {
    min-width: 0;
    border-top-color: color-mix(in srgb, var(--coco-gold-300) 24%, var(--surface-border));
}

.news-card .coco-card-cover,
.news-card .coco-frame {
    margin: -5px -5px 2px;
}

@media (max-width: 639px) {
    .news-page { --news-hero-height: 320px; }
    .news-world-hero { border-radius: 10px; }
    .news-world-shot.is-primary img { object-position: 58% 50%; }
    .news-world-copy { padding: 24px 20px; }
}

@media (forced-colors: active) {
    .news-world-visuals { display: none; }
    .news-world-hero { background: Canvas; }
    .news-world-hero::before,
    .news-world-hero::after { display: none; }
}