/* /recipes/ — recipe listing. */

/* This banner's photo is darkened less than other pages (10% instead of 20%). */
.page-recipes .page-banner::before { background: rgba(0, 0, 0, .1); }

/* Warm paper background used behind the recipe sections */
.tiled-warm { background: #f7ebe2 var(--tile); }

/* Red label heading ("Recipes right from our kitchen"), shared look with Home/recipe pages */
.label-title {
  align-self: center;
  margin: 0 auto 20px;
  padding: 10px 20px;
  border-radius: 10px;
  background: var(--red);
  font: 400 42px/1 var(--tanker);
  letter-spacing: 3px;
  text-transform: capitalize;
  text-align: center;
  color: #fff;
}

.recipes-list { padding: 50px 0 30px; }
.recipes-list .container { display: flex; flex-direction: column; gap: 20px; }
.recipes-list .label-title { margin-bottom: 20px; }
.recipes-list__intro {
  font: 400 21px/1.6 var(--ballinger);
  text-align: center;
  color: #000;
}

/* Recipe cards (also used on the home page) */
.recipe-cards { display: flex; align-items: flex-start; gap: 20px; padding-bottom: 50px; }
.recipe-cards > li { flex: 1 1 0; min-width: 0; padding: 10px; }
.recipe-card {
  display: block;
  border-radius: 5px;
  background: var(--red);
  text-align: center;
  transition: background-color .3s;
}
.recipe-card:hover { background: var(--green); }
.recipe-card__img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.recipe-card__title {
  padding: 20px 20px 25px;
  font: 400 24px/1.5 var(--ballinger);
  color: #fff;
}

@media (max-width: 767px) {
  .recipe-cards { flex-direction: column; }
}

/* Banner: this page's title has a drop shadow and its subtitle is set in Roboto. */
.page-recipes .page-banner__title { text-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .5); }
.page-recipes .page-banner__subtitle { font-family: Roboto, sans-serif; }

@media (max-width: 1024px) {
  .label-title { font-size: 40px; }
}
@media (max-width: 767px) {
  .page-recipes .page-banner { min-height: 500px; background-position: center; }
  .page-recipes .page-banner__title { font-size: 72px; }
  .page-recipes .page-banner__subtitle { font-size: 22px; line-height: 35px; }
  .label-title { font-size: 32px; }
  .recipe-card__title { line-height: 1.3; }
}
/* Phone and tablet card title sizes and the fixed 380px tablet card height come from
   the old theme's device rules (assets/css/devices/site.css). */