.kimby__breadcrumb{
  & .kimby__container__inner {
    width: 100%;
    max-width: 1000px;

    & .breadcrumb ol {
      text-align: end;
    }
  }
}


.recipe{

  & .kimby__container__inner {
    max-width: 1000px;
  }

  & .recipe__first {
    display: flex;
    justify-content: center;
    gap: 1rem;
    & .recipe__image{
      width: 50%;
      & img{
        margin-left: auto;
        border-radius: 30px;
        min-height: 490px;
        object-fit: cover;
      }

      & iframe{
        height: 80vh;
        width: auto;
        min-width: 350px;
        max-width: 100%;
        width: 100%;
        margin-bottom: 1rem;
        border-radius: 8px;
      }

    }

    & .recipe__info{
      width: 50%;
      padding-bottom: 4rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      height: fit-content;
      position: sticky;
      top: 1.5rem;

      & .recipe__cat {
        background-color: var(--color-secondary);
        color: var(--color-primary);
        font-weight: 700;
        text-transform: uppercase;
        padding: 0.5rem 1rem;
        width: fit-content;
        border-radius: 5px;
      }

      & .recipe__product-cat{
        display: flex;
        align-items: center;
        font-size: 1.2rem;
        text-transform: uppercase;
        font-weight: 500;
        font-family: var(--font-family-helveticaNeue);
        color: var(--color-light-gray);
        & .field--name-field-icono {
          filter: opacity(0.4);
        }
        & a {
          color: var(--color-light-gray);
          text-decoration: none;
        }
      }

      & .recipe__title {
        font-size: 1.8rem;
        font-weight: 800;
        margin: 0;
        color: var(--color-primary);
      }

      & .recipe__attributes {
        display: flex;
        align-items: center;
        gap: 2rem;
        font-size: 1.2rem;
        color: var(--color-black);

        & .recipe__attributes__weight {
          display: flex;
          align-items: center;
          gap: 5px;
        }

        & .field--name-field-porciones {
          display: flex;
          align-items: center;
          gap: 5px;
          & .field__label {
            padding-right: 0;
            font-weight: 600;
          }
        }
      }
    }
  }

  .recipe__rating{
    text-align: center;
    & .fivestar-widget {
      display: block;
      width: fit-content;
      margin: 0 auto;
    }
  }

  

  & .recipe__second {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding-block: 3rem;
    & .field--name-field-ingredientes {
      background-color: #F8F8F8;
      padding: 30px;
      border-radius: 30px;
      & .field__label {
        font-weight: bold;
        font-size: 1.5rem;
        text-transform: uppercase;
      }

      & .field__item > ul{
        column-count: 2;
        column-gap: 30px;
      }
    }

    & .reciper__steps {
      & h2 {
        color: var(--color-primary);
        font-size: 2rem;
      }

      & h3{
        color: var(--color-primary);
        margin-top: 2rem;
      }
    }

    & .field--name-field-tips {
      background-color: var(--color-secondary);
      padding: 30px;
      border-radius: 30px;
      & .field__label {
        color: var(--color-primary);
        font-weight: bold;
        font-size: 1.5rem;
        text-transform: uppercase;
      }
    }

    & .recipe__share-download {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: space-between;
      border-bottom: 1px solid var(--color-light-gray);
      padding-bottom: 0.5rem;
      & .share {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        & p {
          font-weight: 700;
          margin: 0;
        }

        & .social-icons {
          display: flex;
          gap: 0.5rem;
          & a {
            background-color: var(--color-primary);
            color: var(--color-white);
            text-decoration: none;
            padding: 0.5rem;
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }

      & .dowmload {
        display: flex;
        align-items: center;
        color: var(--color-primary);
        gap: 0.5rem;
        & a {
          background-color: var(--color-primary);
          color: var(--color-white);
          text-decoration: none;
          padding: 0.5rem;
          border-radius: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      & .dowmload, .share .social-icons{
        & a:hover{
          background-color: var(--color-secondary);
          color: var(--color-primary);
        }
      }
    }
  }
}

.recipes {
  background-color: var(--color-primary);
  color: var(--color-white);
  text-align: center;
  min-height: 100vh;
  padding-block: 4rem;
  padding-bottom: 350px;
  & .recipes__title{
    color: var(--color-secondary);
    display: flex;
    flex-direction: column;
    & .field--name-title{
      color: var(--color-white);
      font-size: 0.5em;
      font-weight: 800;
    }
  }

  & .view a{
    color: var(--color-white);
  }
}

footer {
  margin-top: -350px;
}


@media screen and (max-width: 767px){


  .recipe{
    & .kimby__container__inner {
      flex-direction: column;
      & .recipe__image{
        width: 100%;
      }
    }

    & .recipe__first {
      & .recipe__info {
        width: 100%;
        padding-bottom: 1rem;
        position: static;
      }
    }

    & .recipe__second {
      & .field--name-field-ingredientes {
        & .field__item > ul{
          column-count: 1;
        }
      }
    }
  }

  footer {
    margin-top: -150px;
  }
}


@media print{
  .recipe {
    & .recipe__second {
      display: flex;
      padding-block: 0;
      & .field--name-field-ingredientes {
        /* padding: 0; */
      }

      & .recipe__share-download {
        display: none;
      }
    }
  }

  article.contextual-region.node.node--type-receta.node--view-mode-teaser {
    --views-responsive-grid--cell-min-width: 230px !important;
  }

  .recipes, .top-header, .footer__column:nth-child(3), .footer__column:nth-child(4), #teconsent{
    display: none;
  }

  .recipe {
    & .recipe__second {
        padding-block: 6rem;
    }
}

  footer {
    background-color: #FBC820;
    margin-top: 0;
    animation-name: none;
    & .kimby__footer {
      padding-top: 30px;
        & .footer__bg {
          display: none;
        }
        & .kimby__container__inner {
          flex-direction: column;
          & .footer__column {
            & .footer__social__icons {
                display: none;
            }
          }
        }

        & .footer__slider__text {
          display: none;
        }
      }
    }

    .recipe {
      & .recipe__first {
          & .recipe__image {
              & img {
                  min-height: auto;
                  aspect-ratio: 1;
              }
          }
      }
  }
}