/*
 * Manoir — blog (actualites) styles.
 *
 * Scope: archive.php, category.php, single.php and their partials
 * (blog-hero, card-actualite, blog-grid). Enqueued only on blog views.
 *
 * Every design token is consumed as var(--token, fallback) with the
 * measured value from the source site as fallback, so these templates
 * render faithfully even before/without the global stylesheet.
 *
 * Structure:
 *   1. Hero band (navy) + curved divider + diamond ornament
 *   2. Archive grid + cards
 *   3. Pagination + empty state + shared outline button
 *   4. Single article (featured image, entry content, footer)
 *   5. Related articles band
 *   6. Motion (scroll-in fade, reduced-motion safe)
 */

/* ---------------------------------------------------------------- */
/* 1. Hero band                                                     */
/* ---------------------------------------------------------------- */

.blog-hero {
    position:    relative;
    background:  var(--color-ink, #2c3a45);
    color:       var(--color-on-dark, #fbf8f6);
    text-align:  center;
    /* Room for the fixed transparent header (~89px) overlaying the band. */
    padding:     calc(var(--header-h, 89px) + 3.5rem) 1.5rem 7.5rem;
    overflow:    hidden;
}

.blog-hero__inner {
    max-width: var(--content-max, 1432px);
    margin:    0 auto;
}

.blog-hero__title {
    font-family:    var(--font-heading, "Cormorant Garamond", "Playfair Display", Georgia, serif);
    font-weight:    var(--heading-weight, 200);
    font-size:      var(--text-section-title, clamp(2rem, 3.7vw, 3.35rem));
    line-height:    1.1;
    letter-spacing: var(--tracking-heading, -0.02em);
    text-wrap:      balance;
    margin:         0 auto;
    max-width:      22ch;
}

/* Mega "ACTUS" variant — 134px-class display title on the archive. */
.blog-hero__title--mega {
    font-size:   var(--text-mega, clamp(4rem, 9.3vw, 8.4rem));
    line-height: 1;
    max-width:   none;
}

.blog-hero__subtitle {
    font-family:    var(--font-heading, "Cormorant Garamond", "Playfair Display", Georgia, serif);
    font-weight:    var(--heading-weight, 200);
    font-size:      clamp(1.35rem, 2.8vw, 2.5rem);
    line-height:    1.1;
    letter-spacing: var(--tracking-heading, -0.02em);
    margin:         0.75rem 0 0;
}

/* Meta row above the title on single articles: badge + date. */
.blog-hero__meta-top { margin-bottom: 1.4rem; }

.single-actualite__meta {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-wrap:       wrap;
    gap:             1rem;
}

.single-actualite__badge {
    font-family:    var(--font-button, "Lexend", system-ui, sans-serif);
    font-variant:   small-caps;
    font-size:      0.875rem;
    font-weight:    300;
    letter-spacing: 0.06em;
    color:          var(--color-on-dark, #fbf8f6);
    background:     var(--color-accent, #a3af97);
    border-radius:  var(--btn-radius-pill, 300px);
    padding:        0.3rem 1rem;
    text-decoration: none;
    transition:     opacity 0.25s ease;
}

.single-actualite__badge:hover,
.single-actualite__badge:focus-visible { opacity: 0.8; }

.single-actualite__date {
    font-family: var(--font-meta, "Arimo", system-ui, sans-serif);
    font-size:   0.875rem;
    font-weight: 400;
    opacity:     0.85;
}

/* Signature ornament: thin line — solid diamond — thin line, with small
   diamond endpoints on the outer tips of each line. */
.manoir-ornament {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             1.1rem;
    margin:          2.4rem auto 0;
    max-width:       420px;
    color:           currentColor;
}

.manoir-ornament__line {
    position:   relative;
    flex:       1 1 auto;
    height:     1px;
    background: currentColor;
    opacity:    0.9;
}

/* Small diamond endpoints at the outer end of each line. */
.manoir-ornament__line::before {
    content:    "";
    position:   absolute;
    top:        50%;
    width:      6px;
    height:     6px;
    background: currentColor;
    transform:  translateY(-50%) rotate(45deg);
}

.manoir-ornament__line--left::before  { left:  0; }
.manoir-ornament__line--right::before { right: 0; }

/* Central solid diamond: rotated square, ~24px across (44px mobile-large,
   per source where the ornament grows relatively bigger on small screens). */
.manoir-ornament__diamond {
    flex:       0 0 auto;
    width:      17px;
    height:     17px;
    background: currentColor;
    transform:  rotate(45deg);
}

@media (max-width: 767px) {
    .manoir-ornament__diamond { width: 24px; height: 24px; }
}

/* On-light variant used in the single-article footer. */
.manoir-ornament--on-light { color: var(--color-accent, #a3af97); }

/* Convex curved bottom edge sweeping the navy band into the cream page. */
.blog-hero__curve {
    position: absolute;
    left:     0;
    right:    0;
    bottom:   -1px; /* Avoid a sub-pixel navy seam under the arch. */
    width:    100%;
    height:   clamp(36px, 6vw, 90px);
    display:  block;
    pointer-events: none;
}

/* ---------------------------------------------------------------- */
/* 2. Archive grid + cards                                          */
/* ---------------------------------------------------------------- */

.blog-archive { background: var(--color-bg, #fbf8f6); }

.blog-archive__inner {
    max-width: var(--content-max, 1432px);
    margin:    0 auto;
    padding:   clamp(3rem, 6.6vw, 6rem) clamp(1.25rem, 4vw, 4rem);
}

.blog-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   clamp(2.5rem, 4vw, 3.5rem) var(--grid-gap, 30px);
}

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

@media (max-width: 767px) {
    .blog-grid { grid-template-columns: 1fr; }
}

/* Card: borderless, flat, sharp corners, no shadow — image + stacked text. */
.actualite-card { min-width: 0; }

.actualite-card__link {
    display:         block;
    color:           var(--color-ink, #2c3a45);
    text-decoration: none;
}

.actualite-card__media {
    /* Landscape ~4:3 thumb slot like the live 3-up blog grid. */
    aspect-ratio: 4 / 3;
    overflow:     hidden;
    background:   var(--color-accent-wash, rgba(163, 175, 151, 0.49));
}

.actualite-card__image {
    display:       block;
    width:         100%;
    height:        100%;
    object-fit:    cover;
    border-radius: var(--img-radius, 0); /* Images are ALWAYS square-cornered. */
}

.actualite-card__body { padding-top: 1.1rem; }

.actualite-card__title {
    font-family:    var(--font-blog, "Familjen Grotesk", system-ui, sans-serif);
    font-size:      1.125rem; /* 18px source measurement */
    font-weight:    600;
    line-height:    1.2;
    letter-spacing: -0.02em;
    margin:         0 0 0.45rem;
    transition:     color 0.25s ease;
}

.actualite-card__link:hover .actualite-card__title,
.actualite-card__link:focus-visible .actualite-card__title {
    color: var(--color-accent-2, #917a6e);
}

.actualite-card__meta {
    font-family:    var(--font-meta, "Arimo", system-ui, sans-serif);
    font-size:      0.875rem; /* 14px source measurement */
    color:          var(--color-ink, #2c3a45);
    opacity:        0.7;
    margin:         0 0 0.7rem;
    /* Thin underline rule below the meta line, as on the live listing. */
    padding-bottom: 0.7rem;
    border-bottom:  1px solid rgba(44, 58, 69, 0.18);
}

.actualite-card__excerpt {
    font-family: var(--font-body, "Lexend", system-ui, sans-serif);
    font-weight: var(--body-weight, 300);
    font-size:   0.85rem;
    line-height: 1.55;
    margin:      0 0 0.8rem;
}

.actualite-card__more {
    display:        inline-flex;
    align-items:    center;
    gap:            0.4rem;
    font-family:    var(--font-button, "Lexend", system-ui, sans-serif);
    font-variant:   small-caps;
    font-size:      0.875rem;
    font-weight:    300;
    letter-spacing: 0.05em;
    color:          var(--color-accent-2, #917a6e);
}

.actualite-card__more svg { transition: transform 0.25s ease; }

.actualite-card__link:hover .actualite-card__more svg,
.actualite-card__link:focus-visible .actualite-card__more svg {
    transform: translateX(4px);
}

/* ---------------------------------------------------------------- */
/* 3. Pagination, empty state, shared outline button                */
/* ---------------------------------------------------------------- */

.blog-archive .navigation.pagination {
    margin: clamp(3rem, 6vw, 5rem) auto 0;
}

.blog-archive .nav-links {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-wrap:       wrap;
    gap:             0.6rem;
}

.blog-archive .page-numbers {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.45rem;
    min-width:       2.6rem;
    min-height:      2.6rem;
    padding:         0.35rem 0.9rem;
    font-family:     var(--font-button, "Lexend", system-ui, sans-serif);
    font-variant:    small-caps;
    font-size:       var(--text-button, 0.875rem);
    font-weight:     300;
    color:           var(--color-ink, #2c3a45);
    border:          var(--btn-border, 0.8px solid) currentColor;
    border-radius:   var(--btn-radius-pill, 300px);
    background:      transparent;
    text-decoration: none;
    transition:      background-color 0.25s ease, color 0.25s ease;
}

.blog-archive .page-numbers.current {
    background:   var(--color-accent, #a3af97);
    border-color: var(--color-accent, #a3af97);
    color:        var(--color-on-dark, #fbf8f6);
}

.blog-archive a.page-numbers:hover,
.blog-archive a.page-numbers:focus-visible {
    background:   var(--color-ink, #2c3a45);
    border-color: var(--color-ink, #2c3a45);
    color:        var(--color-on-dark, #fbf8f6);
}

.blog-archive .page-numbers.dots { border: none; min-width: auto; }

.blog-empty {
    text-align: center;
    padding:    clamp(2rem, 6vw, 5rem) 1rem;
}

.blog-empty__text {
    font-family: var(--font-body, "Lexend", system-ui, sans-serif);
    font-weight: var(--body-weight, 300);
    font-size:   1rem;
    line-height: 1.6;
    margin:      0 0 1.8rem;
    color:       var(--color-ink, #2c3a45);
}

/* Outline pill button — local definition guarded so the global stylesheet's
   version (same class contract) wins if both are loaded. */
.blog-archive .manoir-button--outline,
.single-actualite .manoir-button--outline {
    display:         inline-flex;
    align-items:     center;
    gap:             0.55rem;
    padding:         var(--btn-pad, 14px 18px);
    font-family:     var(--font-button, "Lexend", system-ui, sans-serif);
    font-variant:    small-caps;
    font-size:       var(--text-button, 0.875rem);
    font-weight:     300;
    letter-spacing:  0.04em;
    color:           var(--color-ink, #2c3a45);
    background:      transparent;
    border:          var(--btn-border, 0.8px solid) currentColor;
    border-radius:   var(--btn-radius-pill, 300px);
    text-decoration: none;
    transition:      background-color 0.25s ease, color 0.25s ease;
}

.blog-archive .manoir-button--outline:hover,
.blog-archive .manoir-button--outline:focus-visible,
.single-actualite .manoir-button--outline:hover,
.single-actualite .manoir-button--outline:focus-visible {
    background: var(--color-ink, #2c3a45);
    color:      var(--color-on-dark, #fbf8f6);
}

/* ---------------------------------------------------------------- */
/* 4. Single article                                                */
/* ---------------------------------------------------------------- */

.single-actualite { background: var(--color-bg, #fbf8f6); }

.single-actualite__article {
    max-width: 860px;
    margin:    0 auto;
    padding:   clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(3rem, 6vw, 5rem);
}

.single-actualite__featured {
    margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.single-actualite__featured-image {
    display:       block;
    width:         100%;
    height:        auto;
    border-radius: var(--img-radius, 0);
}

/* Entry content typography — Lexend-style body over cream, serif uppercase
   subheadings, taupe links, square-cornered media. */
.single-actualite__content {
    font-family: var(--font-body, "Lexend", system-ui, sans-serif);
    font-weight: var(--body-weight, 300);
    font-size:   1rem;   /* Larger than the 12.3px source body — long-form readability. */
    line-height: 1.7;
    color:       var(--color-ink, #2c3a45);
}

.single-actualite__content > * + * { margin-top: 1.25em; }

.single-actualite__content h2,
.single-actualite__content h3 {
    font-family:    var(--font-heading, "Cormorant Garamond", "Playfair Display", Georgia, serif);
    font-weight:    var(--heading-weight, 200);
    letter-spacing: var(--tracking-heading, -0.02em);
    line-height:    1.15;
    margin-top:     1.8em;
}

.single-actualite__content h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.single-actualite__content h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); color: var(--color-accent-2, #917a6e); }

.single-actualite__content a {
    color:                      var(--color-accent-2, #917a6e);
    text-decoration:            underline;
    text-underline-offset:      3px;
    text-decoration-thickness:  1px;
}

.single-actualite__content a:hover,
.single-actualite__content a:focus-visible { color: var(--color-ink, #2c3a45); }

.single-actualite__content img {
    max-width:     100%;
    height:        auto;
    border-radius: var(--img-radius, 0);
}

/* Vertical rhythm for content images: ported bodies stack bare figures with
   no margins, so give each standalone figure breathing room. Figures inside
   a reconstructed .gallery grid are spaced by the grid gap instead. */
.single-actualite__content figure { margin: 1.75rem 0; }

.single-actualite__content .gallery figure { margin: 0; }

.single-actualite__content figcaption {
    font-size:  0.8rem;
    opacity:    0.7;
    margin-top: 0.5rem;
    text-align: center;
}

.single-actualite__content blockquote {
    margin:      1.8em 0;
    padding:     0.25em 0 0.25em 1.4em;
    border-left: 2px solid var(--color-accent, #a3af97);
    font-style:  italic;
}

.single-actualite__content ul,
.single-actualite__content ol { padding-left: 1.4em; }

.single-actualite__content li + li { margin-top: 0.4em; }

/* WP alignment/gallery classes kept honest inside the narrow column. */
.single-actualite__content .alignwide,
.single-actualite__content .alignfull { width: 100%; }

.single-actualite__content .wp-block-gallery { gap: var(--grid-gap, 30px); }

.single-actualite__pages {
    margin-top:  2rem;
    font-family: var(--font-meta, "Arimo", system-ui, sans-serif);
    font-size:   0.875rem;
}

.single-actualite__pages a { margin-left: 0.5rem; }

.single-actualite__footer {
    text-align: center;
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.single-actualite__footer .manoir-ornament { margin-bottom: 2.2rem; }

/* ---------------------------------------------------------------- */
/* 5. Related articles band                                         */
/* ---------------------------------------------------------------- */

.related-actualites {
    /* Soft sage wash band, like the site's "dark-bold" sections. */
    background: var(--color-accent-wash, rgba(163, 175, 151, 0.49));
}

.related-actualites__inner {
    max-width: var(--content-max, 1432px);
    margin:    0 auto;
    padding:   clamp(3rem, 6.6vw, 6rem) clamp(1.25rem, 4vw, 4rem);
}

.related-actualites__title {
    font-family:    var(--font-heading, "Cormorant Garamond", "Playfair Display", Georgia, serif);
    font-weight:    var(--heading-weight, 200);
    font-size:      var(--text-section-title, clamp(2rem, 3.7vw, 3.35rem));
    line-height:    1.05;
    letter-spacing: var(--tracking-heading, -0.02em);
    text-align:     center;
    color:          var(--color-ink, #2c3a45);
    margin:         0 0 clamp(2rem, 4vw, 3.5rem);
}

/* ---------------------------------------------------------------- */
/* 6. Motion — subtle scroll-in fade on cards, reduced-motion safe. */
/* ---------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .actualite-card {
            /* Pure-CSS scroll-driven entrance (no JS): fade + slight rise,
               echoing Squarespace's 0.6s fade/slide entrances. */
            animation:          manoir-card-in 0.6s ease both;
            animation-timeline: view();
            animation-range:    entry 0% entry 40%;
        }
    }
}

@keyframes manoir-card-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}