/* ============================================================
 * HYBRID RECONCILE CSS - newsp-hybrid v2.1.0
 * Policy: layout > features > legacy
 * Load LAST in default.hbs
 * ============================================================ */

/* 1. CONTAINER WIDTHS - authority + 1580px max-width cap */
.wide-container{
    padding-left:42px;
    padding-right:42px;
    box-sizing:border-box;
    max-width:1580px;
    margin-left:auto;
    margin-right:auto;
    width:100%;
}
.narrow-container{
    padding-left:42px;
    padding-right:42px;
    box-sizing:border-box;
    max-width:1580px;
    margin-left:auto;
    margin-right:auto;
    width:100%;
}
@media(min-width:1439px){.wide-container,.narrow-container{padding-left:2.92vw;padding-right:2.92vw}}
@media(max-width:991px){.wide-container,.narrow-container{padding-left:5%;padding-right:5%}}
@media(max-width:479px){.wide-container,.narrow-container{padding-left:4%;padding-right:4%}}

/* 2. HOMEPAGE COLUMN GRID - 1fr 2fr 1fr + 1580px cap */
.column-layout-grid{
    display:grid;
    grid-template-columns:1fr 2fr 1fr;
    gap:42px;
    padding-left:42px;
    padding-right:42px;
    box-sizing:border-box;
    align-items:start;
    max-width:1580px;
    margin-left:auto;
    margin-right:auto;
    width:100%;
}
@media(min-width:1439px){.column-layout-grid{gap:calc(2.92vw * var(--scale,1));padding-left:2.92vw;padding-right:2.92vw}}
@media(max-width:991px){.column-layout-grid{grid-template-columns:1fr;gap:0;padding-left:0;padding-right:0}}

/* 3. ARTICLE TWO-COLUMN LAYOUT - article + featured sidebar + 1580px cap */
@media(min-width:992px){
    .post-content-and-sidebar{
        display:grid!important;
        grid-template-columns:minmax(0,1.85fr) minmax(280px,0.75fr);
        grid-template-areas:"article sidebar-featured";
        gap:0 36px;
        align-items:start;
        padding-left:42px;
        padding-right:42px;
        max-width:1580px;
        margin-left:auto;
        margin-right:auto;
        width:100%;
        box-sizing:border-box;
    }
    .post-content-outer{grid-area:article;min-width:0}
    .post-sidebar{grid-area:sidebar-featured;min-width:0}
}
@media(max-width:991px){
    .post-content-and-sidebar{display:flex!important;flex-direction:column;padding-left:0;padding-right:0}
    .post-sidebar{width:100%}
}

/* 4. CARD IMAGE HEIGHTS - vw-based */
.small-card .card-image-wrapper{height:auto!important}
.big-card .card-image-wrapper{height:auto!important}
.extra-small-card .card-image-wrapper,.extra-small-side-card .card-image-wrapper{height:auto!important}
.horizontal-card .card-image-wrapper{height:auto!important}
@media(max-width:991px){
    .small-card .card-image-wrapper{height:auto!important}
    .big-card .card-image-wrapper{height:auto!important}
    .extra-small-card .card-image-wrapper,.extra-small-side-card .card-image-wrapper{height:auto!important}
    .horizontal-card .card-image-wrapper{height:auto!important}
}
@media(max-width:600px){
    .small-card .card-image-wrapper{height:auto!important}
    .big-card .card-image-wrapper{height:auto!important}
}
@media(max-width:479px){
    .small-card .card-image-wrapper,.extra-small-card .card-image-wrapper,.extra-small-side-card .card-image-wrapper{height:auto!important}
    .big-card .card-image-wrapper{height:auto!important}
    .horizontal-card .card-image-wrapper{height:auto!important}
}

/* 5. HOMEPAGE CARD TEXT ZONE - min-height not fixed */
.column-layout-grid .text-min-height{min-height:115px;height:auto!important}
@media(min-width:1239px){.column-layout-grid .text-min-height{min-height:calc(8vw * var(--scale,1))}}

/* 6. FIXED-CARDS - prevent homepage bleed */
.column-layout-grid .small-card,.column-layout-grid .big-card,
.column-layout-grid .horizontal-card,.column-layout-grid .extra-small-card{height:auto!important}

/* 7. TYPOGRAPHY - mobile readability floor */
@media(max-width:479px){body,html{font-size:16px;line-height:158%}}

/* 8. BLOCKQUOTE - remove plain border so v1 gradient wins */
blockquote{border-left:none!important}

/* 9. IMAGE HOVER - remove ::after overlay so v1 gray darken wins */
.hover-image-opacity::after{display:none!important}
.hover-image-opacity img{transition:filter 0.35s ease}
.hover-image-opacity:hover img{filter:brightness(0.85) saturate(0.9)}

/* 10. DARK MODE - border softening */
html[data-theme="dark"] .small-card,html[data-theme="dark"] .big-card,
html[data-theme="dark"] .horizontal-card,html[data-theme="dark"] .extra-small-card,
html[data-theme="dark"] .extra-small-side-card{border-color:var(--border,rgba(255,255,255,0.08))}
html[data-theme="dark"] .section-heading{border-color:var(--border,rgba(255,255,255,0.15))}

