/* Recipe template */
.recipe_container {
  width: 100%;
  padding-block: 0;

  @media (min-width: 768px) {
    display: grid;
    grid-template-columns: repeat(2, minmax(300px, 1fr));
  }

  h1 {
    font-size: var(--font-size--h2);
  }

  h2 {
    font-size: var(--font-size--h4);
  }
}

/* Recipe Image */
.recipe_img-wrap {
  display: flex;
  /* align-items: center; */
  justify-content: center;
  order: 1;
  width: 100%;
  overflow: hidden;

  @media (min-width: 768px) {
    height: calc(100vh - var(--nav-height));
  }

  picture {
    width: 100%;
    height: calc(100% - var(--nav-height));
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Recipe Meta */
.recipe_meta-wrap {
  order: 0;
  display: flex;
  text-align: left;
  padding: var(--size--3rem) var(--size--4rem) var(--size--3rem) 0;
  font-size: var(--font-size--text-large);

  @media (min-width: 768px) {
    position: sticky;
    min-height: calc(100vh - var(--nav-height));
    top: var(--nav-height);
    overflow-y: scroll;
  }
}

.recipe_meta {
  margin-block: var(--size--3rem);

  td {
    padding: var(--space--1) var(--space--3) var(--space--1) 0;
  }
}


.like-button {
  display: inline-flex;
  align-items: center;
  width: 2rem;
  height: 2rem;
  padding: var(--space--2) var(--space--4);
  border: 2px solid currentColor;
  border-radius: var(--radius--m);
  background: var(--color--black);
  color: var(--color--white);
  cursor: pointer;
  transition: color 300ms ease, border-color 300ms ease, background 300ms ease;
  font-family: inherit;
}

.like-button:hover:not(:disabled) {
  background: var(--color--red);
}

.like-button.is-liked {
  color: var(--color--red);
  border-color: var(--color--red);
  background: rgba(255, 70, 70, 0.1);
}

.like-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.like-icon {
  font-size: 1em;
  line-height: 1;
}



/* Ingredients */

.recipe_ingredients {
  margin-bottom: var(--size--3rem);

  ul {
    list-style: disc;
    padding-left: var(--space--3);
  }

  li {
    margin-bottom: var(--space--1);
  }
}

.recipe_preperation-wrap {
  padding-block: var(--size--3rem);
  order: 3;
  grid-column: 2;
  font-size: var(--font-size--text-large);

  h2 {
    margin-bottom: var(--space--6);
  }

  ol {
    list-style: none;
    counter-reset: item;
    padding-left: var(--size--3rem);
  }

  li {
    counter-increment: item;
    margin-bottom: var(--space--6);
  }

  li::before {
    content: counter(item);
    background: var(--color--black);
    color: white;
    width: var(--size--2rem);
    text-align: center;
    display: inline-block;
    margin-left: calc(-1 * var(--size--3rem));
    margin-right: var(--space--4);
    aspect-ratio: 1;
    border-radius: 100vmax;
    font-weight: 600;
  }
}

.recipe-actions {
  margin: var(--space--4) 0 var(--space--6);
}

/* Like button styles are shared with profile.css */