/* ==========================================================================
   The blog index

   A column of articles with a short list of places to go next beside it. The
   old page used Bootstrap's col-9 / col-3, which on a phone still tried to be
   a nine-to-three split; this is one column below 860px.
   ========================================================================== */

.blog-index {
  --bl-purple: #7f3f98;
  --bl-ink:    #2b2530;
  --bl-soft:   #6d6577;
  --bl-line:   #e7e2ec;
  --bl-sand:   #faf7f2;

  background: var(--bl-sand);
  color: var(--bl-ink);
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ----------------------------------------------------------------- head -- */

.blog-head { max-width: 62ch; margin-bottom: 26px; }

.blog-head h1 {
  margin: 0;
  padding: 0;                      /* custom.min.css puts 1.2em on section h1 */
  font-family: "Amatic SC", cursive;
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 700;
  line-height: .9;
  color: var(--bl-purple);
}
.blog-head p { margin: 10px 0 0; font-size: 1rem; line-height: 1.65; color: var(--bl-soft); }

/* --------------------------------------------------------------- layout -- */

.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  align-items: start;
}

/* ---------------------------------------------------------------- cards -- */

.blog-card {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 22px;
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--bl-line);
}
.blog-card:last-child { border-bottom: 0; margin-bottom: 0; }

.blog-card-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  background: #ece7f2;
}
@supports not (aspect-ratio: 4 / 3) {
  .blog-card-media { height: 0; padding-bottom: 75%; }
}
.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.blog-card:hover .blog-card-media img { transform: scale(1.04); }

.blog-card-empty {
  display: block;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, #f2eef6 0 12px, #ece7f2 12px 24px);
}

.blog-card-body h2 {
  margin: 0;
  font-family: "Amatic SC", cursive;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
}
.blog-card-body h2 a { color: var(--bl-ink); text-decoration: none; }
.blog-card-body h2 a:hover { color: var(--bl-purple); }

.blog-card-body time {
  display: block;
  margin-top: 6px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bl-soft);
}

.blog-card-body p {
  margin: 10px 0 0;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--bl-soft);
}

.blog-more {
  display: inline-block;
  margin-top: 12px;
  font-size: .875rem;
  font-weight: 700;
  color: var(--bl-purple);
}
.blog-more:hover { color: var(--bl-purple); text-decoration: underline; }

.blog-empty { color: var(--bl-soft); }

/* ---------------------------------------------------------------- aside -- */

.blog-aside {
  padding: 20px 22px;
  border: 1px solid var(--bl-line);
  border-radius: 16px;
  background: #fff;
}

.blog-aside h2 {
  margin: 0 0 10px;
  font-family: "Amatic SC", cursive;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--bl-purple);
}

.blog-aside ul { margin: 0; padding: 0; list-style: none; }

.blog-aside li {
  padding: 11px 0;
  border-bottom: 1px solid var(--bl-line);
}
.blog-aside li:last-child { border-bottom: 0; padding-bottom: 0; }

.blog-aside a { display: block; font-size: .9375rem; font-weight: 700; color: var(--bl-ink); }
.blog-aside a:hover { color: var(--bl-purple); }
.blog-aside span { display: block; margin-top: 2px; font-size: .8125rem; color: var(--bl-soft); }

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 860px) {
  .blog-layout { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 560px) {
  .blog-card { grid-template-columns: 1fr; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-card-media img { transition: none; }
  .blog-card:hover .blog-card-media img { transform: none; }
}