/* =========================================================
   RIGHTS MEDIA SOCIETY
   ARTICLE PAGE
========================================================= */


/* =========================================================
   ARTICLE HEADER
========================================================= */

.article-shell {
    width: min(100% - 32px, 920px);
    margin: 0 auto;
    padding: 42px 0 55px;
}


/* Category */

.article-shell > .eyebrow {
    display: inline-block;
    margin-bottom: 10px;
}


/* Place / District */

.article-location {
    margin: 4px 0 10px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;
    color: var(--muted);
}


/* =========================================================
   MAIN HEADLINE
========================================================= */

.article-main-headline {
    margin: 5px 0 14px;
    padding: 0;

    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;

    color: #c71920;
}


/* =========================================================
   SUB HEADLINES
========================================================= */

.article-subheadline {
    margin: 7px 0;

    font-size: clamp(18px, 2.2vw, 23px);
    line-height: 1.45;
    font-weight: 700;

    color: var(--text);
}


/* =========================================================
   SUMMARY
========================================================= */

.article-summary {
    margin: 18px 0;

    font-size: clamp(17px, 2vw, 20px);
    line-height: 1.7;
    font-weight: 500;

    color: var(--muted);
}


/* =========================================================
   ARTICLE META
========================================================= */

.article-meta {
    margin: 17px 0 24px;
    padding-bottom: 16px;

    border-bottom: 1px solid var(--line);

    line-height: 1.6;
}


/* =========================================================
   FEATURED IMAGE
========================================================= */

.article-featured {
    margin: 25px 0;
}

.article-hero {
    display: block;

    width: 100%;
    height: auto;
    max-height: 620px;

    object-fit: cover;

    border-radius: 8px;
}

.article-featured figcaption {
    padding-top: 8px;

    font-size: 13px;
    line-height: 1.5;

    color: var(--muted);
}


/* =========================================================
   SHARE BAR
========================================================= */

.share-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin: 22px 0 30px;
}


/* =========================================================
   OPENING ARTICLE BODY
========================================================= */

.article-body,
.article-opening-body {
    font-size: 18px;
    line-height: 1.85;

    color: var(--text);
}

.article-body p,
.article-opening-body p {
    margin: 0 0 20px;
}


/* =========================================================
   DYNAMIC CONTENT BLOCKS
========================================================= */

.article-content-blocks {
    margin-top: 28px;
}

.article-content-block {
    margin: 0 0 42px;
}


/* Paragraph headline = RED */

.article-paragraph-headline {
    margin: 0 0 14px;

    font-size: clamp(22px, 2.7vw, 30px);
    line-height: 1.3;
    font-weight: 800;

    color: #c71920;
}


/* Paragraph body = BLACK */

.article-paragraph-body {
    font-size: 18px;
    line-height: 1.85;

    color: #111;
}

.article-paragraph-body p {
    margin: 0 0 20px;
}


/* Dark mode readability */

html[data-theme="dark"] .article-paragraph-body {
    color: var(--text);
}


/* =========================================================
   PARAGRAPH IMAGE
========================================================= */

.article-block-image {
    margin: 22px 0 0;
}

.article-block-image img {
    display: block;

    width: 100%;
    height: auto;
    max-height: 620px;

    object-fit: contain;

    border-radius: 8px;
}


/* =========================================================
   VIDEO
========================================================= */

.video-frame {
    position: relative;

    aspect-ratio: 16 / 9;

    margin: 30px 0;
}

.video-frame iframe {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;

    border-radius: 8px;
}

.article-video {
    display: block;

    width: 100%;
    max-height: 560px;

    margin: 30px 0;

    background: #000;

    border-radius: 8px;
}


/* =========================================================
   PHOTO GALLERY
========================================================= */

.article-gallery-section {
    margin: 42px 0 30px;
}

.article-gallery-title {
    margin: 0 0 18px;

    font-size: clamp(22px, 2.5vw, 28px);
    line-height: 1.3;
    font-weight: 800;

    color: #c71920;
}

