/**
 * SPD About — Homepage "Découvrez SPD / Qui sommes-nous ?"
 * =========================================================
 * Phase 3f component styles. Reproduces the React "À propos de SPD"
 * encart (HomePage.tsx, section 6.1) using the centralized SPD
 * design-system tokens for typography/radius/shadow, with
 * React-reference-exact brand colors scoped to .spd-about only (the
 * global SPD tokens are untouched).
 *
 * The React site is the visual source of truth.
 *
 * Loaded after spd-reassurance.css.
 */

.spd-about {
	/* Section-scoped brand colors — reference the centralized UI tokens
	   (defined in spd-design-system.css) so the validated React values
	   live in one place. */
	--spd-about-blue:       var(--spd-ui-blue); /* eyebrow, bullet icon, primary CTA */
	--spd-about-blue-hover:  var(--spd-ui-blue-dark); /* primary CTA hover */
	--spd-about-blue-soft:   var(--spd-ui-blue-soft); /* bullet icon background */

	/* Neutrals (Tailwind slate scale, raw values). */
	--spd-about-slate-50:   #F8FAFC;
	--spd-about-slate-100: #F1F5F9;
	--spd-about-slate-200: #E2E8F0;
	--spd-about-slate-300: #CBD5E1;
	--spd-about-slate-400: #94A3B8;
	--spd-about-slate-600: #475569;
	--spd-about-slate-700: #334155;
	--spd-about-slate-900: #0F172A;
	--spd-about-slate-950: #020617;

	/* py-12 | bg-white | border-b border-slate-100 */
	padding-top: 48px;    /* py-12 → 3rem */
	padding-bottom: 48px;
	background-color: #FFFFFF;
	border-bottom: 1px solid var(--spd-about-slate-100);
}

