/*
 * tdn-team-grid — 2×3 portraits team grid
 * Spec: Figma node 8115:4200 (section) + 8115:4209 (single card)
 *
 * STRUCTURE EXACTE FIGMA :
 *   .tdn-team-grid (section, full width, bg pink-50-deep var(--tdn-color-pink-50-deep, #fbe9ec))
 *     .tdn-team-grid__container (max 1336)
 *       .tdn-team-grid__header (eyebrow + H2 bicolore + subtitle)
 *       .tdn-team-grid__grid (2 rows × 3 cols, gap horiz)
 *         .tdn-team-grid__card × 6
 *           IMG shape-big (top:0 left:20 size 200×200, pink-primary)
 *           IMG shape-small (bottom:0 right:20 size 160×160, pink-100)
 *           IMG photo (right:2 bottom:0 size 311×350, B&W grayscale, z-index 2)
 *           DIV info (top:277 left:0 width:250, flex column gap 12, z-index 3)
 *             A linkedin (24×24)
 *             H3 name (28 Heavy capitalize)
 *             P role (18 Medium capitalize)
 *           ::after (gradient pink line bottom)
 *
 * CARD est de 379×391 fixe (taille Figma). Grille en 3×2 sur desktop,
 * 2×3 sur tablet, 1×6 stack sur mobile.
 */

.tdn-team-grid {
	background: var(--tdn-color-pink-50-deep, #fbe9ec);
	padding: 100px 0;
}

.tdn-team-grid__container {
	max-width: 1336px;
	margin: 0 auto;
	padding: 0 52px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 80px;
}

/* --- Header (eyebrow + title + subtitle) ----------------------- */

.tdn-team-grid__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	max-width: 993px;
	width: 100%;
	text-align: center;
}

.tdn-team-grid__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
}

