/*
 * MANADO.NEWS — WAKTU ARTICLE FIDELITY R9
 * Full-width editorial hero, left sharing rail, clean reading card and
 * right sidebar. No print changes; no SEO/backend/advertisement changes.
 */

@media screen {
    .mn-container.mn-r9-article-page {
        width: min(1050px, calc(100% - 32px)) !important;
        max-width: none !important;
        margin-inline: auto !important;
        padding: 18px 0 30px !important;
    }

    .mn-r9-article-grid,
    .mn-r9-article-grid * {
        box-sizing: border-box;
    }

    .mn-r9-article-grid {
        display: grid !important;
        grid-template-columns: 56px minmax(0, 1fr) 300px !important;
        gap: 18px !important;
        align-items: start !important;
        --mn-r9-ink: #18213a;
        --mn-r9-muted: #707887;
        --mn-r9-line: rgba(21, 33, 63, .10);
        --mn-r9-accent: #0096d6;
    }

    /* The semantic article and print article remain in the DOM. Only their
       visual boxes are flattened, allowing one shared hero across columns. */
    .mn-r9-article-grid > .mn-r9-article,
    .mn-r9-article-grid > .mn-r9-article > .mn-r9-print-article {
        display: contents !important;
    }

    .mn-r9-article-grid .mn-r9-top-accent {
        display: none !important;
    }

    /* One full-width headline before the three-column article reading room. */
    .mn-r9-article-grid .mn-r9-hero {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        position: relative;
        min-width: 0;
        margin: 0 !important;
        padding: 34px 38px 31px !important;
        border: 1px solid rgba(21, 33, 63, .08);
        border-radius: 26px;
        background:
            radial-gradient(circle at 7% 0, rgba(0, 150, 214, .10), transparent 24%),
            radial-gradient(circle at 94% 100%, rgba(53, 81, 154, .08), transparent 29%),
            linear-gradient(135deg, #fff 0%, #fcfdff 56%, #f4f7fd 100%);
        box-shadow: 0 22px 55px rgba(24, 33, 58, .09);
        overflow: hidden;
    }

    .mn-r9-hero::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 6px;
        background: linear-gradient(180deg, var(--mn-r9-accent), #00b8d4, #35519a, #15213f);
        pointer-events: none;
    }

    /* Waktu-style taxonomy: one compact category tag + optional news tags. */
    .mn-r9-hero > .mn-print-hidden.mb-6 {
        margin-bottom: 15px !important;
    }

    .mn-r9-hero > .mn-print-hidden.mb-6 > .flex > div.relative {
        border-radius: 999px !important;
        min-height: 28px;
        padding: 6px 13px !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        letter-spacing: .065em !important;
        box-shadow: 0 8px 18px rgba(0, 150, 214, .13);
    }

    .mn-r9-hero > .mn-print-hidden.mb-6 > .flex > div.relative > .absolute,
    .mn-r9-hero > .mn-print-hidden.mb-6 > .flex > span,
    .mn-r9-hero > .mn-print-hidden.mb-6 > .flex > div.hidden {
        display: none !important;
    }

    .mn-r9-hero > .flex.flex-wrap.gap-2.mb-5 {
        gap: 7px !important;
        margin-bottom: 18px !important;
    }

    .mn-r9-hero > .flex.flex-wrap.gap-2.mb-5 > * {
        border-radius: 999px !important;
        padding: 6px 10px !important;
        font-family: "Poppins", Arial, sans-serif !important;
        font-size: 9px !important;
        letter-spacing: .01em;
    }

    .mn-r9-article-grid .mn-r9-hero .mn-print-title {
        max-width: 920px !important;
        margin: 0 !important;
        color: var(--mn-r9-ink) !important;
        font-family: "Poppins", Arial, sans-serif !important;
        font-size: clamp(36px, 5vw, 58px) !important;
        font-weight: 900 !important;
        line-height: 1.08 !important;
        letter-spacing: -.048em !important;
        text-wrap: pretty;
    }

    .mn-r9-hero .mn-print-title + p {
        max-width: 850px;
        margin-top: 17px !important;
        color: #616874 !important;
        font-family: "Poppins", Arial, sans-serif !important;
        font-size: 16px !important;
        line-height: 1.68 !important;
    }

    /* Editorial attribution is compact instead of a tall four-card dashboard. */
    .mn-r9-hero .mn-r9-author-meta {
        margin-top: 23px !important;
        padding: 18px 0 0 !important;
        border: 0 !important;
        border-top: 1px solid var(--mn-r9-line) !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .mn-r9-author-meta > .flex {
        gap: 18px !important;
    }

    .mn-r9-author-meta .w-14.h-14 {
        width: 43px !important;
        height: 43px !important;
        border-radius: 13px !important;
    }

    .mn-r9-author-meta > .mt-4.grid {
        display: flex !important;
        flex-wrap: wrap;
        gap: 10px 18px !important;
        margin-top: 16px !important;
        color: #747b87;
    }

    .mn-r9-author-meta > .mt-4.grid > div {
        flex: 0 1 auto;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding: 0 !important;
        font-size: 10px !important;
        line-height: 1.65 !important;
    }

    .mn-r9-author-meta > .mt-4.grid > div > div {
        display: inline;
        margin: 0 5px 0 0 !important;
        color: #596173 !important;
        font-size: 10px !important;
        font-weight: 700 !important;
    }

    /* Waktu.news left sticky share rail; uses existing Manado share URLs. */
    .mn-r9-article-grid > .mn-r9-share-rail {
        grid-column: 1 !important;
        grid-row: 2 !important;
        position: sticky;
        top: 102px;
        z-index: 12;
        display: grid;
        justify-items: center;
        align-self: start;
        gap: 8px;
    }

    .mn-r9-share-label {
        color: #727a89;
        font-family: "Poppins", Arial, sans-serif;
        font-size: 8px;
        font-weight: 900;
        letter-spacing: .09em;
        text-transform: uppercase;
    }

    .mn-r9-share-buttons {
        display: grid;
        gap: 3px;
        padding: 5px;
        overflow: hidden;
        border: 1px solid rgba(21, 33, 63, .09);
        border-radius: 17px;
        background: linear-gradient(145deg, rgba(250, 253, 255, .98), rgba(247, 249, 255, .98));
        box-shadow: 0 13px 30px rgba(24, 33, 58, .06), inset 3px 0 0 var(--mn-r9-accent);
        backdrop-filter: blur(12px);
    }

    .mn-r9-share-button {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: #222a3c;
        cursor: pointer;
        transition: background .18s ease, color .18s ease, transform .18s ease;
    }

    .mn-r9-share-button:hover {
        background: #eef5fa;
        transform: translateY(-1px);
    }

    .mn-r9-share-button svg {
        width: 19px;
        height: 19px;
    }

    .mn-r9-share-facebook:hover { color: #1877f2; }
    .mn-r9-share-whatsapp:hover { color: #138a3d; }

    /* Reading column preserves existing table-of-contents, visual premium,
       correction, ad slots, attribution, fact-check blocks and related posts. */
    .mn-r9-article-grid .mn-r9-main {
        grid-column: 2 !important;
        grid-row: 2 !important;
        min-width: 0;
        overflow: hidden;
        border: 1px solid var(--mn-r9-line);
        border-radius: 23px;
        background: #fff;
        box-shadow: 0 18px 44px rgba(24, 33, 58, .07);
    }

    .mn-r9-main > figure {
        margin: 0 !important;
        padding: 0 !important;
        background: #eef1f5;
    }

    .mn-r9-main > figure > img {
        display: block;
        width: 100% !important;
        height: auto !important;
        max-height: 620px;
        border-radius: 0 !important;
        object-fit: cover !important;
    }

    .mn-r9-main > figure > figcaption {
        margin: 0 !important;
        padding: 11px 17px !important;
        border-bottom: 1px solid var(--mn-r9-line);
        color: #747b87;
        font-size: 10px !important;
        line-height: 1.55 !important;
    }

    .mn-r9-main .article-content {
        color: #252932 !important;
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 18.5px !important;
        line-height: 1.9 !important;
        overflow-wrap: anywhere;
    }

    .mn-r9-main .article-content > p:first-child::first-letter {
        float: left;
        margin: 8px 10px 0 0;
        color: var(--mn-r9-accent);
        font-family: "Poppins", Arial, sans-serif;
        font-size: 56px;
        font-weight: 900;
        line-height: .78;
    }

    .mn-r9-main .article-content > p {
        margin: 0 0 26px !important;
    }

    .mn-r9-main .article-content > p:last-child {
        margin-bottom: 0 !important;
    }

    .mn-r9-main .article-content h2,
    .mn-r9-main .article-content h3,
    .mn-r9-main .article-content h4 {
        color: var(--mn-r9-ink) !important;
        font-family: "Poppins", Arial, sans-serif !important;
        font-weight: 900 !important;
        line-height: 1.28 !important;
        letter-spacing: -.025em;
    }

    .mn-r9-main .article-content h2 {
        position: relative;
        margin: 38px 0 16px !important;
        padding-left: 15px !important;
        font-size: 27px !important;
    }

    .mn-r9-main .article-content h2::before {
        content: "";
        position: absolute;
        inset: 4px auto 4px 0;
        width: 5px;
        border-radius: 999px;
        background: linear-gradient(180deg, var(--mn-r9-accent), #00b8d4);
    }

    .mn-r9-main .article-content h3 {
        margin: 29px 0 13px !important;
        font-size: 22px !important;
    }

    .mn-r9-main .article-content blockquote {
        margin: 28px 0 !important;
        padding: 21px 23px 21px 27px !important;
        border-left: 5px solid var(--mn-r9-accent) !important;
        border-radius: 0 15px 15px 0 !important;
        background: linear-gradient(135deg, #f1fbff, #f8f9fc) !important;
        color: #3f444d;
        font-style: italic;
    }

    .mn-r9-main .article-content > p > img,
    .mn-r9-main .article-content figure img {
        max-width: 100%;
        height: auto;
        margin: 27px auto;
        border-radius: 15px;
        box-shadow: 0 17px 40px rgba(24, 33, 58, .10);
    }

    /* Related-news card matches the Waktu article sidebar visual language. */
    .mn-r9-article-grid > .mn-r9-aside {
        grid-column: 3 !important;
        grid-row: 2 !important;
        min-width: 0;
        width: 100%;
        top: 102px;
    }

    .mn-r9-aside > .space-y-6 > section:not(.bg-slate-950) {
        border: 1px solid var(--mn-r9-line) !important;
        border-radius: 23px !important;
        background: #fff !important;
        box-shadow: 0 18px 44px rgba(24, 33, 58, .06);
    }

    .mn-r9-aside > .space-y-6 > section:first-child .group {
        border-radius: 15px !important;
        background: #fff !important;
        box-shadow: none !important;
    }
}

@media screen and (min-width: 850px) and (max-width: 1099px) {
    .mn-r9-article-grid {
        grid-template-columns: minmax(0, 1fr) 275px !important;
        gap: 16px !important;
    }

    .mn-r9-article-grid > .mn-r9-share-rail { display: none !important; }
    .mn-r9-article-grid .mn-r9-main { grid-column: 1 !important; grid-row: 2 !important; }
    .mn-r9-article-grid > .mn-r9-aside { grid-column: 2 !important; grid-row: 2 !important; }
}

@media screen and (max-width: 849px) {
    .mn-container.mn-r9-article-page {
        width: min(100% - 24px, 700px) !important;
        padding: 12px 0 26px !important;
    }

    .mn-r9-article-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
    }

    .mn-r9-article-grid > .mn-r9-share-rail { display: none !important; }

    .mn-r9-article-grid .mn-r9-hero {
        grid-column: 1 !important;
        grid-row: 1 !important;
        padding: 24px 23px 22px !important;
        border-radius: 19px;
    }

    .mn-r9-article-grid .mn-r9-hero .mn-print-title {
        font-size: clamp(31px, 9vw, 40px) !important;
        letter-spacing: -.038em !important;
    }

    .mn-r9-article-grid .mn-r9-hero .mn-print-title + p {
        font-size: 15px !important;
    }

    .mn-r9-author-meta > .mt-4.grid {
        gap: 7px 13px !important;
    }

    .mn-r9-article-grid .mn-r9-main {
        grid-column: 1 !important;
        grid-row: 2 !important;
        border-radius: 19px;
    }

    .mn-r9-article-grid > .mn-r9-aside {
        grid-column: 1 !important;
        grid-row: 3 !important;
        position: static !important;
    }

    .mn-r9-main .article-content {
        font-size: 17.5px !important;
        line-height: 1.82 !important;
    }

    .mn-r9-main .article-content > p {
        margin-bottom: 22px !important;
    }

    .mn-r9-main .article-content h2 {
        font-size: 23px !important;
    }

    .mn-r9-main .article-content h3 {
        font-size: 20px !important;
    }
}

@media screen and (max-width: 480px) {
    .mn-r9-author-meta > .flex {
        align-items: flex-start !important;
    }

    .mn-r9-author-meta > .flex > a {
        width: auto !important;
        padding: 8px 12px !important;
    }

    .mn-r9-hero > .flex.flex-wrap.gap-2.mb-5 > * {
        font-size: 8px !important;
    }
}
