/* ════════════════════════════════════════════════════
   journal.css — Journal / Blog section
   Edit this file to change: card proportions,
   featured card width, header height, category pill
════════════════════════════════════════════════════ */

/* Asymmetric grid: featured (2fr) + 2 small (1fr each) */
.journal-grid {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap:        20px;
  margin-top: 66px;
}

/* ── Card base ───────────────────────────────────── */
.jcard {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--r);
  overflow:      hidden;
  cursor:        pointer;
  transition:
    transform    0.42s var(--spring),
    box-shadow   0.42s,
    border-color 0.22s;
}
.jcard:hover {
  transform:    translateY(-6px);
  box-shadow:   var(--shadow-lg);
  border-color: var(--border-sage);
}

/* Coloured image placeholder at top of card */
.jcard-img {
  height:  148px;
  display: flex;
  align-items:  flex-end;
  padding: 20px 24px;
}
.jcard-img-sm { height: 108px; }

/* Category pill on image */
.jcat {
  display:         inline-block;
  background:      rgba(255, 255, 255, 0.90);
  border-radius:   100px;
  padding:         5px 13px;
  font-size:       9px;
  color:           var(--text);
  font-family:     'DM Mono', monospace;
  letter-spacing:  0.12em;
  text-transform:  uppercase;
}

/* Card body */
.jcard-body    { padding: 24px; }
.jcard-body-sm { padding: 20px; }

.jcard h3 {
  font-family: 'Fraunces', serif;
  font-size:   21px;
  font-weight: 400;
  color:       var(--text);
  line-height: 1.3;
  margin-bottom: 10px;
}
.jcard-sm h3 { font-size: 17px; }

.jcard p {
  font-size:     14px;
  color:         var(--text-muted);
  line-height:   1.7;
  margin-bottom: 18px;
}

/* Footer row */
.jcard-foot {
  padding:         14px 24px;
  border-top:      1px solid var(--border);
  display:         flex;
  justify-content: space-between;
  align-items:     center;
}
.jcard-foot-sm { padding: 12px 20px; }

.jread {
  font-size:      10px;
  color:          var(--text-light);
  font-family:    'DM Mono', monospace;
  letter-spacing: 0.06em;
}