/**
 * Contact page: new brand redesign (/contact/).
 *
 * Visual language follows the homepage v2 draft (assets/css/home-v2.css).
 * Markup and copy are unchanged from pages/core/contact.php; everything here
 * is scoped under .ctv2 and layered on top of assets/css/contact.css.
 *
 * The HubSpot form renders inside an iframe (Forms V4), so its fields and
 * submit button are styled in HubSpot (Marketing -> Forms -> Style), not here.
 *
 * Brand colors live in the token block below; change them there.
 *
 * @package Bringits
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

.ctv2 {
	--ct-primary: #291154;
	--ct-deep: #220d47;
	--ct-dark: #1e0c3f;
	--ct-yellow: #f8c02d;
	--ct-white: #ffffff;

	--ct-violet: #5b2d8e;
	--ct-violet-soft: #a98be6;
	--ct-ink: #1e0c3f;

	--ct-on-dark: #ffffff;
	--ct-on-dark-body: rgba(255, 255, 255, 0.76);

	--ct-radius-card: 12px;
	--ct-radius-panel: 16px;

	--ct-max: 1200px;
	--ct-gutter: clamp(16px, 4vw, 32px);

	--ct-font: Inter, Arial, Helvetica, sans-serif;

	position: relative;
	min-height: 0;
	padding: clamp(48px, 6vw, 96px) 0 clamp(56px, 7vw, 112px);
	background:
		linear-gradient(180deg, rgba(30, 12, 63, 0.1) 0%, rgba(30, 12, 63, 0.7) 40%, var(--ct-dark) 70%),
		linear-gradient(90deg, rgba(30, 12, 63, 0.88) 0%, rgba(30, 12, 63, 0.5) 40%, rgba(30, 12, 63, 0) 70%),
		url('../images/home-v2/hero-mountain.webp') right top / 100% auto no-repeat,
		linear-gradient(165deg, var(--ct-primary) 0%, var(--ct-dark) 55%, var(--ct-deep) 100%);
	color: var(--ct-on-dark-body);
	font-family: var(--ct-font);
	-webkit-font-smoothing: antialiased;
	overflow: clip;
	isolation: isolate;
}

.ctv2 :is(h1, h3, p) {
	font-family: var(--ct-font);
}

/* Faint data grid, fading toward the edges. */
.ctv2::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(ellipse 60% 70% at 30% 60%, #000 0%, transparent 75%);
	mask-image: radial-gradient(ellipse 60% 70% at 30% 60%, #000 0%, transparent 75%);
	pointer-events: none;
}

/* Yellow light trail along the bottom edge. */
.ctv2::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 5%, rgba(248, 192, 45, 0.75) 55%, transparent 95%);
	box-shadow: 0 0 18px 2px rgba(248, 192, 45, 0.35);
	pointer-events: none;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.ctv2 .contact-page-wrapper {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: clamp(32px, 5vw, 80px);
	max-width: calc(var(--ct-max) + 2 * var(--ct-gutter));
	padding: 0 var(--ct-gutter);
}

.ctv2 .contact-page-wrapper .contact-left-container {
	gap: 32px;
	height: auto;
	padding: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
}

.ctv2 .contact-page-wrapper .contact-main-title {
	margin: 0;
	font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.035em;
	color: var(--ct-on-dark);
	text-wrap: balance;
}

/* Yellow dash above the title (homepage eyebrow accent). */
.ctv2 .contact-page-wrapper .contact-main-title::before {
	content: '';
	display: block;
	width: 40px;
	height: 3px;
	margin-bottom: 24px;
	border-radius: 2px;
	background: var(--ct-yellow);
}

/* ==========================================================================
   Features: glass cards
   ========================================================================== */

.ctv2 .contact-page-wrapper .features-container {
	flex: none;
	justify-content: flex-start;
	gap: 12px;
	padding: 0;
	border-radius: 0;
	background: none;
}

.ctv2 .contact-page-wrapper .feature-item {
	gap: 16px;
	padding: 20px 22px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--ct-radius-card);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 30px rgba(10, 4, 26, 0.3);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ctv2 .contact-page-wrapper .feature-item:hover {
	border-color: rgba(248, 192, 45, 0.4);
	background: rgba(255, 255, 255, 0.08);
}

/* Icon tile: yellow glyph on a soft yellow ring. */
.ctv2 .contact-page-wrapper .feature-icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: rgba(248, 192, 45, 0.14);
	box-shadow: inset 0 0 0 1px rgba(248, 192, 45, 0.45);
	color: var(--ct-yellow);
}

.ctv2 .contact-page-wrapper .feature-icon svg {
	width: 22px;
	height: 22px;
}

.ctv2 .contact-page-wrapper .feature-item h3 {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--ct-on-dark);
}

.ctv2 .contact-page-wrapper .feature-item h3::first-letter {
	text-transform: uppercase;
}

.ctv2 .contact-page-wrapper .feature-item p {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ct-on-dark-body);
}

/* ==========================================================================
   Form card
   ========================================================================== */

.ctv2 .contact-page-wrapper .contact-right-section .contact-content-card {
	position: relative;
	height: auto;
	padding: clamp(20px, 3vw, 36px);
	border-radius: var(--ct-radius-panel);
	background: var(--ct-white);
	box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06), 0 30px 80px rgba(8, 2, 30, 0.5);
	overflow: hidden;
}

/* Yellow corner accent. */
.ctv2 .contact-page-wrapper .contact-right-section .contact-content-card::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 64px;
	height: 4px;
	background: var(--ct-yellow);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
	.ctv2 {
		background:
			linear-gradient(180deg, rgba(30, 12, 63, 0.55) 0%, rgba(30, 12, 63, 0.9) 30%, var(--ct-dark) 50%),
			url('../images/home-v2/hero-mountain.webp') 70% top / auto 520px no-repeat,
			var(--ct-dark);
	}

	.ctv2 .contact-page-wrapper {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 0 var(--ct-gutter);
	}

	.ctv2 .contact-page-wrapper .contact-left-container {
		gap: 24px;
		padding: 0;
	}

	.ctv2 .contact-page-wrapper .feature-item {
		padding: 18px;
	}
}

@media (max-width: 600px) {
	.ctv2 .contact-page-wrapper .contact-main-title {
		font-size: clamp(2.25rem, 1.4rem + 5vw, 2.75rem);
		margin-bottom: 0;
	}

	.ctv2 .contact-page-wrapper .feature-icon {
		width: 40px;
		height: 40px;
	}

	/* The HubSpot iframe carries its own inner padding. */
	.ctv2 .contact-page-wrapper .contact-right-section .contact-content-card {
		padding: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ctv2 * {
		transition: none !important;
	}
}