/* ============================================================
   wa-category-blog.css — Category "blog" layout, ALL categories
   (see templates/cassiopeia_extended/html/com_content/category/blog.php,
   which every category on the site routes through -- there is no more
   per-category gate: every listing page uses this same block system so
   the site reads as one consistent design, not Journal Claude plus bare
   Cassiopeia defaults everywhere else).

   Inherits WikiAURA's sitewide "Modernist" identity via the site's own
   custom properties (--body-bg, --link-color, --btnbg, --h1size, etc,
   set globally in index.php) rather than hardcoding colors here. Flat
   surfaces, 2px hairline borders, no radius (forced sitewide by
   wikiaura-theme.css's `* { border-radius: 0 !important }` anyway), no
   gradients, no lift-on-hover -- the system's "sobriete des blocs" rule.
   ============================================================ */

/* --cat-color, quand present, vient d'un style inline pose par blog.php
   (voir templates/cassiopeia_extended/php/backup-colors.php) -- utilise
   pour les sous-categories "Backup" afin de reconnaitre au coup d'oeil
   quel depot va avec quelles donnees. Absent partout ailleurs : tout
   retombe sur l'accent violet du site, comportement inchange. */
.wa-blog {
    --wa-blog-surface: var(--wa-surface, color-mix(in srgb, var(--body-color) 6%, var(--body-bg)));
    --wa-blog-surface-hover: color-mix(in srgb, var(--body-color) 4%, transparent);
    --wa-blog-border: var(--wa-divider, color-mix(in srgb, var(--body-color) 22%, transparent));
    --wa-blog-border-hover: var(--cat-color, var(--btnbg));
    --wa-blog-accent: var(--cat-color, var(--link-color));
    --wa-blog-text-secondary: var(--wa-text-secondary, color-mix(in srgb, var(--body-color) 65%, transparent));
}

.wa-blog__masthead {
    margin-bottom: 2rem;
}

.wa-blog__title {
    font-size: var(--h1size, 2.2rem);
    color: var(--body-color);
    margin: 0 0 0.4rem;
}

.wa-blog__desc {
    color: var(--wa-blog-text-secondary);
    max-width: 62ch;
}

/* ---------- Entree en vedette ---------- */

.wa-blog__featured {
    margin-bottom: 2.75rem;
}

.wa-blog__featured-link {
    display: block;
    position: relative;
    padding: 2.25rem 2.5rem 2rem 2.25rem;
    background: var(--wa-blog-surface);
    border: 2px solid var(--wa-blog-border);
    text-decoration: none;
    color: inherit;
    transition: border-color 160ms ease, background 160ms ease;
}

.wa-blog__featured-link:hover,
.wa-blog__featured-link:focus-visible {
    border-color: var(--wa-blog-border-hover);
    background: var(--wa-blog-surface-hover);
}

.wa-blog__featured-link:focus-visible {
    outline: 2px solid var(--btnbg);
    outline-offset: 3px;
}

.wa-blog__kicker {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}

/* The one spot cyan is spent: marks the single featured item as distinct
   from the violet used for every ordinary card kicker/link below. A
   category color (Backup subcategories) takes priority over the cyan
   special-case -- the category's own identity wins on its own page. */
.wa-blog__featured .wa-blog__kicker {
    color: var(--cat-color, var(--wa-cyan, var(--link-color)));
}

.wa-blog__featured-title {
    font-size: clamp(1.5rem, 1.15rem + 1.4vw, var(--h1size, 2.2rem));
    color: var(--body-color);
    margin: 0 0 0.85rem;
}

.wa-blog__featured-excerpt {
    color: var(--wa-blog-text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 68ch;
    margin: 0 0 1.25rem;
}

.wa-blog__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--wa-blog-accent);
}

.wa-blog__cta span {
    transition: transform 180ms ease;
    display: inline-block;
}

.wa-blog__featured-link:hover .wa-blog__cta span,
.wa-blog__featured-link:focus-visible .wa-blog__cta span {
    transform: translateX(4px);
}

/* ---------- Grille 2 colonnes ---------- */

.wa-blog__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.wa-blog__card {
    height: 100%;
}

.wa-blog__card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.35rem 1.5rem;
    background: var(--wa-blog-surface);
    border: 2px solid var(--wa-blog-border);
    text-decoration: none;
    color: inherit;
    transition: border-color 160ms ease, background 160ms ease;
}

.wa-blog__card-link:hover,
.wa-blog__card-link:focus-visible {
    border-color: var(--wa-blog-border-hover);
    background: var(--wa-blog-surface-hover);
}

.wa-blog__card-link:focus-visible {
    outline: 2px solid var(--btnbg);
    outline-offset: 3px;
}

.wa-blog__card-kicker {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wa-blog-accent);
    margin-bottom: 0.55rem;
}

.wa-blog__card-title {
    font-size: 1.05rem;
    line-height: 1.28;
    letter-spacing: -0.01em;
    color: var(--body-color);
    margin: 0 0 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wa-blog__card-excerpt {
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--wa-blog-text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Responsive ---------- */

@media (max-width: 760px) {
    .wa-blog__grid {
        grid-template-columns: 1fr;
    }

    .wa-blog__featured-link {
        padding: 1.5rem 1.5rem 1.35rem 1.25rem;
    }
}

@media (max-width: 420px) {
    .wa-blog__title {
        font-size: clamp(1.5rem, 1.2rem + 1.5vw, var(--h1size, 2.2rem));
    }
}

/* ---------- Liste des sous-categories (page "Backup") ----------
   Pastille de couleur devant chaque depot (voir default_children.php) --
   la seule addition sur ce template coeur, tout le reste (badges,
   description) garde le style Cassiopeia standard. */

.wa-blog-child--dot .item-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.wa-blog-child__dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    /* !important : wikiaura-theme.css force border-radius:0 !important
       partout (systeme "sobre", pas d'arrondi) -- exception deliberee,
       un rond est le langage visuel le plus lisible pour une pastille de
       couleur/statut, pas un carre. */
    border-radius: 50% !important;
}