/* Build 0195 Completion Fix 7 — News article hero ratio preservation.
 * Wide-screen News article heroes reserve enough width for the right-side
 * editorial artwork to stay at its intended 16:9 ratio instead of stretching
 * vertically to match an oversized copy column. The headline is tightened so
 * typical article metadata/actions fit inside the same hero height. At smaller
 * desktop/tablet widths the hero stacks earlier, preserving the artwork ratio
 * rather than forcing a narrow, distorted side panel. */

@media (min-width: 1181px) {
    .tg-news-article-page .tg-modern-hero--article-cover .tg-modern-hero-grid {
        grid-template-columns: minmax(0, 1fr) clamp(460px, 38vw, 560px);
        min-height: 0;
        align-items: stretch;
    }

    .tg-news-article-page .tg-modern-hero--article-cover .tg-modern-hero-copy {
        padding-top: 1.1rem;
        padding-right: clamp(1.5rem, 2.8vw, 3rem);
        padding-bottom: 1.1rem;
    }

    .tg-news-article-page .tg-modern-hero--article-cover .tg-modern-hero-copy h1 {
        max-width: 760px;
        margin-top: .52rem;
        margin-bottom: .72rem;
        font-size: clamp(1.95rem, 2.35vw, 2.55rem);
        line-height: 1.01;
        letter-spacing: -.04em;
    }

    .tg-news-article-page .tg-modern-hero--article-cover .tg-modern-hero-identity {
        min-height: 0 !important;
        aspect-ratio: 16 / 9;
        align-self: stretch;
    }

    .tg-news-article-page .tg-modern-hero--article-cover .tg-news-article-hero-cover-image {
        object-fit: contain !important;
        object-position: center center !important;
    }
}

/* Switch to the stacked hero before the side artwork becomes too narrow to
 * retain a useful 16:9 editorial presentation. */
@media (max-width: 1180px) {
    .tg-news-article-page .tg-modern-hero--article-cover .tg-modern-hero-grid {
        grid-template-columns: 1fr;
    }

    .tg-news-article-page .tg-modern-hero--article-cover .tg-modern-hero-copy {
        padding-right: var(--tg-hero-edge-gutter);
    }

    .tg-news-article-page .tg-modern-hero--article-cover .tg-modern-hero-identity {
        min-height: 0 !important;
        aspect-ratio: 16 / 9;
        border-top: 1px solid rgba(220, 235, 248, .2);
        border-left: 0;
    }

    .tg-news-article-page .tg-modern-hero--article-cover .tg-news-article-hero-cover-image {
        object-fit: contain !important;
        object-position: center center !important;
    }
}

@media (max-width: 620px) {
    .tg-news-article-page .tg-modern-hero--article-cover .tg-modern-hero-copy h1 {
        font-size: clamp(1.75rem, 7.8vw, 2.25rem);
        line-height: 1.03;
    }
}