/* Blog layouts. Base design system (tokens, nav, footer, buttons, .sec, .cta-sec) comes from /assets/css/site.css. */

.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

a.bl-card, a.bl-feature, .bl-pagination a, .bl-cat { color: inherit; text-decoration: none; }
/* The static pages reset link underlines in each page's own CSS and the blog has no such reset, so the browser's default
   underline showed on the header menu, the Services menu, the phone menu, the footer and the buttons. Article links keep theirs (.bl-content a). */
a { text-decoration: none; }

/* ---------- Hub / archive header ---------- */
.bl-hero { padding-top: 60px; padding-bottom: 30px; }
.bl-hero .eyebrow { margin-bottom: 24px; }
.bl-hero-title {
  font-size: clamp(36px, 5.5vw, 76px); line-height: .98; letter-spacing: -0.025em;
  font-weight: 400; max-width: 1000px; color: var(--ink);
}
.bl-lede { font-size: 18px; line-height: 1.55; color: var(--charcoal); max-width: 640px; margin-top: 20px; }
.bl-cats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.bl-cat {
  font-size: 13px; font-weight: 500; padding: 9px 16px; border-radius: 100px;
  border: 1px solid var(--bone-border); background: var(--pure); color: var(--ink);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.bl-cat:hover, .bl-cat.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- Search ---------- */
.bl-search { display: flex; gap: 10px; margin-top: 28px; max-width: 520px; }
.bl-search input[type=search] {
  flex: 1; font: inherit; font-size: 15px; padding: 14px 18px; border-radius: 100px;
  border: 1px solid var(--bone-border); background: var(--pure); color: var(--ink);
}
.bl-search input[type=search]:focus { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- Featured post ---------- */
.bl-feature-sec { padding-top: 20px; padding-bottom: 20px; }
.bl-feature {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 0; overflow: hidden;
  background: var(--pure); border: 1px solid rgba(20,20,20,.08); border-radius: 10px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.bl-feature:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(20,20,20,.08); }
.bl-feature-img { background: var(--bone); min-height: 320px; }
.bl-feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-feature-body { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.bl-feature-title { font-size: clamp(26px, 3vw, 40px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 400; color: var(--ink); }
.bl-feature-excerpt { font-size: 16px; line-height: 1.6; color: var(--charcoal); }

/* ---------- Card grid ---------- */
.bl-grid-sec { padding-top: 20px; }
.bl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bl-card {
  display: flex; flex-direction: column; background: var(--pure); overflow: hidden;
  border: 1px solid rgba(20,20,20,.08); border-radius: 10px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.bl-card:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(20,20,20,.08); }
.bl-card-img { aspect-ratio: 16 / 9; background: var(--bone); overflow: hidden; }
.bl-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.bl-card-cat, .bl-meta {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue);
}
.bl-card-title { font-size: 20px; line-height: 1.22; letter-spacing: -0.01em; font-weight: 500; color: var(--ink); }
.bl-card-meta { font-size: 13px; color: var(--charcoal); margin-top: auto; padding-top: 6px; }

.bl-card-img.is-empty, .bl-feature-img.is-empty { background: var(--bone) url(/assets/brand/consultus-mark.svg) center / 48px no-repeat; }

/* ---------- Pagination ---------- */
.bl-pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 56px; }
.bl-pagination .page-numbers {
  font-size: 14px; font-weight: 500; min-width: 42px; text-align: center; padding: 10px 16px;
  border-radius: 100px; border: 1px solid var(--bone-border); background: var(--pure); color: var(--ink);
  transition: background .25s ease, color .25s ease;
}
.bl-pagination a.page-numbers:hover, .bl-pagination .page-numbers.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bl-pagination .dots { border: 0; background: none; }

/* ---------- Single post ---------- */
.bl-article { max-width: 760px; margin: 0 auto; padding: 72px 32px 40px; }
.bl-article .eyebrow { margin-bottom: 22px; }
.bl-title { font-size: clamp(34px, 4.8vw, 60px); line-height: 1.02; letter-spacing: -0.025em; font-weight: 400; color: var(--ink); }
.bl-meta { margin-top: 22px; color: var(--charcoal); letter-spacing: .06em; }
.bl-hero-img { margin: 40px -80px 8px; border-radius: 10px; overflow: hidden; background: var(--bone); }
.bl-hero-img img { width: 100%; height: auto; display: block; }

.bl-content { margin-top: 40px; font-size: 17.5px; line-height: 1.7; color: var(--graphite); overflow-wrap: break-word; }
.bl-content > * + * { margin-top: 1.25em; }
.bl-content h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 400; color: var(--ink); margin-top: 2em; }
.bl-content h3 { font-family: var(--wide); font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--ink); margin-top: 1.8em; }
.bl-content h4 { font-size: 17px; font-weight: 600; color: var(--ink); margin-top: 1.6em; }
.bl-content a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bl-content a:hover { text-decoration-thickness: 2px; }
.bl-content strong, .bl-content b { font-weight: 600; color: var(--ink); }
.bl-content ul, .bl-content ol { padding-left: 1.4em; }
.bl-content li + li { margin-top: .45em; }
.bl-content blockquote {
  margin-left: 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--yellow-dark);
  font-size: 1.1em; line-height: 1.5; color: var(--ink);
}
.bl-content img, .bl-content video, .bl-content iframe { max-width: 100%; height: auto; border-radius: 8px; }
/* An iframe has no natural height, so height:auto squashed the YouTube embeds to a 150px strip: give them a 16:9 box. */
.bl-content iframe { width: 100%; aspect-ratio: 16 / 9; }
.bl-content figure { margin-left: 0; margin-right: 0; }
.bl-content figcaption { font-size: 14px; color: var(--charcoal); margin-top: 10px; }
.bl-content table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.bl-content th, .bl-content td { padding: 10px 14px; border: 1px solid var(--bone-border); text-align: left; vertical-align: top; }
.bl-content th { background: var(--bone); font-weight: 600; color: var(--ink); }
.bl-content hr { border: 0; border-top: 1px solid var(--bone-border); margin: 2.4em 0; }
.bl-content pre, .bl-content code { font-family: var(--mono); font-size: .9em; }
.bl-content pre { background: var(--bone); padding: 18px 20px; border-radius: 8px; overflow-x: auto; }
.bl-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }

.bl-author {
  display: flex; gap: 20px; align-items: flex-start; margin-top: 64px; padding: 28px;
  background: var(--bone); border: 1px solid var(--bone-border); border-radius: 10px;
}
.bl-author-img img { width: 72px; height: 72px; border-radius: 50%; display: block; object-fit: cover; }
.bl-author-name { font-size: 18px; font-weight: 600; color: var(--ink); }
.bl-author-job { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-top: 4px; }
.bl-author-bio { font-size: 15px; line-height: 1.6; color: var(--charcoal); margin-top: 12px; }

.bl-related { padding-top: 60px; padding-bottom: 80px; }
.bl-related .section-lbl { margin-bottom: 32px; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .bl-grid { grid-template-columns: repeat(2, 1fr); }
  .bl-feature { grid-template-columns: 1fr; }
  .bl-feature-img { min-height: 0; aspect-ratio: 16 / 9; }
  .bl-hero-img { margin-left: 0; margin-right: 0; }
}
@media (max-width: 640px) {
  .bl-grid { grid-template-columns: 1fr; }
  .bl-feature-body { padding: 28px 24px; }
  .bl-article { padding: 48px 16px 24px; }
  .bl-content { font-size: 16.5px; }
  .bl-author { flex-direction: column; }
  .bl-search { flex-direction: column; }
}