/* ════════════════════════════════════════
   FRANCE VR — Blog CSS v5
   ════════════════════════════════════════ */
.page-hero { padding:140px 60px 70px; background:linear-gradient(150deg,var(--off-white) 50%,var(--bg) 100%); }
.page-hero h1 { margin:16px 0 20px; }
.breadcrumb { font-size:12px;color:var(--muted-lt);margin-bottom:20px;display:flex;align-items:center;gap:6px; }
.breadcrumb a { color:var(--blue); }

.blog-filters { display:flex;gap:10px;flex-wrap:wrap;padding-top:0;padding-bottom:0;border-bottom:1px solid var(--border); }
.bcat {
  padding:10px 20px;border-radius:100px;font-size:13px;font-weight:600;color:var(--slate-dark);
  background:transparent;border:1.5px solid var(--border);cursor:none;
  transition:all var(--t-mid); font-family:'Sora',sans-serif;
}
.bcat:hover { border-color:var(--blue);color:var(--blue);transform:translateY(-1px); }
.bcat.active { background:var(--blue);color:#fff;border-color:var(--blue); }

.blog-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:22px; }
.blog-card-featured { grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--white);transition:all var(--t-mid);box-shadow:var(--sh-card); }
.blog-card-featured:hover { transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--blue-mid); }
.blog-card-featured .bcard-thumb { height:100%;min-height:300px;border-radius:0; }
.blog-card-featured .bcard-body { padding:44px 40px;display:flex;flex-direction:column;justify-content:center; }
.blog-card-featured h2 { font-size:clamp(20px,2vw,26px);margin-bottom:14px;line-height:1.25; }
.blog-card-featured h2 a, .blog-card-featured p { color:var(--text); }
.blog-card-featured h2 a:hover { color:var(--blue); }
.blog-card-featured p { font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:22px; }

.blog-card { background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:all var(--t-mid);display:flex;flex-direction:column;box-shadow:var(--sh-card); }
.blog-card:hover { transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:var(--blue-mid); }

.bcard-thumb { height:210px;position:relative;overflow:hidden;flex-shrink:0;background:var(--bg2); }
.bcard-thumb-sm { height:185px; }
.bcard-thumb img { width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1;transition:transform 0.5s var(--ease); }
.blog-card:hover .bcard-thumb img { transform:scale(1.06); }
.bcard-thumb::before { content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(135deg,var(--blue-lt),var(--bg2)); }
.bcard-img-overlay { position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(17,24,39,.45) 0%,rgba(17,24,39,.05) 50%,transparent 80%); }
.bcard-cat-badge { position:absolute;top:14px;left:14px;z-index:3;background:rgba(22,65,200,.88);color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;padding:4px 12px;border-radius:100px;backdrop-filter:blur(6px); }

.bcard-body { padding:20px 22px 22px;flex:1;display:flex;flex-direction:column; }
.bcard-meta { display:flex;gap:12px;margin-bottom:10px;flex-wrap:wrap; }
.bcard-date { font-size:12px;color:var(--muted);font-weight:500; }
.bcard-read { font-size:12px;color:var(--blue);font-weight:600; }
.blog-card h3 { font-size:15px;font-weight:700;margin-bottom:8px;line-height:1.35; }
.blog-card h3 a { color:var(--text);transition:color var(--t-fast); }
.blog-card h3 a:hover { color:var(--blue); }
.blog-card p { font-size:13px;color:var(--muted);line-height:1.65;flex:1;margin-bottom:14px; }
.bcard-link { font-size:13px;font-weight:700;color:var(--blue);margin-top:auto;transition:opacity var(--t-fast); }
.bcard-link:hover { opacity:.75; }
.blog-load-more { text-align:center;margin-top:48px; }

@media(max-width:900px) {
  .page-hero{padding:120px 20px 50px}
  .blog-grid{grid-template-columns:1fr 1fr}
  .blog-card-featured{grid-column:1/-1;grid-template-columns:1fr}
  .blog-card-featured .bcard-thumb{min-height:220px}
  .blog-card-featured .bcard-body{padding:28px 24px}
}
@media(max-width:600px) { .blog-grid{grid-template-columns:1fr} }

/* Mobile blog */
@media(max-width:900px) {
  .page-hero { padding: 90px 18px 48px; }
  .blog-filters { gap: 8px; }
  .bcat { padding: 8px 14px; font-size: 12px; }
  .blog-grid { grid-template-columns: 1fr; gap: 16px; }
  .blog-card-featured { grid-column: 1; grid-template-columns: 1fr; }
  .blog-card-featured .bcard-body { padding: 22px 18px; }
  .bcard-thumb { height: 180px; }
}