.article-gallery {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 15px;

    margin: 0;
}

.article-gallery figure {
    margin: 0;
}

.article-gallery img {
    display: block;

    width: 100%;

    aspect-ratio: 4 / 3;

    object-fit: cover;

    border-radius: 7px;
}

.article-gallery figcaption {
    padding-top: 6px;

    font-size: 12px;
    line-height: 1.5;

    color: var(--muted);
}


/* =========================================================
   SOURCE
========================================================= */

.article-source {
    margin-top: 30px;
    padding: 15px 0;

    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}


/* =========================================================
   PREVIOUS / NEXT ARTICLE
========================================================= */

.article-nav {
    display: flex;
    justify-content: space-between;

    gap: 25px;

    margin-top: 35px;
    padding-top: 22px;

    border-top: 1px solid var(--line);
}

.article-nav a {
    display: flex;
    flex-direction: column;

    width: 46%;
    max-width: 46%;

    text-decoration: none;

    font-weight: 700;
}

.article-nav a:last-child {
    margin-left: auto;
    text-align: right;
}

.article-nav small {
    display: block;

    margin-bottom: 5px;

    font-size: 12px;
    font-weight: 700;

    color: var(--muted);
}

.article-nav span {
    line-height: 1.45;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .article-shell {
        width: min(100% - 28px, 920px);

        padding-top: 30px;
    }

    .article-main-headline {
        font-size: clamp(28px, 5vw, 40px);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .article-shell {
        width: calc(100% - 24px);

        padding: 22px 0 40px;
    }


    /* MAIN HEADLINE */

    .article-main-headline {
        margin-bottom: 12px;

        font-size: 29px;
        line-height: 1.2;
    }


    /* SUB HEADLINES */

    .article-subheadline {
        margin: 6px 0;

        font-size: 18px;
        line-height: 1.45;
    }


    /* SUMMARY */

    .article-summary {
        margin: 14px 0;

        font-size: 16px;
        line-height: 1.65;
    }


    /* META */

    .article-meta {
        margin: 14px 0 18px;

        font-size: 12px;
    }


    /* FEATURED IMAGE */

    .article-featured {
        margin: 18px 0;
    }

    .article-hero {
        width: 100%;

        max-height: none;

        border-radius: 6px;
    }


    /* SHARE */

    .share-bar {
        margin: 17px 0 25px;
    }


    /* ARTICLE BODY */

    .article-body,
    .article-opening-body,
    .article-paragraph-body {
        font-size: 16px;
        line-height: 1.8;
    }

    .article-body p,
    .article-opening-body p,
    .article-paragraph-body p {
        margin-bottom: 18px;
    }


    /* DYNAMIC BLOCK */

    .article-content-block {
        margin-bottom: 32px;
    }

    .article-paragraph-headline {
        margin-bottom: 10px;

        font-size: 22px;
        line-height: 1.35;
    }


    /* BLOCK IMAGE */

    .article-block-image {
        margin-top: 17px;
    }

    .article-block-image img {
        max-height: none;

        border-radius: 6px;
    }


    /* GALLERY */

    .article-gallery {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .article-gallery img {
        aspect-ratio: auto;

        max-height: 450px;

        object-fit: contain;
    }


    /* VIDEO */

    .video-frame,
    .article-video {
        margin: 22px 0;
    }


    /* PREVIOUS / NEXT */

    .article-nav {
        display: block;

        margin-top: 28px;
    }

    .article-nav a {
        display: flex;

        width: 100%;
        max-width: none;

        margin-top: 15px;
        padding: 13px 0;
    }

    .article-nav a:last-child {
        margin-left: 0;

        text-align: left;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .article-shell {
        width: calc(100% - 20px);
    }

    .article-main-headline {
        font-size: 26px;
    }

    .article-paragraph-headline {
        font-size: 20px;
    }

}