/* ═══════════════════════════════════════════════
   Blog page — uses the site tokens from style.css
   ═══════════════════════════════════════════════ */

/* placeholder cover art (swap for a real <img> any time) */
.bcover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-2)
}

.bcover::before,
.bcover::after {
  content: "";
  position: absolute;
  inset: 0
}

.bcover::before {
  background:
    radial-gradient(60% 80% at 20% 30%, var(--accent-wash), transparent 70%),
    radial-gradient(50% 70% at 80% 70%, var(--orb-2), transparent 70%)
}

.bcover::after {
  background: repeating-linear-gradient(115deg, transparent 0 30px, var(--border-soft) 30px 31px)
}

.bcover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1
}

.bmeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  font-size: 12.5px;
  color: var(--text-3);
  margin-bottom: 12px
}

.bmeta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-3)
}

.bcard h3 a::after,
.featured h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit
}

/* whole card is clickable */
.bcard h3 a:focus-visible,
.featured h2 a:focus-visible {
  outline: none
}

.bcard:focus-within,
.featured:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 3px
}

.read {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  margin-top: auto
}

.read span {
  transition: transform .35s cubic-bezier(.2, .8, .2, 1)
}

.bcard:hover .read span,
.featured:hover .read span {
  transform: translateX(4px)
}

/* featured (latest) post */
.featured {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(20px, 3.4vw, 44px);
  align-items: center;
  padding: clamp(16px, 2.4vw, 26px);
  margin-bottom: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color .4s, box-shadow .4s, transform .4s cubic-bezier(.2, .8, .2, 1)
}

.featured:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px)
}

.featured .bcover {
  aspect-ratio: 16/10
}

.featured .ftext {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px clamp(4px, 1vw, 14px) 6px 0
}

.featured h2 {
  font-size: clamp(24px, 3.2vw, 36px);
  letter-spacing: -.02em;
  margin-bottom: 12px;
  line-height: 1.12
}

.featured p {
  color: var(--text-2);
  font-size: 15.5px;
  margin-bottom: 20px
}

/* post cards */
.bgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

.bcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color .4s, box-shadow .4s, transform .4s cubic-bezier(.2, .8, .2, 1)
}

.bcard:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
  transform: translateY(-5px)
}

.bcard .bbody {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 8px 0
}

.bcard h3 {
  font-size: 20px;
  line-height: 1.25;
  margin-bottom: 9px
}

.bcard p {
  font-size: 14.2px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.cta {
  margin-top: clamp(48px, 7vw, 80px);
  padding: clamp(28px, 5vw, 48px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: center
}

.cta h2 {
  font-size: clamp(24px, 3.4vw, 34px);
  margin-bottom: 10px
}

.cta p {
  color: var(--text-2);
  max-width: 46ch;
  margin: 0 auto 24px
}

.cta .actions {
  justify-content: center
}

@media (max-width:1099px) {
  .bgrid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width:820px) {
  .featured {
    grid-template-columns: 1fr
  }
}

@media (max-width:640px) {
  .bgrid {
    grid-template-columns: 1fr
  }
}