/* ==========================================================================
   Contact page

   Layout is the melius.com/contact pattern: one accent-coloured frame with a
   narrow inner gutter holding two panels, video left and form right, both
   stretched to the same height. Everything else (palette, type, button shape,
   uppercase field labels) is the Finney Crossing homepage / style guide.

   Loaded only on the Contact page template, so the tokens are redeclared here
   rather than pulled from home.css, which never loads on this page.

   The form inside the right-hand panel is a WPForms form and is styled in
   contact-wpforms.css, which loads after this file. This one covers the page,
   the frame, the video panel and the bento callout below it.
   ========================================================================== */

/* Astra's own .ast-container (page.php's normal markup: #content.site-content
   > .ast-container > #primary) still boxes this page with its own ~20px
   mobile side padding, stacking underneath .fc-contact's padding below and
   pushing the frame (and the dot-grid background, which is sized to
   .fc-contact's own box) in further than the 16px the rest of the site
   uses. .fc-contact-template already has its own max-width/centering, so
   drop Astra's container padding entirely rather than trying to match it.
   Same pattern as leasing-details.css / sitemap-map.css. */
.page-template-page-templatescontact-php .site-content > .ast-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.fc-contact-template {

	--font-display: 'proxima-sera', Georgia, 'Times New Roman', serif;
	--font-accent: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
	--font-body: 'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* The gutter between the two panels, and the frame padding around them.
	   Outer radius minus the gutter keeps the inner corners concentric. */
	--frame-gutter: 10px;
	--frame-radius: 20px;
	--panel-radius: calc(var(--frame-radius) - var(--frame-gutter));

	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);

	font-family: var(--font-body);
	color: var(--ink);
	background: var(--mist);
}

.fc-contact-template h1,
.fc-contact-template h2 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1em;
	letter-spacing: -0.01em;
}

/* ============ PAGE HEADER ============ */

/* Same centred block on plain mist ground the News & Events index and All
   Apartments use: tracked green eyebrow, display-serif title with its last
   word in green. */
/* The header is the shared page header now — see inc/page-header.php and
   assets/page-header.css. */

/* ============ SECTION ============ */

.fc-contact {
	position: relative;
	padding: 48px 60px var(--frame-gutter);
	background: var(--mist);
}

/* Dot grid behind the frame, the same device the reference uses to stop the
   flat background reading as empty. Pinned behind the frame's stacking order. */
.fc-contact__dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(31, 36, 25, 0.11) 1px, transparent 1px);
	background-size: 15px 15px;
	background-position: 0 0;
	pointer-events: none;
	z-index: 0;
	-webkit-mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0.35));
	mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0.35));
}

.fc-contact__frame {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--frame-gutter);
	background: var(--green);
	border-radius: var(--frame-radius);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--frame-gutter);
	align-items: stretch;
	box-shadow: 0 30px 70px rgba(31, 36, 25, 0.16), 0 2px 6px rgba(31, 36, 25, 0.06);
}

/* ============ MEDIA PANEL ============ */

.fc-contact__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--panel-radius);
	background: var(--green-dark);
	min-height: 100%;
}

.fc-contact__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	/* Held back until its poster (or first frame) has decoded, then faded in
	   over the panel's green, so the photo never hard-cuts in partway through
	   the entrance. contact-video.js adds .is-ready. */
	opacity: 0;
	transition: opacity 0.45s var(--ease-out);
}

.fc-contact__video.is-ready {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.fc-contact__video {
		transition-duration: 0.2s;
	}
}

/* Match the amenities card's full-panel fade so the caption stays readable
   over any frame of the drone footage, not just its immediate backdrop. */
.fc-contact__media::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.88) 100%);
	pointer-events: none;
}

.fc-contact__media-caption {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: 32px 34px 30px;
	color: #fff;
}

.fc-contact__media-eyebrow {
	display: inline-block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 4px;
	font-weight: 600;
	color: var(--mist);
	margin-bottom: 10px;
}

.fc-contact__media-caption p {
	margin: 0;
	font-family: var(--font-display);
	font-size: 22px;
	line-height: 1.3;
	max-width: 22ch;
}

/* ============ FORM PANEL ============ */

.fc-contact__panel {
	display: flex;
	flex-direction: column;
	gap: 30px;
	min-height: 30rem;
	padding: 52px 54px;
	background: #fff;
	border-radius: var(--panel-radius);
	color: var(--ink);
}

.fc-contact__intro h2 {
	font-size: 54px;
	color: var(--ink);
	margin: 0 0 18px;
}

/* Accent word picks up the style guide's italic/bold accent face. Base green
   reads fine here now that the panel itself is light. */
.fc-contact__intro h2 b,
.fc-contact__intro h2 em {
	font-family: var(--font-accent);
	font-weight: 300;
	color: var(--green);
	font-size: 51px;
}

.fc-contact__intro p {
	margin: 0;
	font-size: 17px;
	line-height: 1.65;
	max-width: 48ch;
	color: var(--warm-gray);
}

/* ============ NOTICES ============ */

.fc-contact__notice {
	margin: 0;
	padding: 14px 18px;
	border-radius: 3px;
	font-size: 14.5px;
	line-height: 1.5;
	border-left: 3px solid transparent;
}

.fc-contact__notice--ok {
	background: rgba(74, 124, 58, 0.1);
	border-left-color: var(--green);
	color: var(--green-dark);
}

.fc-contact__notice--error {
	background: rgba(206, 92, 74, 0.1);
	border-left-color: #ce5c4a;
	color: #963527;
}


/* ============ BENTO CALLOUT ============ */

