/* Партнёры (pink-soft): логотипы на «бирках» с верёвочкой. Серые в покое, цвет и качание при наведении. Токены в base.css */

.partners {
	overflow-x: clip;
	background: var(--color-pink-soft);
}

.partners__head {
	text-align: center;
}

.partners__head .section-head__lead {
	margin-inline: auto;
}

.partners__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(2.25rem, 5vw, 3.5rem) clamp(1rem, 3vw, 2rem);
	margin: clamp(1rem, 3vw, 2rem) 0 0;
	padding: 0;
	list-style: none;
}

.partner {
	flex: 0 1 clamp(9.5rem, 28vw, 15rem);
	padding-top: 1.75rem; /* место под верёвочку */
}

/* Бирка: рамка, жёсткая тень, отверстие сверху; тильт чередуется, чтобы ряд не выглядел штампом */
.partner__tag {
	--tilt: -1.5deg;
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 2 / 1;
	padding: clamp(0.85rem, 2vw, 1.25rem) clamp(1rem, 2.5vw, 1.5rem);
	background: var(--color-white);
	border: var(--border-strong);
	border-radius: var(--radius-md);
	box-shadow: 0.3rem 0.3rem 0 var(--color-pink);
	color: var(--color-ink);
	text-decoration: none;
	rotate: var(--tilt);
	transform-origin: 50% -1.75rem;
	transition: box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base);
}

.partner:nth-child(3n + 2) .partner__tag { --tilt: 1.2deg; }
.partner:nth-child(3n) .partner__tag { --tilt: -0.6deg; }

/* Отверстие и верёвочка к «крючку» над биркой */
.partner__tag::before {
	content: '';
	position: absolute;
	top: 0.5rem;
	left: 50%;
	width: 0.6rem;
	height: 0.6rem;
	translate: -50% 0;
	background: var(--color-pink);
	border: 1.5px solid var(--color-ink);
	border-radius: 50%;
}

.partner__tag::after {
	content: '';
	position: absolute;
	bottom: calc(100% - 0.7rem);
	left: 50%;
	width: 2px;
	height: 2.4rem;
	translate: -50% 0;
	background: var(--color-red);
	border-radius: 2px;
	pointer-events: none;
}

.partner__logo {
	width: 100%;
	height: 100%;
	max-height: clamp(3rem, 8vw, 4.5rem);
	object-fit: contain;
	filter: grayscale(1) contrast(1.05);
	opacity: 0.72;
	transition: filter var(--dur-base), opacity var(--dur-base), scale var(--dur-base) var(--ease-out);
}

.partner__name {
	font-family: var(--font-display);
	font-size: clamp(1rem, 2.2vw, 1.25rem);
	line-height: 1.15;
	text-align: center;
	text-wrap: balance;
	color: var(--color-gray);
	transition: color var(--dur-base);
}

.partner__go {
	position: absolute;
	right: 0.5rem;
	bottom: 0.5rem;
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	background: var(--color-red-btn);
	border-radius: 50%;
	color: var(--color-white);
	font-size: 0.95rem;
	opacity: 0;
	scale: 0.5;
	transition: opacity var(--dur-fast), scale var(--dur-base) cubic-bezier(0.34, 1.56, 0.64, 1);
}

a.partner__tag:hover,
a.partner__tag:focus-visible,
div.partner__tag:hover {
	background: var(--color-pink-soft);
	box-shadow: 0.45rem 0.45rem 0 var(--color-red);
}

a.partner__tag:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 4px;
}

.partner__tag:hover .partner__logo,
.partner__tag:focus-visible .partner__logo {
	filter: none;
	opacity: 1;
	scale: 1.06;
}

.partner__tag:hover .partner__name,
.partner__tag:focus-visible .partner__name {
	color: var(--color-red-deep);
}

a.partner__tag:hover .partner__go,
a.partner__tag:focus-visible .partner__go {
	opacity: 1;
	scale: 1;
}

@media (prefers-reduced-motion: no-preference) {
	/* Бирка качается на верёвочке и успокаивается */
	.partner__tag:hover,
	.partner__tag:focus-visible {
		animation: partner-swing 1.1s var(--ease-out);
	}
}

@keyframes partner-swing {
	0% { transform: rotate(0); }
	20% { transform: rotate(5deg); }
	45% { transform: rotate(-3.5deg); }
	70% { transform: rotate(1.8deg); }
	100% { transform: rotate(0); }
}

/* Touch: наведения нет, логотипы сразу в цвете */
@media (hover: none) {
	.partner__logo {
		filter: none;
		opacity: 1;
	}

	.partner__name {
		color: var(--color-ink);
	}

	.partner__go {
		opacity: 1;
		scale: 1;
	}
}

@media (max-width: 480px) {
	.partner {
		flex-basis: calc(50% - 0.5rem);
	}
}