/*
 * Оформление карточки рецепта: полоска фактов, список ингредиентов,
 * пошаговое приготовление с фотографиями. Цвета — те же, что у темы:
 * тёмно-синий #36375A, жёлтый #F4D216, сливовый #9A5E80.
 */

/* --- главное фото рецепта --- */

.r_cover {
    margin: 0 0 20px;
}

.r_cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.c_txt .r_lead p:first-child {
    font-size: 17px;
    line-height: 1.6;
    color: #36375A;
}

/* --- полоска с временем, порциями и калорийностью --- */

.r_facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    margin: 22px 0 26px;
    background: #e6e4e0;
    border: 1px solid #e6e4e0;
    border-radius: 4px;
    overflow: hidden;
}

.r_fact {
    flex: 1 1 110px;
    padding: 11px 14px;
    background: #FBF6E0;
}

.r_fact-key {
    display: block;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9A5E80;
}

.r_fact-val {
    display: block;
    margin-top: 3px;
    font-size: 15px;
    font-weight: 700;
    color: #36375A;
}

/* --- заголовки разделов рецепта --- */

.c_txt h2.r_h {
    margin: 30px 0 14px;
    padding-left: 13px;
    font-size: 22px;
    line-height: 1.3;
    color: #36375A;
    border-left: 4px solid #F4D216;
}

/* --- ингредиенты --- */

.r_ing {
    padding: 4px 18px 14px;
    background: #F7F6F2;
    border-radius: 4px;
}

.r_ing-head {
    margin: 16px 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: #9A5E80;
}

.c_txt ul.r_ing-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.c_txt ul.r_ing-list li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    padding: 9px 0;
    border-bottom: 1px dashed #d9d6d0;
    list-style: none;
}

.c_txt ul.r_ing-list li:before {
    display: none;
}

.c_txt ul.r_ing-list li:last-child {
    border-bottom: 0;
}

.r_ing-name {
    flex: 1 1 auto;
    color: #36375A;
}

.r_ing-amount {
    flex: 0 0 auto;
    font-weight: 700;
    color: #36375A;
    white-space: nowrap;
}

/* --- шаги --- */

.c_txt ol.r_steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.c_txt ol.r_steps > li.r_step {
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.r_step-num {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #36375A;
    background: #F4D216;
    border-radius: 11px;
}

.r_step-text p {
    margin: 0;
}

.r_step-photo {
    margin: 13px 0 0;
}

.r_step-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* --- советы --- */

.r_tips {
    padding: 15px 18px;
    background: #FBF6E0;
    border-left: 4px solid #9A5E80;
    border-radius: 0 4px 4px 0;
}

.r_tips p:last-child {
    margin-bottom: 0;
}

@media (max-width: 560px) {
    .r_fact {
        flex: 1 1 50%;
    }

    .c_txt h2.r_h {
        font-size: 19px;
    }

    .r_ing {
        padding: 2px 13px 10px;
    }
}