/* ==========================================================================
   Celia Noire — Start a Project
   An enquiry page, not a checkout: one editorial intro, then a quiet form
   beside a direct-email fallback. No cards, no boxed panels.
   ========================================================================== */

.cn-enquiry-hero__inner {
	max-width: 46rem;
}

.cn-enquiry-hero__intro {
	margin-top: 1.25rem;
}

.cn-enquiry__grid {
	display: grid;
	grid-template-columns: minmax(0, 34rem) 1fr;
	gap: clamp(3rem, 6vw, 6rem);
	align-items: start;
}

/* --------------------------------------------------------------------------
   Form — underline fields, the same editorial language as the newsletter
   signature line, never a boxed admin form.
   -------------------------------------------------------------------------- */

.cn-enquiry__form {
	display: flex;
	flex-direction: column;
	gap: clamp(1.75rem, 3vw, 2.25rem);
}

.cn-enquiry__field {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.cn-enquiry__label {
	font-size: var(--cn-text-xs);
	font-weight: 500;
	letter-spacing: var(--cn-tracking-wider);
	text-transform: uppercase;
	color: var(--cn-fg);
}

.cn-enquiry__optional {
	margin-left: 0.4em;
	color: var(--cn-warm-gray);
	letter-spacing: normal;
	text-transform: none;
}

.cn-enquiry__input {
	width: 100%;
	padding: 0.7em 0.1em;
	border: none;
	border-bottom: 1px solid var(--cn-rule);
	border-radius: 0;
	background: transparent;
	color: var(--cn-fg-strong);
	font: inherit;
	font-size: var(--cn-text-base);
	transition: border-color var(--cn-dur-hover) var(--cn-ease);
	appearance: none;
	-webkit-appearance: none;
}

select.cn-enquiry__input {
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 0.4em top 1em, right 0.15em top 1em;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	color: var(--cn-fg-strong);
}

select.cn-enquiry__input:invalid {
	color: var(--cn-fg);
}

.cn-enquiry__input--textarea {
	resize: vertical;
	min-height: 6rem;
}

.cn-enquiry__input:focus {
	border-color: var(--cn-accent);
}

/* Extra specificity needed here — the base .cn-enquiry__input rule sets its
   own border-bottom shorthand later in the cascade than base.css's generic
   [aria-invalid] rule, and would otherwise win the tie. */
.cn-enquiry__input[aria-invalid="true"] {
	border-color: rgba(168, 134, 62, 0.75);
}

.cn-enquiry__input::placeholder {
	color: var(--cn-warm-gray);
	opacity: 1;
}

.cn-enquiry__submit-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	margin-top: 0.5rem;
}

/* The submit control is real, styled and ready — only inert until a form
   backend is wired up. Disabled (not hidden) so the page reads as complete,
   with the note explaining exactly why, right beside it. */
.cn-enquiry__submit-row .cn-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

.cn-enquiry__note {
	max-width: 34ch;
	font-size: var(--cn-text-xs);
	line-height: 1.6;
	color: var(--cn-warm-gray);
}

/* Empty until the form actually submits — same quiet, small-text treatment
   as the note it replaces, just tinted to say whether it worked. */
.cn-enquiry__status:empty {
	display: none;
}

.cn-enquiry__status--success {
	color: var(--cn-fg-strong);
}

.cn-enquiry__status--error {
	color: var(--cn-gold-deep);
}

/* --------------------------------------------------------------------------
   Aside — the working path today: a direct email line.
   -------------------------------------------------------------------------- */

.cn-enquiry__aside {
	padding-top: 0.1rem;
	border-top: 1px solid var(--cn-rule);
}

.cn-enquiry__aside-label {
	font-size: var(--cn-text-xs);
	font-weight: 500;
	letter-spacing: var(--cn-tracking-wider);
	text-transform: uppercase;
	color: var(--cn-accent);
	margin-top: 1.5rem;
}

.cn-enquiry__email {
	display: inline-block;
	margin-top: 0.75rem;
	font-family: var(--cn-font-display);
	font-size: var(--cn-text-h3);
	color: var(--cn-fg-strong);
	transition: color var(--cn-dur-hover) var(--cn-ease);
}

.cn-enquiry__email:hover,
.cn-enquiry__email:focus-visible {
	color: var(--cn-accent);
}

.cn-enquiry__response-time {
	margin-top: 0.85rem;
	font-size: var(--cn-text-sm);
	color: var(--cn-fg);
}

@media (max-width: 899px) {
	.cn-enquiry__grid {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.cn-enquiry__aside {
		border-top: 1px solid var(--cn-rule);
		padding-top: 2rem;
	}

	.cn-enquiry__aside-label {
		margin-top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cn-enquiry__input,
	.cn-enquiry__email {
		transition: none;
	}
}