/*
==============================================================================
SavvyGreat Material 3 home refinement v2
Copyright (c) 2026 SavvyGreat. All rights reserved.

Aligns the home breaking rail and featured carousel with the SavvyGreat M3
National News experience while keeping the home layout lightweight.
==============================================================================
*/

/* Match the National News v7 breaking rail. */
.sghome-m3-breaking {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    min-height: 52px;
    padding: 4px;
    overflow: hidden;
    border: 1px solid var(--md-sys-color-error, #b3261e);
    border-radius: 26px;
    background: var(--md-sys-color-error-container, #f9dedc);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow, #000) 12%, transparent);
}

.sghome-m3-breaking-label {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 21px;
    background: var(--md-sys-color-error, #b3261e);
    color: var(--md-sys-color-on-error, #fff);
    font: 700 12px/16px var(--m3-font-plain, "Segoe UI", sans-serif);
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 2px 0 8px color-mix(in srgb, var(--md-sys-color-shadow, #000) 12%, transparent);
}

.sghome-m3-breaking-label .material-symbols-rounded {
    font-size: 19px;
    font-variation-settings: "FILL" 1, "wght" 650, "GRAD" 0, "opsz" 20;
}

.sghome-m3-breaking-window {
    min-width: 0;
    overflow: hidden;
    border-radius: 0 21px 21px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 97%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 97%, transparent);
}

.sghome-m3-breaking-track {
    animation-duration: var(--sghome-marquee-duration, 32s) !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
}

.sghome-m3-breaking-group a {
    min-height: 44px;
    color: var(--md-sys-color-on-error-container, #410e0b);
    font: 650 14px/20px var(--m3-font-plain, "Segoe UI", sans-serif);
    text-shadow: none;
}

.sghome-m3-breaking-group a::after {
    background: var(--md-sys-color-error, #b3261e);
    opacity: .65;
}

.sghome-m3-breaking-group a:hover,
.sghome-m3-breaking-group a:focus-visible {
    background: color-mix(in srgb, var(--md-sys-color-error, #b3261e) 10%, transparent);
}

/* Reduce the home hero headline while retaining its hierarchy. */
.sghome-m3-hero h1#sghomeM3Title {
    max-width: 19ch;
    font-size: clamp(34px, 4vw, 58px);
    font-weight: 650;
    letter-spacing: -.035em;
    line-height: 1.04;
}

/* Match the National News focused carousel title treatment. */
.sghome-m3-carousel-content {
    gap: 10px;
    max-width: min(78%, 650px);
    padding: clamp(20px, 3vw, 34px);
}

.sghome-m3-carousel-content h3 {
    display: -webkit-box;
    max-width: 30ch;
    margin: 0;
    overflow: hidden;
    color: #fff;
    font: 600 clamp(23px, 2.55vw, 36px)/1.12 var(--m3-font-brand, "Segoe UI", sans-serif);
    letter-spacing: -.022em;
    text-wrap: balance;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .62);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Defensive rule for stale server/browser markup; v2 Razor no longer emits it. */
.sghome-m3-carousel-content > p {
    display: none !important;
}

.sghome-m3-carousel-meta {
    font-size: 12px;
}

@media (max-width: 839px) {
    .sghome-m3-hero h1#sghomeM3Title {
        font-size: clamp(32px, 7vw, 48px);
    }
}

@media (max-width: 599px) {
    .sghome-m3-breaking {
        grid-template-columns: 48px minmax(0, 1fr);
        min-height: 48px;
        padding: 3px;
        border-radius: 23px;
    }

    .sghome-m3-breaking-label {
        justify-content: center;
        width: 42px;
        min-height: 42px;
        padding: 0;
        border-radius: 20px;
    }

    .sghome-m3-breaking-label span:last-child {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .sghome-m3-breaking-group a {
        min-height: 42px;
        font-size: 13px;
    }

    .sghome-m3-hero h1#sghomeM3Title {
        max-width: 20ch;
        font-size: clamp(30px, 9vw, 42px);
        line-height: 1.06;
    }

    .sghome-m3-carousel-content h3 {
        max-width: 25ch;
        font-size: clamp(21px, 6.8vw, 29px);
        line-height: 1.14;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sghome-m3-breaking-track {
        animation-duration: var(--sghome-marquee-reduced-duration, 68s) !important;
    }
}