/* ============================================================
 * editorial-cards.css — full-width card-based "En détail" body.
 * Loaded after pillar-premium-tight.css.
 * ============================================================ */

/* The "En détail" section — full-width, premium */
.pestv2-content--cards {
	padding-block: clamp(56px, 6vw, 96px) !important;
	background: var(--color-surface, #fdf8f0) !important;
	border-block: 1px solid var(--color-border-subtle, #e6e0d8) !important;
}

.pestv2-content__head {
	max-width: 720px;
	margin: 0 auto clamp(40px, 5vw, 64px);
	text-align: center;
}
.pestv2-content__head .eyebrow {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	font-family: var(--font-mono, monospace);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-accent, #b94a2e);
	font-weight: 500;
	margin-bottom: 14px;
}
.pestv2-content__head .eyebrow::before {
	content: '';
	display: inline-block;
	width: 32px;
	height: 1px;
	background: var(--color-accent, #b94a2e);
}
.pestv2-content__head .eyebrow .dot { display: none; }

.pestv2-content__head h2,
.pestv2-content__head .pestv2-display {
	font-family: var(--font-display, 'Fraunces', serif);
	font-size: clamp(36px, 4.4vw, 56px) !important;
	font-weight: 350 !important;
	letter-spacing: -0.022em !important;
	line-height: 1.05 !important;
	margin: 0 !important;
	color: #1a1410;
}
.pestv2-content__head h2 em,
.pestv2-content__head .pestv2-display em {
	font-style: italic;
	color: var(--color-accent, #b94a2e);
}

/* ============================================================
 * Editorial cards — stack of premium section cards
 * ============================================================ */
.ed-cards {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 2vw, 32px);
}

/* Each card */
.ed-card {
	display: grid;
	grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
	gap: clamp(28px, 3vw, 48px);
	padding: clamp(36px, 4vw, 56px) clamp(32px, 3.5vw, 56px);
	background: var(--color-surface, #fdf8f0);
	border: 1px solid var(--color-border, #d8cfc4);
	border-radius: var(--radius-lg, 18px);
	box-shadow: 0 12px 32px rgba(15, 10, 4, 0.04);
	position: relative;
	overflow: hidden;
}

/* Alternate card variant — darker cream + subtle accent corner */
.ed-card--alt {
	background: var(--color-bg-secondary, #efeae2);
	border-color: var(--color-border-subtle, #e6e0d8);
}

/* Top-right accent corner on each card */
.ed-card::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 56px;
	height: 1px;
	background: var(--color-accent, #b94a2e);
	opacity: 0.65;
}

/* Intro card — first chunk before any H2 */
.ed-card--intro {
	grid-template-columns: 1fr;
	background: linear-gradient(180deg, var(--color-bg-secondary, #efeae2) 0%, var(--color-surface, #fdf8f0) 100%);
	border-style: dashed;
}
.ed-card--intro .ed-card__head { display: none; }
.ed-card--intro .ed-card__body {
	font-size: 19px;
	color: #2a2520;
	font-style: italic;
	font-family: var(--font-display, 'Fraunces', serif);
	max-width: 65ch;
	margin: 0 auto;
}

/* Card head — left spine: numero + title */
.ed-card__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-self: start;
	position: sticky;
	top: 100px;
}

.ed-card__num {
	font-family: var(--font-mono, monospace);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-accent, #b94a2e);
	font-weight: 500;
}

.ed-card__title {
	font-family: var(--font-display, 'Fraunces', serif) !important;
	font-size: clamp(22px, 2.4vw, 30px) !important;
	font-weight: 400 !important;
	letter-spacing: -0.018em !important;
	line-height: 1.15 !important;
	color: #1a1410 !important;
	margin: 0 !important;
	max-width: 18ch;
}

/* Card body — overrides the global prose typography for tighter rhythm */
.ed-card__body.prose {
	font-size: 17px !important;
	line-height: 1.7 !important;
	color: #2a2520 !important;
	max-width: 60ch;
}

.ed-card__body.prose > *:first-child {
	margin-top: 0 !important;
}
.ed-card__body.prose > *:last-child {
	margin-bottom: 0 !important;
}

/* Override the H2 rules inside cards (body shouldn't repeat the title) */
.ed-card__body.prose h2 {
	display: none;
}
.ed-card__body.prose h3 {
	font-family: var(--font-display, serif) !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	letter-spacing: -0.012em !important;
	margin-top: 1.5em !important;
	margin-bottom: 0.4em !important;
	color: #1a1410 !important;
}
.ed-card__body.prose h4 {
	font-family: var(--font-display, serif) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	margin-top: 1.3em !important;
	margin-bottom: 0.3em !important;
}

.ed-card__body.prose p {
	margin-bottom: 1em !important;
}

/* First paragraph slightly bigger like a magazine intro */
.ed-card__body.prose > p:first-child,
.ed-card__body.prose > .cs-page-disclaimer + p {
	font-size: 18px !important;
	line-height: 1.65 !important;
	color: #1a1410 !important;
}

.ed-card__body.prose strong {
	color: #1a1410 !important;
	font-weight: 600 !important;
}

.ed-card__body.prose em {
	font-family: var(--font-display, serif) !important;
	font-style: italic !important;
}

.ed-card__body.prose a {
	color: #a83a23 !important;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	font-weight: 500;
	transition: color 0.2s ease;
}
.ed-card__body.prose a:hover {
	color: #7e2a17 !important;
}

/* Custom bullets */
.ed-card__body.prose ul {
	list-style: none !important;
	padding-left: 0 !important;
	margin: 1em 0 1.2em !important;
}
.ed-card__body.prose ul > li {
	position: relative;
	padding-left: 1.5em;
	margin-bottom: 0.55em;
	line-height: 1.65;
}
.ed-card__body.prose ul > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 12px;
	height: 1px;
	background: var(--color-accent, #b94a2e);
}

/* Numbered list */
.ed-card__body.prose ol {
	list-style: none !important;
	counter-reset: edcount !important;
	padding-left: 0 !important;
	margin: 1em 0 1.2em !important;
}
.ed-card__body.prose ol > li {
	position: relative;
	padding-left: 2.4em;
	margin-bottom: 0.6em;
	line-height: 1.65;
	counter-increment: edcount;
}
.ed-card__body.prose ol > li::before {
	content: counter(edcount, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.05em;
	font-family: var(--font-mono, monospace);
	font-size: 11px;
	color: var(--color-accent, #b94a2e);
	font-weight: 600;
	letter-spacing: 0.06em;
}

/* Blockquote pull */
.ed-card__body.prose blockquote {
	border-left: 3px solid var(--color-accent, #b94a2e);
	padding: 4px 0 4px 22px;
	margin: 1.4em 0;
	font-family: var(--font-display, serif);
	font-style: italic;
	font-size: 19px;
	line-height: 1.45;
	color: #1a1410;
}

/* Disclaimer banner inside intro card */
.ed-card__disclaimer {
	margin: -16px 0 16px;
}
.ed-card__disclaimer .cs-page-disclaimer {
	margin: 0 !important;
}

/* Image rendering inside cards */
.ed-card__body.prose img {
	max-width: 100% !important;
	border-radius: var(--radius-md, 12px) !important;
	margin: 1.4em 0 !important;
}

/* Tables in cards */
.ed-card__body.prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.2em 0;
	font-size: 14px;
}
.ed-card__body.prose th {
	text-align: left;
	padding: 10px 12px;
	font-family: var(--font-mono, monospace);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted, #7a6f66);
	border-bottom: 1px solid var(--color-border, #d8cfc4);
}
.ed-card__body.prose td {
	padding: 12px;
	border-bottom: 1px solid var(--color-border-subtle, #e6e0d8);
}

/* ============================================================
 * RESPONSIVE
 * ============================================================ */
@media (max-width: 1024px) {
	.ed-card {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.ed-card__head {
		position: static;
	}
	.ed-card__title {
		max-width: none;
	}
	.ed-card__body.prose {
		max-width: none;
	}
}

@media (max-width: 880px) {
	.ed-card {
		padding: 28px 24px;
	}
	.pestv2-content__head h2,
	.pestv2-content__head .pestv2-display {
		font-size: clamp(28px, 7vw, 38px) !important;
	}
	.ed-card__title {
		font-size: clamp(20px, 5.5vw, 26px) !important;
	}
	.ed-card__body.prose,
	.ed-card__body.prose > p:first-child {
		font-size: 16px !important;
	}
	.ed-card--intro .ed-card__body {
		font-size: 17px !important;
	}
}

/* ============================================================
 * ZONE PILLARS — same card layout on .pillar__content
 * ============================================================ */
.pillar--zone .pillar__content > .container > .ed-cards,
.pillar--zone .pillar__content > .container--wide > .ed-cards,
.pillar--zone .pillar__content > .container--prose > .ed-cards {
	grid-template-columns: 1fr;
	display: flex;
}

/* Disable any prior split-grid styling on .pillar__content (we use cards now) */
.pillar--zone .pillar__content.has-cards > .container,
.pillar--zone .pillar__content.has-cards > .container--prose,
.pillar--zone .pillar__content.has-cards > .container--wide {
	display: block !important;
	max-width: 1360px !important;
}