/* MANADO.NEWS — WAKTU READER FIDELITY R13: article-only components. */

@media screen {
    .mn-r13-toc {
        margin: 18px 0 26px;
        padding: 19px 21px 21px;
        border: 1px solid rgba(21, 33, 63, .10);
        border-left: 4px solid #0096d6;
        border-radius: 15px;
        background: linear-gradient(135deg, #f3faff, #f8f9fc);
        box-shadow: 0 10px 27px rgba(24, 33, 58, .055);
        font-family: 'Poppins', Arial, sans-serif;
    }

    .mn-r13-toc-heading {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 15px;
        margin-bottom: 14px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(21, 33, 63, .10);
    }

    .mn-r13-eyebrow {
        color: #0079ac;
        font-size: 10px;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .11em;
    }

    .mn-r13-toc h2 {
        margin: 3px 0 0;
        color: #17213b;
        font-size: 19px;
        font-weight: 900;
        line-height: 1.3;
        letter-spacing: -.025em;
    }

    .mn-r13-toc-hint {
        color: #8a91a0;
        font-size: 10px;
        font-weight: 650;
    }

    .mn-r13-toc #mn-article-toc-list {
        display: grid;
        gap: 7px;
    }

    .mn-r13-toc #mn-article-toc-list > a {
        border: 0;
        border-radius: 8px;
        background: #fff;
        padding: 9px 11px;
        color: #344054;
        font-size: 12px;
        font-weight: 750;
        line-height: 1.55;
        box-shadow: inset 0 0 0 1px rgba(21, 33, 63, .07);
        text-decoration: none;
    }

    .mn-r13-toc #mn-article-toc-list > a:hover,
    .mn-r13-toc #mn-article-toc-list > a:focus-visible {
        color: #006fa8;
        background: #f0faff;
        outline-color: #0096d6;
    }

    .mn-r13-toc #mn-article-toc-list a > span:first-child {
        background: #17213b;
        color: #fff;
    }

    /* Same editorial callout structure as Waktu's compact BACA JUGA. */
    .article-content .mn-r13-read-also {
        position: relative;
        display: block;
        margin: 28px 0;
        padding: 16px 51px 17px 19px;
        border: 1px solid rgba(21, 33, 63, .10);
        border-left: 4px solid #0096d6;
        border-radius: 12px;
        background: linear-gradient(135deg, #f4fbff, #f7f8fb);
        color: #444b57;
        box-shadow: 0 9px 24px rgba(24, 33, 58, .05);
        font-family: 'Poppins', Arial, sans-serif;
        font-size: 14px;
        line-height: 1.68;
    }

    .article-content .mn-r13-read-also::after {
        content: '→';
        position: absolute;
        top: 15px;
        right: 15px;
        display: grid;
        width: 28px;
        height: 28px;
        place-items: center;
        border-radius: 50%;
        color: #0079ac;
        background: #fff;
        box-shadow: 0 3px 10px rgba(24, 33, 58, .08);
        font-weight: 800;
    }

    .article-content .mn-r13-read-also-label {
        display: block;
        margin-bottom: 7px;
        color: #0079ac;
        font-size: 9.5px;
        font-weight: 900;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .article-content .mn-r13-read-also-label::before {
        content: '↗';
        margin-right: 6px;
    }

    .article-content .mn-r13-read-also-links {
        display: grid;
        gap: 6px;
    }

    .article-content .mn-r13-read-also-links a {
        display: block;
        color: #006b9d;
        font-size: 13.5px;
        font-weight: 800;
        line-height: 1.6;
        text-decoration: none;
        overflow-wrap: anywhere;
    }

    .article-content .mn-r13-read-also-links a:hover {
        color: #004c77;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    /* Waktu-style: horizontal table scroll, not transformed mobile cards. */
    .article-content .mn-r13-table-shell {
        width: 100%;
        max-width: 100%;
        margin: 29px 0;
        overflow: hidden;
        border: 1px solid rgba(21, 33, 63, .13);
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 13px 32px rgba(24, 33, 58, .075);
    }

    .article-content .mn-r13-table-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #0096d6 #eef1f7;
    }

    .article-content .mn-r13-table-scroll table {
        display: table !important;
        width: max-content !important;
        min-width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        border: 0 !important;
        border-spacing: 0 !important;
        border-collapse: separate !important;
        table-layout: auto !important;
        color: #17213b;
        background: #fff;
        font: 500 14px/1.55 'Poppins', Arial, sans-serif;
    }

    .article-content .mn-r13-table-scroll th,
    .article-content .mn-r13-table-scroll td {
        display: table-cell !important;
        min-width: 118px;
        padding: 13px 15px !important;
        border: 0 !important;
        border-right: 1px solid rgba(21, 33, 63, .09) !important;
        border-bottom: 1px solid rgba(21, 33, 63, .09) !important;
        text-align: left;
        vertical-align: top;
        overflow-wrap: anywhere;
    }

    .article-content .mn-r13-table-scroll thead th,
    .article-content .mn-r13-table-scroll tr:first-child > th {
        background: linear-gradient(135deg, #17213b, #294181) !important;
        color: #fff !important;
        font-weight: 800;
    }

    .article-content .mn-r13-table-scroll tr:nth-child(even) td {
        background: #f8f9fc;
    }

    .article-content .mn-r13-table-scroll th:last-child,
    .article-content .mn-r13-table-scroll td:last-child {
        border-right: 0 !important;
    }

    .mn-r13-table-hint {
        display: none;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        min-height: 38px;
        padding: 8px 13px;
        border-bottom: 1px solid rgba(21, 33, 63, .09);
        background: linear-gradient(90deg, #f0faff, #f7f8fc);
        color: #657086;
        font-size: 10px;
        font-weight: 750;
    }

    .mn-r13-table-hint::after {
        content: '↔';
        display: grid;
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        place-items: center;
        border-radius: 50%;
        background: #17213b;
        color: #fff;
        font-size: 14px;
    }

    .mn-r13-table-shell.has-horizontal-overflow .mn-r13-table-hint {
        display: flex;
    }

    /* Follow strip and single next article use Waktu's proportions. */
    .mn-r13-follow {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 18px;
        margin: 29px 0 25px;
        padding: 15px 17px;
        overflow: hidden;
        border: 1px solid rgba(21, 33, 63, .09);
        border-radius: 17px;
        background: linear-gradient(135deg, #f3faff, #f7f9ff);
        box-shadow: 0 13px 30px rgba(24, 33, 58, .055), inset 4px 0 0 #0096d6;
        font-family: 'Poppins', Arial, sans-serif;
    }

    .mn-r13-follow-copy {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: center;
        gap: 11px;
        min-width: 0;
    }

    .mn-r13-follow-star {
        display: grid;
        width: 36px;
        height: 36px;
        place-items: center;
        border-radius: 11px;
        background: linear-gradient(135deg, #0096d6, #006fa8);
        color: #fff;
        box-shadow: 0 9px 20px rgba(0, 150, 214, .21);
    }

    .mn-r13-follow h2 {
        margin: 0;
        color: #17213b;
        font-size: 15px;
        font-weight: 900;
        line-height: 1.25;
        letter-spacing: -.02em;
    }

    .mn-r13-follow p {
        margin: 2px 0 0;
        color: #7f8796;
        font-size: 9px;
        font-weight: 700;
        line-height: 1.4;
    }

    .mn-r13-follow-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 9px;
    }

    .mn-r13-follow-link {
        display: grid;
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        place-items: center;
        border: 1px solid rgba(21, 33, 63, .10);
        border-radius: 14px;
        background: rgba(255, 255, 255, .94);
        color: #17213b;
        box-shadow: 0 9px 20px rgba(24, 33, 58, .055);
        text-decoration: none;
        transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .mn-r13-follow-link:hover {
        transform: translateY(-2px);
        border-color: #8dd3f4;
        box-shadow: 0 14px 26px rgba(24, 33, 58, .085);
    }

    .mn-r13-follow-link > span {
        font-size: 15px;
        font-weight: 900;
    }

    .mn-r13-follow-link--google > span { color: #4285f4; }
    .mn-r13-follow-link--facebook > span { color: #1877f2; font-size: 21px; }
    .mn-r13-follow-link--instagram > span { color: #be3d87; font-size: 13px; }
    .mn-r13-follow-link--youtube > span { color: #e21e27; }
    .mn-r13-follow-link--whatsapp > span { color: #128c4a; font-size: 12px; }

    .mn-r13-no-channels {
        color: #7f8796;
        font-size: 11px;
    }

    .mn-r13-next { margin: 0 0 28px; }

    .mn-r13-next-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        margin-bottom: 10px;
    }

    .mn-r13-next-head h2 {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin: 0;
        color: #17213b;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .09em;
        text-transform: uppercase;
    }

    .mn-r13-next-head h2::before {
        content: '';
        width: 20px;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient(90deg, #0096d6, #57c2e5);
    }

    .mn-r13-next-head > span {
        color: #8a91a0;
        font-size: 9px;
        font-weight: 700;
    }

    .mn-r13-next-card {
        display: grid;
        grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
        overflow: hidden;
        border: 1px solid rgba(21, 33, 63, .09);
        border-radius: 18px;
        background: #fff;
        color: inherit;
        text-decoration: none;
        box-shadow: 0 15px 34px rgba(24, 33, 58, .065);
        transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .mn-r13-next-card:hover {
        transform: translateY(-2px);
        border-color: #8dd3f4;
        box-shadow: 0 19px 40px rgba(24, 33, 58, .095);
    }

    .mn-r13-next-media {
        display: grid;
        min-height: 145px;
        place-items: center;
        overflow: hidden;
        background: linear-gradient(135deg, #17213b, #294181);
        color: #fff;
        font-size: 42px;
        font-weight: 950;
    }

    .mn-r13-next-media img {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 145px;
        object-fit: cover;
        transition: transform .35s ease;
    }

    .mn-r13-next-card:hover .mn-r13-next-media img { transform: scale(1.025); }

    .mn-r13-next-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        padding: 18px 20px;
    }

    .mn-r13-next-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 5px 8px;
        margin-bottom: 8px;
        color: #7f8796;
        font-size: 9px;
        font-weight: 750;
        line-height: 1.4;
    }

    .mn-r13-next-category {
        color: #0079ac;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    .mn-r13-next-content h3 {
        margin: 0;
        color: #17213b;
        font-size: clamp(17px, 2vw, 21px);
        font-weight: 900;
        line-height: 1.32;
        letter-spacing: -.025em;
    }

    .mn-r13-next-action {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-top: 12px;
        color: #0079ac;
        font-size: 10px;
        font-weight: 900;
    }

    .mn-r13-next-action span { transition: transform .2s ease; }
    .mn-r13-next-card:hover .mn-r13-next-action span { transform: translateX(3px); }
}

@media screen and (max-width: 760px) {
    .mn-r13-toc { margin: 16px 0 22px; padding: 16px; }
    .mn-r13-toc-hint { display: none; }
    .article-content .mn-r13-read-also {
        margin: 24px 0;
        padding: 15px 45px 15px 16px;
        border-radius: 11px;
    }
    .article-content .mn-r13-read-also-links a { font-size: 13px; }
    .mn-r13-follow {
        grid-template-columns: 1fr;
        gap: 13px;
        padding: 14px;
    }
    .mn-r13-follow-links { justify-content: flex-start; }
    .mn-r13-follow-link { width: 42px; height: 42px; flex-basis: 42px; }
    .mn-r13-next-head > span { display: none; }
    .mn-r13-next-card { grid-template-columns: 1fr; border-radius: 16px; }
    .mn-r13-next-media { min-height: 0; aspect-ratio: 16 / 9; }
    .mn-r13-next-media img { min-height: 0; }
    .mn-r13-next-content { padding: 15px 16px 17px; }
    .mn-r13-next-content h3 { font-size: 17px; line-height: 1.37; }
}

@media print {
    .mn-r13-toc,
    .mn-r13-read-also,
    .mn-r13-follow,
    .mn-r13-next { display: none !important; }

    .article-content .mn-r13-table-shell,
    .article-content .mn-r13-table-scroll { overflow: visible !important; box-shadow: none !important; }
    .mn-r13-table-hint { display: none !important; }
    .article-content .mn-r13-table-scroll table {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }
}