/* React uses `max-w-7xl mx-auto px-4 sm:px-6` (24px from sm up). */
@media (min-width: 1024px) {
	.spd-about .spd-container {
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* ============================================================
   1. Card — bg-slate-50 rounded-3xl border border-slate-200/80
   p-6 sm:p-10
   ============================================================ */
.spd-about__card {
	background-color: var(--spd-about-slate-50); /* bg-slate-50 */
	border: 1px solid rgba(226, 232, 240, 0.80); /* border border-slate-200/80 */
	border-radius: var(--spd-radius-2xl); /* rounded-3xl → 24px */
	padding: 24px; /* p-6 */
}

@media (min-width: 640px) {
	.spd-about__card {
		padding: 40px; /* sm:p-10 → 2.5rem */
	}
}

/* ============================================================
   2. Grid — grid-cols-1 lg:grid-cols-12 gap-8 items-center
   ============================================================ */
.spd-about__grid {
	display: grid;
	grid-template-columns: 1fr; /* grid-cols-1 */
	gap: 32px; /* gap-8 → 2rem */
	align-items: center; /* items-center */
}

@media (min-width: 1024px) {
	.spd-about__grid {
		grid-template-columns: repeat(12, 1fr); /* lg:grid-cols-12 */
	}
}

/* ============================================================
   3. Media column — lg:col-span-5
   relative rounded-2xl overflow-hidden shadow-md border
   border-slate-200 aspect-4/3
   ============================================================ */
.spd-about__media {
	position: relative;
	grid-column: 1 / -1; /* full width on mobile */
	aspect-ratio: 4 / 3; /* aspect-4/3 */
	margin: 0;
	border: 1px solid var(--spd-about-slate-200); /* border border-slate-200 */
	border-radius: var(--spd-radius-xl); /* rounded-2xl → 16px */
	overflow: hidden;
	box-shadow: var(--spd-shadow-md); /* shadow-md */
}

@media (min-width: 1024px) {
	.spd-about__media {
		grid-column: span 5; /* lg:col-span-5 */
	}
}

/* Image — w-full h-full object-cover */
.spd-about__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Caption overlay — absolute inset-0 bg-gradient-to-t from-slate-950/70
   via-transparent to-transparent flex items-end p-4 */
.spd-about__caption {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end; /* items-end */
	padding: 16px; /* p-4 */
	background: linear-gradient(
		to top,
		rgba(2, 6, 23, 0.70) 0%,   /* from-slate-950/70 */
		rgba(2, 6, 23, 0) 50%,    /* via-transparent (mid stop) */
		rgba(2, 6, 23, 0) 100%    /* to-transparent */
	);
	color: #FFFFFF;
	pointer-events: none;
}

.spd-about__caption-title {
	display: block;
	font-size: var(--spd-font-size-xs); /* text-xs → 12px */
	font-weight: var(--spd-font-weight-bold); /* font-bold → 700 */
	line-height: 1.25;
}

.spd-about__caption-sub {
	display: block;
	margin-top: 2px;
	font-size: 11px; /* text-[11px] */
	line-height: 1.25;
	color: rgba(255, 255, 255, 0.80); /* text-white/80 */
}

/* ============================================================
   4. Body column — lg:col-span-7 space-y-4
   ============================================================ */
.spd-about__body {
	grid-column: 1 / -1; /* full width on mobile */
	display: flex;
	flex-direction: column;
	gap: 16px; /* space-y-4 → 16px */
}

@media (min-width: 1024px) {
	.spd-about__body {
		grid-column: span 7; /* lg:col-span-7 */
	}
}

/* Eyebrow — text-[11px] font-black uppercase tracking-wider text-[#0F5B94] */
.spd-about__eyebrow {
	display: block;
	font-size: 11px; /* text-[11px] */
	font-weight: var(--spd-font-weight-black); /* font-black → 900 */
	text-transform: uppercase;
	letter-spacing: 0.05em; /* tracking-wider */
	color: var(--spd-about-blue); /* text-[#0F5B94] */
}

/* Title — text-2xl sm:text-3xl font-black text-slate-900 tracking-tight.
   Color is set explicitly because Astra's global `h2` rule (element
   selector) would otherwise override the inherited color. */
.spd-about__title {
	margin: 0;
	font-size: var(--spd-font-size-2xl); /* text-2xl → 1.5rem (24px) */
	font-weight: var(--spd-font-weight-black); /* font-black → 900 */
	line-height: 1.2;
	letter-spacing: var(--spd-tracking-tight); /* tracking-tight */
	color: var(--spd-about-slate-900); /* text-slate-900 */
}

@media (min-width: 640px) {
	.spd-about__title {
		font-size: var(--spd-font-size-3xl); /* sm:text-3xl → 1.875rem (30px) */
	}
}

/* Description — text-sm text-slate-600 leading-relaxed */
.spd-about__desc {
	margin: 0;
	font-size: var(--spd-font-size-sm); /* text-sm → 14px */
	line-height: var(--spd-line-height-relaxed); /* leading-relaxed → 1.625 */
	color: var(--spd-about-slate-600); /* text-slate-600 */
}

/* ============================================================
   5. Bullets — space-y-2.5 pt-1
   ============================================================ */
.spd-about__bullets {
	list-style: none;
	margin: 0;
	padding: 4px 0 0; /* pt-1 → 4px */
	display: flex;
	flex-direction: column;
	gap: 10px; /* space-y-2.5 → 0.625rem */
}

/* Bullet — flex items-start gap-2.5 */
.spd-about__bullet {
	display: flex;
	align-items: flex-start; /* items-start */
	gap: 10px; /* gap-2.5 → 0.625rem */
}

/* Bullet icon — w-5 h-5 rounded-full bg-[#EBF3F9] text-[#0F5B94]
   flex items-center justify-center shrink-0 mt-0.5 */
.spd-about__bullet-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0; /* shrink-0 */
	width: 20px;  /* w-5 */
	height: 20px; /* h-5 */
	margin-top: 2px; /* mt-0.5 */
	background-color: var(--spd-about-blue-soft); /* bg-[#EBF3F9] */
	border-radius: var(--spd-radius-full); /* rounded-full */
	color: var(--spd-about-blue); /* text-[#0F5B94] */
}

/* Check glyph — lucide size={13} stroke-[3] */
.spd-about__bullet-icon .spd-icon {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
	stroke-width: 3; /* stroke-[3] */
}

/* Bullet text — text-xs sm:text-sm text-slate-700 font-medium */
.spd-about__bullet-text {
	font-size: var(--spd-font-size-xs); /* text-xs → 12px */
	font-weight: var(--spd-font-weight-medium); /* font-medium → 500 */
	line-height: var(--spd-line-height-relaxed); /* leading-relaxed */
	color: var(--spd-about-slate-700); /* text-slate-700 */
}

@media (min-width: 640px) {
	.spd-about__bullet-text {
		font-size: var(--spd-font-size-sm); /* sm:text-sm → 14px */
	}
}

.spd-about__bullet-text strong {
	font-weight: var(--spd-font-weight-bold); /* font-bold → 700 */
	color: var(--spd-about-slate-900); /* slightly stronger than body */
}

/* ============================================================
   6. Actions — flex flex-wrap items-center gap-3 pt-2
   ============================================================ */
.spd-about__actions {
	display: flex;
	flex-wrap: wrap; /* flex-wrap */
	align-items: center; /* items-center */
	gap: 12px; /* gap-3 → 0.75rem */
	padding-top: 8px; /* pt-2 → 0.5rem */
}

/* Base button — rounded-xl font-bold text-xs sm:text-sm transition-colors
   flex items-center gap-2 cursor-pointer */
.spd-about__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px; /* gap-2 → 0.5rem */
	font-family: var(--spd-font-family);
	font-size: var(--spd-font-size-xs); /* text-xs → 12px */
	font-weight: var(--spd-font-weight-bold); /* font-bold → 700 */
	line-height: 1.25;
	text-decoration: none;
	border-radius: var(--spd-radius-lg); /* rounded-xl → 12px */
	transition: background-color var(--spd-transition-fast),
	            border-color var(--spd-transition-fast),
	            color var(--spd-transition-fast);
	cursor: pointer;
}

