/* ==========================================================================
   TeamCNF Contact (the four blocks of the Contact page)
   Contact hero: sticky copy beside the booking form card. Contact methods: a
   bento of glass cards. Visit us: the office over a photo beside the social
   tiles. Contact FAQ: a sticky heading beside the filterable questions.
   Every value comes from the theme tokens (theme.json): --wp--preset--* and
   --wp--custom--*.
   ========================================================================== */

/* ---- Hero with form ------------------------------------------------------ */
.tcnf-contact-hero .tcnf-page-hero__grid {
	align-items: start;
}

.tcnf-contact-hero .tcnf-consult__steps {
	margin-top: var(--wp--preset--spacing--30);
}

/* The form card: its title and line of text, the form plugin's form, then the note */
.tcnf-contact-hero .tcnf-contact-form {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--xl);
}

.tcnf-contact-form__head {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.tcnf-contact-form__head h2 {
	font-size: var(--wp--preset--font-size--xx-large);
}

.tcnf-contact-form__head p {
	font-size: var(--wp--preset--font-size--small);
}

.tcnf-contact-form__note {
	color: var(--wp--custom--text--tertiary);
	font-size: var(--wp--preset--font-size--x-small);
}

@media (min-width: 640px) {
	.tcnf-contact-hero .tcnf-contact-form {
		padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	}
}

@media (min-width: 1100px) {
	.tcnf-contact-hero .tcnf-page-hero__copy {
		position: sticky;
		top: calc(var(--wp--custom--size--header) + var(--wp--preset--spacing--70));
	}
}

/* ---- Contact methods bento ----------------------------------------------- */
.tcnf-methods {
	display: grid;
	gap: var(--wp--custom--grid);
}

.tcnf-method {
	position: relative;
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-content: start;
	justify-items: start;
	padding: var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--xl);
	transition: border-color var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

.tcnf-method:hover,
.tcnf-method:focus-within {
	border-color: var(--wp--custom--glass--border-strong);
}

.tcnf-method h3 {
	font-size: var(--wp--preset--font-size--large);
}

.tcnf-method p {
	font-size: var(--wp--preset--font-size--small);
}

.tcnf-method__value {
	color: var(--wp--custom--text--primary);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: break-word;
}

.tcnf-method__value:hover {
	color: var(--wp--preset--color--highlight);
}

/* Makes the whole card clickable */
.tcnf-method__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.tcnf-method--feature {
	align-content: space-between;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
}

.tcnf-method--feature > div {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	justify-items: start;
}

.tcnf-method--feature .tcnf-icon-badge {
	margin-bottom: var(--wp--preset--spacing--40);
}

.tcnf-method--feature h3 {
	font-size: var(--wp--preset--font-size--xxx-large);
	line-height: var(--wp--custom--leading--tight);
}

.tcnf-method--feature p {
	font-size: var(--wp--preset--font-size--base);
}

.tcnf-method__numbers {
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

@media (min-width: 640px) {
	.tcnf-methods {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tcnf-method--feature,
	.tcnf-method--wide {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1100px) {
	.tcnf-methods {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.tcnf-method--feature {
		grid-column: 1 / span 2;
		grid-row: 1 / span 2;
		padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
	}

	.tcnf-method--wide {
		grid-column: 3 / span 2;
	}
}

/* ---- Visit card and socials ---------------------------------------------- */
.tcnf-visit {
	display: grid;
	gap: var(--wp--custom--grid);
}

.tcnf-visit__card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	align-content: end;
	min-height: var(--wp--custom--size--story--h);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--custom--glass--border);
	border-radius: var(--wp--custom--radius--xl);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--float);
}

.tcnf-visit__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 50%;
}

/* From 640px the glass panel covers the left half of the photo, where the
	tower would sit under its edge, so the photo anchors left and scales up to
	stand the tower clear on the right */
@media (min-width: 640px) {
	.tcnf-visit__img {
		object-position: 0% 50%;
		transform: scale(1.12);
		transform-origin: 0% 50%;
	}
}

.tcnf-visit__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--custom--overlay--fade-bottom);
}

.tcnf-visit__body {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	justify-items: start;
	max-width: var(--wp--custom--size--measure-footer);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.tcnf-visit__body h2 {
	font-size: var(--wp--preset--font-size--xx-large);
}

.tcnf-visit__body address {
	color: var(--wp--custom--text--secondary);
	font-style: normal;
}

.tcnf-visit__socials {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--custom--grid);
}

/* Each list item stretches so its tile fills the cell */
.tcnf-visit__socials > li {
	display: grid;
}

.tcnf-social-tile {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	align-content: space-between;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--xl);
	color: inherit;
	text-decoration: none;
	transition:
		border-color var(--wp--custom--duration--base) var(--wp--custom--ease--out),
		translate var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

.tcnf-social-tile:hover {
	border-color: var(--wp--custom--glass--border-strong);
	translate: 0 calc(var(--wp--preset--spacing--10) * -1);
}

.tcnf-social-tile > .tcnf-glyph {
	--tcnf-glyph-size: var(--wp--custom--size--icon--lg);
}

.tcnf-social-tile__name {
	display: grid;
	gap: var(--wp--custom--nudge);
	color: var(--wp--custom--text--primary);
	font-weight: 600;
}

.tcnf-social-tile small {
	color: var(--wp--custom--text--tertiary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	overflow-wrap: anywhere;
}

@media (min-width: 640px) {
	.tcnf-visit__card {
		padding: var(--wp--preset--spacing--60);
	}

	.tcnf-visit__body {
		padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	}
}

@media (min-width: 900px) {
	.tcnf-visit {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	}
}

/* ---- Contact FAQ --------------------------------------------------------- */
.tcnf-contact-faq__grid {
	display: grid;
	gap: var(--wp--preset--spacing--70);
}

.tcnf-contact-faq__head {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	justify-items: start;
	align-content: start;
}

@media (min-width: 900px) {
	.tcnf-contact-faq__grid {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: var(--wp--preset--spacing--90);
		align-items: start;
	}

	.tcnf-contact-faq__head {
		position: sticky;
		top: calc(var(--wp--custom--size--header) + var(--wp--preset--spacing--70));
	}
}

/* Scoped under .tcnf-contact-faq so they win over the core button and glass styles */
.tcnf-contact-faq .tcnf-filter__btn {
	margin: 0;
}

.tcnf-contact-faq .tcnf-accordion__item.tcnf-glass--subtle {
	box-shadow: none;
}

/* The page reset zeroes paragraph margins; keep the gap under the count line */
.tcnf-contact-faq .tcnf-faq__count {
	margin-bottom: var(--wp--preset--spacing--40);
}