/* Архив опен-коллов /open-calls. Кадры 398:1133 (1728×2238) и 403:1984
   (402×2766), узлы — plan/90-archive.md §9.0–§9.2. Значения из
   absoluteBoundingBox. Mobile-first: база — мобильный кадр, в media(980)
   фиксированные размеры десктопа. Кегли мобильного кадра добирает шаг 9.3. */

.opencalls {
	/* 403:2068 — узел без внутренних отступов: 88 − 64 шапки снаружи, зазор
	   до подвала целиком на margin-top футера. На десктопе (398:1135)
	   отступы настоящие, паддинги фрейма — не трогаем. */
	--opencalls_content-mt: 2.4rem;
	--opencalls_content-pad-top: 0;
	--opencalls_content-pad-x: var(--page-margin-mobile);
	--opencalls_content-pad-bottom: 0;
	--opencalls_content-gap: 4.8rem; /* заголовок → секции */
	--opencalls_title-w: 100%;
	--opencalls_title-size: var(--t-display-80-size); /* 403:2069 Epos 80/68 */
	--opencalls_title-lh: var(--t-display-80-lh);
	--opencalls_title-ls: -.025em; /* «смысловой 226» шире 370 на нашем Epos — сжимаем, чтобы не сломать вторую строку на третью */
	--opencalls_sections-gap: 7.2rem; /* 415:1191 */
	--opencalls_section-pad-left: 0;
	--opencalls_section-gap: 4.8rem; /* h2 → карточки */
	--opencalls_heading-indent: 0; /* 412:1193 paddingLeft на десктопе */
	--opencalls_heading-w: 100%; /* мобилка: на всю колонку, центр текста */
	--opencalls_heading-size: var(--t-display-50-size);
	--opencalls_heading-lh: 4.3rem; /* 403:2244/403:2208: Figma округляет автовысоту текста
		до 43, токен --t-display-50-lh даёт 42.5 — расхождение копится по колонке */
	--opencalls_heading-align: center;
	--opencalls_cards-dir: column;
	--opencalls_cards-gap: 7.2rem;
	--opencalls_cards-w: 100%; /* мобилка: section--past стоит flex-start, ширину сам не берёт */
	--opencalls_footer-gap: 7.2rem; /* 403:1984: 2094 − 2022 */

	--oc-card_w: 100%;
	--oc-card_gap: 1.2rem; /* image → text, 400:1576 itemSpacing */
	--oc-card_image-h: 38.25rem; /* 403:2279 */
	--oc-card_image-pad-x: 0;
	--oc-card_text-gap: 1.2rem;
	--oc-card_stamp-w: 25.4rem; /* I400:1576;3075:42062 — см. комментарий у правила */
	--oc-card_head-size: var(--t-h4-size); /* I403:2211;3075:42165 Lyon 27/28 */
	--oc-card_head-lh: var(--t-h4-lh);
	--oc-card_head-ls: normal; /* умолчание h3 несёт ls стиля H3/Regular */
	--oc-card_stamp-size: var(--t-caption-m-size);
	--oc-card_stamp-lh: var(--t-caption-m-lh);

	--oc-card-current_w: 100%;
	--oc-card-current_dir: column;
	--oc-card-current_gap: 1.2rem;
	--oc-card-current_image-w: 100%;
	--oc-card-current_image-h: 30.3rem; /* 403:2279 */
	--oc-card-current_text-w: 100%;
	--oc-card-current_text-pad-x: 0;
	--oc-card-current_text-gap: 1.2rem;
	--oc-card-current_head-size: var(--t-h3-size);
	--oc-card-current_head-lh: 3.6rem;
	--oc-card-current_head-align: center; /* 403:2283 CENTER, десктоп 409:2357 LEFT */
	--oc-card-current_sub-size: var(--t-caption-m-size);
	--oc-card-current_sub-lh: var(--t-caption-m-lh);
	--oc-card-current_sub-pad-x: 3.2rem; /* 403:2256: TEXT 306 в боксе 370 */
	--oc-card-current_stamp-size: var(--t-caption-m-size);
	--oc-card-current_stamp-lh: var(--t-caption-m-lh);
	--oc-card-current_stamp-w: 17rem; /* 403:2286: бокс 170 по центру — текст короче
		170, fit-content даёт более узкий бокс (9.3 §Расхождения), ставим явно */
	--oc-card-current_stamp-align: center;
	--oc-card-current_stamp-self: center;
	--oc-card-current_stamp-white-space: nowrap;
}