.tdn-team-grid__eyebrow-line {
	display: block;
	width: 32px;
	height: 1px;
	background: var(--tdn-color-pink-200, #c06d80);
}

.tdn-team-grid__eyebrow-text {
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
	font-weight: var(--tdn-eyebrow-weight);
	font-size: 16px;
	line-height: 1;
	letter-spacing: var(--tdn-letter-spacing-wider);
	text-transform: uppercase;
	color: var(--tdn-color-pink-200, #c06d80);
}

.tdn-team-grid__title {
	margin: 0;
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
	font-weight: var(--tdn-h2-weight);
	font-size: clamp(36px, 4.5vw, 60px);
	line-height: 1.2;
	letter-spacing: -0.03em;
	color: var(--tdn-color-midnight, #1a1a2e);
}

.tdn-team-grid__title-accent {
	color: var(--tdn-color-pink-primary, #C06D80);
}

.tdn-team-grid__subtitle {
	margin: 0;
	max-width: 711px;
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
	font-weight: var(--tdn-font-weight-regular, 400);
	font-size: 24px;
	line-height: 1.5;
	color: var(--tdn-color-midnight, #1a1a2e);
}

/* --- Grid (2×3) ------------------------------------------------- */

.tdn-team-grid__grid {
	display: grid;
	grid-template-columns: repeat(3, 379px);
	gap: 32px 32px;
	justify-content: center;
	width: 100%;
}

/* --- Card --------------------------------------------------------- */

.tdn-team-grid__card {
	position: relative;
	width: 379px;
	height: 391px;
	background: transparent;
	overflow: visible;
}

/* Bottom gradient line */
.tdn-team-grid__card::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(to right, var(--tdn-color-pink-100, #F6C9D0) 0%, rgba(242, 194, 202, 0) 100%);
	z-index: 4;
	pointer-events: none;
}

/* --- Cool shape BIG (top-left, 200×200, pink-primary) ----------- */

.tdn-team-grid__shape-big {
	position: absolute;
	top: 0;
	left: 20px;
	width: 200px;
	height: 200px;
	z-index: 0;
	pointer-events: none;
	user-select: none;
	max-width: none;
}

/* --- Cool shape SMALL (bottom-right, 160×160, pink-100) -------- */

.tdn-team-grid__shape-small {
	position: absolute;
	bottom: 0;
	right: 20px;
	width: 160px;
	height: 160px;
	z-index: 0;
	pointer-events: none;
	user-select: none;
	max-width: none;
}

/* --- Photo (right-center, 311×350, grayscale) ------------------ */

.tdn-team-grid__photo {
	position: absolute;
	bottom: 0;
	right: 2px;
	width: 311px;
	height: 350px;
	object-fit: cover;
	object-position: top center;
	display: block;
	z-index: 2;
	filter: grayscale(100%) contrast(1.05);
	max-width: none;
}

/* --- Info block (bottom-left, flex column gap 12) -------------- */

.tdn-team-grid__info {
	position: absolute;
	top: 277px;
	left: 0;
	width: 250px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

/* Patch Morgan 2026-06-24 : descendre le rôle SOUS la ligne + LK+Nom plus proches de la ligne.
   LK + Nom rapprochés du bas de la photo (info à 320px au lieu de 277px).
   Rôle sorti du flow, placé sous la ligne. */
.tdn-team-grid__card {
	height: 460px;
}
.tdn-team-grid__photo {
	top: 41px;
	bottom: auto;
}
.tdn-team-grid__shape-small {
	top: 231px;
	bottom: auto;
}
.tdn-team-grid__card::after {
	top: 391px;
	bottom: auto;
}
/* LK + Nom : descendus de 277 → 320, plus proches de la ligne (391) */
.tdn-team-grid__info {
	top: 320px;
}
/* Rôle : positionné juste sous la ligne (à ~400px de la card = info(320) + 80) */
.tdn-team-grid__role {
	position: absolute;
	top: 80px;
	left: 0;
	width: 100%;
	margin: 0;
}

.tdn-team-grid__linkedin {
	display: inline-block;
	width: 24px;
	height: 24px;
	transition: transform 0.15s ease;
}

.tdn-team-grid__linkedin:hover {
	transform: scale(1.1);
}

.tdn-team-grid__linkedin svg {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 4px;
}

.tdn-team-grid__name {
	margin: 0;
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
	font-weight: var(--tdn-h2-weight);
	font-size: 28px;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--tdn-color-midnight, #1a1a2e);
	text-transform: none;
}

.tdn-team-grid__role {
	margin: 0;
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
	font-weight: var(--tdn-font-weight-medium);
	font-size: 18px;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--tdn-color-midnight, #1a1a2e);
	text-transform: none;
}

/* --- Responsive ------------------------------------------------- */

@media (max-width: 1280px) {
	.tdn-team-grid__grid {
		grid-template-columns: repeat(2, 379px);
	}
}

@media (max-width: 820px) {
	.tdn-team-grid {
		padding: 64px 0;
	}

	.tdn-team-grid__container {
		padding: 0 16px;
		gap: 56px;
	}

	.tdn-team-grid__title {
		font-size: 40px;
	}

	.tdn-team-grid__subtitle {
		font-size: 18px;
	}

	.tdn-team-grid__grid {
		grid-template-columns: 1fr;
		justify-content: center;
		gap: 32px;
	}

	.tdn-team-grid__card {
		width: 100%;
		max-width: 379px;
		justify-self: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tdn-team-grid__linkedin {
		transition: none;
	}
	.tdn-team-grid__linkedin:hover {
		transform: none;
	}
}

/* ================================================================
 * MARQUEE MOBILE — 2 rows défilement continu sens opposés
 * Posé par tdn-team-marquee.js au boot mobile (clone DOM 3x par row).
 * Row 1 (haut)  = scroll vers la DROITE (animation reverse)
 * Row 2 (bas)   = scroll vers la GAUCHE (animation normale)
 * ================================================================ */
@media (max-width: 1023px) {
	.tdn-team-grid__grid--marquee {
		display: flex !important;
		flex-direction: column !important;
		gap: 24px !important;
		grid-template-columns: none !important;
		justify-content: flex-start !important;
		overflow: hidden;
		padding: 0;
		width: 100%;
	}

	.tdn-team-grid__row {
		overflow: hidden;
		width: 100%;
	}

	.tdn-team-grid__row-inner {
		display: flex;
		flex-wrap: nowrap;
		gap: 24px;
		width: max-content;
		animation: tdn-team-marquee 45s linear infinite;
	}

	/* Row 1 = défilement DROITE = animation-direction reverse */
	.tdn-team-grid__row--right .tdn-team-grid__row-inner {
		animation-direction: reverse;
	}

	/* Cards en marquee : largeur fixe (l'absolute-positionned info/photo ont besoin
	 * d'un parent de taille connue). On reprend la taille Figma desktop. */
	.tdn-team-grid__row .tdn-team-grid__card {
		flex-shrink: 0 !important;
		flex: 0 0 280px !important;
		width: 280px !important;
		max-width: 280px !important;
		height: 360px !important;
		justify-self: auto !important;
	}

	/* Re-scale les éléments absolutes pour matcher la card 280x360 (ratio 0.74 du 379x460) */
	.tdn-team-grid__row .tdn-team-grid__shape-big {
		left: 14px;
		width: 148px;
		height: 148px;
	}

	.tdn-team-grid__row .tdn-team-grid__shape-small {
		top: 170px;
		right: 14px;
		width: 118px;
		height: 118px;
	}

	.tdn-team-grid__row .tdn-team-grid__photo {
		top: 30px;
		right: 2px;
		width: 230px;
		height: 258px;
	}

	.tdn-team-grid__row .tdn-team-grid__card::after {
		top: 288px;
	}

	.tdn-team-grid__row .tdn-team-grid__info {
		top: 236px;
		width: 220px;
	}

	.tdn-team-grid__row .tdn-team-grid__name {
		font-size: 22px;
	}

	.tdn-team-grid__row .tdn-team-grid__role {
		font-size: 15px;
		top: 64px;
	}

	/* Patch Morgan 2026-06-28 — MOBILE only : nom + poste TOUS LES DEUX sous la ligne.
	   Avant : Photo / Nom / Ligne / Poste
	   Après : Photo / Ligne / Nom / Poste (poste descendu encore un peu).
	   Card allongée de 360 → 410px pour absorber le texte sous la ligne. */
	.tdn-team-grid__row .tdn-team-grid__card {
		height: 410px !important;
	}
	/* Ligne séparateur : déjà à top:288, juste sous le bas de photo (30+258=288). Inchangée. */
	/* Info (LinkedIn + Nom) : déplacé de 236 → 300 (sous la ligne 288, +12px respiration) */
	.tdn-team-grid__row .tdn-team-grid__info {
		top: 300px;
	}
	/* Role : ajusté pour resserrer Nom↔Poste mobile (Morgan 2026-06-28 : 76 → 68) */
	.tdn-team-grid__row .tdn-team-grid__role {
		top: 68px;
	}

	@keyframes tdn-team-marquee {
		from { transform: translateX(0); }
		to { transform: translateX(-33.333%); }
	}
}

/* Pause marquee si prefers-reduced-motion */
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
	.tdn-team-grid__row-inner {
		animation: none;
	}
}