/**
 * SPD Reassurance — Homepage "Les 4 Piliers de Confiance"
 * =========================================================
 * Phase 3e component styles. Reproduces the React reassurance section
 * (HomePage.tsx, section 5) using the centralized SPD design-system
 * tokens for typography/radius/shadow, with React-reference-exact
 * brand colors scoped to .spd-reassurance only (the global SPD tokens
 * are untouched).
 *
 * The React site is the visual source of truth.
 *
 * Loaded after spd-promotions.css.
 */

.spd-reassurance {
	/* 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-re-blue:    var(--spd-ui-blue); /* ShieldCheck / Headphones accent */
	--spd-re-amber:   var(--spd-ui-gold); /* Truck accent */
	--spd-re-red:     var(--spd-ui-red); /* Lock accent */

	/* Neutrals (Tailwind slate scale, raw values). */
	--spd-re-slate-50:   #F8FAFC;
	--spd-re-slate-100: #F1F5F9;
	--spd-re-slate-200: #E2E8F0;
	--spd-re-slate-500: #64748B;
	--spd-re-slate-900: #0F172A;

	/* py-10 | bg-white | border-b border-slate-100 */
	padding-top: 40px;    /* py-10 → 2.5rem */
	padding-bottom: 40px;
	background-color: #FFFFFF;
	border-bottom: 1px solid var(--spd-re-slate-100);
}

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

/* ============================================================
   1. Grid — grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6
   ============================================================ */
.spd-reassurance__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px; /* gap-4 */
}

@media (min-width: 640px) {
	.spd-reassurance__grid {
		grid-template-columns: 1fr 1fr; /* sm:grid-cols-2 */
		gap: 24px; /* sm:gap-6 */
	}
}

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

/* ============================================================
   2. Pillar card — bg-slate-50/80 rounded-2xl p-4 border
   border-slate-200/80 flex items-start gap-3.5
   ============================================================ */
.spd-reassurance__pillar {
	display: flex;
	align-items: flex-start; /* items-start */
	gap: 14px;                /* gap-3.5 → 0.875rem */
	padding: 16px;            /* p-4 */
	background-color: rgba(248, 250, 252, 0.80); /* bg-slate-50/80 */
	border: 1px solid rgba(226, 232, 240, 0.80); /* border border-slate-200/80 */
	border-radius: var(--spd-radius-xl); /* rounded-2xl → 16px */
}

/* ============================================================
   3. Icon container — w-10 h-10 rounded-xl bg-white flex
   items-center justify-center shrink-0 border border-slate-200
   shadow-2xs. Color set per-pillar via modifier.
   ============================================================ */
.spd-reassurance__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;            /* shrink-0 */
	width: 40px;               /* w-10 */
	height: 40px;              /* h-10 */
	background-color: #FFFFFF; /* bg-white */
	border: 1px solid var(--spd-re-slate-200); /* border border-slate-200 */
	border-radius: var(--spd-radius-lg); /* rounded-xl → 12px */
	box-shadow: var(--spd-shadow-xs);   /* shadow-2xs */
	color: var(--spd-re-blue); /* default accent (overridden below) */
}

/* Pillar accent colors — React `text-[#...]` per icon. */
.spd-reassurance__pillar--blue  .spd-reassurance__icon { color: var(--spd-re-blue); }
.spd-reassurance__pillar--amber .spd-reassurance__icon { color: var(--spd-re-amber); }
.spd-reassurance__pillar--red   .spd-reassurance__icon { color: var(--spd-re-red); }

/* Icon glyph — lucide size={20}. */
.spd-reassurance__icon .spd-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* ============================================================
   4. Body — title + description
   ============================================================ */
.spd-reassurance__body {
	min-width: 0; /* allow text wrapping inside flex child */
}

/* Title — text-sm font-bold text-slate-900 (h4).
   Color is set explicitly because Astra's global `h4` rule (element
   selector) would otherwise override the inherited color. */
.spd-reassurance__title {
	margin: 0;
	font-size: var(--spd-font-size-sm); /* text-sm → 14px */
	font-weight: var(--spd-font-weight-bold); /* font-bold → 700 */
	line-height: 1.375; /* matches React default heading line-height */
	color: var(--spd-re-slate-900); /* text-slate-900 */
}

/* Description — text-xs text-slate-500 mt-0.5 leading-relaxed. */
.spd-reassurance__desc {
	margin: 2px 0 0; /* mt-0.5 → 2px */
	font-size: var(--spd-font-size-xs); /* text-xs → 12px */
	line-height: var(--spd-line-height-relaxed); /* leading-relaxed → 1.625 */
	color: var(--spd-re-slate-500); /* text-slate-500 */
}

/* ============================================================
   5. Reduced motion (no animations in this section, kept for parity)
   ============================================================ */