/* ===== blog archive (home.php) ===== */

.page-hero { border-bottom: 1px solid var(--ink-15); padding-block: clamp(48px,6.5vw,88px); }
.page-hero h1 { max-width: 22ch; margin-top: 14px; }
.page-hero .lead { max-width: 52ch; margin-top: 16px; }

/* featured post */
.featured-post {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(28px, 3.5vw, 44px);
  background: var(--paper-card);
  border: 1.5px solid var(--ink-15);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .4s var(--ease);
}
.featured-post:hover { box-shadow: 0 28px 52px -24px rgba(28,26,23,.38); }
.featured-post:hover .fp-arrow { transform: translateX(5px); }

.fp-img { aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; }
.fp-img img { width: 100%; height: 100%; object-fit: cover; }
.fp-img .ph { width: 100%; height: 100%; }

.fp-text { display: flex; flex-direction: column; }
.fp-text .display-m { margin: 14px 0 14px; max-width: 20ch; }
.fp-text .fp-excerpt { font-size: 15.5px; color: var(--ink-70); line-height: 1.6; max-width: 42ch; margin: 0; }

.fp-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--ink-55); margin-top: 18px;
}
.fp-meta .sep { color: var(--ink-15); }

.fp-cta {
  margin-top: 24px;
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 15px; color: var(--amber-deep);
}
.fp-arrow { transition: transform .35s var(--ease); }

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

/* category filter */
.blog-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 44px; }
.filter-pill {
  font-family: var(--sans);
  font-size: 13.5px; font-weight: 600;
  padding: 9px 18px;
  border: 1.5px solid var(--ink-15);
  border-radius: 999px;
  background: transparent; color: var(--ink-70);
  cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
  white-space: nowrap;
}
.filter-pill:hover { border-color: var(--ink); color: var(--ink); background: var(--paper-card); }
.filter-pill.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* blog grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 1020px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .blog-grid { grid-template-columns: 1fr; } }

/* blog card */
.blog-card {
  display: flex; flex-direction: column;
  background: var(--paper-card);
  border: 1.5px solid var(--ink-15);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 26px 48px -28px rgba(28,26,23,.5); }

.bc-img { aspect-ratio: 16/9; overflow: hidden; flex-shrink: 0; }
.bc-img img { width: 100%; height: 100%; object-fit: cover; }
.bc-img .ph { width: 100%; height: 100%; }

.bc-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }

.bc-cat {
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 10px;
}
.bc-cat.amber    { color: var(--amber-deep); }
.bc-cat.burgundy { color: var(--burgundy); }
.bc-cat.bottle   { color: var(--bottle); }

.bc-title {
  font-family: var(--display);
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.18; font-weight: 400;
  margin: 0 0 10px;
}
.bc-excerpt {
  font-size: 14.5px; color: var(--ink-70); margin: 0;
  flex: 1; line-height: 1.55;
}
.bc-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-40);
  border-top: 1px solid var(--ink-08); padding-top: 14px; margin-top: 16px;
}
.bc-meta .sep { color: var(--ink-15); }

/* newsletter form in archive */
.news-form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 480px; }
.news-form input[type="email"] {
  font-family: var(--sans); font-size: 14.5px;
  flex: 1; min-width: 200px;
  padding: 12px 16px;
  border: 1.5px solid var(--ink-15); border-radius: var(--radius);
  background: var(--paper-card); color: var(--ink);
}
.news-form input[type="email"]::placeholder { color: var(--ink-40); }
.news-form input[type="email"]:focus { outline: none; border-color: var(--amber); }