/* Single article (GP Element 271). Builds on article-blocks/article-main.css, which centres
   .dynamic-entry-content in a reading column; card styles come from ajankohtaista.css. */
@media only screen and (min-width: 320px) {

    .art-otsake {
        padding-top: clamp(40px, 5vw, 72px);
        padding-bottom: clamp(32px, 4vw, 56px);
    }

    .art-meta {
        font-size: 14px;
        margin-bottom: 14px;
    }

    .art-meta a {
        color: inherit;
        text-decoration: none;
    }

    h1.art-otsikko {
        font-size: clamp(32px, 4vw, 60px);
        line-height: 1.08;
        max-width: 22ch;
        margin-bottom: 0;
    }

    /* Author (employee chosen with the ACF field kirjoittaja), filled in by includes/tyontekija/kirjoittaja.php */
    .art-kirjoittaja-linkki {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        text-decoration: none;
    }

    .art-kirjoittaja-linkki img {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        object-fit: cover;
        object-position: top;
    }

    .art-kirjoittaja-tiedot {
        display: grid;
        line-height: 1.3;
    }

    .art-kirjoittaja-tiedot strong {
        font-size: 16px;
    }

    .art-kirjoittaja-tiedot span {
        font-size: 14px;
        font-weight: 400;
    }

    /* Editor placeholder */
    .editor-styles-wrapper .art-kirjoittaja {
        border: 1px dashed var(--border-clr);
        padding: 10px 14px;
        border-radius: 12px;
        font-size: 14px;
    }

    /* Featured images are 2:1 banners with the title drawn in: show them whole */
    .art-kuva .gb-block-image {
        border-radius: 18px;
        overflow: hidden;
        border: 1px solid var(--border-clr);
        margin: 0;
    }

    .art-kuva img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* Reading column */
    .post-template-default .art-sisalto .dynamic-entry-content {
        max-width: 760px;
        margin-top: 0;
        padding-left: 0; /* the section already has the side padding */
        padding-right: 0;
        padding-bottom: 0;
        font-size: 18px;
        line-height: 1.7;
    }

    .art-sisalto .dynamic-entry-content p,
    .art-sisalto .dynamic-entry-content li {
        font-size: 18px;
        line-height: 1.7;
    }

    .art-sisalto .dynamic-entry-content > p:first-child {
        font-size: 22px;
        line-height: 1.55;
        font-weight: 500 !important; /* imported content carries inline font-weight */
    }

    .post-template-default .art-sisalto .dynamic-entry-content h2,
    .post-template-default .art-sisalto .dynamic-entry-content h3,
    .post-template-default .art-sisalto .dynamic-entry-content h4 {
        line-height: 1.2;
        letter-spacing: 0;
        margin-top: 2em;
        margin-bottom: 0.6em;
        font-weight: 700 !important;
    }

    .post-template-default .art-sisalto .dynamic-entry-content h2 { font-size: clamp(26px, 2.4vw, 34px); }
    .post-template-default .art-sisalto .dynamic-entry-content h3 { font-size: clamp(22px, 1.9vw, 27px); }
    .post-template-default .art-sisalto .dynamic-entry-content h4 { font-size: 1.15rem; }

    .art-sisalto .dynamic-entry-content a {
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    .art-sisalto .dynamic-entry-content ul,
    .art-sisalto .dynamic-entry-content ol {
        margin: 0 0 1.5em 1.2em;
    }

    .art-sisalto .dynamic-entry-content li {
        margin-bottom: 0.5em;
    }

    .art-sisalto .dynamic-entry-content blockquote {
        margin: 2em 0;
        padding: 4px 0 4px 22px;
        border-left: 3px solid var(--accent-clr);
        font-size: 20px;
        font-weight: 500;
        font-style: normal;
    }

    .art-sisalto .dynamic-entry-content blockquote p {
        font-size: 20px;
    }

    .art-sisalto .dynamic-entry-content blockquote p:last-child {
        margin-bottom: 0;
    }

    .art-sisalto .dynamic-entry-content img {
        max-width: 100%;
        height: auto;
        border-radius: 12px;
    }

    .art-sisalto .dynamic-entry-content figure {
        margin: 2em 0;
    }

    .art-sisalto .dynamic-entry-content figcaption {
        font-size: 14px;
        margin-top: 8px;
    }

    /* Tables (market reviews): scroll sideways on narrow screens instead of breaking the page */
    .art-sisalto .dynamic-entry-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        border-collapse: collapse;
        margin: 2em 0;
        font-size: 15px;
        line-height: 1.4;
        border: 0;
    }

    .art-sisalto .dynamic-entry-content th,
    .art-sisalto .dynamic-entry-content td {
        border: 1px solid var(--border-clr);
        padding: 10px 12px;
        text-align: left;
        vertical-align: top;
    }

    .art-sisalto .dynamic-entry-content th,
    .art-sisalto .dynamic-entry-content thead td {
        background: var(--grey);
        font-weight: 700;
    }

    .ak-kortti h3.ak-otsikko {
        font-size: clamp(19px, 1.4vw, 22px);
        line-height: 1.25;
        letter-spacing: 0;
        margin: 0 0 10px;
    }
}