/**
 * layout_as_last_news.css — style éditorial
 * Skin Vertaco — Esprit-Vercors.fr
 *
 * Différenciation volontaire vs simple_agenda :
 *   simple_agenda → calendrier compact, badge date bleu, sans image, cards minimalistes
 *   last_news     → éditorial, images grandes, accent terracotta, serif, hover tint image
 */

:root {
    --ln-color-primary:      #1A5C80; /* $color-primaire-dark */
    --ln-color-primary-mid:  #2B7FAA; /* $color-primaire */
    --ln-color-accent:       #C4683A; /* $color-accent — terracotta */
    --ln-color-accent-dark:  #934D2A; /* $color-accent-dark */
    --ln-color-focus:        #B87400; /* $color-focus */
    --ln-color-border:       #D0D7DE;
    --ln-color-back:         #FFFFFF;
    --ln-color-back-alt:     #EEF4F8;
    --ln-color-text:         #1E1E1E; /* $color-text */
    --ln-color-text-muted:   #595959;
    --ln-shadow-card:        0 2px 8px rgba(0,0,0,.07);
    --ln-shadow-hover:       0 8px 24px rgba(196,104,58,.18);
    --ln-font-title:         "Source Serif 4", Georgia, serif;
    --ln-font-base:          "Source Sans 3", Arial, sans-serif;
}

/* ── En-tête section ──────────────────────────────────────── */
.last-news-container {
    padding: 2rem 0;
}

.last-news-title {
    text-align: center;
    font-family: var(--ln-font-title);
    font-size: clamp(1.375rem, 3vw, 1.875rem);
    color: var(--ln-color-primary);
    margin: 0 0 1.5rem;
}

/* ── Grille : mobile d'abord (1 colonne) ──────────────────────
   Dès que le conteneur est assez large (et non la fenêtre : avec ou sans colonne
   latérale), la une occupe la colonne de gauche sur toute la hauteur et les autres
   cartes s'empilent à droite, avec assez de largeur pour des titres entiers. */
.last-news-container {
    container-type: inline-size;
}

.last-news-container .news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
}

@container (min-width: 40rem) {
    .last-news-container .news-grid {
        grid-template-columns: 3fr 2fr;
    }
    .news-card--featured {
        grid-row: span 2;
    }
}

.news-card--featured .news-card-image {
    height: 260px;
}

.news-card--featured .news-card-title {
    font-size: 1.35rem;
}

.news-card--featured .news-card-intro {
    font-size: 1rem;
    -webkit-line-clamp: 5;
}

/* Sans image : pas de zone vide, un filet terracotta en tête de carte */
.news-card--noimg {
    border-top: 6px solid var(--ln-color-accent);
}

/* La une sans image : bandeau aux couleurs du skin (même dégradé que la liste des randonnées) */
.news-card--featured.news-card--noimg {
    border-top-width: 2px;
}

.news-card--featured.news-card--noimg::before {
    content: '';
    display: block;
    height: 9rem;
    flex-shrink: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120V80L70 30l40 32 60-50 70 58 50-32 110 62v18z' fill='white' fill-opacity='.22'/%3E%3Cpath d='M0 120v-20l90-36 70 34 90-46 80 44 70-22v46z' fill='white' fill-opacity='.14'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--ln-color-primary) 0%, var(--ln-color-primary-mid) 58%, var(--ln-color-accent) 100%);
    background-size: 100% 100%, cover;
}

/* Lien vers toutes les publications */
.ln-all {
    text-align: right;
    margin: 1rem 0 0;
}

.ln-all a {
    font-family: var(--ln-font-base);
    font-weight: 700;
    color: var(--ln-color-primary);
}

/* ── Carte ────────────────────────────────────────────────── */
.news-card {
    display: flex;
    flex-direction: column;
    background: var(--ln-color-back);
    border: 2px solid var(--ln-color-accent);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: var(--ln-shadow-card);
    transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
    height: 100%;
}

.news-card:hover {
    border-color: var(--ln-color-accent-dark);
    box-shadow: var(--ln-shadow-hover);
    transform: translateY(-4px);
}

/* ── Lien accessible (stretched-link) ────────────────────── */
.news-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    font-size: 0;
    color: transparent;
    border-radius: 10px;
    outline-offset: 3px;
}

.news-card-link:focus-visible {
    outline: 3px solid var(--ln-color-focus);
}

/* ── Image ────────────────────────────────────────────────── */
.news-card-image {
    height: 200px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--ln-color-back-alt);
    position: relative;
    overflow: hidden;
    transition: filter .22s ease;
}

/* Tint terracotta au survol — signature éditorial */
.news-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ln-color-accent);
    opacity: 0;
    transition: opacity .22s ease;
}

.news-card:hover .news-card-image::after {
    opacity: .12;
}

/* ── Contenu ──────────────────────────────────────────────── */
.news-card-content {
    padding: 14px 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    overflow: hidden;
}

/* Titre serif, affiché en entier */
.news-card-title {
    font-family: var(--ln-font-title);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ln-color-primary);
    line-height: 1.3;
    margin: 0;
    overflow-wrap: anywhere;
    transition: color .18s ease;
}

.news-card:hover .news-card-title {
    color: var(--ln-color-accent-dark);
}

/* Introduction, clampage 4 lignes */
.news-card-intro {
    font-family: var(--ln-font-base);
    font-size: .875rem;
    color: var(--ln-color-text-muted);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Pied : date de publication, texte sombre sur fond clair (contraste AA) ── */
.news-card-footer {
    border-top: 1px solid var(--ln-color-border);
    color: var(--ln-color-text-muted);
    font-family: var(--ln-font-base);
    font-size: .875rem;
    padding: 8px 16px;
    margin-top: auto;
    flex-shrink: 0;
}

/* ── Article expiré (visible éditeurs/associés seulement) ────── */
.news-card--expired {
    opacity: .6;
    border-color: var(--ln-color-text-muted, #595959);
}

.ln-expired-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: var(--ln-color-text-muted, #595959);
    color: #fff;
    font-family: var(--ln-font-base);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .2em .55em;
    border-radius: 3px;
}