.c-editorial {
  display: grid;
  gap: var(--grid-gap-lg);
  align-items: center;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 56rem) {
  .c-editorial { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-editorial--reverse .c-editorial__media { order: 2; }
}

/* Photo panels are plain CSS backgrounds (not wp:image), same as
   .c-hero__media / .c-newsletter / .c-testimonials — a wp:image's figure
   wrapper doesn't stretch to fill this aspect-ratio box by default, so
   object-fit: cover on the img has no definite box to cover and leaves a
   gap whenever the photo's own aspect ratio doesn't exactly match 4:3.
   A CSS background always covers regardless of the source photo's
   dimensions. */
.c-editorial__media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--color-tan-400), var(--color-tan-500));
}

.c-editorial__media--cool {
  background: linear-gradient(135deg, var(--color-olive-300), var(--color-olive-500));
}

.c-editorial__media--ritual {
  background: url("../../images/editorial-natural-ritual-stir.webp") center / cover no-repeat, linear-gradient(135deg, var(--color-tan-400), var(--color-tan-500));
}

.c-editorial__media--ingredients {
  background: url("../../images/about-ingredients-beans.webp") center / cover no-repeat, linear-gradient(135deg, var(--color-tan-400), var(--color-tan-500));
}

.c-editorial__media--quality {
  background: url("../../images/about-quality-pourover.webp") center / cover no-repeat, linear-gradient(135deg, var(--color-olive-300), var(--color-olive-500));
}

.c-editorial__media--contain {
  background: var(--color-page);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
}

/* !important: core/image ships an unlayered .wp-block-image img
   { height: auto } rule that otherwise beats this layered height/
   object-fit (same class of bug as the header/footer logo). Still used
   by the --contain variant (problem-need-state.php), which shows a real
   wp:image at its natural aspect ratio rather than a cropped cover photo. */
.c-editorial__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.c-editorial__media--contain img {
  width: auto !important;
  height: 50% !important;
  object-fit: contain !important;
}

.c-editorial__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 34rem;
}

.c-editorial__heading {
  font-size: var(--text-h2);
  line-height: 1.1;
}

.c-editorial__text {
  color: var(--color-text-secondary);
  font-size: var(--text-lead);
  line-height: 1.68;
}