/* Рецепты китайской кухни.
 *
 * Раздел учебный, а не кулинарный, и вёрстка это показывает: строка
 * ингредиента начинается с иероглифа и чтения, а количество стоит
 * последним. В кулинарной книге порядок обратный — но здесь продукт это
 * слово, а «300 г» лишь уточнение.
 */

.rcp-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: var(--sp-5) 0 var(--sp-4);
    font-size: var(--fs-2xs);
    color: var(--text-muted);
}

.rcp-crumbs a { color: var(--text-muted); }
.rcp-crumbs a:hover { color: var(--text-link); }
.rcp-crumbs__sep { color: var(--text-subtle); }

/* --- шапка рецепта --------------------------------------------------- */

.rcp-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: var(--sp-7);
    align-items: start;
    margin-bottom: var(--sp-8);
}

.rcp-head__text { min-width: 0; }
.rcp-head__text .eddy-h1 { margin: var(--sp-2) 0 0; }

/* Название по-китайски крупно: на странице про еду это главный
   предмет изучения, а не подпись к русскому названию. */
.rcp-head__zh {
    margin: var(--sp-3) 0 0;
    font-family: var(--font-hanzi), "Noto Sans SC", serif;
    font-size: 40px;
    line-height: 1.1;
    color: var(--red-600);
}

.rcp-head__py {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-lg);
    color: var(--text-muted);
}

.rcp-head__lit {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-2xs);
    line-height: var(--lh-normal);
    color: var(--text-subtle);
}

.rcp-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5);
    margin: var(--sp-5) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-2xs);
    color: var(--text-muted);
}

.rcp-facts b {
    display: block;
    font-size: var(--fs-lg);
    color: var(--text-body);
    font-variant-numeric: tabular-nums;
}

.rcp-photo { margin: 0; }

.rcp-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-card);
}

/* Подпись к фотографии — обязательная часть, а не украшение: снимки
   взяты на Викискладе, и CC BY требует называть автора. */
.rcp-photo__credit {
    margin-top: var(--sp-2);
    font-size: var(--fs-3xs);
    line-height: 1.5;
    color: var(--text-subtle);
}

.rcp-photo__credit a { color: var(--text-subtle); text-decoration: underline; }
.rcp-photo__credit a:hover { color: var(--text-link); }

/* --- разделы ---------------------------------------------------------- */

.rcp-section { margin-bottom: var(--sp-8); }
.rcp-section .eddy-h2 { margin: 0 0 var(--sp-2); }

.rcp-section__note {
    margin: 0 0 var(--sp-5);
    font-size: var(--fs-2xs);
    color: var(--text-muted);
}

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

.rcp-ing { margin: 0; padding: 0; list-style: none; }

.rcp-ing__row {
    display: grid;
    grid-template-columns: auto minmax(0, 150px) minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--sp-3) var(--sp-4);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.rcp-ing__zh {
    font-family: var(--font-hanzi), "Noto Sans SC", serif;
    font-size: 26px;
    line-height: 1.2;
    color: var(--ink-900);
}

.rcp-ing__py { font-size: var(--fs-site-small); color: var(--red-600); }
.rcp-ing__ru { font-size: var(--fs-site-small); color: var(--text-body); }

.rcp-ing__amount {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    text-align: right;
    white-space: nowrap;
}

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

.rcp-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: rcp;
}

.rcp-step {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--sp-4);
    padding-bottom: var(--sp-5);
}

.rcp-step__num {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--red-50);
    color: var(--red-600);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}

.rcp-step__body { min-width: 0; }

.rcp-step__text {
    margin: 0;
    line-height: var(--lh-relaxed);
    color: var(--text-body);
}

/* Глагол шага — плашкой, а не строкой в тексте: он тут не пояснение к
   действию, а то, ради чего страница написана. */
.rcp-step__verb {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: var(--sp-2) 0 0;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-chip);
    background: var(--jade-50);
}

.rcp-step__verb [lang="zh"] {
    font-family: var(--font-hanzi), "Noto Sans SC", serif;
    font-size: 22px;
    line-height: 1.2;
    color: var(--jade-700);
}

.rcp-step__py { font-size: var(--fs-2xs); color: var(--jade-500); }
.rcp-step__ru { font-size: var(--fs-2xs); color: var(--text-muted); }

.rcp-about p {
    max-width: 68ch;
    margin: 0;
    line-height: var(--lh-relaxed);
}

/* --- повторение слов --------------------------------------------------- */

.rcp-words {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--sp-3);
}

.rcp-word {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-card);
    background: var(--surface-card);
}

.rcp-word b {
    font-family: var(--font-hanzi), "Noto Sans SC", serif;
    font-size: 24px;
    line-height: 1.2;
    font-weight: var(--fw-regular);
    color: var(--ink-900);
}

.rcp-word__py { font-size: var(--fs-2xs); color: var(--red-600); }
.rcp-word__ru { font-size: var(--fs-2xs); color: var(--text-muted); }

/* --- список рецептов --------------------------------------------------- */

.rcp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-5);
}

.rcp-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-card);
    background: var(--surface-card);
    transition: border-color .15s ease, transform .15s ease;
}

.rcp-card:hover { border-color: var(--border-strong); text-decoration: none; }
.rcp-card:hover .rcp-card__title { color: var(--text-link); }

/* `height: auto` обязателен: у картинки стоят атрибуты width/height
   (они резервируют место и не дают странице прыгать при загрузке), а
   пока заданы обе стороны, `aspect-ratio` не применяется вовсе. Без
   этой строки карточка вытягивалась в 750 точек и показывала
   вертикальный ломоть тарелки — на экране просто белый прямоугольник. */
.rcp-card__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.rcp-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-4);
}

.rcp-card__zh {
    font-family: var(--font-hanzi), "Noto Sans SC", serif;
    font-size: 26px;
    line-height: 1.2;
    color: var(--red-600);
}

.rcp-card__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    color: var(--text-body);
}

.rcp-card__py { font-size: var(--fs-2xs); color: var(--text-muted); }

.rcp-card__meta {
    margin-top: var(--sp-2);
    font-size: var(--fs-3xs);
    color: var(--text-subtle);
}

@media (max-width: 900px) {
    .rcp-head { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
    /* Фотография над текстом: на телефоне она первый экран, и текст
       под ней читается как подпись к блюду, а не как отдельный блок. */
    .rcp-photo { order: -1; }
}

@media (max-width: 560px) {
    .rcp-head__zh { font-size: 32px; }
    /* Количество уезжает на свою строку: в четыре колонки на телефоне
       «2 ст. л.» переносится по слогам. */
    .rcp-ing__row { grid-template-columns: auto minmax(0, 1fr); }
    .rcp-ing__ru { grid-column: 1 / -1; }
    .rcp-ing__amount { grid-column: 1 / -1; text-align: left; }
}