/* ============================================================
   CONTACT PAGE — Split layout
   Left: sticky image panel (edge to edge)
   Right: scrollable form content
   ============================================================ */

/* ── Header: contact page overrides ──
   The nav and social icons sit over the white right panel,
   so they need dark text in the transparent state too.
   The logo sits over the image panel on the left — white is fine there.
   When the pill appears (is-scrolled), we invert the logo to dark. */

.page-template-page-contact #site-header .site-header__menu li a,
.page-template-page-contact #site-header .site-header__logo-text,
.page-template-page-contact #site-header .site-header__social-link {
	color: var(--color-text) !important;
}


/* ── Outer wrapper ── */
.contact-split {
	display: grid;
	grid-template-columns: 44% 56%;
	min-height: 100vh;
	align-items: start;
}

/* ── Left: image panel ── */
.contact-split__image {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}

.contact-split__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.contact-split__img-placeholder {
	width: 100%;
	height: 100%;
	background: var(--color-border);
}

/* Top gradient — header legibility over image */
.contact-split__image::after {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 140px;
	background: linear-gradient( to bottom, rgba(0,0,0,0.28) 0%, transparent 100% );
	pointer-events: none;
}


/* ── Right: content panel ── */
.contact-split__content {
	padding-top: calc( var(--header-height) + 5rem );
	padding-right: clamp( 2.5rem, 6vw, 7rem );
	padding-left:  clamp( 2.5rem, 5vw, 5rem );
	padding-bottom: 6rem;
}

/* ── Header ── */
.contact-split__header {
	margin-bottom: 4rem;
	padding-bottom: 3.5rem;
	border-bottom: 1px solid var(--color-border);
}

.contact-split__label {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: 1.25rem;
}

.contact-split__title {
	font-family: var(--font-sans);
	font-size: clamp( 2.4rem, 4.5vw, 3.75rem );
	font-weight: 100;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--color-text);
	line-height: 1.1;
	margin-bottom: 1.5rem;
}

.contact-split__intro {
	font-size: 0.875rem;
	color: var(--color-muted);
	line-height: 1.9;
	max-width: 46ch;
	margin: 0;
}

/* ── Form grid ── */
.contact-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem 3rem;
}

.contact-form__group {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.contact-form__group--full {
	grid-column: 1 / -1;
}

.contact-form label {
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--color-border);
	border-radius: 0;
	padding: 0.65rem 0;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: var(--color-text);
	outline: none;
	transition: border-color 0.25s ease;
	-webkit-appearance: none;
	appearance: none;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
	border-bottom-color: var(--color-text);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
	color: var(--color-border);
}

.contact-form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.25rem center;
	padding-right: 1.5rem;
	cursor: pointer;
}

.contact-form textarea {
	resize: vertical;
	min-height: 120px;
	line-height: 1.7;
}

/* ── Honeypot ── */
.ic-hp {
	display: none !important;
	visibility: hidden !important;
}

/* ── Submit row ── */
.contact-form__submit-row {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 2rem;
	margin-top: 0.5rem;
}

.contact-form__submit {
	display: inline-block;
	padding: 0.9rem 2.75rem;
	background: var(--color-text);
	color: var(--color-bg);
	font-family: var(--font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	transition: opacity 0.25s ease;
	white-space: nowrap;
}

.contact-form__submit:hover  { opacity: 0.72; }
.contact-form__submit:disabled { opacity: 0.4; cursor: default; }

/* ── Status ── */
.contact-form__status {
	font-size: 0.8rem;
	line-height: 1.6;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.contact-form__status.is-visible   { opacity: 1; }
.contact-form__status--success     { color: #4a7a4a; }
.contact-form__status--error       { color: #c00; }

/* ── Studio info ── */
.contact-split__info {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin-top: 4rem;
	padding-top: 3rem;
	border-top: 1px solid var(--color-border);
}

.contact-info__item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.contact-info__label {
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.contact-info__value {
	font-size: 0.85rem;
	color: var(--color-text);
	line-height: 1.6;
}

.contact-info__value a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--color-border);
	transition: border-color 0.2s ease;
}

.contact-info__value a:hover { border-bottom-color: var(--color-text); }

/* ── Responsive ── */
@media ( max-width: 900px ) {
	.contact-split {
		grid-template-columns: 1fr;
	}

	.contact-split__image {
		position: relative;
		height: 60vw;
		max-height: 480px;
	}

	.contact-split__content {
		padding-top: 3.5rem;
	}

	.contact-split__info {
		grid-template-columns: 1fr 1fr;
	}
}

@media ( max-width: 580px ) {
	.contact-form {
		grid-template-columns: 1fr;
		gap: 1.75rem 0;
	}

	.contact-form__group--full { grid-column: 1; }

	.contact-form__submit-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.contact-split__info {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

@media ( max-width: 480px ) {
	/* Tighter side padding so content isn't clipped */
	.contact-split__content {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	/* Reduce letter-spacing so "CONVERSATION" fits on narrow screens */
	.contact-split__title {
		font-size: clamp( 1.6rem, 7.5vw, 2.4rem );
		letter-spacing: 0.12em;
	}

	/* 16px minimum prevents iOS Safari from zooming in on input focus */
	.contact-form input,
	.contact-form select,
	.contact-form textarea {
		font-size: 1rem;
	}

	/* Ensure select dropdown arrow stays inside the field */
	.contact-form select {
		padding-right: 2rem;
		background-position: right 0.5rem center;
	}
}