/* =============================================================================
   ABOUT PREVIEW — Arnout Rebel Photography
   .ar-about-preview-*  gebruikt in about-preview.php (homepage)
   ============================================================================= */

.ar-about-strip {
	padding-bottom: var(--wp--preset--spacing--40) !important;
}

.ar-about-preview {
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
	padding-left: max(3rem, calc(50% - 600px)) !important;
	padding-right: max(3rem, calc(50% - 600px)) !important;
}

/* ar-about-preview staat op het Columns blok zelf */
.ar-about-preview {
	align-items: center !important;
	gap: 4rem !important;
}

/* Foto kolom — eerste kolom */
.ar-about-preview > .wp-block-column:first-child {
	flex-basis: 200px !important;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	min-width: 0 !important;
	max-width: 200px !important;
}

.ar-about-preview > .wp-block-column:first-child figure {
	margin: 0 !important;
}

.ar-about-preview > .wp-block-column:first-child img {
	width: 100% !important;
	max-width: 200px !important;
	height: auto !important;
	display: block;
}

/* Tekst kolom — tweede kolom */
.ar-about-preview > .wp-block-column:last-child {
	min-width: 0;
}

.ar-about-preview__label {
	font-size: 0.6875rem !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.5rem !important;
}

.ar-about-preview__heading {
	font-family: 'Playfair Display', Georgia, serif !important;
	font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
	font-weight: 400 !important;
	font-style: italic !important;
	line-height: 1.25 !important;
	color: var(--wp--preset--color--dark) !important;
	margin-bottom: 1.5rem !important;
}

.ar-about-preview__content p {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text);
	line-height: 1.75;
	margin-bottom: 1rem;
}

.ar-about-preview__cta a {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--dark);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity 0.2s ease;
}

.ar-about-preview__cta a:hover {
	opacity: 0.6;
}

/* =============================================================================
   ABOUT INTRO (Over mij pagina)
   ============================================================================= */

.ar-about-intro {
	padding: var(--wp--preset--spacing--70) max(3rem, calc(50% - 600px));
}

.ar-about-intro__inner {
	display: flex;
	gap: 5rem;
	align-items: flex-start;
}

.ar-about-intro__photo-col {
	flex: 0 0 300px;
	width: 300px;
}

.ar-about-intro__photo-col img {
	width: 100%;
	height: auto;
	display: block;
}

.ar-about-intro__photo-placeholder {
	background: var(--wp--preset--color--warm);
	aspect-ratio: 3 / 4;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Caption onder de foto — met of zonder expliciete klasse */
.wp-block-columns:has(.ar-about-intro__text-col) > .wp-block-column:first-child p,
.ar-about-intro__photo-col p,
.ar-about-intro__caption {
	font-family: 'DM Sans', sans-serif !important;
	font-size: 0.75rem !important;
	color: var(--wp--preset--color--muted) !important;
	letter-spacing: 0 !important;
	margin-top: 0.5rem !important;
	font-weight: 300 !important;
	font-style: normal !important;
	line-height: 1.3 !important;
}

.wp-block-columns:has(.ar-about-intro__text-col) > .wp-block-column:first-child p br,
.ar-about-intro__photo-col p br,
.ar-about-intro__caption br {
	display: none !important;
}

.wp-block-columns:has(.ar-about-intro__text-col) > .wp-block-column:first-child p strong,
.ar-about-intro__photo-col p strong,
.ar-about-intro__caption strong {
	display: block !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 0.75rem !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	color: var(--wp--preset--color--muted) !important;
	margin-bottom: 0.1rem !important;
	font-style: normal !important;
}

.ar-about-intro__text-col {
	flex: 1;
	min-width: 0;
}

.ar-about-intro__heading,
.ar-about-intro__text-col h1,
.ar-about-intro__text-col h2,
.ar-about-intro__text-col h3,
.ar-about-intro__text-col .wp-block-heading {
	font-family: 'DM Sans', sans-serif !important;
	font-style: italic !important;
	font-weight: 500 !important;
	font-size: clamp(1.5rem, 2.4vw, 1.9rem) !important;
	line-height: 1.4 !important;
	letter-spacing: -0.01em !important;
	color: var(--wp--preset--color--muted) !important;
	margin: 0 0 2rem !important;
}

.ar-about-intro__text,
.ar-about-intro__text-col p:not(.ar-about-intro__caption),
.ar-about-intro__text-col .wp-block-paragraph {
	font-size: 0.96rem !important;
	color: var(--wp--preset--color--muted) !important;
	line-height: 1.9 !important;
	font-weight: 300 !important;
	margin-bottom: 1.375rem !important;
}

@media (max-width: 767px) {
	.ar-about-intro__inner {
		flex-direction: column;
		gap: 2rem;
	}

	.ar-about-intro__photo-col {
		flex: 0 0 auto;
		width: 100%;
	}
}

/* =============================================================================
   CONTACT SECTIE
   ============================================================================= */

/* WPForms verzendknop */
.wpforms-submit-container {
	text-align: right;
}

.wpforms-submit {
	background: var(--wp--preset--color--dark) !important;
	color: var(--wp--preset--color--white) !important;
	border: 1.5px solid var(--wp--preset--color--dark) !important;
	font-family: var(--wp--preset--font-family--dm-sans) !important;
	font-size: 0.75rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	padding: 14px 32px !important;
	cursor: pointer !important;
	transition: background 0.2s ease, color 0.2s ease !important;
}

.wpforms-submit:hover {
	background: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--dark) !important;
}

.ar-contact-section {
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--70);
	padding-left: max(3rem, calc(50% - 600px)) !important;
	padding-right: max(3rem, calc(50% - 600px)) !important;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 767px) {
	.ar-about-preview__inner {
		flex-direction: column !important;
		gap: 2rem !important;
	}

	.ar-about-preview__photo-col {
		flex-basis: auto !important;
		width: 100% !important;
	}
}