/**
 * About (Modern) Block — Frontend Styles
 * All colors via --lwp-* palette variables with hardcoded fallbacks.
 * Every selector is scoped under .lwp-abm.
 */

.lwp-abm {
	background: var(--lwp-bg-primary, #0a0e17);
	color: var(--lwp-text-primary, #e8eaf0);
	padding: 96px 24px;
	font-family: var(--lwp-font-sans, 'Inter', -apple-system, sans-serif);
}

.lwp-abm-container {
	max-width: 1200px;
	margin: 0 auto;
}

/* Eyebrow */
.lwp-abm-tag {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lwp-accent-light, #a382de);
	margin-bottom: 12px;
}

/* Title */
.lwp-abm-title {
	font-family: var(--lwp-font-serif, 'Cormorant Garamond', Georgia, serif);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 600;
	line-height: 1.1;
	margin: 0 0 16px;
	color: var(--lwp-text-primary, #e8eaf0);
}

.lwp-abm-divider {
	width: 64px;
	height: 2px;
	margin: 0 0 40px;
	background: linear-gradient(90deg, var(--lwp-accent, #7c5cbf), transparent);
}

/* Grid — the full text stack (eyebrow, title, divider, bio, CTA) lives in
   the left column so the headline starts flush with the top edge of the
   portrait. start: with the headline inside the column, centering would
   push the whole stack (headline included) toward the middle of a taller
   visual column — top alignment is the intent. */
.lwp-abm-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 56px;
	align-items: start;
}

.lwp-abm--portrait-left .lwp-abm-text,
.lwp-abm--portrait-left-center .lwp-abm-text { order: 2; }
.lwp-abm--portrait-left .lwp-abm-visual,
.lwp-abm--portrait-left-center .lwp-abm-visual { order: 1; }

/* Text column */
.lwp-abm-body {
	color: var(--lwp-text-secondary, #9aa5b8);
	font-size: 1.05rem;
	line-height: 1.8;
}

.lwp-abm-body p {
	margin: 0 0 1.2em;
}

.lwp-abm-body p:last-child {
	margin-bottom: 0;
}

/* CTA row — one or up to three shared .lwp-btn buttons (shared system, see
   inc/lwp-modern-blocks.php). Flex + wrap so multiple CTAs sit on one line and
   drop down cleanly when the column is narrow. */
.lwp-abm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

/* Vertically-centered variants — center the text stack (eyebrow, title, bio,
   CTA) within the row so it sits at the vertical middle of the portrait,
   instead of the default top alignment (align-items: start on .lwp-abm-grid).
   The portrait stays on its side (order rules above). */
.lwp-abm--portrait-right-center .lwp-abm-grid,
.lwp-abm--portrait-left-center .lwp-abm-grid {
	align-items: center;
}

/* Visual column (portrait only — order rules target it for layout flips) */
.lwp-abm-photo {
	width: 100%;
	height: auto;
	border-radius: var(--lwp-radius-md, 12px);
	box-shadow: var(--lwp-shadow-lg, 0 8px 40px rgba(0, 0, 0, 0.7));
	object-fit: cover;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
	.lwp-abm { padding: 72px 24px; }
	.lwp-abm-grid { gap: 40px; }
}

@media (max-width: 768px) {
	.lwp-abm { padding: 56px 20px; }
	.lwp-abm-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	/* The headline now lives inside the text column, so the text column
	   leads on mobile regardless of the desktop layout choice — the
	   portrait never jumps above the heading. */
	.lwp-abm-text,
	.lwp-abm--portrait-left .lwp-abm-text,
	.lwp-abm--portrait-left-center .lwp-abm-text { order: 1; }
	.lwp-abm-visual,
	.lwp-abm--portrait-left .lwp-abm-visual,
	.lwp-abm--portrait-left-center .lwp-abm-visual { order: 2; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
	.lwp-abm * { transition: none !important; }
}