/*
 * tdn-cta-cards-double — 2 cards entry-points 50/50 horizontales (Home bloc 2)
 * Spec : Figma 8115:5905 (Container), CHECK 1 validé Phase C.5 bloc 2.
 *
 * STRUCTURE :
 *   .tdn-cta-cards-double (section, midnight bg, flex-row, position:relative)
 *     .tdn-cta-cards-double__divider (1×700 absolute centered, linear-gradient pink-100 alpha)
 *     .tdn-cta-cards-double__card (article, flex-col, padding asymétrique --entreprises/--agences)
 *       .tdn-cta-cards-double__header (flex-row, gap 24, align-end, padding-bottom 16)
 *         .tdn-cta-cards-double__intro (flex-col gap 24, flex 1)
 *           .tdn-cta-cards-double__eyebrow (inline-flex gap 8)
 *             .tdn-cta-cards-double__eyebrow-line (20×1 pink-100)
 *             .tdn-cta-cards-double__eyebrow-text (Nunito 900 12 pink-100 wider uppercase)
 *           .tdn-cta-cards-double__title (h2 2 lignes Nunito 900 clamp(24,2.5vw,32) uppercase white -1.28px)
 *         .tdn-cta-cards-double__cta (a, white bg, padding 8 12 8 24, radius 40)
 *           .tdn-cta-cards-double__cta-label (Nunito 400 20 midnight)
 *           .tdn-cta-cards-double__cta-icon (40×40 pink-500 + arrow-up-right white)
 *       .tdn-cta-cards-double__photo (figure, 100% × 500, radius 32, overflow hidden)
 *         .tdn-cta-cards-double__photo-image (img cover)
 *         .tdn-cta-cards-double__photo-overlay (linear-gradient bottom 0 → 0.7 midnight)
 *
 * Décisions §8 CHECK 1 (toutes validées) :
 *   - Avenir → Nunito Sans (cohérent bloc 1)
 *   - Vertical divider : CSS pur (linear-gradient pink-100 alpha)
 *   - Overlays décoratifs photo simplifiés : supprimés (rotated container pink + texture rectangle), conservé uniquement gradient bottom
 *   - Hrefs : /entreprises, /agences (slugs vérifiés en DB pages 27 et 28)
 *   - Card non clickable, seul le bouton est interactif
 *   - Letter-spacing titre H2 : -1.28px hardcodé (aucun token correspondant)
 *   - Hover CTA blanc : bg white → pink-50 + scale 1.02 (alternative à filter:brightness pour CTA fond blanc)
 *   - Photos placeholders Figma à remplacer par photos TDN production réelles avant prod
 *
 * Convention design system Phase C.5 (cf. status doc §4) :
 *   - filter: brightness(0.9) pour CTA fond coloré (pink-500, midnight)
 *   - bg → pink-50 pour CTA fond blanc (ce pattern)
 */

.tdn-cta-cards-double {
	position: relative;
	display: flex;
	flex-direction: row;
	width: 100%;
	background: var(--tdn-color-midnight-900, #1a1a2e);
	isolation: isolate;
}

/* --- Divider vertical CSS pur (remplace asset PNG Figma) ------ */

.tdn-cta-cards-double__divider {
	position: absolute;
	left: 50%;
	top: calc(50% - 15px);
	transform: translate(-50%, -50%);
	width: 1px;
	height: 700px;
	background: linear-gradient(
		to bottom,
		rgba(242, 194, 202, 0) 0%,
		rgba(242, 194, 202, 0.5) 50%,
		rgba(242, 194, 202, 0) 100%
	);
	pointer-events: none;
	z-index: 0;
}

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

.tdn-cta-cards-double__card {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 40px;
	padding: 100px 32px 100px 52px;
	position: relative;
	z-index: 1;
}

.tdn-cta-cards-double__card--agences {
	padding: 100px 52px 100px 32px;
}

/* --- Header (intro + CTA aligné à droite) -------------------- */

.tdn-cta-cards-double__header {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	gap: 24px;
	padding-bottom: 16px;
	width: 100%;
}

.tdn-cta-cards-double__intro {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	text-transform: none;
}

/* --- Eyebrow (line 20×1 pink-100 + text uppercase) ------------ */

.tdn-cta-cards-double__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	letter-spacing: normal;
}