.opencalls__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--opencalls_content-gap);
	margin-top: var(--opencalls_content-mt);
	padding:
		var(--opencalls_content-pad-top)
		var(--opencalls_content-pad-x)
		var(--opencalls_content-pad-bottom);
}

/* 398:1139 Epos 100/85 центром, цвет --color-green. Ширина задана явно: блочный
   <h1> иначе растянулся бы на всю полосу и увёл бы бокс мимо макета. */
.opencalls__title {
	width: var(--opencalls_title-w);
	color: var(--color-green);
	font-family: var(--font-display);
	font-size: var(--opencalls_title-size);
	line-height: var(--opencalls_title-lh);
	letter-spacing: var(--opencalls_title-ls);
	text-align: center;
}

.opencalls__sections {
	display: flex;
	flex-direction: column;
	gap: var(--opencalls_sections-gap);
	align-self: stretch;
}

.opencalls__section {
	display: flex;
	flex-direction: column;
	gap: var(--opencalls_section-gap);
	padding-left: var(--opencalls_section-pad-left);
}

/* 412:1191 — дети по левому краю полосы; 412:1189 — по центру полосы, поэтому
   x карточки текущего считается от неё, а не от кадра. */
.opencalls__section--past {
	align-items: flex-start;
}

.opencalls__section--current {
	align-items: center;
}

.opencalls__heading {
	width: var(--opencalls_heading-w);
	font-family: var(--font-display);
	font-size: var(--opencalls_heading-size);
	line-height: var(--opencalls_heading-lh);
	text-align: var(--opencalls_heading-align);
}

.opencalls__section--past .opencalls__heading {
	margin-left: var(--opencalls_heading-indent);
}

.opencalls__cards {
	display: flex;
	flex-direction: var(--opencalls_cards-dir);
	gap: var(--opencalls_cards-gap);
	width: var(--opencalls_cards-w);
}

/* Плитка прошедшего опен-колла — инстанс newsFeature 400:1576. */
.oc-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--oc-card_gap);
	width: var(--oc-card_w);
	text-decoration: none; /* прошедшая карточка — тоже <a>, когда задан link */
}

/* Высота и ширина — на боксе, а не на картинке: у опен-колла её может не быть,
   а геометрия карточки от этого меняться не должна. */
.oc-card__image {
	width: 100%;
	height: var(--oc-card_image-h);
	padding-inline: var(--oc-card_image-pad-x);
}

.oc-card__pic {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.oc-card__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--oc-card_text-gap);
	width: 100%;
}

.oc-card__head {
	width: 100%;
	font-size: var(--oc-card_head-size);
	line-height: var(--oc-card_head-lh);
	letter-spacing: var(--oc-card_head-ls);
	text-align: center;
}

/* Ширина задана числом макета, а не fit-content: цифры в /fonts/Lyon_Text-Regular
   шире фигмовских — тот же `lnum` даёт 262.8 против 254 у 400:1576. Текст
   центрируется в карточке, поэтому лишние 4.4 px уходят симметрично за бокс и на
   вид не заметны, зато бокс сходится с макетом.
   ponytail: число привязано к длине диапазона дат из макета; если редакция
   заведёт заметно длиннее — вернуть fit-content и пересогласовать гейт. */
.oc-card__timestamp {
	width: var(--oc-card_stamp-w);
	text-align: center;
	white-space: nowrap;
	font-size: var(--oc-card_stamp-size);
	line-height: var(--oc-card_stamp-lh);
	letter-spacing: var(--t-caption-m-ls);
	color: var(--color-ink-muted); /* #212026 50% */
}

/* Карточка текущего — 409:2352, ссылка на лендинг целиком (90 §9.6). */
.oc-card--current {
	flex-direction: var(--oc-card-current_dir);
	align-items: center;
	gap: var(--oc-card-current_gap);
	width: var(--oc-card-current_w);
}

.oc-card--current .oc-card__image {
	width: var(--oc-card-current_image-w);
	height: var(--oc-card-current_image-h);
}

.oc-card--current .oc-card__text {
	align-items: stretch;
	gap: var(--oc-card-current_text-gap);
	width: var(--oc-card-current_text-w);
	padding-inline: var(--oc-card-current_text-pad-x);
}

.oc-card--current .oc-card__head {
	font-size: var(--oc-card-current_head-size);
	line-height: var(--oc-card-current_head-lh);
	text-align: var(--oc-card-current_head-align);
}

.oc-card--current .oc-card__subhead {
	padding-inline: var(--oc-card-current_sub-pad-x);
	font-size: var(--oc-card-current_sub-size);
	line-height: var(--oc-card-current_sub-lh);
	letter-spacing: var(--t-caption-l-ls);
}

