/* ═══════════════════════════════════════════════════════════════
   Burke Williams — Blog Listing / Archive  |  Figma node: 1978:80822
   ═══════════════════════════════════════════════════════════════ */

/* Hero — fill:#335d88 min-height 700px */
.bw-blog-hero {
  position: relative; min-height: 700px; background: #335d88;
  display: flex; align-items: flex-end; overflow: hidden;
}
.bw-blog-hero-bg {
  position: absolute; inset: 0;
  background-image: url('../../images/blog-listing-I1978-80823-1729-26875-1382-57016.png');
  background-size: cover; background-position: center; opacity: 0.25;
}
.bw-blog-hero-inner {
  position: relative; z-index: 2; max-width: 1680px; width: 100%;
  margin-inline: auto; padding: 80px 120px;
  display: flex; flex-direction: column; gap: 24px;
}
.bw-blog-hero-text { display: flex; flex-direction: column; gap: 12px; }
.bw-blog-hero-heading { margin: 0; }
/* Teodor 60px wt=350 lh=72px */
.bw-blog-h-display { display: block; font-family: var(--font-display); font-size: 60px; font-weight: 350; line-height: 72px; color: #fffdf8; }
/* La Belle Aurore 60px */
.bw-blog-h-script { display: block; font-family: var(--font-script); font-size: 60px; font-weight: 400; line-height: 72px; color: #fffdf8; font-style: normal; }
/* Barlow 20px wt=400 lh=24px */
.bw-blog-hero-desc { font-family: var(--font-body); font-size: 20px; font-weight: 400; line-height: 24px; color: #fffdf8; max-width: 600px; margin: 0; }
.bw-blog-hero-note { font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 19.2px; letter-spacing: 0.16px; color: rgba(255,253,248,0.7); margin: 0; }
/* Category pills [137–231px ×44] fill:#fff radius:110px */
.bw-blog-hero-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.bw-blog-hero-pill {
  display: inline-flex; align-items: center; height: 44px; padding: 0 20px;
  border-radius: 110px; background: #fff; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 16px; font-weight: 500; color: #335d88;
  transition: background 0.2s;
}
.bw-blog-hero-pill:hover { background: #ece8dd; }

/* Blog grid section — fill:#fffdf8 pad-top=100 */
.bw-blog-grid-section { background: #fffdf8; padding: 100px 120px; }
.bw-blog-grid-container { max-width: 1680px; margin-inline: auto; }
/* 3-column grid [1680px] gap=24 */
.bw-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* Blog card [544×552] fill:#fffdf8 stroke:#b3b3b3 radius:10px */
.bw-blog-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: #fffdf8; border: 1px solid #b3b3b3; border-radius: 10px; overflow: hidden;
  transition: box-shadow 0.25s, transform 0.25s;
}
.bw-blog-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.1); }
/* Image container [551×379] */
.bw-blog-card-img-wrap { position: relative; width: 100%; height: 379px; overflow: hidden; }
.bw-blog-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Category badge overlay [125×42] fill:#fffdf8 radius:10px */
.bw-blog-card-badge {
  position: absolute; bottom: 12px; left: 12px;
  background: #fffdf8; border-radius: 10px; padding: 10px;
  font-family: var(--font-body); font-size: 16px; font-weight: 500;
  line-height: 21.6px; letter-spacing: 0.16px; color: #6c6c6c;
  text-transform: capitalize;
}
/* Body [551×171] pad=20 gap=35 */
.bw-blog-card-body {
  display: flex; flex-direction: column; justify-content: space-between; gap: 35px;
  padding: 20px; flex: 1;
}
.bw-blog-card-text { display: flex; flex-direction: column; gap: 8px; }
/* Teodor 24px wt=700 lh=26.9px #335d88 */
.bw-blog-card-title { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 26.9px; color: #335d88; margin: 0; }
.bw-blog-card-date { font-family: var(--font-body); font-size: 13px; color: #b3b3b3; }
.bw-blog-read-more { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: #335d88; align-self: flex-start; }

/* Pagination */
.bw-blog-pagination { padding: 48px 0 0; display: flex; justify-content: center; gap: 8px; }
.bw-blog-pagination .nav-links { display: flex; gap: 8px; }
.bw-blog-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid #ece8dd; background: transparent;
  font-family: var(--font-body); font-size: 15px; color: #335d88; text-decoration: none;
  transition: background 0.2s;
}
.bw-blog-pagination .page-numbers.current,
.bw-blog-pagination .page-numbers:hover { background: #335d88; color: #fff; border-color: #335d88; }

@media (max-width: 1400px) { .bw-blog-hero-inner, .bw-blog-grid-section { padding-left: 64px; padding-right: 64px; } }
@media (max-width: 1100px) { .bw-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .bw-blog-hero-inner, .bw-blog-grid-section { padding-left: 24px; padding-right: 24px; }
  .bw-blog-h-display, .bw-blog-h-script { font-size: clamp(36px, 8vw, 60px); line-height: 1.1; }
  .bw-blog-hero { min-height: auto; padding-block: 60px 0; }
  .bw-blog-grid { grid-template-columns: 1fr; }
  .bw-blog-grid-section { padding-top: 48px; }
}