/* 11. LIGHT MODE - warm off-white */
html[data-theme="light"]{--background-color:#f4f2ee;--secondary-background-color:#eceae6}

/* 12. THEME TOGGLE - alignment */
.navbar-account-links .theme-toggle-wrapper{display:flex;align-items:center;margin-left:8px}

/* 13. WEATHER + WORLD CLOCK - no double borders */
.wx-navbar-bar{border-bottom:1px solid var(--border,rgba(128,128,128,0.2))}
.wx-navbar-bar + .world-clock-bar{border-top:none}

/* 14. SATIRE PAGE - two-column grid */
.satire-body .satire-articles-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
@media(max-width:991px){.satire-body .satire-articles-grid{grid-template-columns:1fr}}

/* 15. LOGO - scale var + scroll animation */
.logo-wrapper .navbar-logo-image,.logo-wrapper .navbar-logo-text{transform:scale(var(--logo-scale,1));transform-origin:center}

/* 16. POST-TAG-LIST - spacing */
.post-tag-list{margin-bottom:8px}
.post-tag + .post-tag-list,.post-tag-list + .post-heading{margin-top:4px}

/* 17. ACCESSIBILITY PANEL - z-index */
#a11y-fab{z-index:10001}
#a11y-panel{z-index:10000}

/* 18. NAVBAR + FOOTER - also cap at 1580px for visual consistency */
.navbar-inner,.navbar-top-inner,.footer-inner{
    max-width:1580px;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    box-sizing:border-box;
}


/* 19. READABILITY REFRACTOR - larger base type and clearer headings */
html,body{
    font-size:20.7px;
    line-height:1.68;
}
body{
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
p,li,td,th,input,select,textarea,button{
    font-size:1.035rem;
}
h1,h2,h3,h4,h5,h6{
    letter-spacing:-0.025em;
}
h1{font-size:clamp(3.35rem,5.2vw,5.8rem);line-height:1.02}
.h1,.post-heading{font-size:clamp(3.35rem,5.2vw,5.8rem);line-height:1.02}
h2{font-size:clamp(2.4rem,3.4vw,3.7rem);line-height:1.08}
h3{font-size:clamp(1.95rem,2.5vw,2.8rem);line-height:1.12}
h4{font-size:clamp(1.6rem,2vw,2.15rem);line-height:1.16}
h5{font-size:clamp(1.32rem,1.6vw,1.72rem);line-height:1.2}
h6{font-size:clamp(1.14rem,1.3vw,1.4rem);line-height:1.24}
.section-heading-title,
.text-card-heading,
.small-card-heading,
.big-card-heading,
.horizontal-card-heading,
.extra-small-card-heading,
.extra-small-side-card-heading{
    letter-spacing:-0.03em;
}
@media(max-width:991px){
    html,body{font-size:19px;line-height:1.64}
}
@media(max-width:479px){
    html,body{font-size:18px;line-height:1.6}
}

/* 20. BLOCKQUOTE - indent controlled by blockquote.css (1.6em !important) */
blockquote{
    position:relative;
    padding-top:1.1em !important;
    border-radius:6px;
}
blockquote::after{
    content:'\201C' !important;
    left:0 !important;
    right:auto !important;
    top:-.02em !important;
    font-size:3.8em !important;
    color:color-mix(in srgb,var(--brand-g1) 22%,transparent) !important;
}
html[data-theme="light"] blockquote::after{
    color:color-mix(in srgb,var(--brand-g1) 16%,transparent) !important;
}
@media(max-width:479px){
    blockquote{padding-top:.9em !important}
    blockquote::after{left:0 !important;top:.02em !important;font-size:3em !important}
}

/* 21. TAGS PAGE - simplified default-style editorial archive */
.tags-page--simplified-home .section-kicker{
    display:inline-block;
    margin-bottom:10px;
    font-size:.78rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    opacity:.7;
}
.tags-page-chip-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}
.tags-page-chip{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-height:138px;
    padding:20px 22px;
    border:1px solid color-mix(in srgb,var(--text-color) 18%,transparent);
    background:color-mix(in srgb,var(--background-color) 92%,var(--text-color) 8%);
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.tags-page-chip:hover{
    transform:translateY(-2px);
    border-color:transparent;
    box-shadow:inset 0 0 0 1px transparent,0 12px 22px color-mix(in srgb,var(--text-color) 8%,transparent);
    background-image:linear-gradient(var(--background-color),var(--background-color)),var(--brand-gradient,linear-gradient(45deg,#F545A2 0%,#CF2E84 45%,#9B4DB8 72%,#5E9DBA 91%));
    background-origin:border-box;
    background-clip:padding-box,border-box;
}
.tags-page-chip-name{
    font-family:var(--font2);
    font-size:1.5rem;
    line-height:1.08;
}
.tags-page-chip-count{
    font-size:.92rem;
    opacity:.72;
}
.tags-page-card{
    min-height:100%;
}
.tags-page-card .small-card-link{
    display:block;
    height:100%;
}
.tags-page-card .small-card-content{
    min-height:220px;
    padding:24px 22px;
}
.tags-page-card-heading{
    font-size:1.7rem;
    line-height:1.1;
    margin-top:6px;
    margin-bottom:12px;
}
.tags-page-card .small-card-paragraph{
    font-size:1rem;
    line-height:1.58;
    opacity:.8;
}
@media(max-width:991px){
    .tags-page-chip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:479px){
    .tags-page-chip-grid{grid-template-columns:1fr}
    .tags-page-card .small-card-content{min-height:unset;padding:20px 18px}
}