/* Two-up callout below the frame, same melius.com-inspired device as the
   frame above it: a narrow gutter between blocks stretched to match height,
   just swapping the accent-coloured frame for two accent-coloured cards. */
.fc-contact-bento {
	position: relative;
	padding: var(--frame-gutter) 0 0;
}

.fc-contact-bento__grid {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--frame-gutter);
}

.fc-contact-bento__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 44px 40px;
	border-radius: var(--panel-radius);
	text-decoration: none;
	box-shadow: 0 12px 30px rgba(31, 36, 25, 0.12);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.fc-contact-bento__card:hover,
.fc-contact-bento__card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 20px 44px rgba(31, 36, 25, 0.18);
}

.fc-contact-bento__card:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

.fc-contact-bento__card--green {
	background: var(--green);
}

.fc-contact-bento__card--purple {
	background: var(--fc-slate-900);
}

.fc-contact-bento__eyebrow {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 4px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.72);
}

.fc-contact-bento__card h3 {
	font-size: 30px;
	color: #fff;
	margin: 0;
	line-height: 1em;
}

.fc-contact-bento__card--green h3 b,
.fc-contact-bento__card--green h3 em {
	font-family: var(--font-accent);
	font-weight: 300;
	color: var(--mist);
}

.fc-contact-bento__card--purple h3 b,
.fc-contact-bento__card--purple h3 em {
	font-family: var(--font-accent);
	font-weight: 300;
	color: var(--green-light);
}

.fc-contact-bento__card p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.6;
	max-width: 34ch;
	color: rgba(255, 255, 255, 0.78);
}

.fc-contact-bento__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff;
}

.fc-contact-bento__link span {
	transition: transform 0.2s ease;
}

.fc-contact-bento__card:hover .fc-contact-bento__link span,
.fc-contact-bento__card:focus-visible .fc-contact-bento__link span {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.fc-contact-bento__card:hover,
	.fc-contact-bento__card:focus-visible {
		transform: none;
	}

	.fc-contact-bento__card:hover .fc-contact-bento__link span,
	.fc-contact-bento__card:focus-visible .fc-contact-bento__link span {
		transform: none;
	}
}

/* ============ ENTRANCE ============ */

@media (prefers-reduced-motion: no-preference) {
	.fc-contact__media,
	.fc-contact__panel {
		animation: fc-contact-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}

	.fc-contact__panel {
		animation-delay: 0.08s;
	}

	.fc-contact-bento__card {
		animation: fc-contact-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
		animation-delay: 0.16s;
	}

	.fc-contact-bento__card + .fc-contact-bento__card {
		animation-delay: 0.24s;
	}
}

@keyframes fc-contact-rise {
	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

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

@media (max-width: 1100px) {
	.fc-contact {
		padding: 44px 32px var(--frame-gutter);
	}

	.fc-contact__panel {
		padding: 44px 40px;
	}

	.fc-contact__intro h2 {
		font-size: 49px;
	}

	.fc-contact__intro h2 b,
	.fc-contact__intro h2 em {
		font-size: 46px;
	}

	.fc-contact-bento {
		padding: var(--frame-gutter) 0 0;
	}
}

@media (max-width: 900px) {
	/* minmax(0, ...) so the form fields can't hold the column open past the
	   frame on a 320px screen. */
	.fc-contact__frame {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The media panel comes out entirely below this width. Stacked, it was a
	   1.6MB drone clip sitting above the form on exactly the connections least
	   able to afford it, pushing the fields a screen further down for a
	   decorative loop. The video is also never fetched here, not merely
	   hidden — template-contact.php emits no <source> and assets/contact-video.js
	   only attaches one above this breakpoint. */
	.fc-contact__media {
		display: none;
	}

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

	/* Side-padding standard (matches the leasing/apply page) starts here,
	   not just at the narrower 600px query below: this is where the panels
	   stack into a single column, so 700-900px viewports were still hitting
	   the 1100px tier's wider desktop-transition padding (fc-contact 32px +
	   frame 10px + panel 40px = 82px per side) with nothing narrower to
	   apply until 600px. */
	.fc-contact {
		padding-left: 16px;
		padding-right: 16px;
	}

	.fc-contact__frame {
		padding: 6px;
	}

	.fc-contact__panel {
		padding-left: 16px;
		padding-right: 16px;
	}
}

@media (max-width: 600px) {
	/* The page-head step down to 48px on mobile is the shared page header's
	   job now (assets/page-header.css), and it applies on every page rather
	   than only this one. */

	.fc-contact {
		padding: 36px 16px var(--frame-gutter);
	}

	.fc-contact__frame {
		border-radius: 16px;
		padding: 6px;
	}

	/* Horizontal padding trimmed from 24px to the site's mobile standard
	   (16px). Stacked on top of .fc-contact's own 16px and the frame's
	   padding above, the old value put ~50px of dead space on each side
	   before the form itself started, cramming the fields into a much
	   narrower column than every other page's content width. */
	.fc-contact__panel {
		padding: 32px 16px;
		min-height: 0;
		gap: 24px;
	}

	.fc-contact__intro h2 {
		font-size: 41px;
	}

	.fc-contact__intro h2 b,
	.fc-contact__intro h2 em {
		font-size: 39px;
	}

	.fc-contact__intro p {
		font-size: 16px;
	}

	/* Nothing for .fc-contact__media here: it is display:none from 900px down,
	   so this tier never sees it. */

	/* The form's own phone tier lives in contact-wpforms.css, alongside the
	   rest of its layout. */

	.fc-contact-bento {
		padding: var(--frame-gutter) 0 0;
	}

	.fc-contact-bento__card {
		padding: 32px 28px;
	}

	.fc-contact-bento__card h3 {
		font-size: 26px;
	}
}