/* ===================== Blog Article Blocks ===================== */

.blk-wrap { max-width: 100%; }
.blk-w-narrow { max-width: 640px; }
.blk-w-wide { max-width: 860px; }
.blk-w-full { max-width: 100%; }

.blk-a-left { margin-left: 0; margin-right: auto; }
.blk-a-center { margin-left: auto; margin-right: auto; }
.blk-a-right { margin-left: auto; margin-right: 0; }

.blk-s-sm { margin-top: 1.25rem; }
.blk-s-md { margin-top: 2.25rem; }
.blk-s-lg { margin-top: 3.5rem; }

.blk-wrap:first-child { margin-top: 0; }

.blk-text { line-height: 1.75; }
.blk-text, .blk-text p, .blk-text li { text-align: left; }

.blk-title { font-family: var(--font-heading); margin-bottom: 0; }

.blk-paragraph p:last-child { margin-bottom: 0; }

.blk-quote {
  border-left: 4px solid var(--color-primary);
  padding: 0.75rem 0 0.75rem 1.25rem;
  margin: 0;
  font-style: italic;
  color: var(--color-secondary);
}

.blk-cta {
  background: var(--color-light-alt);
  border-radius: 16px;
  padding: 1.75rem;
}
.blk-cta-btn { display: inline-block; margin-top: 1rem; }

.blk-image { display: block; width: 100%; height: auto; border-radius: 14px; }

.blk-hero { position: relative; border-radius: 18px; overflow: hidden; }
.blk-hero img { display: block; width: 100%; height: auto; max-height: 480px; object-fit: cover; }
.blk-hero-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2rem 1.75rem;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 100%);
  color: #fff;
}
.blk-hero-eyebrow { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.85; margin-bottom: 0.35rem; }
.blk-hero-heading { color: #fff; margin: 0; font-family: var(--font-heading); }

.blk-image-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.blk-image-pair img { width: 100%; height: 320px; object-fit: cover; border-radius: 14px; }

.blk-gallery { border-radius: 14px; }
.blk-gallery .swiper-slide img { width: 100%; height: 320px; object-fit: cover; border-radius: 14px; }

.blk-video-wrap { position: relative; width: 100%; padding-bottom: 56.25%; border-radius: 14px; overflow: hidden; background: #000; }
.blk-video-wrap iframe,
.blk-video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.blk-divider { border: 0; border-top: 1px solid var(--color-border); margin: 0; }

@media (max-width: 767.98px) {
  .blk-image-pair { grid-template-columns: 1fr; }
  .blk-hero img { max-height: 280px; }
}