/* Links Module Block — Modern-mode styles.
 *
 * Palette-driven: all colors via --lwp-* vars with hardcoded fallbacks
 * (fallbacks mirror the theme's default "midnight" palette). The section
 * header (eyebrow + serif title + gradient divider) matches the theme's
 * modern blocks — same pattern as about-modern, via the shared
 * lwp_modern_section_header() output (.lwp-lm-modern-tag / -title /
 * -divider). Loaded on the frontend only in modern mode (enqueue gate in
 * includes/class-acf-blocks.php) and into the editor iframe canvas via
 * block.json editorStyle (inert in classic mode — no matching markup). */

.lwp-lm-modern {
	background: var(--lwp-bg-primary, #0a0e17);
	color: var(--lwp-text-primary, #e8eaf0);
	font-family: var(--lwp-font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
	padding: 96px 24px;
	min-height: 100vh;
	box-sizing: border-box;
}

.lwp-lm-modern__inner {
	max-width: 640px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* Profile header — avatar + name + bio, centered. */
.lwp-lm-modern__profile {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
}

.lwp-lm-modern__avatar img {
	width: 112px;
	height: 112px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--lwp-border, rgba(124, 92, 191, 0.2));
	box-shadow: var(--lwp-shadow-lg, 0 8px 40px rgba(0, 0, 0, 0.7));
}

/* Section header — matches the theme's modern blocks (about-modern):
   uppercase eyebrow in accent-light, serif title, gradient divider.
   The divider is centred (the links page is a centred column; the
   about-modern divider is left-aligned for its two-column layout). */
.lwp-lm-modern-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;
}

.lwp-lm-modern-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-lm-modern-divider {
	width: 64px;
	height: 2px;
	margin: 0 auto 40px;
	background: linear-gradient(90deg, transparent, var(--lwp-accent, #7c5cbf), transparent);
}

.lwp-lm-modern__bio {
	max-width: 440px;
	color: var(--lwp-text-secondary, #9aa5b8);
	font-size: 1.05rem;
	line-height: 1.8;
}

.lwp-lm-modern__bio p {
	margin: 0;
}

/* Link list — single column of modern pills. */
.lwp-lm-modern__links {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.lwp-lm-modern__link {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	border-radius: var(--lwp-radius-md, 12px);
	background: var(--lwp-surface, rgba(20, 30, 50, 0.6));
	border: 1px solid var(--lwp-border, rgba(124, 92, 191, 0.2));
	color: var(--lwp-text-primary, #e8eaf0);
	text-decoration: none;
	font-size: 1.05rem;
	transition: var(--lwp-transition, all 0.4s cubic-bezier(0.4, 0, 0.2, 1));
}

.lwp-lm-modern__link:hover {
	background: var(--lwp-surface-hover, rgba(30, 45, 70, 0.8));
	border-color: var(--lwp-accent, #7c5cbf);
	box-shadow: 0 0 0 1px var(--lwp-accent, #7c5cbf), var(--lwp-accent-glow, rgba(124, 92, 191, 0.3));
	transform: translateY(-2px);
}

.lwp-lm-modern__link:focus-visible {
	outline: 2px solid var(--lwp-accent-light, #a382de);
	outline-offset: 2px;
}

.lwp-lm-modern__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	font-size: 1.1rem;
	color: var(--lwp-accent-light, #a382de);
}

.lwp-lm-modern__text {
	flex: 1 1 auto;
}

.lwp-lm-modern__arrow {
	flex: 0 0 auto;
	font-size: 1.1rem;
	color: var(--lwp-text-secondary, #9aa5b8);
	transition: var(--lwp-transition, all 0.4s cubic-bezier(0.4, 0, 0.2, 1));
}

.lwp-lm-modern__link:hover .lwp-lm-modern__arrow {
	color: var(--lwp-accent-light, #a382de);
	transform: translateX(3px);
}

/* Responsive */
@media (max-width: 600px) {
	.lwp-lm-modern {
		padding: 56px 20px;
	}
	.lwp-lm-modern__link {
		padding: 15px 16px;
	}
}

/* Editor full-bleed — same escape hatch as the theme's modern blocks:
   core's .is-layout-constrained rule caps every block at
   --wp--style--global--content-size (800px), which would leave the dark
   band a narrow centred column in the preview. Dropping the cap lets it
   run edge to edge; the inner max-width (640px) does the centring exactly
   as on the frontend. Core's rule is one class + :where() (specificity
   0-1-0), so both selectors here beat it without !important. */
.editor-styles-wrapper .wp-block-acf-links-module,
.edit-post-visual-editor .editor-styles-wrapper .wp-block[data-type="acf/links-module"] {
	max-width: none;
}

/* Reduced motion — theme's kill-switch pattern. */
@media (prefers-reduced-motion: reduce) {
	.lwp-lm-modern * {
		transition: none !important;
	}
}