/* ================================================================
   LoopReset — Blog Page Styles
   ================================================================ */

.hero { background:var(--sf); border-bottom:1px solid var(--bd); padding:4rem 1.5rem 3rem; text-align:center; }
.hero-inner { max-width:680px; margin:0 auto; }
.hero h1 { font-size:2.6rem; font-weight:900; color:#fff; line-height:1.1; margin-bottom:1rem; }
.hero-sub { font-size:1rem; color:var(--mt); line-height:1.8; }

.cats { background:var(--sf); border-bottom:1px solid var(--bd); padding:0 1.5rem; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cats-i { max-width:var(--mx); margin:0 auto; display:flex; gap:0; white-space:nowrap; }
.cat-tab { display:inline-block; padding:.9rem 1.25rem; font-size:.82rem; font-weight:600; color:var(--gy); border-bottom:2px solid transparent; transition:all .2s; cursor:pointer; text-decoration:none; white-space:nowrap; }
.cat-tab:hover { color:var(--pr); }
.cat-tab.active { color:var(--pr); border-bottom-color:var(--pr); }

.main { max-width:var(--mx); margin:0 auto; padding:3rem 1.5rem 5rem; }

.featured { display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--sf); border:1px solid var(--bd); border-radius:16px; overflow:hidden; margin-bottom:3rem; transition:border-color .2s; }
.featured:hover { border-color:var(--pr); }
.feat-img { background:linear-gradient(135deg,var(--sf2),var(--bg)); display:flex; align-items:center; justify-content:center; font-size:5rem; min-height:280px; overflow:hidden; position:relative; }
.feat-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.feat-body { padding:2.5rem; }
.feat-label { display:inline-flex; align-items:center; gap:.4rem; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--pr); background:var(--prl); border-radius:4px; padding:.2rem .6rem; margin-bottom:1rem; }
.feat-title { font-size:1.5rem; font-weight:900; color:#fff; line-height:1.25; margin-bottom:1rem; }
.feat-exc { font-size:.9rem; color:var(--mt); line-height:1.75; margin-bottom:1.5rem; }
.feat-meta { display:flex; align-items:center; gap:.75rem; font-size:.8rem; color:var(--gy); flex-wrap:wrap; }
.feat-meta .dot { width:3px; height:3px; border-radius:50%; background:var(--bd); }
.feat-link { display:inline-flex; align-items:center; gap:.4rem; color:var(--pr); font-size:.875rem; font-weight:700; margin-top:1.25rem; transition:color .2s; }
.feat-link:hover { color:var(--prm); }

.grid-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.75rem; }
.grid-head h2 { font-size:1.2rem; font-weight:800; color:#fff; }
.grid-head span { font-size:.82rem; color:var(--gy); }

.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.blog-card { background:var(--sf); border:1px solid var(--bd); border-radius:var(--rd); overflow:hidden; transition:border-color .2s,transform .2s; display:flex; flex-direction:column; }
.blog-card:hover { border-color:var(--pr); transform:translateY(-3px); }
.blog-thumb { height:160px; background:linear-gradient(135deg,var(--sf2),var(--bg)); display:flex; align-items:center; justify-content:center; font-size:2.5rem; border-bottom:1px solid var(--bd); overflow:hidden; position:relative; }
.blog-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.blog-body { padding:1.25rem; flex:1; display:flex; flex-direction:column; }
.blog-cat { display:inline-block; font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--pr); background:var(--prl); border-radius:4px; padding:.2rem .5rem; margin-bottom:.6rem; }
.blog-title { font-size:.95rem; font-weight:700; color:#fff; line-height:1.4; margin-bottom:.75rem; flex:1; }
.blog-footer { display:flex; justify-content:space-between; align-items:center; font-size:.78rem; color:var(--gy); margin-top:auto; }
.blog-read { font-size:.78rem; color:var(--pr); font-weight:600; }

.empty { text-align:center; padding:5rem 2rem; background:var(--sf); border:1px solid var(--bd); border-radius:16px; }
.empty-icon { font-size:3rem; margin-bottom:1rem; }
.empty h3 { font-size:1.25rem; font-weight:800; color:#fff; margin-bottom:.5rem; }
.empty p { font-size:.9rem; color:var(--mt); }

.pagination { display:flex; justify-content:center; align-items:center; gap:.5rem; margin-top:3rem; flex-wrap:wrap; }
.page-btn { width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.875rem; font-weight:600; background:var(--sf); border:1px solid var(--bd); color:var(--mt); transition:all .2s; text-decoration:none; }
.page-btn:hover { border-color:var(--pr); color:var(--pr); }
.page-btn.active { background:var(--grad); border-color:transparent; color:#fff; }
.page-btn.ellipsis { background:none; border:none; cursor:default; color:var(--gy); }
.page-arrow { width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; background:var(--sf); border:1px solid var(--bd); color:var(--mt); transition:all .2s; text-decoration:none; }
.page-arrow:hover { border-color:var(--pr); color:var(--pr); }
.page-arrow.disabled { opacity:.35; pointer-events:none; }

.cta-banner { margin-top:4rem; background:linear-gradient(135deg,rgba(155,139,244,.08),rgba(244,114,182,.05)); border:1px solid rgba(155,139,244,.25); border-radius:16px; padding:3rem; display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center; }
.cta-banner h3 { font-size:1.4rem; font-weight:900; color:#fff; margin-bottom:.5rem; }
.cta-banner p { font-size:.9rem; color:var(--mt); }
.cta-banner-btn { display:inline-flex; align-items:center; gap:.5rem; background:var(--grad); color:#fff; padding:.9rem 2rem; border-radius:50px; font-size:.95rem; font-weight:800; white-space:nowrap; transition:opacity .2s; box-shadow:0 0 30px rgba(155,139,244,.25); }
.cta-banner-btn:hover { opacity:.85; color:#fff; }

@media (max-width:960px) {
  .featured { grid-template-columns:1fr; }
  .feat-img { min-height:200px; }
  .blog-grid { grid-template-columns:1fr 1fr; }
  .cta-banner { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .hero h1 { font-size:1.9rem; }
  .blog-grid { grid-template-columns:1fr; }
}