/*
 * Influencer / scent card grid. Wymiary z Figmy (patrz --u w tokens.css):
 * mobile 2 kolumny (zdjęcie 179x245, odstęp 2px, 40px między wierszami,
 * bez krótkiego opisu), desktop 4 kolumny (zdjęcie 430x645, odstęp 3px).
 * Siatka jest na pełną szerokość okna.
 *
 * Gdy lista siedzi w .container (strona Fresh Drop), zerujemy jego padding
 * i max-width, żeby karty sięgały krawędzi tak samo jak na stronie głównej.
 */
.influencer-grid .container {
	max-width: none;
	padding-inline: 0;
}

.influencer-grid__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(40 * var(--u)) calc(2 * var(--u));
}

@media (min-width: 900px) {
	.influencer-grid__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: calc(3 * var(--u));
	}
}

/*
 * Karta jest kolumną flex rozciągniętą na wysokość wiersza siatki; CTA ma
 * margin-top: auto, więc przyciski w jednym rzędzie leżą na tej samej
 * wysokości niezależnie od długości opisu.
 */
.influencer-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.influencer-card__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 179 / 245;
	overflow: hidden;
	border-radius: var(--radius-0);
	background-color: var(--color-panel-gray);
}

.influencer-card__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.influencer-card__title {
	margin-top: calc(14 * var(--u));
	font-size: calc(14 * var(--u));
	font-weight: var(--font-weight-medium);
	line-height: calc(17.43 * var(--u));
	text-transform: uppercase;
	color: var(--color-ink);
}

.influencer-card__author {
	margin-top: calc(5.57 * var(--u));
	margin-bottom: calc(20.55 * var(--u)); /* do przycisku */
	font-size: calc(10 * var(--u));
	line-height: calc(12.45 * var(--u));
	text-transform: uppercase;
}

/* Figma (Tura II): na mobile krótki opis pod nazwą jest usunięty. */
.influencer-card__description {
	display: none;
}

.influencer-card__cta {
	margin-top: auto;
}


@media (min-width: 900px) {
	.influencer-card__media {
		aspect-ratio: 430 / 645;
	}

	.influencer-card__title {
		margin-top: calc(30 * var(--u));
		font-size: calc(25 * var(--u));
		line-height: calc(28 * var(--u));
		color: var(--color-brand-red);
	}

	.influencer-card__author {
		margin-top: calc(5 * var(--u));
		margin-bottom: 0;
		font-size: calc(16 * var(--u));
		line-height: calc(20 * var(--u));
	}

	.influencer-card__description {
		display: block;
		width: calc(350 * var(--u));
		max-width: 100%;
		min-height: calc(60 * var(--u));
		margin-top: calc(25 * var(--u));
		margin-bottom: calc(20 * var(--u));
		font-size: calc(14 * var(--u));
		line-height: calc(20 * var(--u));
	}
}