/*
==============================================================================
SavvyGreat Material 3 news category context refinement
Copyright (c) 2026 SavvyGreat. All rights reserved.
==============================================================================
*/

/*
   The canonical context bar is positioned outside normal main-content flow.
   The nested layout measures its real height before the hero is parsed and
   writes --sgcat-context-offset / an inline padding-top. The fallback below
   prevents overlap when scripts are blocked while keeping the requested gap.
*/
body[data-sgcv-controller="News"][data-sgcv-action="NationalNewsCategory"] .sgcv-m3-main,
body[data-sgcv-controller="News"][data-sgcv-action="InterNationalNewsCategory"] .sgcv-m3-main {
    position: relative;
    top: auto !important;
    margin-top: 0 !important;
    padding-top: var(--sgcat-context-offset, clamp(104px, 7.6vw, 138px)) !important;
    transform: none !important;
}

body[data-sgcv-controller="News"][data-sgcv-action="NationalNewsCategory"] .sgcv-m3-page,
body[data-sgcv-controller="News"][data-sgcv-action="InterNationalNewsCategory"] .sgcv-m3-page {
    position: relative;
    top: auto !important;
    padding-top: 0 !important;
    transform: none !important;
}

body[data-sgcv-controller="News"][data-sgcv-action="NationalNewsCategory"] .sgcat-m3,
body[data-sgcv-controller="News"][data-sgcv-action="InterNationalNewsCategory"] .sgcat-m3 {
    position: relative;
    inset: auto !important;
    top: auto !important;
    margin: 0 auto !important;
    transform: none !important;
    --sgcat-context-gap: 0px !important;
}

body[data-sgcv-controller="News"][data-sgcv-action="NationalNewsCategory"] .sgcat-m3-hero,
body[data-sgcv-controller="News"][data-sgcv-action="InterNationalNewsCategory"] .sgcat-m3-hero {
    position: relative;
    inset: auto !important;
    top: auto !important;
    z-index: 1;
    min-height: clamp(190px, 18vw, 280px);
    margin: 0 !important;
    padding-block: clamp(16px, 2.1vw, 28px);
    transform: none !important;
}

.sgcat-m3-hero-copy {
    align-self: center;
    margin: 0;
    padding: 0;
}

.sgcat-m3-hero h1 {
    margin-top: 7px;
    margin-bottom: 9px;
}

.sgcat-m3-hero-actions {
    margin-top: 15px;
}

/*
   Some browsers defer cards that use content-visibility:auto until the first
   scroll. Paint the selected view immediately; image hydration remains lazy.
*/
.sgcat-m3-story-card {
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
}

.sgcat-m3-story-grid,
.sgcat-m3-story-grid.is-list-view {
    visibility: visible;
    opacity: 1;
}

.sgcat-m3-story-tags span.is-empty {
    display: none;
}

@media (max-width: 839px) {
    body[data-sgcv-controller="News"][data-sgcv-action="NationalNewsCategory"] .sgcv-m3-main,
    body[data-sgcv-controller="News"][data-sgcv-action="InterNationalNewsCategory"] .sgcv-m3-main {
        padding-top: var(--sgcat-context-offset, 108px) !important;
    }

    body[data-sgcv-controller="News"][data-sgcv-action="NationalNewsCategory"] .sgcv-m3-page,
    body[data-sgcv-controller="News"][data-sgcv-action="InterNationalNewsCategory"] .sgcv-m3-page {
        padding-top: 0 !important;
    }

    body[data-sgcv-controller="News"][data-sgcv-action="NationalNewsCategory"] .sgcat-m3-hero,
    body[data-sgcv-controller="News"][data-sgcv-action="InterNationalNewsCategory"] .sgcat-m3-hero {
        min-height: 0;
        padding-block: 18px;
    }
}

@media (max-width: 599px) {
    body[data-sgcv-controller="News"][data-sgcv-action="NationalNewsCategory"] .sgcv-m3-main,
    body[data-sgcv-controller="News"][data-sgcv-action="InterNationalNewsCategory"] .sgcv-m3-main {
        padding-top: var(--sgcat-context-offset, 96px) !important;
    }

    body[data-sgcv-controller="News"][data-sgcv-action="NationalNewsCategory"] .sgcat-m3-hero,
    body[data-sgcv-controller="News"][data-sgcv-action="InterNationalNewsCategory"] .sgcat-m3-hero {
        padding-block: 16px;
    }
}
