/* ==========================================================================
   Beiruter PLUS
   Loaded after index.css so these rules win without !important.
   Everything here is scoped to .plus_page or .plus_* so no existing page moves.
   ========================================================================== */

/* On :root, not .plus_page: the PLUS badge is reused on the home section carousels,
   where the body does not carry the plus_page class. */
:root {
    --plus-ink: #ffffff;
    --plus-muted: #a8a8a8;
    --plus-accent: #034668;
    --plus-rule: #e3e3e3;
    --plus-black: #000000;
}

/* Per-publisher accent for the section labels on cards. */
.plus_publisher[data-category="56"] { --plus-accent: #0084c6; }  /* The Guardian */
.plus_publisher[data-category="57"] { --plus-accent: #8c1515; }  /* Stanford Political Review */


/* --------------------------------------------------------------------------
   Page intro: "Plus" + strapline
   -------------------------------------------------------------------------- */

.plus_page .plus_intro {
    background: #000;
    margin-bottom: 0;
    padding-bottom: 24px;
}
.plus_page .pagetitle:before {
    display: none;
}
.plus_cards .subtitle {
    display: none;
}
.plus_page .plus_intro .top {
    text-align: center;
    padding-top: 30px;
}

.plus_page .plus_intro .pagetitle {
    color: var(--plus-accent);
    margin-bottom: 10px;
}

.plus_page .pagesubtitle {
    font-family: "Roboto", sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6b6b6b;
}
.plus_cards .subtitle {
    display: none !important;
}
.plus_page .itemslider .caption, .plus_page .morearticles .item .title {
    display: block;
    height: unset;
}
/* --------------------------------------------------------------------------
   Publisher block heading: logo + name on black
   -------------------------------------------------------------------------- */
.plus_publisher_head {
    background: var(--plus-black);
    padding: 34px 0 18px;
}

.plus_publisher_head .top {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: start;
}

.plus_publisher_head .publisher_logo img {
    display: block;
    width: auto;
    height: 46px;
    max-width: 140px;
    object-fit: contain;
}

.plus_publisher_head .publisher_name {
    font-family: "DM Serif Text", serif;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 400;
    color: var(--plus-ink);
    margin: 0;
}


/* --------------------------------------------------------------------------
   Hero article
   -------------------------------------------------------------------------- */

.plus_hero {
    background: var(--plus-black);
    padding-bottom: 46px;
}

.plus_hero .item {
    display: block;
    text-decoration: none;
}

.plus_hero .grp {
    display: flex;
    align-items: stretch;
    gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.plus_hero .grp > li {
    flex: 1 1 50%;
    min-width: 0;
}

.plus_hero .pic {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #161616;
}

.plus_hero .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.plus_hero .data {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    text-align: start;
}

/* The global rule hides .subtitle; PLUS needs it for the section label. */
.plus_hero .subtitle,
.plus_cards .subtitle {
    display: block;
}

.plus_hero .subtitle {
    font-family: "Roboto", sans-serif;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--plus-muted);
    margin-bottom: 14px;
}

.plus_hero .subtitle .date:before {
    content: "·";
    margin: 0 8px;
}

.plus_hero .title {
    font-family: "DM Serif Text", serif;
    font-size: 40px;
    line-height: 1.16;
    font-weight: 400;
    color: var(--plus-ink);
    margin: 0 0 16px;
}

.plus_hero .text {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--plus-muted);
    margin-bottom: 20px;
}

.plus_hero .text p:last-child {
    margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   Card grid: two rows of four
   -------------------------------------------------------------------------- */

.plus_cards {
    background: #fff;
    padding: 46px 0 10px;
}

.plus_cards .list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.plus_cards .list > li {
    width: auto;
    margin: 0;
    padding: 0;
}

.plus_cards .item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.plus_cards .item > a {
    text-decoration: none;
    display: block;
}

.plus_cards .pic {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f1f1f1;
    margin-bottom: 14px;
}

.plus_cards .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.plus_cards .subtitle {
    font-family: "Roboto", sans-serif;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--plus-accent);
    margin-bottom: 8px;
}

.plus_cards .title {
    font-family: "DM Serif Text", serif;
    font-size: 21px;
    line-height: 1.25;
    font-weight: 400;
    color: #000;
    margin: 0 0 10px;
}

.plus_cards .text {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #4a4a4a;
    margin-bottom: 12px;
}

.plus_cards .text p:last-child {
    margin-bottom: 0;
}

/* Pin the badge to the bottom so cards of unequal length still line up. */
.plus_cards .item .plus_badge {
    margin-top: auto;
    padding-top: 4px;
}


/* --------------------------------------------------------------------------
   PLUS badge - also used on the home section carousels
   -------------------------------------------------------------------------- */

.plus_badge {
    display: flex;
    align-items: center;
    gap: 8px;
}

.plus_badge .tag {
    display: inline-block;
    background: var(--plus-black);
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 1;
    padding: 5px 7px;
}
.plus_publisher {
    margin-bottom: 40px;
}
.plus_badge .publisher {
    font-family: "Roboto", sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #000;
}

.plus_badge .publisher_logo img {
    display: block;
    height: 16px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

/* On the black hero the badge text and wordmark have to invert. */
.plus_hero .plus_badge .publisher {
    color: #fff;
}

.plus_hero .plus_badge .tag {
    background: #fff;
    color: #000;
}

.plus_hero .plus_badge .publisher_logo img {
    filter: invert(1);
}


/* --------------------------------------------------------------------------
   "More from <publisher>"
   -------------------------------------------------------------------------- */

.plus_cards .view_more_btn {
    justify-content: flex-start;
    margin: 34px 0 0;
    padding-bottom: 46px;
}

.plus_cards .view_more_btn .custbtm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
    background: transparent;
    color: #000;
    font-family: "Roboto", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0 26px;
    height: 44px;
    transition: background .2s ease, color .2s ease;
}

.plus_cards .view_more_btn .custbtm:hover {
    background: #000;
    color: #fff;
}

.plus_cards .view_more_btn .custbtm.loading {
    opacity: .55;
    pointer-events: none;
}


/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .plus_cards .list {
        grid-template-columns: repeat(2, 1fr);
    }

    .plus_publisher_head .publisher_name,
    .plus_hero .title {
        font-size: 32px;
    }
}


