/* Gastronome — contact.css
 *
 * Scoped to `.gn-contact` (page-contact.php). Ports gastronome-contact.html
 * with the brand vocabulary substituted in: GL Tatishvili Metal / Objective
 * via base.css :root tokens, ambient grain handled globally, mask-line
 * reveals picked up by boot.js's existing observer.
 *
 * Layout summary:
 *   .contact-hero           — 2-col split, sticky video left, content right
 *   .contact-rail           — 3 borderless cells, hairline dividers
 *   .contact-form-section   — sticky intro 5fr + canvas 7fr
 *   .contact-form           — pills + minimal underline fields + magnetic submit
 */

/* ═════════════════════════════════════════════════════════════════════════
 *  HERO
 * ═════════════════════════════════════════════════════════════════════════ */
.gn-contact .contact-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 100vh;
	min-height: 100svh;
}

/* LEFT — sticky cinematic video / poster image */
.gn-contact .contact-hero-visual {
	position: sticky; top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	background: #080808;
}
.gn-contact .contact-hero-media {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	filter: brightness(0.78) saturate(0.9);
	transform: scale(1.06);
	animation: gnContactSlowZoom 24s ease-in-out infinite alternate;
	will-change: transform;
}
@keyframes gnContactSlowZoom {
	0%   { transform: scale(1.06); }
	100% { transform: scale(1.12); }
}
.gn-contact .contact-hero-overlay {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg,
		rgba(0,0,0,0.5) 0%,
		rgba(0,0,0,0.05) 30%,
		rgba(0,0,0,0.05) 70%,
		rgba(0,0,0,0.5) 100%);
}

/* RIGHT — content column */
.gn-contact .contact-hero-content {
	position: relative;
	padding: 160px 80px 100px 72px;
	display: flex; flex-direction: column; justify-content: center;
	background: #000;
}
.gn-contact .contact-hero-overline {
	font-family: var(--font-body);
	font-size: 13px; font-weight: 500;
	letter-spacing: 0.25em; text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 32px;
	display: block;
}
.gn-contact .contact-hero-title {
	font-family: var(--font-display);
	font-size: clamp(40px, 5vw, 72px);
	font-weight: 700; line-height: 1;
	margin-bottom: 36px;
	letter-spacing: -0.005em;
}
.gn-contact .contact-hero-title .mask-line { display: block; }
.gn-contact .contact-hero-title .sub-text { color: rgba(255,255,255,0.32); }
.gn-contact .contact-hero-intro {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: clamp(16px, 1.4vw, 19px);
	color: rgba(255,255,255,0.7);
	line-height: 1.6;
	max-width: 480px;
	margin-bottom: 56px;
}

/* Live-clock chip */
.gn-contact .contact-hero-time {
	display: inline-flex; align-items: center; gap: 14px;
	font-family: var(--font-body);
	font-size: 12px; font-weight: 500;
	letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}
.gn-contact .contact-hero-time-dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: #fff; position: relative; flex-shrink: 0;
}
.gn-contact .contact-hero-time-dot::before {
	content: ''; position: absolute; inset: -3px; border-radius: 50%;
	background: #fff; opacity: 0.25;
	animation: gnContactPulse 2.4s ease-in-out infinite;
}
@keyframes gnContactPulse {
	0%, 100% { transform: scale(1);   opacity: 0.25; }
	50%      { transform: scale(2.4); opacity: 0; }
}

/* ═════════════════════════════════════════════════════════════════════════
 *  RAIL — 3 contact cells
 * ═════════════════════════════════════════════════════════════════════════ */
.gn-contact .contact-rail {
	display: grid; grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--faint);
	border-bottom: 1px solid var(--faint);
}
.gn-contact .rail-cell {
	position: relative;
	padding: 72px 56px;
	display: flex; flex-direction: column; gap: 24px;
	text-decoration: none; color: inherit;
	border-right: 1px solid var(--faint);
	transition: background 0.6s ease;
	overflow: hidden;
}
.gn-contact .rail-cell:last-child { border-right: none; }
.gn-contact .rail-cell:hover { background: rgba(255,255,255,0.02); }
.gn-contact .rail-cell::after {
	content: ''; position: absolute; bottom: 0; left: 0; height: 1px;
	width: 0; background: #fff;
	transition: width 0.7s var(--ease-brand);
}
.gn-contact .rail-cell:hover::after { width: 100%; }

