/* Архив партнёров по экипировке. Общее — в common.css.

   Раскладка выбрана под содержание, а не наоборот: партнёров двадцать два,
   описания в среднем около семидесяти слов. Сетка из двух колонок на такой
   длине даёт рваный низ, а плитка одинаковой высоты обрезала бы описания.
   Поэтому карточка на всю ширину, а внутри неё — три смысловых колонки:
   логотип, текст, связь.

   Ступени — брейкпоинты Pro (480 / 767 / 979 / 1200). В медиазапросах
   переменные не работают, поэтому числа здесь.

   | ширина    | колонки в карточке                    |
   |-----------|---------------------------------------|
   | ≤767      | одна, сверху вниз                     |
   | 768–1199  | логотип слева во всю высоту, справа   |
   |           | текст, под ним связь                  |
   | ≥1200     | три в ряд                             | */

/* ---------- шапка раздела ---------- */

/* Заголовок, пояснение и ссылка на документ — один блок: заголовок задаётся
   полем, и держать его отдельно от текста, который идёт следом, нет причин.
   `justify-items: start` нужен ссылке: иначе она растянулась бы на всю
   ширину колонки, а подчёркивание при наведении — вместе с ней. */
.sm-gear__head {
	margin-bottom: var(--section-y);
	display: grid;
	gap: var(--gap-stack);
	justify-items: start;
}

.sm-gear__lead {
	font-size: var(--text-static-base);
	color: var(--text-secondary);
	max-width: var(--measure-text, 70ch);
}

.sm-gear__lead p { margin: 0 0 var(--space-4); }
.sm-gear__lead p:last-child { margin-bottom: 0; }

/* Ссылка на документ: значок, подпись и приписка с форматом и размером.
   Приписка тише подписи — это служебное уточнение, а не часть названия. */
/* Ссылка на документ — отдельный блок, а не ещё одна строка текста под
   заголовком: по ролям отступов между блоками в колонке стоит --gap-group,
   между строками — --gap-stack. Сетка шапки уже развела строки на
   --gap-stack, поэтому добавляем разницу, а не весь шаг. */
.sm-gear__head .sm-filelink {
	margin-block-start: calc(var(--gap-group) - var(--gap-stack));
}

.sm-filelink {
	display: inline-flex;
	align-items: flex-start;
	gap: var(--gap-inline);
	font-size: var(--text-static-base);
	color: var(--text-link);
	text-decoration: none;
}

.sm-filelink:hover {
	color: var(--text-link-hover);
	text-decoration: underline;
}

.sm-filelink:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
}

.sm-filelink__icon {
	width: 1.4em;
	height: 1.4em;
	flex: none;
	margin-top: 0.1em;
	color: var(--icon-secondary);
}

.sm-filelink:hover .sm-filelink__icon { color: inherit; }

/* Подчёркивание на наведении не должно захватывать приписку: она не часть
   названия документа. */
.sm-filelink__meta {
	color: var(--text-secondary);
	white-space: nowrap;
	text-decoration: none;
	display: inline-block;
}

.sm-gearcards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--gap-grid);
}

/* `overflow: hidden` вместо скругления каждого угла по отдельности: внутри
   три области с разными границами, и на каждой ступени углы разные. */
.sm-gearcard__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"figure"
		"body"
		"contacts";
	background: var(--white);
	border: var(--border-hairline) solid var(--grey-light);
	border-radius: var(--radius-card);
	overflow: hidden;
}

@media (min-width: 768px) {
	.sm-gearcard__inner {
		grid-template-columns: minmax(0, 24%) minmax(0, 1fr);
		grid-template-areas:
			"figure body"
			"figure contacts";
	}
}

@media (min-width: 1200px) {
	.sm-gearcard__inner {
		grid-template-columns: minmax(0, 18%) minmax(0, 1fr) minmax(0, 26%);
		grid-template-areas: "figure body contacts";
	}
}

/* ---------- логотип ---------- */

/* Панель БЕЛАЯ, а не в синий тон, как у карточки проекта.

   Логотипы партнёров приходят какие есть, и у части из них фон впечатан в
   файл: у РОССАМБО белый прямоугольник, у BFS белый квадрат вокруг значка.
   На тонированной панели такой файл показывает свою подложку заплаткой; на
   белой — сливается и выглядит как прозрачный. Раздел держится вместе за
   счёт рамки и общей формы карточки, а не за счёт заливки. */
.sm-gearcard__figure {
	grid-area: figure;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-6);
	background: var(--white);
	border-bottom: var(--border-hairline) solid var(--grey-light);
}

/* Обратный случай: логотип белый и на белом пропадает (AMID). Подложка
   тёмная, и решает это переключатель у самого партнёра, потому что это
   свойство ЕГО файла, а не раздела. */
.sm-gearcard__figure--dark {
	background: var(--black);
	border-color: var(--black);
}

@media (min-width: 768px) {
	.sm-gearcard__figure {
		border-bottom: 0;
		border-right: var(--border-hairline) solid var(--grey-light);
	}
}

