/*
 * Article template (templates/single.html, main.vr-article): the headline first,
 * then the photo, then a 40rem reading column (about 75 characters a line).
 * Live widgets and embeds keep the full 1000px width.
 *
 * Every rule is scoped under .vr-article. Enqueued and annotated by
 * inc/single-article.php; same tokens as the homepage strip (match-strip.css).
 */

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 400;
    font-display: optional;
    src: url("../assets/fonts/barlow-400.woff2") format("woff2");
}

@font-face {
    font-family: "Barlow";
    font-style: italic;
    font-weight: 400;
    font-display: optional;
    src: url("../assets/fonts/barlow-400-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 600;
    font-display: optional;
    src: url("../assets/fonts/barlow-600.woff2") format("woff2");
}

.vr-article {
    --vra-ink: #002a5d;
    --vra-text: #111;
    --vra-blue: #003f7c;
    --vra-muted: #5a6b82;
    --vra-line: #dde4ee;
    --vra-tint: #f4f7fb;
    --vra-radius: 0.75rem;
    --vra-column: 40rem;
    --vra-wide: 62.5rem;
    --vra-gutter-left: var(--wp--style--root--padding-left, 1rem);
    --vra-gutter-right: var(--wp--style--root--padding-right, 1rem);

    margin: 0;
    padding: 2rem var(--vra-gutter-right) 3rem var(--vra-gutter-left);
}

.vr-article a {
    font-family: inherit; /* WordPress global styles set Poppins on every link */
}

/* ===== Headline ===== */

.vr-article .vr-article__head {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: var(--vra-column);
    margin: 0 auto 1.75rem;
}

.vr-article .vr-article__head > * {
    margin: 0;
}

/* Every category on one line or several, wrapping between two categories only:
   "Top 14" never splits. */
.vr-article .vr-article__kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: 0.25rem;
    font: 600 1rem/1.2 "Barlow Semi Condensed", sans-serif;
}

.vr-article .vr-article__kicker a {
    color: var(--vra-blue);
    text-decoration: none;
    white-space: nowrap;
}

.vr-article .vr-article__kicker a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.vr-article .vr-article__kicker-sep {
    margin: 0 0.4em;
    color: var(--vra-muted);
}

.vr-article .vr-article__title {
    color: var(--vra-ink);
    font-family: Poppins, sans-serif;
    font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.625rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.vr-article .vr-article__date {
    color: var(--vra-muted);
    font: 400 1rem/1.4 "Barlow Semi Condensed", sans-serif;
}

/* ===== Hero image: landscape photos cropped to 16:9, graphics and portraits whole ===== */

.vr-article .vr-article__hero {
    max-width: 60rem;
    margin: 0 auto 1.75rem;
    overflow: hidden;
    border-radius: var(--vra-radius);
    background: var(--vra-tint);
}

.vr-article .vr-article__hero img {
    display: block;
    width: 100%;
    height: auto;
}

.vr-article .vr-article__hero.is-landscape img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center 30%;
}

.vr-article .vr-article__hero.is-upright img {
    width: auto;
    max-width: 100%;
    max-height: min(34rem, 75vh);
    margin: 0 auto;
}

/* ===== Body: text in the reading column, widgets as wide as before ===== */

.vr-article .vr-article__body > * {
    max-width: var(--vra-wide);
    margin-right: auto;
    margin-left: auto;
}

.vr-article .vr-article__body > :is(p, ul, ol, h2, h3, h4, blockquote, hr, .wp-block-quote, .lien-interne-conseil, .bloc-conseille, .vr-share-buttons, .vbr-gps) {
    max-width: var(--vra-column);
}

/* An embed pasted as a raw iframe (a Facebook post comes with width="500") stays
   within the column, centred; Facebook lays the post out again at the narrower
   width. AdSense iframes, inside <ins>, are left alone. */
.vr-article .vr-article__body iframe:not(ins iframe) {
    display: block;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.vr-article .vr-article__body > :is(p, ul, ol, blockquote, .wp-block-quote) {
    color: var(--vra-text);
    font-family: Barlow, "Barlow Semi Condensed", sans-serif;
    font-size: 1.25rem;
    line-height: 1.6;
}

.vr-article .vr-article__body > :is(p, ul, ol) a {
    color: var(--vra-blue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.vr-article .vr-article__body > :is(h2, h3, h4) {
    margin-top: 2.25rem;
    color: var(--vra-ink);
    font-family: Poppins, sans-serif;
    font-weight: 600;
    line-height: 1.25;
}

.vr-article .vr-article__body > h2 {
    font-size: 1.5rem;
}

.vr-article .vr-article__body > :is(h3, h4) {
    font-size: 1.25rem;
}

/* Share row and the Google News button line up with the text instead of centering. */
.vr-article .vr-article__body > .vr-share-buttons {
    justify-content: flex-start;
}

.vr-article .vr-article__body > .vbr-gps {
    text-align: left;
}

/* "À lire aussi", inserted mid-article by articles-similaires.php */
.vr-article .vr-article__body > .lien-interne-conseil {
    box-sizing: border-box; /* padding inside the column, not beyond it */
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--vra-blue);
    border-radius: 0 0.5rem 0.5rem 0;
    background: var(--vra-tint);
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 1.0625rem;
    line-height: 1.45;
}

.vr-article .vr-article__body > .lien-interne-conseil strong {
    color: var(--vra-ink);
}

.vr-article .vr-article__body > .lien-interne-conseil a {
    color: var(--vra-blue);
    font-weight: 600;
    text-decoration: none;
}

/* "Articles les plus populaires", at the end of the article */
.vr-article .vr-article__body > .bloc-conseille {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--vra-line);
}

.vr-article .bloc-conseille-titre {
    margin: 0 0 0.5rem;
    color: var(--vra-ink);
    font-family: Poppins, sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
}

.vr-article .bloc-conseille-item + .bloc-conseille-item {
    border-top: 1px solid var(--vra-line);
}

.vr-article .bloc-conseille-lien {
    display: block;
    padding: 0.625rem 0;
    color: var(--vra-ink);
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.vr-article .bloc-conseille-lien:hover {
    color: var(--vra-blue);
}

.vr-article .bloc-conseille-icone {
    display: none;
}

/* ===== Foot: categories and tags ===== */

.vr-article .vr-article__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: var(--vra-column);
    margin: 2rem auto 0;
}

.vr-article .vr-article__terms {
    display: contents;
}

.vr-article .vr-article__terms a {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--vra-line);
    border-radius: 999px;
    color: var(--vra-blue);
    font: 600 0.9375rem/1.4 "Barlow Semi Condensed", sans-serif;
    text-decoration: none;
}

.vr-article .vr-article__terms a:hover {
    border-color: var(--vra-blue);
}

.vr-article .vr-article__terms .wp-block-post-terms__separator {
    display: none;
}

/* ===== Small screens ===== */

@media (max-width: 600px) {
    .vr-article {
        padding-top: 1.25rem;
    }

    .vr-article .vr-article__head {
        margin-bottom: 1.25rem;
    }

    /* Edge to edge, like the homepage strip */
    .vr-article .vr-article__hero {
        margin-right: calc(-1 * var(--vra-gutter-right));
        margin-left: calc(-1 * var(--vra-gutter-left));
        border-radius: 0;
    }

    .vr-article .vr-article__body > :is(p, ul, ol, blockquote, .wp-block-quote) {
        font-size: 1.125rem;
    }
}