/* AquaLinked article page — ChatGPT-style reading panel
   This affects only the public article body + sidebar.
   It does NOT touch the green title/hero panel.
*/

@media (min-width: 1150px) {

    body:has(.article-body) .container:has(.article-body):has(aside) {
        width: min(1380px, calc(100vw - 72px)) !important;
        max-width: 1380px !important;
        margin-left: auto !important;
        margin-right: auto !important;

        display: grid !important;
        grid-template-columns: minmax(0, 960px) 340px !important;
        gap: 40px !important;
        align-items: start !important;
        box-sizing: border-box !important;
    }

    body:has(.article-body) .container:has(.article-body) article {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    /* The actual reading panel */
    body:has(.article-body) .article-body {
        width: 100% !important;
        max-width: 900px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;

        font-size: 18px !important;
        line-height: 1.72 !important;
    }

    body:has(.article-body) .article-body p {
        text-align: justify !important;
        text-align-last: left !important;
        text-justify: inter-word;
        margin-bottom: 20px !important;
    }

    body:has(.article-body) .article-body h2,
    body:has(.article-body) .article-body h3 {
        clear: both !important;
        margin-top: 34px !important;
        margin-bottom: 14px !important;
    }

    /* Inline images inside the reading panel */
    body:has(.article-body) .article-body .article-figure.align-left {
        float: left !important;
        clear: none !important;
        width: min(34%, 310px) !important;
        max-width: 310px !important;
        margin: 8px 28px 18px 0 !important;
    }

    body:has(.article-body) .article-body .article-figure.align-right {
        float: right !important;
        clear: none !important;
        width: min(34%, 310px) !important;
        max-width: 310px !important;
        margin: 8px 0 18px 28px !important;
    }

    body:has(.article-body) .article-body .article-figure.align-center {
        float: none !important;
        clear: both !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body:has(.article-body) .article-body .article-figure figcaption {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    /* Sidebar cards */
    body:has(.article-body) .container:has(.article-body) aside {
        width: 340px !important;
        max-width: 340px !important;
        box-sizing: border-box !important;
    }

    body:has(.article-body) .container:has(.article-body) aside > * {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body:has(.article-body) .container:has(.article-body) aside img {
        max-width: 100% !important;
        height: auto !important;
    }
}

@media (max-width: 1149px) {
    body:has(.article-body) .container:has(.article-body):has(aside) {
        display: block !important;
    }

    body:has(.article-body) .article-body {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 17px !important;
    }

    body:has(.article-body) .container:has(.article-body) aside {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 28px !important;
    }

    body:has(.article-body) .article-body .article-figure.align-left,
    body:has(.article-body) .article-body .article-figure.align-right {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 24px auto !important;
    }
}