.zestful-recipe-card {
  max-width: 800px;
  margin: 30px auto;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-family: 'Helvetica Neue', sans-serif;
}

/*
 * Style the hero image container and image.  Increase the default
 * height of the image so that it visually balances against the
 * metadata column on the right side of the card.  The container
 * defines a fixed height while using overflow hidden so that images
 * larger than the container crop gracefully.  On larger screens the
 * height increases to give the image more breathing room.  The
 * <img> uses object-fit: cover to scale and crop to fill the box.
 */
.zestful-recipe-image {
  width: 100%;
  height: 360px;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 12px;
}
.zestful-recipe-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 12px;
}

/*
 * When no featured image exists for a recipe the template marks the
 * hero <img> with a `placeholder` class.  Use object-fit: contain
 * so that default placeholder artwork does not get awkwardly cropped
 * to the fixed aspect ratio of the hero container.  Real recipe
 * images retain object-fit: cover to crop beautifully.
 */
.zestful-recipe-image img.placeholder {
  object-fit: contain;
  background-color: #f5f5f5;
}

/* Make the hero image taller on very wide screens */
@media (min-width: 1200px) {
  .zestful-recipe-image { height: 440px; }
}
@media (min-width: 1440px) {
  .zestful-recipe-image { height: 520px; }
}

.recipe-meta {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 15px 0;
}

.recipe-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.recipe-nutrition ul {
  list-style: none;
  padding: 0;
}

.recipe-title {
  font-size: 2rem;
  margin-bottom: 10px;
}

.recipe-description {
  font-size: 1.2rem;
  color: #555;
}