/* ============================================
   Asigurări Contactless — Blog
   Page-specific styles (extracted from inline)
   Used only by: blog.html
   ============================================ */

    .blog-hero { background: linear-gradient(180deg, #EAF4FC 0%, #fff 100%); padding: var(--sp-16) 0 var(--sp-8); text-align: center; }
    .blog-hero .eyebrow { color: var(--brand-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: var(--fs-12); }
    .blog-hero h1 { font-size: var(--fs-56); font-weight: 800; margin: var(--sp-3) 0 var(--sp-4); color: var(--brand-primary); }
    .blog-hero p { color: var(--brand-text-muted); font-size: var(--fs-20); max-width: 600px; margin: 0 auto; }
    .blog-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin: var(--sp-8) 0 0; }
    .blog-filter { padding: 8px 18px; border-radius: var(--r-pill); border: 1.5px solid var(--brand-border); background: #fff; color: var(--brand-text); font-size: var(--fs-14); font-weight: 600; cursor: pointer; transition: var(--t-fast); }
    .blog-filter:hover { border-color: var(--brand-secondary); }
    .blog-filter.active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
    .blog-index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
    .bi-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--brand-border); border-radius: var(--r-lg); overflow: hidden; transition: var(--t-base); text-decoration: none; color: var(--brand-text); }
    .bi-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-accent-light); }
    .bi-thumb { height: 180px; overflow: hidden; background: var(--brand-bg-alt); }
    .bi-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
    .bi-card:hover .bi-thumb img { transform: scale(1.05); }
    .bi-body { padding: var(--sp-6); display: flex; flex-direction: column; flex: 1; }
    .bi-cat { font-size: var(--fs-12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-secondary); margin-bottom: var(--sp-2); }
    .bi-body h3 { font-family: var(--font-display); font-size: var(--fs-20); font-weight: 700; color: var(--brand-text); line-height: 1.3; margin: 0 0 var(--sp-3); }
    .bi-body p { font-size: var(--fs-14); color: var(--brand-text-muted); line-height: 1.6; margin: 0 0 var(--sp-4); }
    .bi-meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
    .bi-date { font-size: var(--fs-12); color: var(--brand-text-muted); }
    .bi-more { font-size: var(--fs-14); font-weight: 700; color: var(--brand-primary); }
    @media (max-width: 1024px) { .blog-index-grid { grid-template-columns: 1fr 1fr; } .blog-hero h1 { font-size: var(--fs-40); } }
    @media (max-width: 600px) { .blog-index-grid { grid-template-columns: 1fr; } }