/*
==============================================================================
SavvyGreat Material 3 News Details editorial refinement
Copyright (c) 2026 SavvyGreat. All rights reserved.

Applies to every CommonVisitors News Details story. It preserves the existing
page position while improving headline scale, media shape, reading measure,
paragraph rhythm, and adaptive supporting-pane composition.
==============================================================================
*/

/* Compact editorial header without changing its document position. */
.sgnews-detail-m3-header {
    gap: 12px;
    padding: clamp(18px, 2.5vw, 34px);
    border-radius: 32px 32px 32px 12px;
}

.sgnews-detail-m3-tags,
.sgnews-detail-m3-meta {
    gap: 6px;
}

.sgnews-detail-m3-tag {
    min-height: 36px;
    padding-inline: 12px;
    border-radius: 18px;
}

.sgnews-detail-m3-header h1 {
    max-width: 29ch;
    margin: 0;
    font: 600 clamp(28px, 3.35vw, 48px) / 1.1 var(--m3-font-brand, "Google Sans", "Segoe UI", sans-serif);
    letter-spacing: -.026em;
    text-wrap: balance;
}

.sgnews-detail-m3-meta {
    font-size: 13px;
    line-height: 18px;
}

.sgnews-detail-m3-meta > span {
    min-height: 36px;
    padding-inline: 11px;
    border-radius: 18px;
}

/* Preserve the list-detail location while giving the media a clean M3 shape. */
.sgnews-detail-m3-layout {
    gap: clamp(18px, 2.5vw, 32px);
    margin-top: clamp(18px, 2.8vw, 32px);
}

.sgnews-detail-m3-article {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.sgnews-detail-m3-media {
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 32px;
    background: linear-gradient(
        135deg,
        var(--md-sys-color-secondary-container, #e8def8),
        var(--md-sys-color-primary-container, #eaddff)
    );
    box-shadow:
        0 2px 6px color-mix(in srgb, var(--md-sys-color-shadow, #000) 14%, transparent),
        0 10px 28px color-mix(in srgb, var(--md-sys-color-shadow, #000) 12%, transparent);
}

.sgnews-detail-m3-media img {
    border: 0;
    border-radius: inherit;
}

/* Editorial reading surface: bounded measure, left alignment, and clear rhythm. */
.sgnews-detail-m3-body {
    max-width: none;
    margin-top: 16px;
    padding: clamp(24px, 3.8vw, 48px);
    border: 0;
    border-radius: 30px;
    background: var(--md-sys-color-surface, #fffbfe);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--md-sys-color-shadow, #000) 10%, transparent);
}

.sgnews-detail-m3-body-inner {
    width: min(100%, 76ch);
    margin-inline: auto;
}

.sgnews-detail-m3-body p {
    margin: 0;
    color: var(--md-sys-color-on-surface, #1d1b20);
    font: 400 clamp(16.5px, 1.05vw, 18px) / 1.78 var(--m3-font-plain, "Google Sans Text", "Segoe UI", sans-serif);
    letter-spacing: .002em;
    text-align: left;
    text-wrap: pretty;
    overflow-wrap: anywhere;
    hyphens: auto;
    orphans: 3;
    widows: 3;
}

.sgnews-detail-m3-body p + p {
    margin-top: 1.35em;
}

.sgnews-detail-m3-body p.sgnews-detail-m3-lead {
    color: var(--md-sys-color-on-surface, #1d1b20);
    font-size: clamp(18px, 1.25vw, 20px);
    font-weight: 450;
    line-height: 1.68;
    letter-spacing: -.004em;
}

.sgnews-detail-m3-body h2 {
    max-width: 30ch;
    margin: 1.75em 0 .65em;
    color: var(--md-sys-color-on-surface, #1d1b20);
    font: 600 clamp(23px, 2.15vw, 32px) / 1.2 var(--m3-font-brand, "Google Sans", "Segoe UI", sans-serif);
    letter-spacing: -.022em;
    text-wrap: balance;
}

.sgnews-detail-m3-body h2:first-child {
    margin-top: 0;
}

.sgnews-detail-m3-body h2 + p {
    margin-top: 0;
}

.sgnews-detail-m3-body a {
    color: var(--md-sys-color-primary, #6750a4);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.sgnews-detail-m3-body blockquote {
    margin: 1.6em 0;
    padding: 18px 20px;
    border-inline-start: 4px solid var(--md-sys-color-primary, #6750a4);
    border-radius: 0 20px 20px 0;
    background: var(--md-sys-color-primary-container, #eaddff);
    color: var(--md-sys-color-on-primary-container, #21005d);
}

.sgnews-detail-m3-body ul,
.sgnews-detail-m3-body ol {
    display: grid;
    gap: .65em;
    margin: 1.35em 0;
    padding-inline-start: 1.4em;
    color: var(--md-sys-color-on-surface, #1d1b20);
    font: 400 clamp(16.5px, 1.05vw, 18px) / 1.7 var(--m3-font-plain, "Google Sans Text", "Segoe UI", sans-serif);
}

@media (max-width: 839px) {
    .sgnews-detail-m3-header {
        gap: 10px;
        padding: 20px;
        border-radius: 28px 28px 28px 10px;
    }

    .sgnews-detail-m3-header h1 {
        max-width: 32ch;
        font-size: clamp(27px, 6vw, 40px);
        line-height: 1.12;
    }

    .sgnews-detail-m3-layout {
        margin-top: 18px;
    }

    .sgnews-detail-m3-media {
        border-radius: 28px;
    }

    .sgnews-detail-m3-body {
        margin-top: 12px;
        padding: clamp(22px, 5vw, 34px);
        border-radius: 26px;
    }
}

@media (max-width: 599px) {
    .sgnews-detail-m3-header {
        padding: 17px;
        border-radius: 25px 25px 25px 9px;
    }

    .sgnews-detail-m3-header h1 {
        font-size: clamp(25px, 8.2vw, 34px);
        letter-spacing: -.02em;
    }

    .sgnews-detail-m3-tag,
    .sgnews-detail-m3-meta > span {
        min-height: 34px;
    }

    .sgnews-detail-m3-media {
        border-radius: 24px;
    }

    .sgnews-detail-m3-body {
        padding: 21px 18px 25px;
        border-radius: 24px;
    }

    .sgnews-detail-m3-body p {
        font-size: 16.5px;
        line-height: 1.72;
    }

    .sgnews-detail-m3-body p.sgnews-detail-m3-lead {
        font-size: 18px;
        line-height: 1.64;
    }
}

@media print {
    .sgnews-detail-m3-header,
    .sgnews-detail-m3-body,
    .sgnews-detail-m3-media {
        box-shadow: none;
    }

    .sgnews-detail-m3-layout {
        display: block;
    }

    .sgnews-detail-m3-support,
    .sgnews-detail-m3-comments,
    .sgnews-detail-m3-review,
    .sgnews-detail-m3-back {
        display: none !important;
    }
}