.home-blog {
  padding-block: var(--section-space);
  background: #fff;
}

.home-blog__header {
  display: grid;
  grid-template-columns: 1fr .75fr;
  align-items: end;
  gap: clamp(1.5rem,4vw,4rem);
  margin-bottom: clamp(2rem,3vw,3rem);
}

.home-blog__eyebrow {
  margin: 0 0 .8rem;
  color: #a65300;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.home-blog h2 {
  margin: 0;
  font-size: clamp(1.9rem,3.3vw,3.4rem);
  line-height: 1.16;
  color: var(--color-dark);
}

.home-blog h2 span {
  display: block;
  color: var(--color-primary-dark);
}

.home-blog__intro {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.85;
}

.home-blog__grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: clamp(1rem,2vw,1.5rem);
}

.blog-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #eae5df;
  border-radius: var(--radius-lg);
  background: #faf9f7;
}

.blog-card__image {
  aspect-ratio: 1.6;
  overflow: hidden;
  background: #e9e4df;
}

.blog-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .3s ease;
}

.blog-card:hover img {
  transform: scale(1.04);
}

.blog-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.2rem,2vw,1.8rem);
}

.blog-card__category {
  color: #985000;
  font-size: .76rem;
  font-weight: 800;
}

.blog-card h3 {
  margin: .85rem 0;
  color: var(--color-dark);
  font-size: clamp(1.1rem,1.5vw,1.35rem);
  line-height: 1.45;
}

.blog-card p {
  flex: 1;
  margin: 0;
  color: var(--color-muted);
  font-size: .92rem;
  line-height: 1.8;
}

.blog-card__upcoming {
  display: inline-block;
  margin-top: 1.4rem;
  padding: .45rem .7rem;
  border-radius: .4rem;
  background: #fff0db;
  color: #8b4800;
  font-size: .78rem;
  font-weight: 700;
}

.home-blog__notice {
  margin: 1.5rem 0 0;
  color: var(--color-muted);
  font-size: .87rem;
}

@media (max-width: 900px) {
  .home-blog__grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 700px) {
  .home-blog__header,
  .home-blog__grid {
    grid-template-columns: 1fr;
  }
}
.blog-card h3 a {
  color: inherit;
  text-decoration: none;
}

.blog-card h3 a:hover {
  color: var(--color-primary-dark);
}

.blog-card h3 a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}