/* ============================================================
   Tanzania Tech Media - Blog archive + detail (corporate redesign)
   Loads with service-detail.css (.ttm-btn/.ttm-eyebrow/.ttm-container/.ttm-content).
   ============================================================ */
.ttm-blog{ --ttm-ink:#111013; --ttm-muted:#5b605b; --ttm-line:#e7e9e2; --ttm-soft:#f6f8ef; }
:root{ --ttm-accent: var(--tp-theme-primary, #13DB31); }

/* hero (shared) */
.ttm-blog-hero{ position:relative; overflow:hidden; background:var(--ttm-soft); padding:175px 0 80px; text-align:center; border-bottom:1px solid var(--ttm-line); }
.ttm-blog-hero .ttm-shape{ position:absolute; pointer-events:none; }
.ttm-blog-hero .ttm-shape-1{ top:80px; left:-40px; color:var(--ttm-accent); opacity:.16; }
.ttm-blog-hero .ttm-shape-2{ bottom:-40px; right:-30px; color:#111013; opacity:.05; }
.ttm-blog-hero .ttm-eyebrow{ justify-content:center; }
.ttm-blog-hero h1{ font-size:clamp(34px,5vw,56px); line-height:1.05; font-weight:700; color:var(--ttm-ink); margin:16px auto 18px; letter-spacing:-1px; max-width:820px; }
.ttm-blog-hero p{ font-size:19px; line-height:1.6; color:var(--ttm-muted); max-width:660px; margin:0 auto; }

/* layout */
.ttm-blog-main{ background:#fff; padding:80px 0 100px; }
.ttm-blog-grid{ display:grid; grid-template-columns:1fr 340px; gap:50px; align-items:start; }

/* post cards */
.ttm-blog-list{ display:flex; flex-direction:column; gap:30px; }
.ttm-blog-card{ display:grid; grid-template-columns:300px 1fr; border:1px solid var(--ttm-line); border-radius:20px; overflow:hidden; background:#fff; transition:.25s ease; }
.ttm-blog-card:hover{ transform:translateY(-4px); box-shadow:0 26px 54px -34px rgba(17,16,19,.3); border-color:transparent; }
.ttm-blog-thumb{ overflow:hidden; }
.ttm-blog-thumb img{ width:100%; height:100%; min-height:230px; object-fit:cover; display:block; transition:.4s ease; }
.ttm-blog-card:hover .ttm-blog-thumb img{ transform:scale(1.05); }
.ttm-blog-body{ padding:30px; display:flex; flex-direction:column; }
.ttm-blog-cat{ align-self:flex-start; font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--ttm-accent); margin-bottom:12px; text-decoration:none; }
.ttm-blog-card h2{ font-size:22px; font-weight:700; line-height:1.25; margin:0 0 12px; letter-spacing:-.3px; }
.ttm-blog-card h2 a{ color:var(--ttm-ink); text-decoration:none; }
.ttm-blog-card h2 a:hover{ color:var(--ttm-accent); }
.ttm-blog-card p{ font-size:15px; line-height:1.65; color:var(--ttm-muted); margin:0 0 18px; flex:1; }
.ttm-blog-meta{ display:flex; align-items:center; gap:18px; font-size:13.5px; color:var(--ttm-muted); }
.ttm-blog-meta .m{ display:inline-flex; align-items:center; gap:6px; }
.ttm-blog-meta svg{ width:15px; height:15px; }
.ttm-blog-empty{ text-align:center; color:var(--ttm-muted); padding:60px 0; }
.ttm-blog-pagi{ margin-top:50px; display:flex; justify-content:center; }

/* sidebar */
.ttm-blog-side{ display:flex; flex-direction:column; gap:26px; position:sticky; top:100px; }
.ttm-blog-widget{ border:1px solid var(--ttm-line); border-radius:18px; padding:26px; background:#fff; }
.ttm-blog-widget h3{ font-size:18px; font-weight:700; color:var(--ttm-ink); margin:0 0 18px; padding-bottom:14px; border-bottom:1px solid var(--ttm-line); }
.ttm-blog-search{ display:flex; gap:8px; }
.ttm-blog-search input{ flex:1; min-width:0; border:1px solid var(--ttm-line); border-radius:12px; padding:12px 14px; font-size:16px; font-family:inherit; }
.ttm-blog-search input:focus{ outline:none; border-color:var(--ttm-accent); }
.ttm-blog-search button{ border:0; background:var(--ttm-accent); color:#0a1f0d; border-radius:12px; padding:0 15px; cursor:pointer; display:flex; align-items:center; }
.ttm-blog-search button svg{ width:18px; height:18px; }
.ttm-cat-list{ list-style:none; margin:0; padding:0; }
.ttm-cat-list li{ margin-bottom:8px; }
.ttm-cat-list a{ display:flex; justify-content:space-between; padding:11px 14px; border-radius:10px; background:var(--ttm-soft); text-decoration:none; color:#3b3f37; font-weight:600; font-size:14.5px; transition:.2s ease; }
.ttm-cat-list a:hover{ background:var(--ttm-accent); color:#0a1f0d; }
.ttm-cat-list .count{ color:var(--ttm-muted); font-weight:500; }
.ttm-cat-list a:hover .count{ color:#0a1f0d; }
.ttm-pop{ display:flex; flex-direction:column; gap:16px; }
.ttm-pop-item{ display:flex; gap:14px; text-decoration:none; align-items:center; }
.ttm-pop-thumb{ width:74px; height:64px; border-radius:10px; overflow:hidden; flex:0 0 auto; }
.ttm-pop-thumb img{ width:100%; height:100%; object-fit:cover; }
.ttm-pop-item h4{ font-size:14.5px; font-weight:600; line-height:1.4; color:var(--ttm-ink); margin:0 0 4px; }
.ttm-pop-item:hover h4{ color:var(--ttm-accent); }
.ttm-pop-item .date{ font-size:12.5px; color:var(--ttm-muted); }
.ttm-tagcloud{ display:flex; flex-wrap:wrap; gap:8px; }
.ttm-tagcloud a{ font-size:13px; color:#444; background:var(--ttm-soft); border:1px solid var(--ttm-line); padding:7px 13px; border-radius:50px; text-decoration:none; transition:.2s ease; }
.ttm-tagcloud a:hover{ background:var(--ttm-accent); color:#0a1f0d; border-color:var(--ttm-accent); }

/* ---------- detail ---------- */
.ttm-blogd-hero{ position:relative; overflow:hidden; background:var(--ttm-soft); padding:170px 0 60px; border-bottom:1px solid var(--ttm-line); }
.ttm-blogd-hero .inner{ max-width:840px; margin:0 auto; text-align:center; }
.ttm-blogd-cat{ display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--ttm-accent); margin-bottom:14px; text-decoration:none; }
.ttm-blogd-hero h1{ font-size:clamp(30px,4.4vw,46px); line-height:1.12; font-weight:700; color:var(--ttm-ink); margin:0 0 24px; letter-spacing:-.5px; }
.ttm-blogd-meta{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; font-size:14px; color:var(--ttm-muted); }
.ttm-blogd-meta .au{ display:inline-flex; align-items:center; gap:10px; }
.ttm-blogd-meta .au img{ width:34px; height:34px; border-radius:50%; object-fit:cover; }
.ttm-blogd-meta .au b{ color:var(--ttm-ink); }
.ttm-blogd-meta .m{ display:inline-flex; align-items:center; gap:7px; }
.ttm-blogd-meta svg{ width:16px; height:16px; }
.ttm-blogd-feat{ background:#fff; }
.ttm-blogd-feat .wrap{ margin-top:-50px; }
.ttm-blogd-feat img{ width:100%; max-height:520px; object-fit:cover; border-radius:24px; display:block; }
.ttm-blogd-body{ background:#fff; padding:50px 0 90px; }
.ttm-blogd-grid{ display:grid; grid-template-columns:1fr 340px; gap:50px; align-items:start; }
.ttm-blogd-foot{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-top:36px; padding-top:26px; border-top:1px solid var(--ttm-line); }
.ttm-blogd-tags{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ttm-blogd-tags .lbl{ font-weight:700; color:var(--ttm-ink); margin-right:4px; }
.ttm-share{ display:flex; gap:10px; }
.ttm-share a{ width:40px; height:40px; border-radius:50%; border:1px solid var(--ttm-line); display:flex; align-items:center; justify-content:center; color:var(--ttm-ink); transition:.2s; }
.ttm-share a:hover{ background:var(--ttm-accent); border-color:var(--ttm-accent); color:#0a1f0d; }
.ttm-share a svg{ width:17px; height:17px; }
.ttm-author{ display:flex; gap:20px; align-items:center; border:1px solid var(--ttm-line); border-radius:20px; padding:28px; margin-top:36px; background:var(--ttm-soft); }
.ttm-author img{ width:76px; height:76px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.ttm-author .name{ font-size:18px; font-weight:700; color:var(--ttm-ink); }
.ttm-author .role{ font-size:13px; color:var(--ttm-accent); font-weight:600; margin:2px 0 6px; }
.ttm-author p{ font-size:14.5px; line-height:1.6; color:var(--ttm-muted); margin:0; }
.ttm-nextpost{ margin-top:30px; border:1px solid var(--ttm-line); border-radius:18px; padding:22px 26px; display:flex; justify-content:flex-end; align-items:center; gap:16px; text-decoration:none; text-align:right; transition:.2s; }
.ttm-nextpost:hover{ border-color:var(--ttm-accent); }
.ttm-nextpost .lbl{ font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--ttm-muted); }
.ttm-nextpost .t{ font-size:17px; font-weight:700; color:var(--ttm-ink); }
.ttm-nextpost svg{ width:20px; height:20px; color:var(--ttm-accent); flex:0 0 auto; }

@media (max-width:991px){
  .ttm-blog-grid, .ttm-blogd-grid{ grid-template-columns:1fr; }
  .ttm-blog-side{ position:static; }
  .ttm-blog-card{ grid-template-columns:1fr; }
}
@media (max-width:575px){
  .ttm-blogd-meta{ gap:14px; }
}