/* =============================================================================
   ttk-blog-list.css — page publique /blog (liste des articles)
   -----------------------------------------------------------------------------
   Page à style unique (charte graphique) : `_Layout` ne charge que
   `ttk-foundation.css`, donc tout le transverse vient de la fondation (carte,
   recherche, badge, pagination, sélecteur étiqueté, état vide, bouton). Ce
   fichier ne porte QUE la mise en page propre à la liste : hero, barre de
   recherche bornée, grille et carte d'article large, barre de pagination.
   Préfixe : `ttk-bloglist-` (distinct de `ttk-blog-` — cartes de `app/blog`,
   archétype tableau de bord, servies par `ttk-dashboard.css`).
   ============================================================================= */

/* =============================================================================
   1. HERO
   ============================================================================= */
.ttk-bloglist-hero {
    position: relative;
    padding: var(--ttk-space-10) 0 var(--ttk-space-6);
    overflow: hidden;
    text-align: center;
}

/* Halo indigo derrière le hero (décor, non cliquable). */
.ttk-bloglist-hero-glow {
    position: absolute;
    inset: 0;
    background: var(--ttk-gradient-glow);
    pointer-events: none;
}

.ttk-bloglist-hero-content {
    position: relative;
}

.ttk-bloglist-hero-title {
    margin: var(--ttk-space-4) 0 var(--ttk-space-3);
}

.ttk-bloglist-hero-subtitle {
    max-width: 40rem;
    margin: 0 auto;
    color: var(--ttk-text-secondary);
}

/* =============================================================================
   2. SECTION & RECHERCHE
   ============================================================================= */
.ttk-bloglist-section {
    padding: var(--ttk-space-6) 0 var(--ttk-space-10);
}

/* La barre de recherche reste une colonne centrée au milieu du conteneur
   public (large), là où la grille d'articles, elle, prend toute la largeur. */
.ttk-bloglist-search {
    max-width: 42rem;
    margin: 0 auto var(--ttk-space-6);
}

.ttk-bloglist-search .ttk-toolbar {
    margin-bottom: 0;
}

.ttk-bloglist-search .ttk-search-info {
    text-align: center;
}

.ttk-bloglist-search-reset {
    margin-left: var(--ttk-space-2);
}

/* =============================================================================
   3. GRILLE & CARTE D'ARTICLE
   -----------------------------------------------------------------------------
   Carte large : couverture à gauche, corps à droite ; empilée sous 768px.
   La carte est un lien (`<a>`) — le survol vient de `.ttk-card--hover`.
   ============================================================================= */
.ttk-bloglist-grid {
    display: grid;
    gap: var(--ttk-space-5);
}

.ttk-bloglist-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    text-decoration: none;
    color: inherit;
}

/* Couverture : l'URL est posée en background-image par blog-index.ts
   (lue depuis data-bg-image — aucune valeur Razor dans un attribut style). */
.ttk-bloglist-card-image {
    min-height: 240px;
    background-color: var(--ttk-surface-2);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.ttk-bloglist-card-body {
    display: flex;
    flex-direction: column;
    padding: var(--ttk-space-5);
}

.ttk-bloglist-card-title {
    font-family: var(--ttk-font-title);
    font-size: var(--ttk-text-lg);
    font-weight: var(--ttk-weight-bold);
    letter-spacing: -0.02em;
    line-height: var(--ttk-leading-tight);
    color: var(--ttk-text);
    margin: var(--ttk-space-3) 0 var(--ttk-space-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ttk-bloglist-card-desc {
    font-size: var(--ttk-text-sm);
    line-height: var(--ttk-leading-relaxed);
    color: var(--ttk-text-secondary);
    margin: 0 0 var(--ttk-space-4);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}

.ttk-bloglist-card-tags {
    margin-bottom: var(--ttk-space-4);
}

.ttk-bloglist-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ttk-space-3);
    flex-wrap: wrap;
    padding-top: var(--ttk-space-4);
    border-top: 1px solid var(--ttk-border);
}

.ttk-bloglist-card-stats {
    display: flex;
    gap: var(--ttk-space-4);
}

.ttk-bloglist-stat {
    display: inline-flex;
    align-items: center;
    gap: var(--ttk-space-2);
    font-size: var(--ttk-text-sm);
    color: var(--ttk-text-muted);
}

.ttk-bloglist-stat .ttk-icon {
    width: 16px;
    height: 16px;
}

.ttk-bloglist-card-date {
    font-size: var(--ttk-text-sm);
    font-weight: var(--ttk-weight-medium);
    color: var(--ttk-text-muted);
}

/* =============================================================================
   4. BARRE DE PAGINATION (pagination + articles par page)
   ============================================================================= */
.ttk-bloglist-pagination-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ttk-space-4);
    margin-top: var(--ttk-space-8);
}

.ttk-bloglist-pagination-bar .ttk-pagination {
    flex-wrap: wrap;
    margin-top: 0;
}

.ttk-bloglist-page-size {
    align-items: center;
}

/* =============================================================================
   5. RESPONSIVE
   ============================================================================= */
@media (max-width: 767.98px) {
    .ttk-bloglist-hero {
        padding: var(--ttk-space-8) 0 var(--ttk-space-5);
    }

    .ttk-bloglist-section {
        padding: var(--ttk-space-5) 0 var(--ttk-space-6);
    }

    .ttk-bloglist-card {
        grid-template-columns: 1fr;
    }

    .ttk-bloglist-card-image {
        min-height: 180px;
    }

    .ttk-bloglist-card-body {
        padding: var(--ttk-space-4);
    }
}