/* ================= Seekr blog =================
   Blog page, article pages (built in functions/_lib/blog.js) and the home page blog section.
   Every class starts with bl- so nothing here changes the rest of the site. */

.bl-page { background: var(--bg); }
.bl-container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.bl-page .btn { width: auto; }

/* ---------- Cards ---------- */
.bl-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid #eceef1; border-radius: 16px; overflow: hidden; color: var(--primary-text); transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease; }
.bl-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -18px rgba(13,12,11,.28); border-color: #e2e4e8; }
.bl-card:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.bl-card-img { display: block; aspect-ratio: 1200 / 630; overflow: hidden; background: #ece7e2; }
.bl-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.bl-card:hover .bl-card-img img { transform: scale(1.03); }
.bl-card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.bl-card-meta { display: block; font-size: 13px; color: var(--muted-text); }
.bl-card-title { display: block; font-size: 20px; font-weight: 600; line-height: 1.5; text-wrap: balance; }
.bl-card-text { display: block; font-size: 15.5px; line-height: 1.75; color: var(--tertiary-text); text-wrap: pretty; }
.bl-read { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; font-size: 15px; font-weight: 700; color: var(--orange); }
.bl-arrow { width: 18px; height: 18px; flex-shrink: 0; transition: transform .25s ease; }
.bl-card:hover .bl-arrow, .bl-read:hover .bl-arrow { transform: translateX(4px); }
[dir="rtl"] .bl-arrow { transform: scaleX(-1); }
[dir="rtl"] .bl-card:hover .bl-arrow, [dir="rtl"] .bl-read:hover .bl-arrow { transform: scaleX(-1) translateX(4px); }

/* Wide card (top of the blog page) */
.bl-card.is-wide { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.bl-card.is-wide .bl-card-img { aspect-ratio: auto; min-height: 100%; }
.bl-card.is-wide .bl-card-body { padding: 36px; justify-content: center; gap: 14px; }
.bl-card.is-wide .bl-card-title { font-size: 30px; line-height: 1.4; }
.bl-card.is-wide .bl-card-text { font-size: 17px; }
.bl-card.is-wide .bl-read { margin-top: 8px; }

/* Home page: one large article + three small ones */
.bl-home-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
.bl-card.is-feature .bl-card-body { padding: 24px 26px 26px; }
.bl-card.is-feature .bl-card-title { font-size: 26px; line-height: 1.45; }
.bl-card.is-feature .bl-card-text { font-size: 16.5px; }
.bl-home-side { display: grid; grid-template-rows: repeat(3, 1fr); gap: 16px; }
.bl-card.is-compact { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.bl-card.is-compact .bl-card-img { aspect-ratio: auto; height: 100%; min-height: 128px; }
.bl-card.is-compact .bl-card-body { padding: 16px 20px; gap: 6px; justify-content: center; }
.bl-card.is-compact .bl-card-title { font-size: 17.5px; line-height: 1.55; }
.bl-card.is-compact .bl-read { margin-top: 4px; }
.bl-home-more { display: flex; justify-content: center; margin-top: 32px; }
.jobs + .bl-home { padding-top: 0; }
.bl-home { padding-bottom: 115px; }

/* Grid of cards */
.bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* ---------- Blog page ---------- */
.bl-hub-head { padding: 64px 0 36px; }
.bl-eyebrow { font-size: 15px; font-weight: 600; color: var(--orange); margin-bottom: 10px; }
.bl-hub-head h1 { font-size: 48px; font-weight: 600; line-height: 1.25; }
.bl-hub-sub { font-size: 20px; font-weight: 300; line-height: 1.7; color: var(--tertiary-text); max-width: 680px; margin-top: 14px; }
.bl-note { display: inline-block; margin-top: 18px; font-size: 15px; padding: 8px 14px; border-radius: 10px; background: #fff4ee; color: #9a3a0e; }
.bl-label { font-size: 14px; font-weight: 600; color: var(--muted-text); margin: 0 0 14px; }
.bl-hub .bl-grid { margin-bottom: 8px; }
.bl-hub .is-wide { margin-bottom: 40px; }
.bl-empty { padding: 48px 0; color: var(--tertiary-text); font-size: 18px; }

/* ---------- Article ---------- */
.bl-post-head { max-width: 1180px; padding-top: 48px; padding-bottom: 28px; }
.bl-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--muted-text); margin-bottom: 18px; }
.bl-crumbs a:hover { color: var(--orange); }
.bl-post-head h1 { font-size: 44px; font-weight: 600; line-height: 1.35; max-width: 900px; text-wrap: balance; }
.bl-dek { font-size: 20px; font-weight: 300; line-height: 1.75; color: var(--tertiary-text); max-width: 780px; margin-top: 16px; text-wrap: pretty; }
.bl-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14.5px; color: var(--muted-text); margin-top: 18px; }
.bl-cover { margin: 0 auto 48px; }
.bl-cover img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 20px; background: #ece7e2; }

.bl-post-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; align-items: start; padding-bottom: 24px; }
.bl-prose { max-width: 740px; font-size: 18px; line-height: 1.95; color: var(--secondary-text); }
.bl-prose > *:first-child { margin-top: 0; }
.bl-prose p { margin: 0 0 18px; text-wrap: pretty; }
.bl-prose h2 { font-size: 27px; font-weight: 600; line-height: 1.45; color: var(--primary-text); margin: 52px 0 16px; scroll-margin-top: 110px; }
.bl-prose h3 { font-size: 20.5px; font-weight: 600; line-height: 1.5; color: var(--primary-text); margin: 34px 0 10px; }
.bl-prose strong { font-weight: 600; color: var(--primary-text); }
.bl-prose a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bl-prose a:hover { text-decoration-thickness: 2px; }
.bl-prose ul, .bl-prose ol { margin: 0 0 20px; padding-inline-start: 24px; }
.bl-prose li { margin: 6px 0; padding-inline-start: 4px; }
.bl-prose li::marker { color: var(--orange); }
.bl-prose ol li::marker { font-weight: 600; }
.bl-prose blockquote { margin: 6px 0 24px; padding: 18px 22px; background: var(--white); border: 1px solid #eceef1; border-inline-start: 3px solid var(--orange); border-radius: 12px; font-size: 17px; line-height: 1.85; color: var(--primary-text); }
.bl-prose blockquote p { margin: 0 0 8px; }
.bl-prose blockquote > :last-child { margin-bottom: 0; }
.bl-prose blockquote ul { margin: 4px 0 0; }
.bl-prose code { font-family: ui-monospace, Consolas, monospace; font-size: .85em; background: #eceef1; padding: 2px 6px; border-radius: 6px; unicode-bidi: isolate; }
.bl-prose hr { border: 0; height: 1px; background: #e3e5e8; margin: 36px 0; }

.bl-aside { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 16px; }
.bl-toc { background: var(--white); border: 1px solid #eceef1; border-radius: 16px; padding: 20px 20px 14px; }
.bl-toc p { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.bl-toc ol { list-style: none; counter-reset: toc; }
.bl-toc li { counter-increment: toc; }
.bl-toc a { display: grid; grid-template-columns: 22px 1fr; gap: 4px; padding: 7px 0; font-size: 14.5px; line-height: 1.6; color: var(--tertiary-text); border-top: 1px solid #f1f2f4; transition: color .2s; }
.bl-toc li:first-child a { border-top: 0; }
.bl-toc a::before { content: counter(toc); font-size: 12.5px; color: var(--subtle-text); padding-top: 2px; font-variant-numeric: tabular-nums; }
.bl-toc a:hover, .bl-toc a.is-on { color: var(--orange); }
.bl-side-cta { background: var(--primary-text); color: var(--white); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.bl-side-cta-t { font-size: 18px; font-weight: 600; }
.bl-side-cta p:not(.bl-side-cta-t) { font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,.7); }
.bl-side-cta .btn { width: 100%; margin-top: 6px; font-size: 15px; }

/* Dark band with the call to action */
.bl-band { background: var(--primary-text); color: var(--white); margin: 64px 0 0; padding: 56px 0; }
.bl-band-in { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.bl-band h2 { font-size: 32px; font-weight: 600; line-height: 1.35; }
.bl-band p { font-size: 17px; line-height: 1.75; color: var(--subtle-text); max-width: 620px; margin-top: 10px; }
.bl-band-btns { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
.bl-band .btn { height: 48px; padding: 0 22px; }
.bl-band .btn-outline-light { background: transparent; border: 1px solid rgba(255,255,255,.6); color: var(--white); }
.bl-band .btn-outline-light:hover { background: rgba(255,255,255,.1); }

.bl-related { padding: 64px 24px 80px; }
.bl-related-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.bl-related-head h2 { font-size: 26px; font-weight: 600; }
.bl-related-head .bl-read { margin: 0; }
.bl-404 { padding: 96px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.bl-404 h1 { font-size: 36px; }
.bl-404 p { color: var(--tertiary-text); font-size: 18px; }

/* Footer */
.bl-footer { background: var(--primary-text); color: var(--white); padding: 40px 0; border-top: 1px solid rgba(255,255,255,.08); }
.bl-page .bl-band + .bl-footer { border-top-color: rgba(255,255,255,.08); }
.bl-footer-in { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.bl-footer .logo-word { color: var(--white); font-size: 34px; }
.bl-footer .logo-mark { width: 32px; height: 35px; }
.bl-footer .logo-word img { width: 7px; height: 16px; margin-bottom: 3px; }
.bl-footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; }
.bl-footer-links a { color: rgba(255,255,255,.75); transition: color .2s; }
.bl-footer-links a:hover { color: var(--orange); }
.bl-copy { width: 100%; font-size: 14px; color: var(--subtle-text); }

/* ---------- Smaller screens ---------- */
@media (max-width: 1100px) {
  .bl-post-grid { grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; }
  .bl-home-grid { grid-template-columns: 1fr; }
  .bl-home-side { grid-template-rows: none; }
}
@media (max-width: 960px) {
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-card.is-wide { grid-template-columns: 1fr; }
  .bl-card.is-wide .bl-card-img { aspect-ratio: 1200 / 630; }
  .bl-card.is-wide .bl-card-body { padding: 24px; }
  .bl-card.is-wide .bl-card-title { font-size: 24px; }
  .bl-post-grid { grid-template-columns: 1fr; gap: 8px; }
  .bl-aside { position: static; }
  .bl-toc { display: none; }
  .bl-band-in { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .bl-container { padding: 0 16px; }
  .bl-grid { grid-template-columns: 1fr; }
  .bl-hub-head { padding: 40px 0 24px; }
  .bl-hub-head h1 { font-size: 34px; }
  .bl-hub-sub, .bl-dek { font-size: 17px; }
  .bl-post-head { padding-top: 28px; }
  .bl-post-head h1 { font-size: 29px; line-height: 1.45; }
  .bl-cover { margin-bottom: 28px; }
  .bl-cover img { border-radius: 14px; }
  .bl-prose { font-size: 17px; line-height: 1.9; }
  .bl-prose h2 { font-size: 22px; margin-top: 40px; }
  .bl-prose h3 { font-size: 18.5px; }
  .bl-prose blockquote { padding: 14px 16px; font-size: 16px; }
  .bl-band { margin-top: 40px; padding: 40px 0; }
  .bl-band h2 { font-size: 25px; }
  .bl-band-btns, .bl-band .btn { width: 100%; }
  .bl-related { padding: 44px 16px 56px; }
  .bl-related-head h2 { font-size: 21px; }
  .bl-card.is-feature .bl-card-title { font-size: 21px; }
  .bl-card.is-feature .bl-card-body { padding: 18px 18px 20px; }
  .bl-card.is-compact { grid-template-columns: 112px minmax(0, 1fr); }
  .bl-card.is-compact .bl-card-img { min-height: 104px; }
  .bl-card.is-compact .bl-card-body { padding: 12px 14px; }
  .bl-card.is-compact .bl-card-title { font-size: 15.5px; line-height: 1.5; }
  .bl-card.is-compact .bl-card-meta { display: none; }
  .bl-home { padding-bottom: 64px; }
}