/*
 * Jersey Bulls FC — Contact page
 *
 * 13 Jun handover surface (BUL-D36 #9): page hero + contact form + department
 * contact cards. Dark editorial, sharp + flat. Form markup is semantic; a
 * Gravity Forms shortcode / admin-post handler wires in for production.
 *
 * Markup: previews/contact.php (reuses card-contact.php) · tokens: css/tokens.css
 */

.bulls-contact-page {
	max-width: var(--content-full);
	margin: 0 auto;
	padding: var(--space-16) var(--gutter);
	color: var(--t-fg);
}
/* Desktop corner gutters — full-width containers carry their own inset on the
   site-wide fullscreen canvas. */
@media (min-width: 1024px) {
	.bulls-contact-page { padding-inline: clamp(72px, 7vw, 132px); }
}

.bulls-contact-page__hero {
	margin-bottom: var(--space-8);
	padding-bottom: var(--space-5);
	border-bottom: 1px solid var(--t-border-strong);
}

.bulls-contact-page__kicker {
	margin: 0 0 var(--space-3);
	font-family: var(--ff-mono);
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--c-bulls-red-300);
}

.bulls-contact-page__title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	line-height: 0.92;
	letter-spacing: var(--ls-tight);
	text-transform: uppercase;
	color: var(--t-fg);
}

.bulls-contact-page__lead {
	margin: var(--space-4) 0 0;
	max-width: 56ch;
	font-family: var(--ff-sans);
	font-size: var(--fs-200);
	color: var(--t-fg-muted);
}

.bulls-contact-page__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: var(--space-10);
	align-items: start;
}

@media (max-width: 768px) {
	.bulls-contact-page__grid { grid-template-columns: 1fr; gap: var(--space-8); }
	.bulls-contact-page { padding: var(--space-12) var(--gutter-sm); }
}

/* ----- Form ----- */

.bulls-contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.bulls-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.bulls-field__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
}
@media (max-width: 600px) { .bulls-field__row { grid-template-columns: 1fr; } }

.bulls-field label {
	font-family: var(--ff-mono);
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--t-fg-muted);
}

.bulls-field input,
.bulls-field textarea,
.bulls-field select {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	background: var(--t-panel);
	border: 1px solid var(--t-border-strong);
	border-radius: var(--radius-md);
	color: var(--t-fg);
	font-family: var(--ff-sans);
	/* hard 16px floor: below it iOS Safari zoom-jumps on focus (M-4) */
	font-size: max(16px, var(--fs-100));
	transition: border-color var(--motion-fast) var(--ease-out);
}

.bulls-field input::placeholder,
.bulls-field textarea::placeholder { color: var(--t-fg-muted); }

.bulls-field input:focus,
.bulls-field textarea:focus,
.bulls-field select:focus {
	outline: none;
	border-color: var(--c-bulls-red);
}

.bulls-field textarea { min-height: 160px; resize: vertical; }

.bulls-contact-form__submit { align-self: flex-start; }

/* ----- Department aside ----- */

.bulls-contact-aside {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

/* Submission notices */
.bulls-contact-notice {
	margin: 0 0 var(--space-5);
	padding: var(--space-3) var(--space-4);
	font-family: var(--ff-sans);
	font-size: var(--fs-100);
	border-left: 3px solid var(--c-bulls-red);
	background: var(--t-panel);
	color: var(--t-fg);
}
.bulls-contact-notice--ok { border-left-color: var(--c-success); }