/* Размер задан ДВУМЯ потолками, а не жёсткой высотой.

   Логотипы приходят с разбросом пропорций больше чем в семь раз: «Крепыш Я»
   почти вертикальный (0,73), Yunior UFA квадратный (1,04), ADULT SPORT и
   BUDOKAN — ленты 4,9 и 5,3 к одному. При общей ширине вытянутый выглядел бы
   вдвое мельче квадратного, поэтому размер задаётся высотой.

   Но жёсткая `height` на ленте упирается в ширину панели: картинка
   letterbox-ится внутрь `object-fit`, выходит НИЖЕ заданного, и поле
   «высота логотипа» перестаёт на что-либо влиять — редактор крутит ручку,
   которая ничего не делает.

   Поэтому `max-height` и `max-width` вместо `height` и `width`: картинка
   растёт до своего естественного размера и упирается в тот потолок, который
   ближе. Высокий логотип ограничен высотой, широкий — шириной панели, и
   поле остаётся верхним пределом, а не приказом. */
.sm-gearcard__logo {
	--sm-gear-logo: 4em;
	max-height: var(--sm-gear-logo);
	max-width: 100%;
	width: auto;
	height: auto;
	display: block;
}

/* ---------- название и описание ---------- */

.sm-gearcard__body {
	grid-area: body;
	padding: var(--pad-card);
	display: flex;
	flex-direction: column;
	gap: var(--gap-stack);
}

.sm-gearcard__title {
	font: var(--type-h4);
	color: var(--black);
	margin: 0;
}

/* Кегль нерастущий: описание — это абзац, а не заголовок. Подробности
   у самого токена в ds/tokens/typography.css. */
.sm-gearcard__description {
	font-size: var(--text-static-base);
	color: var(--text-secondary);
}

.sm-gearcard__description p { margin: 0 0 var(--space-4); }
.sm-gearcard__description p:last-child { margin-bottom: 0; }

/* ---------- связь ---------- */

/* Две группы, разведённые по краям колонки: связь сверху, кнопка снизу.

   `space-between` работает только когда колонке есть что делить. На широкой
   ступени это так: колонка связи — ячейка сетки высотой во всю карточку, а
   высоту задаёт описание. На узких ступенях блок высотой по содержанию,
   делить нечего, и кнопка просто идёт следом. Отдельного правила не нужно —
   одно и то же объявление даёт оба поведения. */
.sm-gearcard__contacts {
	grid-area: contacts;
	padding: var(--pad-card);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--gap-group);
	border-top: var(--border-hairline) solid var(--grey-light);
}

.sm-gearcard__details {
	display: grid;
	gap: var(--gap-stack);
	width: 100%;
}

@media (min-width: 1200px) {
	.sm-gearcard__contacts {
		border-top: 0;
		border-left: var(--border-hairline) solid var(--grey-light);
	}
}

.sm-gearcard__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--gap-inline);
}

/* Средняя ступень: блок связи лежит во всю ширину карточки под описанием, и
   карточка выходит высокой на ровном месте. Пара телефонов встаёт в строку,
   пара адресов — в следующую, и высота падает на две строки.

   Только 768–1199. На широкой ступени колонка связи узкая, в строку не
   помещается; ниже 768 всё в один столбец, и на телефоне два номера рядом
   не прочитать. Адрес не парный: он один и переносится на две строки. */
@media (min-width: 768px) and (max-width: 1199px) {
	.sm-gearcard__links--pair {
		grid-template-columns: repeat(2, minmax(0, max-content));
		column-gap: var(--gap-group);
	}
}

/* Телефоны, почта и адрес — ссылки, а не кнопки: заказчик просил, чтобы они
   читались как связь, а не как призыв к действию. Кнопка на карточке одна —
   «Перейти на сайт», и её значок остаётся сплошным: на красной плашке
   полупрозрачный слой duotone выцветает.

   У значков связи стиль duotone (`d-`). Своего кода он не требует: Pro
   отдаёт два <path>, второй с атрибутом `opacity=".4"`, и оба на
   `currentColor`. Наше правило в common.css задаёт только fill, поэтому
   прозрачность доживает до страницы, и значок получает объём одним цветом. */
.sm-contact {
	display: inline-flex;
	align-items: flex-start;
	gap: var(--gap-inline);
	font-size: var(--text-static-base);
	color: var(--text-link);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.sm-contact:hover {
	color: var(--text-link-hover);
	text-decoration: underline;
}

.sm-contact:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
}

/* Адрес переносится на две строки, поэтому значок выровнен по первой, а не
   по середине блока. Сдвиг на пол-строки — оптический, чтобы значок сел на
   базовую линию текста. */
.sm-contact__icon {
	width: 1.2em;
	height: 1.2em;
	flex: none;
	margin-top: 0.15em;
	color: var(--icon-secondary);
}

.sm-contact:hover .sm-contact__icon { color: inherit; }