/* --------------------------------------------------------------------------
   Mobile - matches the 767px breakpoint used across the site
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .plus_page .plus_intro .top {
        padding-top: 18px;
    }

    .plus_page .pagesubtitle {
        font-size: 11px;
        letter-spacing: .1em;
    }

    .plus_publisher_head {
        padding: 24px 0 14px;
    }

    .plus_publisher_head .top {
        gap: 12px;
    }

    .plus_publisher_head .publisher_logo img {
        height: 34px;
    }

    .plus_publisher_head .publisher_name {
        font-size: 26px;
    }

    .plus_hero {
        padding-bottom: 30px;
    }

    .plus_hero .grp {
        display: block;
    }

    .plus_hero .grp > li + li {
        padding-top: 17px;
    }

    .plus_hero .title {
        font-size: 26px;
    }

    .plus_hero .text {
        font-size: 15px;
    }

    .plus_cards {
        padding-top: 30px;
    }

    .plus_cards .list {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .plus_cards .title {
        font-size: 20px;
    }

    .plus_cards .view_more_btn {
        justify-content: center;
        padding-bottom: 34px;
    }

    .plus_cards .view_more_btn .custbtm {
        width: 100%;
    }
}


/* --------------------------------------------------------------------------
   Header partner logos (Guardian + SPR), linking to /plus

   Hidden by default. Add the "show" class to reveal them:
       <a href="/plus" class="partner_logos show"> ... </a>
   or from script:  document.querySelector('.partner_logos').classList.add('show');
   -------------------------------------------------------------------------- */

.partner_logos {
    display: none;
    align-items: center;
    gap: 10px;
    margin-inline-start: 18px;
    text-decoration: none;
    line-height: 0;
    padding-left: 290px;
    position: absolute;
    margin-top: 21px;
}

.partner_logos.show {
    display: inline-flex;

}

/* guardian_logo.png is dark artwork on transparency. brightness(0) flattens it to
   pure black first, so invert(1) gives a clean white regardless of the source tone -
   invert(1) alone would only flip whatever colours are already there. */
.partner_logos .partner_guardian {
    height: 22px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
}

/* SPR-4.jpeg is already a red tile with white lettering, so it is used as delivered.
   Being a JPEG it cannot be transparent - it reads as a solid square, which is what
   the header design shows. */
.partner_logos .partner_spr {
    height: 22px;
    width: auto;
    display: block;
}
.subscribe_btn_burger {
    display: none !important;
}
.plus_publisher .itemslider .text,
.plus_publisher .morearticles .item .text {
    height: unset;
    max-height: 113px;
}
@media (max-width: 767px) {
    .partner_logos {
        gap: 7px;
        padding-left: 180px;
    }
    .plus_publisher .itemslider .text,
    .plus_publisher .morearticles .item .text {
        max-height: 92px;
    }
    .partner_logos .partner_guardian,
    .partner_logos .partner_spr {
        height: 16px;
    }

    header:has(.partner_logos.show) .srchbtm {
        margin-right: 0;
    }
    header:has(.partner_logos.show) .options > li:last-child {
        display: none;
    }
    body:has(.partner_logos.show) .subscribe_btn_burger {
        display: flex !important;
        align-items: flex-start;
    }
    .websitemenu .btm {
        height: 44px;
        color: #fff;
        transition: .35s;
        padding: 0 22px;
        font-size: 14px;
        font-weight: 900;
        justify-content: center;
        align-items: center;
        appearance: none;
        height: 29px;
        font-size: 11px;
        background: #000;
        display: flex;
        padding: 0 10px;
    }
    .websitemenu .list > li + li {
        align-items: flex-start;
    }
}




/* --------------------------------------------------------------------------
   Guardian article page: publisher mark above the headline, and the
   "View article on the Guardian" button that closes the body copy.
   -------------------------------------------------------------------------- */

.article_publisher_logo {
    margin-bottom: 18px;
    line-height: 0;
}

.article_publisher_logo img {
    height: 42px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
}

.article_source_link {
    display: flex;
    justify-content: flex-start;
    margin: 26px 0 10px;
}

.article_source_link .custbtm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid currentColor;
    background: transparent;
    font-family: "Roboto", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0 24px;
    height: 44px;
    transition: background .2s ease, color .2s ease;
}

/* The article body sits on black in the PLUS template, so the button follows the
   surrounding text colour rather than assuming either background. */



@media (max-width: 767px) {
    .article_publisher_logo img {
        height: 30px;
    }

    .article_source_link {
        justify-content: center;
    }

    .article_source_link .custbtm {
        width: 100%;
    }

}
.plus_cards .list {
    width: 100%;
}
.plus_hero .subtitle .date:before {
    display: none;
}

.article_source_link .custbtm {
    text-decoration: none !important;
}
.desktop .article_source_link .custbtm:hover {
    background: #000;
}
.desktop .article_source_link .custbtm:hover {
    color: #fff;
}