/**
 * LWP Modern Media & Events (lwp_ma) — palette theming for the modern
 * archive + single templates (archive-lwp_ma-modern.php, single-lwp_ma-modern.php)
 * =========================================================
 * Covers only the MA-scoped .lwp-ma-* classes those templates emit. The
 * appearance CARDS themselves (.lwp-evn-*) come from the events-modern block
 * stylesheet (blocks/events-modern/style-index.css, same handle the block
 * render callback uses) — no card rules are duplicated here.
 *
 * All colors via --lwp-* palette variables with hardcoded fallbacks. Every
 * selector is scoped under body.lwp-theme-mode-modern + the .lwp-ma-* prefix
 * — no global selectors.
 *
 * Loaded on the frontend in modern mode only, MA contexts only
 * (lwp-modern-ma handle, see functions.php).
 */

/* ===== Shared: containers + section headers ===== */
body.lwp-theme-mode-modern .lwp-ma-archive,
body.lwp-theme-mode-modern .lwp-ma {
	background-color: var(--lwp-bg-primary, #0a0e17);
}

body.lwp-theme-mode-modern .lwp-ma-container {
	max-width: 1000px;
	margin-inline: auto;
}

/* Archive page header (sits above the events-modern card sections, which
 * carry their own 96px top padding — 40px bottom avoids a double gap). */
body.lwp-theme-mode-modern .lwp-ma-archive {
	padding: 96px 24px 40px;
}

body.lwp-theme-mode-modern .lwp-ma-archive .lwp-ma-tag,
body.lwp-theme-mode-modern .lwp-ma-hero .lwp-ma-tag {
	display: inline-block;
	margin-bottom: 16px;
	font-family: var(--lwp-font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lwp-accent-light, #a382de);
}

body.lwp-theme-mode-modern .lwp-ma-archive .lwp-ma-title,
body.lwp-theme-mode-modern .lwp-ma-hero .lwp-ma-title {
	margin: 0;
	font-family: var(--lwp-font-serif, 'Cormorant Garamond', Georgia, serif);
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.1;
	font-weight: 600;
	color: var(--lwp-text-primary, #e8eaf0);
}

body.lwp-theme-mode-modern .lwp-ma-archive .lwp-ma-divider,
body.lwp-theme-mode-modern .lwp-ma-hero .lwp-ma-divider {
	width: 64px;
	height: 2px;
	margin: 16px 0 0;
	border: 0;
	background: linear-gradient(90deg, var(--lwp-accent, #7c5cbf), transparent);
}

/* ===== Archive: group spacing above the (already-styled) card lists ===== */
body.lwp-theme-mode-modern .lwp-ma-group {
	margin-bottom: 64px;
}

/* ===== Single: hero ===== */
body.lwp-theme-mode-modern .lwp-ma-hero {
	padding: 96px 24px 24px;
}

body.lwp-theme-mode-modern .lwp-ma-date {
	margin: 16px 0 0;
	font-family: var(--lwp-font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
	font-size: 1.125rem;
	color: var(--lwp-text-secondary, #9aa5b8);
}

/* ===== Single: embed (oEmbed iframes / podcast player) ===== */
body.lwp-theme-mode-modern .lwp-ma-embed {
	padding: 16px 24px 24px;
}

/* The classic template styled this iframe inline; the helper keeps the class. */
body.lwp-theme-mode-modern .podcast-iframe {
	display: block;
	width: 100%;
	max-width: 660px;
	overflow: hidden;
	border: 0;
	border-radius: 10px;
}

/* ===== Single: featured image ===== */
body.lwp-theme-mode-modern .lwp-ma-figure {
	padding: 16px 24px 24px;
}

body.lwp-theme-mode-modern .lwp-ma-figure img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: var(--lwp-radius-md, 12px);
}

/* ===== Single: details ===== */
body.lwp-theme-mode-modern .lwp-ma-details {
	padding: 16px 24px 40px;
}

body.lwp-theme-mode-modern .lwp-ma-details-list {
	max-width: 800px;
	margin: 0 auto;
	padding: 32px;
	background-color: var(--lwp-surface, rgba(20, 30, 50, 0.6));
	border: 1px solid var(--lwp-border, rgba(124, 92, 191, 0.2));
	border-radius: var(--lwp-radius-md, 12px);
}

body.lwp-theme-mode-modern .lwp-ma-details-row {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 8px 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--lwp-border, rgba(124, 92, 191, 0.2));
}

body.lwp-theme-mode-modern .lwp-ma-details-row:first-child {
	padding-top: 0;
}

body.lwp-theme-mode-modern .lwp-ma-details-row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

body.lwp-theme-mode-modern .lwp-ma-details-label {
	margin: 0;
	font-family: var(--lwp-font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lwp-text-muted, #6b7a94);
}

body.lwp-theme-mode-modern .lwp-ma-details-value {
	margin: 0;
	font-family: var(--lwp-font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
	line-height: 1.7;
	color: var(--lwp-text-primary, #e8eaf0);
}

body.lwp-theme-mode-modern .lwp-ma-details-value a {
	color: var(--lwp-accent-light, #a382de);
	transition: var(--lwp-transition, all 0.4s cubic-bezier(0.4, 0, 0.2, 1));
}

body.lwp-theme-mode-modern .lwp-ma-details-value a:hover {
	color: var(--lwp-accent, #7c5cbf);
}

/* ===== Single: back link ===== */
body.lwp-theme-mode-modern .lwp-ma-back {
	padding: 16px 24px 96px;
	text-align: center;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
	body.lwp-theme-mode-modern .lwp-ma-archive {
		padding: 64px 20px 24px;
	}

	body.lwp-theme-mode-modern .lwp-ma-hero {
		padding: 64px 20px 16px;
	}

	body.lwp-theme-mode-modern .lwp-ma-details-list {
		padding: 24px 20px;
	}

	body.lwp-theme-mode-modern .lwp-ma-details-row {
		grid-template-columns: 1fr;
		gap: 4px;
		padding: 14px 0;
	}
}