.gn-contact .rail-label {
	font-family: var(--font-body);
	font-size: 11px; font-weight: 500;
	letter-spacing: 0.25em; text-transform: uppercase;
	color: var(--muted);
}
.gn-contact .rail-value {
	font-family: var(--font-display);
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 700;
	line-height: 1.1; color: #fff;
	letter-spacing: -0.005em;
	transition: transform 0.5s var(--ease-brand);
	word-break: break-word;
}
.gn-contact .rail-cell:hover .rail-value { transform: translateX(8px); }

.gn-contact .rail-arrow {
	margin-top: auto;
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--font-body);
	font-size: 11px; font-weight: 500;
	letter-spacing: 0.25em; text-transform: uppercase;
	color: var(--dim);
	transition: color 0.4s ease, gap 0.4s ease;
}
.gn-contact .rail-cell:hover .rail-arrow { color: #fff; gap: 18px; }
.gn-contact .rail-arrow svg { width: 14px; height: 10px; }

/* ═════════════════════════════════════════════════════════════════════════
 *  FORM
 * ═════════════════════════════════════════════════════════════════════════ */
.gn-contact .contact-form-section {
	display: grid; grid-template-columns: 5fr 7fr;
	border-bottom: 1px solid var(--faint);
}

/* LEFT — sticky intro */
.gn-contact .contact-form-intro {
	position: sticky; top: 0;
	height: 100vh; height: 100svh; min-height: 680px;
	padding: 140px 56px 100px 72px;
	display: flex; flex-direction: column; justify-content: center;
	border-right: 1px solid var(--faint);
	background: #000;
}
.gn-contact .contact-form-overline {
	font-family: var(--font-body);
	font-size: 13px; font-weight: 500;
	letter-spacing: 0.25em; text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 32px;
	display: block;
}
.gn-contact .contact-form-title {
	font-family: var(--font-display);
	font-size: clamp(40px, 5vw, 72px);
	font-weight: 700; line-height: 1;
	margin-bottom: 20px;
	letter-spacing: -0.005em;
}
.gn-contact .contact-form-title .mask-line { display: block; }
.gn-contact .contact-form-title .sub-text { color: rgba(255,255,255,0.32); }
.gn-contact .contact-form-copy {
	font-family: var(--font-body); font-weight: 300;
	font-size: clamp(15px, 1.3vw, 18px);
	color: rgba(255,255,255,0.7); line-height: 1.6;
	max-width: 380px;
}

/* RIGHT — fields */
.gn-contact .contact-form-canvas {
	padding: 140px 72px 100px 72px;
	background: #000;
}
.gn-contact .contact-form { width: 100%; }

/* Subject pills */
.gn-contact .subject-block { margin-bottom: 32px; }
.gn-contact .subject-label {
	display: block;
	font-family: var(--font-body);
	font-size: 11px; font-weight: 500;
	letter-spacing: 0.25em; text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 16px;
}
.gn-contact .subject-pills {
	display: flex; flex-wrap: wrap; gap: 8px;
}
.gn-contact .subject-pill {
	padding: 11px 22px;
	border: 1px solid rgba(255,255,255,0.12);
	background: transparent;
	color: #bbb;
	font-family: var(--font-body); font-size: 12px; font-weight: 500;
	letter-spacing: 0.1em; text-transform: uppercase;
	border-radius: 100px; cursor: pointer;
	transition: color 0.4s ease, border-color 0.4s ease, background 0.4s ease;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}
.gn-contact .subject-pill:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.gn-contact .subject-pill.is-active { background: #fff; color: #000; border-color: #fff; }
.gn-contact .subject-pill:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }

/* Form fields — minimal underline + floating label */
.gn-contact .form-grid {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 48px; margin-bottom: 64px;
}
.gn-contact .form-grid > .form-field-full { grid-column: 1 / -1; }

.gn-contact .form-field { position: relative; }
.gn-contact .form-field input,
.gn-contact .form-field textarea {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(255,255,255,0.12);
	color: #fff;
	font-family: var(--font-body); font-weight: 300;
	font-size: 18px;
	padding: 14px 0 12px;
	outline: none; resize: none;
	transition: border-color 0.4s ease;
	-webkit-appearance: none; appearance: none;
	border-radius: 0;
}
.gn-contact .form-field textarea { min-height: 120px; line-height: 1.5; }
.gn-contact .form-field input:focus,
.gn-contact .form-field textarea:focus { border-bottom-color: #fff; }

.gn-contact .form-field label {
	position: absolute; left: 0; top: 14px;
	font-family: var(--font-body); font-size: 14px;
	color: var(--muted);
	pointer-events: none;
	transition: transform 0.5s var(--ease-brand), color 0.4s ease;
	transform-origin: left top;
}
.gn-contact .form-field input:focus + label,
.gn-contact .form-field input:not(:placeholder-shown) + label,
.gn-contact .form-field textarea:focus + label,
.gn-contact .form-field textarea:not(:placeholder-shown) + label {
	transform: translateY(-22px) scale(0.72);
	color: #fff; letter-spacing: 0.18em; text-transform: uppercase;
}

.gn-contact .form-field-counter {
	margin-top: 8px;
	font-family: var(--font-body);
	font-size: 10px; font-weight: 500;
	letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--dim);
	font-variant-numeric: tabular-nums;
}
.gn-contact .form-field-counter span:first-child { color: #fff; }

/* Honeypot — invisible to humans, visible in DOM for bots. */
.gn-contact .form-honeypot {
	position: absolute; left: -10000px; top: auto;
	width: 1px; height: 1px; overflow: hidden;
}

/* Foot row */
.gn-contact .form-foot {
	display: flex; justify-content: space-between; align-items: flex-end;
	flex-wrap: wrap; gap: 32px;
	padding-top: 32px;
	border-top: 1px solid var(--faint);
}
.gn-contact .form-consent {
	display: flex; align-items: flex-start; gap: 14px;
	max-width: 420px; cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	position: relative;
}
.gn-contact .form-consent input[type="checkbox"] {
	position: absolute; opacity: 0; pointer-events: none;
}
.gn-contact .form-consent .check-box {
	flex: 0 0 18px; width: 18px; height: 18px;
	border: 1px solid rgba(255,255,255,0.12);
	position: relative; margin-top: 2px;
	transition: border-color 0.4s ease;
}
.gn-contact .form-consent .check-box::after {
	content: ''; position: absolute; inset: 3px;
	background: #fff; opacity: 0; transform: scale(0.5);
	transition: opacity 0.3s ease, transform 0.4s var(--ease-brand);
}
.gn-contact .form-consent input:checked ~ .check-box { border-color: #fff; }
.gn-contact .form-consent input:checked ~ .check-box::after { opacity: 1; transform: scale(1); }
.gn-contact .form-consent-text {
	font-family: var(--font-body);
	font-size: 12px; line-height: 1.6;
	color: var(--muted);
}
.gn-contact .form-consent-text a {
	color: #bbb;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.gn-contact .form-consent-text a:hover { color: #fff; }

/* Submit */
.gn-contact .form-submit {
	background: transparent; border: none; cursor: pointer;
	padding: 0; outline: none;
	display: inline-flex; flex-direction: column; gap: 14px;
	font-family: var(--font-body); font-weight: 500;
	-webkit-tap-highlight-color: transparent;
}
.gn-contact .form-submit-row {
	display: inline-flex; align-items: center; gap: 18px;
	font-family: var(--font-display);
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 700; color: #fff;
	letter-spacing: 0.02em;
}
.gn-contact .form-submit-row svg {
	width: 32px; height: 14px;
	transition: transform 0.5s var(--ease-brand);
}
.gn-contact .form-submit:hover .form-submit-row svg { transform: translateX(8px); }
.gn-contact .form-submit-line {
	position: relative; height: 1px; background: rgba(255,255,255,0.15);
}
.gn-contact .form-submit-line::after {
	content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 0;
	background: #fff;
	transition: width 0.7s var(--ease-brand);
}
.gn-contact .form-submit:hover .form-submit-line::after { width: 100%; }
.gn-contact .form-submit:disabled { opacity: 0.5; pointer-events: none; }

/* Status message */
.gn-contact .form-status {
	margin-top: 24px;
	font-family: var(--font-body);
	font-size: 13px; line-height: 1.5;
	color: var(--muted);
	min-height: 1.5em;
}
.gn-contact .form-status.is-success { color: #fff; }
.gn-contact .form-status.is-error   { color: #ff7a7a; }

/* ═════════════════════════════════════════════════════════════════════════
 *  Responsive
 * ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
	.gn-contact .contact-hero-content { padding: 140px 56px 80px 56px; }
	.gn-contact .contact-form-intro   { padding: 120px 48px 80px 56px; }
	.gn-contact .contact-form-canvas  { padding: 120px 56px 80px 56px; }
}

@media (max-width: 1024px) {
	.gn-contact .contact-hero { grid-template-columns: 1fr; }
	.gn-contact .contact-hero-visual {
		position: relative;
		height: 60vh; height: 60svh; min-height: 380px;
	}
	.gn-contact .contact-hero-content { padding: 80px var(--page); }

	.gn-contact .contact-rail { grid-template-columns: 1fr; }
	.gn-contact .rail-cell {
		border-right: none;
		border-bottom: 1px solid var(--faint);
		padding: 48px var(--page);
	}
	.gn-contact .rail-cell:last-child { border-bottom: none; }

	.gn-contact .contact-form-section { grid-template-columns: 1fr; }
	.gn-contact .contact-form-intro {
		position: relative; height: auto; min-height: 0;
		padding: 80px var(--page) 40px;
		border-right: none;
		border-bottom: 1px solid var(--faint);
	}
	/* Tighter top padding on the canvas (was 80px) so the SUBJECT label
	 * doesn't sit a viewport below `TELL US EVERYTHING` after the form
	 * stacks into a single column. */
	.gn-contact .contact-form-canvas { padding: 40px var(--page) 80px; }
	.gn-contact .form-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 767px) {
	/* Hide the cinematic video/poster on mobile — the hero copy carries
	 * the section on its own; the video added vertical weight without
	 * earning its place on a small screen. */
	.gn-contact .contact-hero-visual { display: none; }
	/* Drop the 100vh floor on mobile — without the video column the hero
	 * is just text on black, and forcing viewport height (combined with
	 * `justify-content: center`) parks the copy in the middle of a half-
	 * empty screen. `min-height: 0` lets the hero hug its content. */
	.gn-contact .contact-hero { min-height: 0; }
	.gn-contact .contact-hero-content { padding: 48px var(--page); justify-content: flex-start; }
	.gn-contact .contact-hero-title   { font-size: clamp(36px, 11vw, 56px); }

	.gn-contact .rail-cell  { padding: 40px var(--page); }
	.gn-contact .rail-value { font-size: 22px; }

	.gn-contact .contact-form-intro  { padding: 64px var(--page) 32px; }
	.gn-contact .contact-form-canvas { padding: 32px var(--page) 64px; }
	.gn-contact .contact-form-title  { font-size: clamp(36px, 11vw, 56px); }
	.gn-contact .form-grid { gap: 32px; }
	.gn-contact .form-foot { flex-direction: column; align-items: flex-start; gap: 36px; }
	.gn-contact .subject-pill { padding: 9px 16px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
	.gn-contact .contact-hero-media { animation: none; transform: scale(1.06); }
	.gn-contact .contact-hero-time-dot::before { animation: none; }
	.gn-contact * { transition-duration: 0.01ms !important; }
}