/* ---:::::::::::::::::::::::::::::::::::: OSCAR-GENERATED ARTICLES ::::::::::::::::::::::::::::::::::::---
 * Scoped to .oscar-article — the wrapper class the Oscar IA export always
 * uses (see the <!-- wp:group {"className":"oscar-article"} --> block).
 * These rules live here instead of in the article's own inline <style>
 * block so every future Oscar article gets them automatically, with zero
 * manual re-editing per post.
 */

/*
 * H2 takes the current H3 size, H3 takes the current H4 size — measured
 * live in this exact context (.oscar-article h2/h3, and a temporary h4
 * injected into .oscar-article) rather than assumed, since Astra's own
 * single-post typography doesn't match the theme's general heading sizes.
 * Font-weight is left as-is (both stay at the theme's h1-h3 800 weight) —
 * only size/line-height were asked for, and carrying line-height along
 * keeps the smaller text from floating in an oversized line-box.
 */
.oscar-article h2 {
    /* !important required: media-queries.css has h2{font-size:46px
       !important} from 576px up, which otherwise wins regardless of this
       selector's higher specificity — !important always beats a non-
       !important declaration no matter the specificity gap. */
    font-size: 30px !important;
    line-height: 35px;
}
.oscar-article h3 {
    /* No competing !important rule for h3 anywhere in the theme, so this
       wins on specificity alone (same as .astra-child h3 in
       foundations.css, but this file loads after it) — no !important
       needed, unlike h2 above. */
    font-size: 20px;
    line-height: 24px;
}

/* Oscar's own inline HTML hardcodes style="border-radius:8px" directly on
   every <img> tag — an inline style, which beats an ordinary stylesheet
   rule regardless of specificity. !important is the only way to override
   it without editing every article's markup by hand. */
.oscar-article img {
    border-radius: 20px !important;
}

/* Table responsiveness/overrides are already handled — see
   ".single-post .entry-content table" and its neighbors in this theme's
   root style.css, which already wraps .wp-block-table in a horizontal-
   scroll container and beats Oscar's own !important th/td rules. No
   duplicate rule needed here (see below for why h2/h3 do need one). */


/* ---:::::::::::::::::::::::::::::::::::: ARTICLE PRODUCT CTA ::::::::::::::::::::::::::::::::::::---
 * Appended automatically at the end of every post's content (see the
 * the_content filter in functions.php) — no manual insertion per
 * article. Uses the same "Produit associé" post meta already set by
 * editors for the homepage "Dernier arrivé" section (nld_get_article_
 * linked_product_meta_box_html() in functions.php), so there is nothing
 * extra to fill in.
 */
/* Wraps one card per linked product (nld_get_article_product_cta_html() in
   functions.php) — a grid rather than a fixed row, since an article can
   have anywhere from one product (the common case, looks identical to a
   single centered/full-width card) to several. auto-fill + minmax lets
   cards wrap onto new rows on their own instead of shrinking indefinitely. */
.nld-article-product-cta-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 40px;
}
.nld-article-product-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background-color: var(--lighter-grey);
    border-radius: 20px;
}
.nld-article-product-cta-thumb {
    width: 96px;
    height: 96px;
    flex: none;
    object-fit: cover;
    border-radius: 16px;
    background-color: var(--white);
}
.nld-article-product-cta--placeholder .nld-article-product-cta-thumb {
    object-fit: contain;
    padding: 16px;
}
.nld-article-product-cta-body {
    display: grid;
    row-gap: 8px;
}
.nld-article-product-cta-eyebrow {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--nld-green);
}
.nld-article-product-cta-name {
    margin: 0;
    font-weight: 700;
    color: var(--black);
}
.nld-article-product-cta .cta-button-primo-1 {
    width: fit-content;
    padding: 12px 24px;
}
/* Both this theme's own .single-post .entry-content a{color:var(--nld-green)}
   (style.css) and Astra's .ast-single-post .entry-content a{text-decoration:
   underline} beat the button's own white/no-underline styling here — both
   are (0,2,1) in specificity, one class-count above the button's own
   .astra-child .cta-button-primo-1 (0,2,0). Three classes (0,3,0) clears
   that without !important. */
.nld-article-product-cta .cta-button-primo-1.shade-dark {
    color: var(--white);
    text-decoration: none;
}
/* The base-state override above doesn't carry over to :hover — the
   entry-content link's OWN :hover rule (.single-post .entry-content
   a:hover{color:var(--nld-green);text-decoration:underline}) is (0,3,1),
   which still beats it. One more class (0,4,0) clears that. This also
   restores the button's own intended hover color (black text on white
   background, set by .astra-child .cta-button-primo-1:hover elsewhere)
   over the green the entry-content rule would otherwise impose. */
.nld-article-product-cta .cta-button-primo-1.shade-dark:hover {
    color: var(--black);
    text-decoration: none;
}
/* Bootstrap's px-4 py-3 equivalent for Astra's auto-generated prev/next
   post navigation — CSS instead of editing the markup, since this <nav>
   is generated by Astra core (get_the_post_navigation()), not a theme
   template this child theme controls. .navigation.post-navigation
   (0,2,0) beats every .post-navigation{padding...} variant in Astra's
   own CSS (all 0,1,0), no !important needed. */
.single-post .navigation.post-navigation {
    padding: 1rem 1.5rem;
}
@media (max-width: 575.98px) {
    .nld-article-product-cta {
        flex-direction: column;
        text-align: center;
    }
    .nld-article-product-cta-body {
        justify-items: center;
    }
}