/* assets/css/blog.css */
:root {
  --orange: #e8720c; --green: #5cb93c; --dark: #0e0e0e;
  --grey: #f4f4f4; --text: #1a1a1a; --muted: #666;
}

/* ── LISTING HERO ─────────────────────────────── */
.bl-hero { background: var(--dark); padding: 130px 40px 60px; text-align: center; }
.bl-hero__inner { max-width: 680px; margin: 0 auto; }
.bl-eyebrow { display:inline-block; font-family:'Montserrat',sans-serif; font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--green); margin-bottom:16px; }
.bl-hero__title { font-family:'Montserrat',sans-serif; font-weight:900; font-size:clamp(2.2rem,5vw,3.6rem); color:#fff; line-height:1.1; margin:0 0 16px; }
.bl-hero__title em { font-style:normal; color:var(--orange); }
.bl-hero__sub { font-family:'Montserrat',sans-serif; font-size:clamp(.95rem,2vw,1.05rem); color:rgba(255,255,255,.6); line-height:1.75; }

/* ── CATEGORIES ───────────────────────────────── */
.bl-cats { background: var(--dark); border-top: 1px solid rgba(255,255,255,.08); padding: 0 40px; }
.bl-cats__inner { max-width: 1100px; margin: 0 auto; display: flex; gap: 0; flex-wrap: wrap; }
.bl-cat { font-family:'Montserrat',sans-serif; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.45); padding:16px 20px; text-decoration:none; border-bottom:2px solid transparent; transition:all .2s; }
.bl-cat:hover { color: #fff; }
.bl-cat.active { color: var(--orange); border-bottom-color: var(--orange); }

/* ── LISTING GRID ─────────────────────────────── */
.bl-section { background: var(--grey); padding: 60px 40px 80px; }
.bl-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

.bl-card { background: #fff; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 20px rgba(0,0,0,.07); transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; }
.bl-card:hover { transform: translateY(-5px); box-shadow: 0 12px 36px rgba(0,0,0,.12); }

/* Featured card spans full width */
.bl-card--featured { grid-column: 1 / -1; flex-direction: row; }
.bl-card--featured .bl-card__img-wrap { width: 50%; flex-shrink: 0; }
.bl-card--featured .bl-card__body { justify-content: center; padding: 40px; }
.bl-card--featured .bl-card__title { font-size: clamp(1.3rem, 2.5vw, 1.9rem); }

.bl-card__img-wrap { position: relative; display: block; overflow: hidden; height: 200px; }
.bl-card--featured .bl-card__img-wrap { height: 100%; min-height: 280px; }
.bl-card__img-wrap img { width:100%; height:100%; object-fit:cover; transition: transform .5s; }
.bl-card:hover .bl-card__img-wrap img { transform: scale(1.04); }
.bl-card__img-placeholder { width:100%; height:100%; background: linear-gradient(135deg, var(--dark), #2a2a2a); }
.bl-card__cat { position:absolute; top:12px; left:12px; background:var(--orange); color:#fff; font-family:'Montserrat',sans-serif; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:4px; }

.bl-card__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.bl-card__meta { display: flex; align-items: center; gap: 8px; font-family:'Montserrat',sans-serif; font-size:11px; font-weight:600; color:var(--muted); }
.bl-card__sep { color: #ccc; }
.bl-card__title { font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(1rem,1.4vw,1.15rem); color:var(--text); margin:0; line-height:1.35; }
.bl-card__title a { text-decoration:none; color:inherit; transition:color .2s; }
.bl-card__title a:hover { color: var(--orange); }
.bl-card__excerpt { font-family:'Montserrat',sans-serif; font-size:.85rem; color:var(--muted); line-height:1.65; margin:0; flex:1; }
.bl-card__footer { display:flex; align-items:center; justify-content:space-between; margin-top: 4px; }
.bl-card__author { font-family:'Montserrat',sans-serif; font-size:11px; font-weight:600; color:var(--muted); }
.bl-card__link { font-family:'Montserrat',sans-serif; font-size:12px; font-weight:700; color:var(--orange); text-decoration:none; transition:color .2s; }
.bl-card__link:hover { color: var(--dark); }

.bl-empty { grid-column:1/-1; text-align:center; font-family:'Montserrat',sans-serif; color:var(--muted); padding:60px 0; }

/* Pagination */
.bl-pagination { max-width:1100px; margin:40px auto 0; display:flex; justify-content:center; gap:8px; }
.bl-page { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; font-family:'Montserrat',sans-serif; font-size:13px; font-weight:700; color:var(--text); text-decoration:none; border:2px solid #ddd; transition:all .2s; }
.bl-page:hover,.bl-page.active { background:var(--orange); border-color:var(--orange); color:#fff; }

/* ─────────────────────────────────────────────── */
/*  BLOG SINGLE                                    */
/* ─────────────────────────────────────────────── */
.bs-hero { background:var(--dark); padding:130px 40px 60px; }
.bs-hero__inner { max-width:780px; margin:0 auto; }
.bs-cat { display:inline-block; font-family:'Montserrat',sans-serif; font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--green); margin-bottom:16px; text-decoration:none; }
.bs-cat:hover { color:var(--orange); }
.bs-title { font-family:'Montserrat',sans-serif; font-weight:900; font-size:clamp(1.8rem,4vw,3rem); color:#fff; line-height:1.15; margin:0 0 20px; }
.bs-meta { display:flex; gap:10px; align-items:center; font-family:'Montserrat',sans-serif; font-size:12px; font-weight:600; color:rgba(255,255,255,.45); flex-wrap:wrap; }
.bs-meta span { }

.bs-cover { max-height:480px; overflow:hidden; }
.bs-cover img { width:100%; height:100%; object-fit:cover; display:block; }

.bs-layout { max-width:1100px; margin:0 auto; padding:60px 40px; display:grid; grid-template-columns:1fr 320px; gap:50px; align-items:start; }
.bs-body { font-family:'Montserrat',sans-serif; font-size:.95rem; line-height:1.85; color:#333; }
.bs-body h2 { font-weight:900; font-size:1.4rem; color:var(--dark); margin:2em 0 .6em; }
.bs-body h3 { font-weight:800; font-size:1.15rem; color:var(--dark); margin:1.6em 0 .5em; }
.bs-body p { margin:0 0 1.2em; }
.bs-body ul { padding-left:20px; margin-bottom:1.2em; }
.bs-body ul li { margin-bottom:.5em; }
.bs-body a { color:var(--orange); }
.bs-body strong { color:var(--dark); }
.bs-body code { background:var(--grey); padding:2px 6px; border-radius:3px; font-size:.88em; }

.bs-share { display:flex; align-items:center; gap:10px; margin-top:40px; padding-top:24px; border-top:1px solid #eee; flex-wrap:wrap; }
.bs-share__label { font-family:'Montserrat',sans-serif; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.bs-share__btn { font-family:'Montserrat',sans-serif; font-size:11px; font-weight:700; padding:8px 16px; border-radius:4px; text-decoration:none; transition:all .2s; }
.bs-share__btn--tw { background:#000; color:#fff; }
.bs-share__btn--fb { background:#1877f2; color:#fff; }
.bs-share__btn--wa { background:#25d366; color:#fff; }
.bs-share__btn:hover { opacity:.85; }

/* Sidebar */
.bs-sidebar { position:sticky; top:90px; display:flex; flex-direction:column; gap:20px; }
.bs-sidebar__box { background:var(--grey); border-radius:10px; padding:24px; }
.bs-sidebar__box h3 { font-family:'Montserrat',sans-serif; font-weight:800; font-size:1rem; color:var(--dark); margin:0 0 12px; }
.bs-sidebar__box p { font-family:'Montserrat',sans-serif; font-size:.85rem; color:var(--muted); line-height:1.65; margin:0 0 16px; }
.bs-sidebar__btn { display:inline-block; background:var(--orange); color:#fff; font-family:'Montserrat',sans-serif; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:12px 20px; text-decoration:none; transition:background .2s; }
.bs-sidebar__btn:hover { background:var(--dark); }
.bs-related-item { display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid #e0e0e0; text-decoration:none; }
.bs-related-item:last-child { border-bottom:none; }
.bs-related-item img { width:56px; height:44px; object-fit:cover; border-radius:4px; flex-shrink:0; }
.bs-related-title { font-family:'Montserrat',sans-serif; font-size:.8rem; font-weight:700; color:var(--text); display:block; line-height:1.4; margin-bottom:4px; }
.bs-related-date { font-family:'Montserrat',sans-serif; font-size:11px; color:var(--muted); }

.bs-back { max-width:1100px; margin:0 auto 60px; padding:0 40px; }
.bs-back a { font-family:'Montserrat',sans-serif; font-size:13px; font-weight:700; color:var(--orange); text-decoration:none; }
.bs-back a:hover { color:var(--dark); }

/* ── RESPONSIVE ──────────────────────────────── */
@media(max-width:900px) {
  .bl-grid { grid-template-columns:1fr 1fr; }
  .bl-card--featured { flex-direction:column; grid-column:auto; }
  .bl-card--featured .bl-card__img-wrap { width:100%; height:220px; }
  .bs-layout { grid-template-columns:1fr; padding:40px 20px; }
  .bs-sidebar { position:static; }
}
@media(max-width:600px) {
  .bl-hero,.bl-section { padding-left:16px; padding-right:16px; }
  .bl-grid { grid-template-columns:1fr; }
  .bl-cats { padding:0 16px; }
  .bs-hero { padding:100px 20px 40px; }
  .bs-layout { padding:30px 16px; }
}
@media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;} }