/* 409:2360 — на десктопе textAlignHorizontal LEFT во всю колонку 432; на
   мобилке (403:2286) бокс fit-content 170 и стоит по центру полосы. */
.oc-card--current .oc-card__timestamp {
	width: var(--oc-card-current_stamp-w);
	align-self: var(--oc-card-current_stamp-self);
	text-align: var(--oc-card-current_stamp-align);
	white-space: var(--oc-card-current_stamp-white-space);
	font-size: var(--oc-card-current_stamp-size);
	line-height: var(--oc-card-current_stamp-lh);
}

/* 398:1142 — тот же инстанс «read more», что на /rules и /sent. */
.opencalls > .footer {
	margin-top: var(--opencalls_footer-gap);
}

@media (min-width: 980px) {
	/* Шапка этого файла Figma (405:1143) — 1728×64, а не 52, как бар лендинга
	   186:1481, по которому свёрстан общий партиал. Свою шапку архива не верстаем
	   (90 §9.7), поэтому здесь только высота — через локальную переменную блока. */
	.opencalls > .header {
		--header_h: 6.4rem;
	}

	.opencalls {
		--opencalls_content-mt: 0;
		--opencalls_content-pad-top: 5.8rem; /* 398:1135 paddingTop */
		--opencalls_content-pad-x: var(--section-pad-x);
		--opencalls_content-pad-bottom: 4.9rem;
		--opencalls_content-gap: 8rem;
		--opencalls_title-w: 49.6rem; /* 398:1139 */
		--opencalls_title-size: 10rem; /* Epos 100/85 — своей роли в tokens.css нет */
		--opencalls_title-lh: 8.5rem;
		--opencalls_title-ls: normal;
		--opencalls_sections-gap: var(--gap-96); /* 414:1191 itemSpacing */
		--opencalls_section-pad-left: var(--section-pad-x);
		--opencalls_section-gap: 2.4rem;
		--opencalls_heading-indent: 5rem; /* 412:1193 paddingLeft */
		--opencalls_heading-w: fit-content;
		--opencalls_heading-size: var(--t-display-80-size); /* 400:1296 Epos 80/68 */
		--opencalls_heading-lh: var(--t-display-80-lh);
		--opencalls_heading-align: left;
		--opencalls_cards-dir: row;
		--opencalls_cards-gap: 5.2rem; /* 412:1190 itemSpacing */
		--opencalls_cards-w: fit-content;
		--opencalls_footer-gap: 2.4rem;

		--oc-card_w: var(--col-w); /* 400:1576 528 */
		--oc-card_image-h: 54rem; /* I400:1576;3075:42055 */
		--oc-card_image-pad-x: 4.8rem; /* та же рамка, что у text текущего */
		--oc-card_head-size: var(--t-h3-size); /* 34/36 */
		--oc-card_head-lh: var(--t-h3-lh);
		--oc-card_head-ls: var(--t-h3-ls);

		--oc-card-current_w: 104.8rem; /* 409:2352 */
		--oc-card-current_dir: row;
		--oc-card-current_gap: 2.4rem;
		--oc-card-current_image-w: var(--col-w); /* 409:2353 528 */
		--oc-card-current_image-h: 41.3rem;
		--oc-card-current_text-w: var(--col-w); /* 409:2355 528 */
		--oc-card-current_text-pad-x: 4.8rem;
		--oc-card-current_text-gap: 1.6rem;
		--oc-card-current_head-size: 4rem; /* 409:2357 Lyon 40/38 */
		--oc-card-current_head-lh: 3.8rem;
		--oc-card-current_head-align: left;
		--oc-card-current_sub-size: 2.3rem; /* 409:2359 Lyon 23/26 */
		--oc-card-current_sub-lh: 2.6rem;
		--oc-card-current_sub-pad-x: 0;
		--oc-card-current_stamp-size: var(--t-caption-l-size); /* 409:2360 21/24 */
		--oc-card-current_stamp-lh: var(--t-caption-l-lh);
		--oc-card-current_stamp-w: 100%;
		--oc-card-current_stamp-align: left;
		--oc-card-current_stamp-self: stretch;
		--oc-card-current_stamp-white-space: normal;
	}

	/* Ряд карточки текущего шире самой карточки (528 + 24 + 528 = 1080 против
	   1048 у 409:2352): в макете text выходит за правый край на 32. */
	.oc-card--current > * {
		flex: 0 0 auto;
	}
}