/**
 * Блог — Архив и карточки
 * @package Biolocus
 */

/* Categories */
.blog-cats{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);padding-bottom:var(--spacing-lg)}
.blog-cat{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border:1px solid var(--card-border);border-radius:var(--radius-full);color:var(--text-mid);font-size:var(--font-size-sm);font-weight:var(--font-medium);text-decoration:none;transition:all var(--transition-fast)}
.blog-cat:hover,.blog-cat.active{background:var(--primary);color:var(--text-inverse);border-color:var(--primary)}
.blog-cat__count{font-size:10px;background:rgba(0,0,0,.08);padding:1px 6px;border-radius:var(--radius-full)}
.blog-cat.active .blog-cat__count{background:rgba(255,255,255,.25)}

/* Grid */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-lg)}

/* Featured — первая статья на всю ширину */
.blog-card--featured{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.blog-card--featured .blog-card__image{height:100%;min-height:300px}
.blog-card--featured .blog-card__image img{height:100%}
.blog-card--featured .blog-card__body{padding:var(--spacing-xl)}
.blog-card--featured .blog-card__title{font-size:var(--font-size-2xl)}
.blog-card--featured .blog-card__excerpt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Card */
.blog-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-xl);overflow:hidden;transition:all var(--transition-slow)}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(var(--primary-rgb),.4)}

.blog-card__image{position:relative;display:block;height:200px;overflow:hidden}
.blog-card__image img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slower)}
.blog-card:hover .blog-card__image img{transform:scale(1.05)}
.blog-card__cat{position:absolute;top:12px;left:12px;padding:4px 12px;color:#fff;font-size:var(--font-size-xxs);font-weight:var(--font-bold);border-radius:var(--radius-full);z-index:2}

.blog-card__body{padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm)}

.blog-card__meta{display:flex;align-items:center;gap:var(--spacing-md);font-size:var(--font-size-xxs);color:var(--text-light)}
.blog-card__meta span{display:inline-flex;align-items:center;gap:4px}
.blog-card__meta svg{flex-shrink:0}

.blog-card__title{font-size:var(--font-size-base);font-weight:var(--font-bold);line-height:var(--line-height-tight);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-card__title a{color:inherit;text-decoration:none}
.blog-card__title a:hover{color:var(--primary)}

.blog-card__excerpt{font-size:var(--font-size-sm);color:var(--text-mid);line-height:var(--line-height-normal);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.blog-card__more{display:inline-flex;align-items:center;gap:6px;font-size:var(--font-size-sm);font-weight:var(--font-semibold);color:var(--primary);text-decoration:none;margin-top:auto;transition:gap var(--transition-fast)}
.blog-card__more:hover{gap:10px}

/* Pagination */
.blog-pagination{margin-top:var(--spacing-2xl)}
.blog-pagination .nav-links{display:flex;justify-content:center;gap:var(--spacing-sm)}
.blog-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--card-border);border-radius:var(--radius-md);color:var(--text-mid);font-size:var(--font-size-sm);text-decoration:none;transition:all var(--transition-fast)}
.blog-pagination .page-numbers:hover,.blog-pagination .page-numbers.current{background:var(--primary);color:var(--text-inverse);border-color:var(--primary)}

/* Empty */
.blog-empty{text-align:center;padding:var(--spacing-3xl)}
.blog-empty__icon{font-size:64px;margin-bottom:var(--spacing-md)}

/* 3-col grid */
.blog-grid--3{grid-template-columns:repeat(3,1fr)}
.blog-grid--3 .blog-card--featured{grid-column:auto;display:flex;flex-direction:column}
.blog-grid--3 .blog-card--featured .blog-card__image{height:200px;min-height:auto}

@media(max-width:1024px){.blog-grid{grid-template-columns:repeat(2,1fr)}.blog-card--featured{grid-template-columns:1fr}}
@media(max-width:600px){.blog-grid,.blog-grid--3{grid-template-columns:1fr}.blog-card--featured .blog-card__body{padding:var(--spacing-md)}.blog-card--featured .blog-card__title{font-size:var(--font-size-lg)}}