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

.lwp-ctm {
	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-ctm-container {
	max-width: 1100px;
	margin: 0 auto;
}

/* Header */
.lwp-ctm-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-ctm-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;
}

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

/* Grid */
.lwp-ctm-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 48px;
	align-items: start;
}

.lwp-ctm--form-only .lwp-ctm-grid {
	grid-template-columns: minmax(0, 640px);
	justify-content: center;
}

/* Info column */
.lwp-ctm-intro {
	color: var(--lwp-text-secondary, #9aa5b8);
	font-size: 1.05rem;
	line-height: 1.8;
	margin-bottom: 20px;
}

.lwp-ctm-intro p { margin: 0 0 1em; }
.lwp-ctm-intro p:last-child { margin-bottom: 0; }

.lwp-ctm-email {
	display: inline-block;
	color: var(--lwp-accent-light, #a382de);
	font-weight: 600;
	text-decoration: none;
	margin-bottom: 24px;
}

.lwp-ctm-email:hover { text-decoration: underline; }

.lwp-ctm-social {
	display: flex;
	gap: 14px;
}

.lwp-ctm-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--lwp-border, rgba(124, 92, 191, 0.2));
	color: var(--lwp-text-secondary, #9aa5b8);
	transition: var(--lwp-transition, all 0.4s cubic-bezier(0.4, 0, 0.2, 1));
}

.lwp-ctm-social-icon:hover {
	color: var(--lwp-text-primary, #e8eaf0);
	border-color: var(--lwp-accent, #7c5cbf);
	background: var(--lwp-surface-hover, rgba(30, 45, 70, 0.8));
}

/* Image column (image-form layout) */
.lwp-ctm-media {
	min-width: 0;
}

.lwp-ctm-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--lwp-radius-md, 12px);
	object-fit: cover;
}

/* Form */
.lwp-ctm-field {
	margin-bottom: 18px;
}

.lwp-ctm-field label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--lwp-text-secondary, #9aa5b8);
}

.lwp-ctm-field input,
.lwp-ctm-field textarea {
	width: 100%;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--lwp-text-primary, #e8eaf0);
	background: 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-sm, 6px);
	box-sizing: border-box;
	transition: var(--lwp-transition, all 0.4s cubic-bezier(0.4, 0, 0.2, 1));
}

.lwp-ctm-field input:focus,
.lwp-ctm-field textarea:focus {
	outline: none;
	border-color: var(--lwp-accent, #7c5cbf);
	box-shadow: 0 0 0 3px var(--lwp-accent-glow, rgba(124, 92, 191, 0.3));
}

.lwp-ctm-turnstile-frame {
	width: 100%;
	max-width: 320px;
	height: 69px;
	border: 0;
	overflow: hidden;
}

.lwp-ctm-submit { margin-top: 6px; }

.lwp-ctm-error {
	margin: 14px 0 0;
	color: var(--lwp-accent-light, #e0354d);
	font-size: 0.9rem;
}

.lwp-ctm-success {
	padding: 32px;
	text-align: center;
	background: 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);
}

.lwp-ctm-success-title {
	font-family: var(--lwp-font-serif, 'Cormorant Garamond', Georgia, serif);
	font-size: 1.6rem;
	margin: 0 0 8px;
}

.lwp-ctm-success p { color: var(--lwp-text-secondary, #9aa5b8); margin: 0; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
	.lwp-ctm { padding: 56px 20px; }
	.lwp-ctm-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
	.lwp-ctm-social-icon,
	.lwp-ctm-field input,
	.lwp-ctm-field textarea { transition: none; }
}