/* =========================================================
   Digital Hamza - blog (post pages and the blog index)
   Loaded after dh.css. Post text is imported unchanged from the
   old WordPress site, so these rules style plain article HTML and
   neutralise the old page-builder wrappers.
   ========================================================= */

.b-hero { position: relative; padding: 150px 0 56px; overflow: hidden; isolation: isolate; }
.b-hero::before { content: ''; position: absolute; z-index: -1; left: 50%; top: -30%; width: min(1100px, 140vw); height: 700px; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 40%, rgba(5,188,5,.14), transparent 62%); pointer-events: none; }
.b-wrap { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.b-crumbs { display: flex; gap: 10px; align-items: center; font-size: 13px; font-weight: 600; color: var(--t2); margin-bottom: 26px; }
.b-crumbs a:hover { color: var(--gt); }
.b-crumbs i { font-size: 9px; color: var(--t3); }
.b-hero h1 { font-size: clamp(32px, 4.6vw, 58px); font-weight: 600; line-height: 1.08; letter-spacing: -0.04em; text-wrap: balance; }
.b-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; font-size: 14px; color: var(--t2); }
.b-meta .who { display: flex; align-items: center; gap: 12px; color: var(--t1); font-weight: 600; }
.b-meta .who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top; }
.b-meta i { color: var(--gt); margin-right: 6px; }
.b-cover { max-width: 1040px; margin: 0 auto 56px; padding: 0 24px; }
.b-cover img { width: 100%; height: auto; border-radius: 24px; border: 1px solid var(--br); }

/* ---------- article text ---------- */
.post-body { font-size: 18px; line-height: 1.8; color: var(--t2); overflow-wrap: break-word; }
.post-body > :first-child { margin-top: 0; }
.post-body p { margin: 0 0 22px; }
.post-body strong, .post-body b { color: var(--t1); font-weight: 600; }
.post-body a { color: var(--gt); text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover { text-decoration-thickness: 2px; }
.post-body h2 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 600; line-height: 1.2; letter-spacing: -0.03em; color: var(--t1); margin: 56px 0 20px; }
.post-body h3 { font-size: clamp(21px, 2.4vw, 26px); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: var(--t1); margin: 40px 0 14px; }
.post-body h4, .post-body h5, .post-body h6 { font-size: 19px; font-weight: 600; color: var(--t1); margin: 32px 0 12px; }
.post-body ul, .post-body ol { margin: 0 0 24px; padding-left: 24px; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { margin-bottom: 10px; padding-left: 4px; }
.post-body li::marker { color: var(--gt); }
.post-body img { max-width: 100%; height: auto; border-radius: 16px; margin: 12px 0 24px; }
.post-body figure { margin: 0 0 28px; }
.post-body figcaption { font-size: 14px; color: var(--t3); margin-top: 8px; text-align: center; }
.post-body blockquote { margin: 32px 0; padding: 22px 26px; border-left: 3px solid var(--g); background: var(--d2); border-radius: 0 16px 16px 0; color: var(--t1); }
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body table { width: 100%; border-collapse: collapse; margin: 0 0 28px; font-size: 16px; display: block; overflow-x: auto; }
.post-body th, .post-body td { padding: 12px 14px; border: 1px solid var(--br2); text-align: left; }
.post-body th { background: var(--d2); color: var(--t1); font-weight: 600; }
.post-body hr { border: 0; border-top: 1px solid var(--br); margin: 40px 0; }
.post-body iframe, .post-body video { max-width: 100%; }
/* old page-builder wrappers: let them flow as plain blocks */
.post-body [class*="elementor"], .post-body [class*="e-con"] { max-width: 100%; }
.post-body .elementor-icon-list-items { list-style: none; padding-left: 0; }
.post-body .elementor-icon-list-item { display: flex; gap: 10px; align-items: flex-start; }
.post-body .elementor-icon-list-icon svg, .post-body .elementor-icon svg { width: 1em; height: 1em; fill: var(--gt); margin-top: .45em; flex-shrink: 0; }
.post-body .elementor-button { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; background: var(--g); color: #0f0f0f; font-weight: 600; text-decoration: none; }
.post-body .elementor-heading-title { margin-top: 48px; }

/* ---------- author + next step ---------- */
.b-author { display: grid; grid-template-columns: 84px 1fr; gap: 22px; align-items: center; margin: 64px 0 0; padding: 28px; border-radius: 24px; background: var(--d2); border: 1px solid var(--br); }
.b-author img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: top; }
.b-author small { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gt); margin-bottom: 4px; }
.b-author strong { display: block; font-size: 20px; font-weight: 600; }
.b-author p { font-size: 15px; color: var(--t2); line-height: 1.65; margin-top: 6px; }
.b-author a { color: var(--gt); font-weight: 600; }
.b-next { margin: 24px 0 110px; padding: 34px; border-radius: 24px; background: var(--g); color: #0f0f0f; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.b-next h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; }
.b-next p { font-size: 15px; margin-top: 6px; opacity: .85; }
.b-next .btn { background: #0f0f0f; color: #fff; }
.b-next .btn:hover { background: #fff; color: #0f0f0f; }

/* ---------- blog index ---------- */
.b-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-bottom: 120px; }
.b-card { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: var(--d2); border: 1px solid var(--br); transition: border-color .4s, transform .5s var(--ease); }
.b-card:hover { border-color: var(--gb); transform: translateY(-6px); }
.b-card .ph { aspect-ratio: 16 / 9; background: var(--d3); overflow: hidden; }
.b-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.b-card:hover .ph img { transform: scale(1.05); }
.b-card .bd { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.b-card time { font-size: 13px; color: var(--t3); font-weight: 600; margin-bottom: 10px; }
.b-card h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; margin-bottom: 10px; }
.b-card p { font-size: 15px; color: var(--t2); line-height: 1.6; margin-bottom: 20px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.b-card .go { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--gt); display: flex; gap: 8px; align-items: center; }
.b-card:first-child { grid-column: span 2; }
.b-card:first-child h2 { font-size: 28px; }

@media (max-width: 1080px) { .b-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .b-hero { padding: 124px 0 40px; }
  .post-body { font-size: 17px; }
  .b-list { grid-template-columns: 1fr; padding-bottom: 80px; }
  .b-card:first-child { grid-column: auto; }
  .b-card:first-child h2 { font-size: 22px; }
  .b-author { grid-template-columns: 1fr; text-align: left; }
  .b-next { padding: 26px 22px; margin-bottom: 80px; }
  .b-next .btn { width: 100%; justify-content: center; }
}

/* post pages no longer show the feature image: a rule under the title block instead */
article > .b-hero { padding-bottom: 40px; margin-bottom: 48px; border-bottom: 1px solid var(--br); }