.nella-recipe-page {
  width: min(100%, 980px);

  margin: 0 auto;

  padding: 22px 16px 90px;
}


/* LOADING */

.recipe-loading,
.recipe-error {
  min-height: 55vh;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;

  color: var(--muted);
}


.recipe-loading-icon,
.recipe-error > span {
  margin-bottom: 9px;

  font-size: 48px;
}


.recipe-error h2 {
  margin: 5px 0;

  font-family: Georgia, serif;

  color: var(--text);

  font-weight: 500;
}


/* MAIN */

.recipe-main-card {
  overflow: hidden;

  margin-bottom: 14px;

  border-radius: 34px;

  border:
    1px solid var(--border);

  background: #fff;

  box-shadow:
    var(--shadow);
}


.recipe-media {
  position: relative;

  min-height: 280px;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #f2dfd3,
      #eef2e8
    );
}


.recipe-main-image {
  width: 100%;
  height: 100%;

  min-height: 280px;

  display: block;

  object-fit: cover;
}


.recipe-placeholder-art {
  position: relative;

  min-height: 280px;

  display: flex;

  align-items: center;
  justify-content: center;

  font-size: 100px;

  background:
    radial-gradient(
      circle at 25% 20%,
      rgba(255,255,255,.95),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #f2dfd3,
      #edf2e7
    );
}


.recipe-placeholder-art small {
  position: absolute;

  right: 18%;
  bottom: 16%;

  font-size: 30px;
}


.recipe-main-copy {
  padding: 27px;
}


.recipe-badges {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;
}


.recipe-badge {
  padding:
    7px 10px;

  border-radius:
    999px;

  background:
    var(--sage-soft);

  color:
    var(--sage-deep);

  font-size: 9px;

  font-weight: 800;
}


.recipe-badge.soft {
  background:
    #faf3ec;

  color:
    #936c58;
}


.recipe-main-copy h1 {
  margin:
    12px 0 8px;

  font-family:
    Georgia, serif;

  font-size:
    clamp(
      31px,
      6vw,
      48px
    );

  font-weight:
    500;

  line-height:
    1.08;
}


.recipe-description {
  margin: 0;

  color:
    var(--muted);

  font-size: 13px;

  line-height: 1.65;
}


.recipe-meta-grid {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 17px;
}


.recipe-meta-grid span {
  padding:
    8px 10px;

  border-radius:
    999px;

  background:
    #faf6f1;

  color:
    var(--muted);

  font-size: 10px;
}


/* SECTIONS */

.recipe-section {
  margin-bottom: 14px;

  padding: 22px;

  border-radius: 29px;

  border:
    1px solid var(--border);

  background: #fff;

  box-shadow:
    var(--shadow);
}


.recipe-section-heading {
  display: flex;

  align-items: flex-start;

  gap: 11px;

  margin-bottom: 17px;
}


.recipe-section-heading > span {
  font-size: 27px;
}


.recipe-section-heading small {
  display: block;

  margin-bottom: 3px;

  color:
    var(--sage);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1.3px;
}


.recipe-section-heading h2 {
  margin: 0;

  font-family:
    Georgia, serif;

  font-size: 23px;

  font-weight: 500;
}


.recipe-section-heading p {
  margin:
    5px 0 0;

  color:
    var(--muted);

  font-size: 10px;

  line-height: 1.5;
}


/* INGREDIENTS */

.recipe-ingredient-list {
  margin: 0;

  padding: 0;

  list-style: none;
}


.recipe-ingredient-list li {
  display: flex;

  align-items: flex-start;

  gap: 11px;

  padding: 11px 0;

  border-bottom:
    1px solid rgba(110,90,70,.08);
}


.recipe-ingredient-list li:last-child {
  border-bottom: 0;
}


.ingredient-check {
  width: 26px;
  height: 26px;

  flex: 0 0 26px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    var(--sage-soft);

  color:
    var(--sage-deep);

  font-size: 11px;

  font-weight: 900;
}


.recipe-ingredient-list p {
  margin: 2px 0 0;

  font-size: 13px;

  line-height: 1.5;
}


/* STEPS */

.recipe-step-list {
  margin: 0;

  padding: 0;

  list-style: none;

  counter-reset: steps;
}


.recipe-step-list li {
  display: flex;

  align-items: flex-start;

  gap: 13px;

  padding: 14px 0;

  border-bottom:
    1px solid rgba(110,90,70,.08);
}


.recipe-step-list li:last-child {
  border-bottom: 0;
}


.step-number {
  width: 35px;
  height: 35px;

  flex: 0 0 35px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 13px;

  background:
    #faf0e7;

  color:
    #95674f;

  font-size: 12px;

  font-weight: 900;
}


.recipe-step-list p {
  margin: 3px 0 0;

  font-size: 13px;

  line-height: 1.65;
}


/* SUBSTITUTES */

.substitute-section {
  background:
    linear-gradient(
      135deg,
      #fff,
      #f8faf5
    );
}


.substitute-list {
  display: grid;

  gap: 9px;
}


.substitute-card {
  padding: 15px;

  border-radius: 18px;

  border:
    1px solid var(--border);

  background:
    linear-gradient(
      135deg,
      #fff9f5,
      #f8faf5
    );
}


.substitute-original {
  color:
    var(--muted);

  font-size: 10px;

  text-decoration:
    line-through;
}


.substitute-arrow {
  margin: 5px 0;

  color:
    var(--sage);
}


.substitute-card strong {
  display: block;

  color:
    var(--sage-deep);

  font-size: 13px;
}


.substitute-card p {
  margin:
    6px 0 0;

  color:
    var(--muted);

  font-size: 10px;

  line-height: 1.5;
}


/* SOURCE */

.recipe-source-section {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 14px;

  padding: 17px 19px;

  border-radius: 21px;

  border:
    1px solid var(--border);

  background:
    #fff;

  box-shadow:
    var(--shadow);
}


.recipe-source-section small {
  display: block;

  margin-bottom: 3px;

  color:
    var(--sage);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1.2px;
}


.recipe-source-section strong {
  font-size: 11px;
}


.recipe-source-section a {
  color:
    var(--sage-deep);

  font-size: 10px;

  font-weight: 800;
}


/* YOUTUBE */

.youtube-frame-wrapper {
  position: relative;

  overflow: hidden;

  width: 100%;

  aspect-ratio:
    16 / 9;

  border-radius: 20px;

  background: #000;
}


.youtube-frame-wrapper iframe {
  width: 100%;
  height: 100%;

  border: 0;
}


.recipe-primary-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 48px;

  padding:
    0 17px;

  border-radius: 16px;

  background:
    var(--sage-deep);

  color: #fff;

  font-size: 11px;

  font-weight: 800;
}


.youtube-open {
  width: 100%;

  margin-top: 12px;
}


/* DESKTOP */

@media (
  min-width: 720px
) {

  .recipe-main-card {
    display: grid;

    grid-template-columns:
      43% 57%;
  }


  .recipe-media,
  .recipe-main-image,
  .recipe-placeholder-art {
    min-height: 450px;
  }


  .recipe-main-copy {
    padding: 42px;
  }


  .substitute-list {
    grid-template-columns:
      repeat(2, 1fr);
  }

}