@media (min-width: 640px) {
	.spd-about__btn {
		font-size: var(--spd-font-size-sm); /* sm:text-sm → 14px */
	}
}

.spd-about__btn .spd-icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

/* Primary — px-5 py-2.5 bg-[#0F5B94] hover:bg-[#0A436D] text-white */
.spd-about__btn--primary {
	padding: 10px 20px; /* py-2.5 px-5 */
	background-color: var(--spd-about-blue); /* bg-[#0F5B94] */
	color: #FFFFFF;
	border: 1px solid var(--spd-about-blue);
}

.spd-about__btn--primary:hover,
.spd-about__btn--primary:focus {
	background-color: var(--spd-about-blue-hover); /* hover:bg-[#0A436D] */
	border-color: var(--spd-about-blue-hover);
	color: #FFFFFF;
}

/* Ghost — px-4 py-2.5 border border-slate-300 hover:border-slate-400
   bg-white text-slate-700 */
.spd-about__btn--ghost {
	padding: 10px 16px; /* py-2.5 px-4 */
	background-color: #FFFFFF;
	color: var(--spd-about-slate-700); /* text-slate-700 */
	border: 1px solid var(--spd-about-slate-300); /* border-slate-300 */
}

.spd-about__btn--ghost:hover,
.spd-about__btn--ghost:focus {
	border-color: var(--spd-about-slate-400); /* hover:border-slate-400 */
	color: var(--spd-about-slate-700);
}

/* Visible focus ring for keyboard users (accessibility). */
.spd-about__btn:focus-visible {
	outline: none;
	box-shadow: var(--spd-focus-ring);
}

/* ============================================================
   7. Reduced motion (no animations in this section, kept for parity)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.spd-about__btn {
		transition: none;
	}
}