.tdn-cta-cards-double__eyebrow-line {
	display: block;
	width: 20px;
	height: 1px;
	background: var(--tdn-color-pink-100, #F6C9D0);
	flex-shrink: 0;
}

.tdn-cta-cards-double__eyebrow-text {
	/* Phase 3.6 — semantic layer : eyebrow-mini (12px dark bg, weight bold 700) */
	font-family: var(--tdn-eyebrow-mini-family);
	font-weight: var(--tdn-eyebrow-mini-weight);
	font-size: var(--tdn-eyebrow-mini-size);
	line-height: var(--tdn-eyebrow-mini-lh);
	letter-spacing: var(--tdn-eyebrow-mini-ls);
	text-transform: var(--tdn-eyebrow-mini-tt);
	color: var(--tdn-color-pink-100, #F6C9D0);
	white-space: nowrap;
}

/* --- Title H2 (2 lignes, uppercase white -1.28px hardcodé) --- */

.tdn-cta-cards-double__title {
	margin: 0;
	/* Phase 3.6 — semantic layer : h2-card-up (mini titre carte CTA uppercase, weight medium 500) */
	font-family: var(--tdn-h2-card-up-family);
	font-weight: var(--tdn-h2-card-up-weight);
	font-size: var(--tdn-h2-card-up-size);
	line-height: var(--tdn-h2-card-up-lh);
	letter-spacing: var(--tdn-h2-card-up-ls);
	text-transform: var(--tdn-h2-card-up-tt);
	color: var(--tdn-color-neutral-0, #ffffff);
}

.tdn-cta-cards-double__title-line {
	display: block;
	text-transform: inherit;
}

/* --- CTA blanc (icon container pink-500 — inverse du hero) --- */

.tdn-cta-cards-double__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 8px 16px 8px 24px;
	/* style standard CTA : fond pink + texte blanc (retour Morgan : texte blanc partout) */
	background: var(--tdn-color-pink-500, #C06D80);
	border-radius: 40px;
	text-decoration: none;
	transition: transform 200ms ease, background-color 200ms ease;
	flex-shrink: 0;
}

.tdn-cta-cards-double__cta-label {
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
	font-weight: var(--tdn-button-weight);
	font-size: 20px;
	line-height: 24px;
	letter-spacing: -0.2px;
	text-transform: none;
	color: var(--tdn-color-neutral-0, #ffffff);
	white-space: nowrap;
}

.tdn-cta-cards-double__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--tdn-color-midnight-900, #1a1a2e);
	border-radius: 40px;
	flex-shrink: 0;
	transition: transform 200ms ease;
}

.tdn-cta-cards-double__cta-icon img {
	width: 16px;
	height: 16px;
	filter: brightness(0) invert(1);
}

/* Hover : bg pink-500 → pink-600 + scale 1.02 (aligné sur les autres CTA brand) */
.tdn-cta-cards-double__cta:hover {
	transform: scale(1.02);
	background: var(--tdn-color-action-primary-hover, #C06D80);
}

.tdn-cta-cards-double__cta:hover .tdn-cta-cards-double__cta-icon {
	transform: translateX(2px);
}

.tdn-cta-cards-double__cta:focus-visible {
	outline: 2px solid var(--tdn-color-neutral-0, #ffffff);
	outline-offset: 4px;
}

/* --- Photo + overlay gradient bottom seul -------------------- */

.tdn-cta-cards-double__photo {
	position: relative;
	width: 100%;
	height: 500px;
	margin: 0;
	border-radius: 32px;
	overflow: hidden;
}

.tdn-cta-cards-double__photo-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	user-select: none;
}

.tdn-cta-cards-double__photo-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(26, 26, 46, 0) 45%,
		rgba(26, 26, 46, 0.7) 100%
	);
	pointer-events: none;
}

/* --- Reduced motion ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.tdn-cta-cards-double__cta,
	.tdn-cta-cards-double__cta-icon {
		transition: none;
	}

	.tdn-cta-cards-double__cta:hover,
	.tdn-cta-cards-double__cta:hover .tdn-cta-cards-double__cta-icon {
		transform: none;
	}
}

/* --- Tablet 768-1023 : stacked, divider horizontal ----------- */

@media (max-width: 1023px) {
	.tdn-cta-cards-double {
		flex-direction: column;
	}

	.tdn-cta-cards-double__divider {
		left: 50%;
		top: 50%;
		width: 90%;
		max-width: 700px;
		height: 1px;
		background: linear-gradient(
			to right,
			rgba(242, 194, 202, 0) 0%,
			rgba(242, 194, 202, 0.5) 50%,
			rgba(242, 194, 202, 0) 100%
		);
	}

	.tdn-cta-cards-double__card,
	.tdn-cta-cards-double__card--agences {
		padding: 64px 32px;
	}

	.tdn-cta-cards-double__photo {
		height: 360px;
	}
}

/* --- Mobile <768 : compacte, header en colonne, no divider --- */

@media (max-width: 767px) {
	.tdn-cta-cards-double__card,
	.tdn-cta-cards-double__card--agences {
		padding: 48px 24px;
		gap: 32px;
	}

	.tdn-cta-cards-double__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.tdn-cta-cards-double__title {
		font-size: 24px;
	}

	.tdn-cta-cards-double__cta-label {
		font-size: 18px;
	}

	.tdn-cta-cards-double__photo {
		height: 280px;
		border-radius: 24px;
	}

	.tdn-cta-cards-double__divider {
		display: none;
	}
}