/**
 * BAIRS — blog magazine layout
 * index.php / archives. Featured XL + grid asimétrico + filtros FLIP.
 */

.bairs-blog {
    padding: clamp(48px, 10vw, 128px) clamp(20px, 6vw, 80px) var(--space-24, 96px);
    background: var(--color-bg-0, #07090d);
    color: #fff;
    min-height: 60vh;
}

.bairs-blog-header {
    max-width: 1200px;
    margin: 0 auto var(--space-16, 64px);
}

.bairs-blog-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary-soft, #38bdf8);
    margin-bottom: var(--space-3, 12px);
    display: block;
}

.bairs-blog-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 6vw, 80px);
    line-height: 1;
    letter-spacing: -0.04em;
    text-wrap: balance;
    color: #fff;
    margin: 0;
}

.bairs-blog-lead {
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.6;
    color: var(--color-text-muted, rgba(255,255,255,0.7));
    max-width: 65ch;
    margin-top: var(--space-4, 16px);
}

/* ─── Filtros tipo pill ─── */
.bairs-blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    max-width: 1200px;
    margin: 0 auto var(--space-12, 48px);
    padding-top: var(--space-8, 32px);
    border-top: 1px solid var(--color-line, rgba(255,255,255,0.08));
}

.bairs-blog-pill {
    appearance: none;
    background: transparent;
    border: 1px solid var(--color-line, rgba(255,255,255,0.12));
    color: rgba(255,255,255,0.8);
    padding: 8px 16px;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: background var(--dur-normal, 320ms) var(--ease-out, ease),
                border-color var(--dur-normal, 320ms) var(--ease-out, ease),
                color var(--dur-normal, 320ms) var(--ease-out, ease);
}

.bairs-blog-pill:hover {
    border-color: var(--color-primary-soft, #38bdf8);
    color: #fff;
}

.bairs-blog-pill[aria-pressed="true"] {
    background: var(--color-primary-soft, #38bdf8);
    border-color: var(--color-primary-soft, #38bdf8);
    color: var(--color-bg-0, #07090d);
}

/* ─── Grid magazine ─── */
.bairs-blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6, 24px);
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .bairs-blog-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: var(--space-6, 24px);
    }
    .bairs-blog-card { grid-column: span 3; }
    .bairs-blog-card--xl { grid-column: span 6; aspect-ratio: 16 / 8; }
    .bairs-blog-card--lg { grid-column: span 4; aspect-ratio: 16 / 10; }
    .bairs-blog-card--sm { grid-column: span 2; aspect-ratio: 4 / 5; }
}

@media (min-width: 1100px) {
    .bairs-blog-card--xl { aspect-ratio: 16 / 7; }
}

/* ─── Card base ─── */
.bairs-blog-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg, 20px);
    background: var(--color-bg-2, #1a2230);
    color: #fff;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 4 / 5;
    isolation: isolate;
    border: 1px solid var(--color-line, rgba(255,255,255,0.06));
    transition: transform var(--dur-normal, 320ms) var(--ease-out, ease),
                border-color var(--dur-normal, 320ms) var(--ease-out, ease);
}

.bairs-blog-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary-soft, #38bdf8);
}

.bairs-blog-card-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    transition: transform var(--dur-narrative, 700ms) var(--ease-out, ease);
}

.bairs-blog-card:hover .bairs-blog-card-image {
    transform: scale(1.06);
}

.bairs-blog-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
        rgba(7,9,13,0) 30%,
        rgba(7,9,13,0.55) 65%,
        rgba(7,9,13,0.92) 100%);
    transition: opacity var(--dur-normal, 320ms) var(--ease-out, ease);
}

.bairs-blog-card-body {
    padding: var(--space-6, 24px) var(--space-6, 24px) var(--space-8, 32px);
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.bairs-blog-card-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-primary-soft, #38bdf8);
    display: flex;
    gap: var(--space-3, 12px);
    align-items: center;
}

.bairs-blog-card-meta span:not(:last-child)::after {
    content: '·';
    margin-left: var(--space-3, 12px);
    color: rgba(255,255,255,0.3);
}

.bairs-blog-card-title {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #fff;
    margin: 0;
    transition: transform var(--dur-normal, 320ms) var(--ease-out, ease);
    text-wrap: balance;
}

.bairs-blog-card--xl .bairs-blog-card-title { font-size: clamp(28px, 4vw, 56px); }
.bairs-blog-card--lg .bairs-blog-card-title { font-size: clamp(22px, 2.4vw, 32px); }
.bairs-blog-card--sm .bairs-blog-card-title { font-size: clamp(18px, 1.6vw, 22px); }
.bairs-blog-card .bairs-blog-card-title { font-size: clamp(20px, 2vw, 26px); }

.bairs-blog-card:hover .bairs-blog-card-title {
    transform: translateY(-3px);
}

.bairs-blog-card-excerpt {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255,255,255,0.75);
    max-width: 60ch;
    /* solo XL muestra excerpt */
    display: none;
}

.bairs-blog-card--xl .bairs-blog-card-excerpt { display: block; }

/* Card sin imagen (fondo plano) */
.bairs-blog-card.no-thumb {
    background: linear-gradient(135deg, var(--color-bg-1, #0f141b), var(--color-bg-2, #1a2230));
}

.bairs-blog-card.no-thumb::after {
    background: radial-gradient(circle at 80% 100%,
        rgba(56,189,248,0.15) 0%,
        transparent 60%);
}

/* ─── Empty state ─── */
.bairs-blog-empty {
    max-width: 600px;
    margin: var(--space-24, 96px) auto;
    text-align: center;
    color: rgba(255,255,255,0.7);
}

.bairs-blog-empty h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 40px);
    margin-bottom: var(--space-3, 12px);
    color: #fff;
}

/* ─── FLIP transitions: el JS aplica transforms inline temporales ─── */
.bairs-blog-card.is-flipping {
    transition: transform var(--dur-normal, 320ms) var(--ease-out, ease);
    will-change: transform;
}

.bairs-blog-card.is-hidden {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .bairs-blog-card,
    .bairs-blog-card-image,
    .bairs-blog-card-title { transition: none !important; }
    .bairs-blog-card:hover { transform: none; }
    .bairs-blog-card:hover .bairs-blog-card-image { transform: none; }
}