/**********************************************************
 * Looma — Pilot page styles
 * File: pilot-page.css   (scope: .tpl-pilot)
 * Notes:
 * - Uses global CSS variables from style.css (colours, etc.)
 * - Keep everything under .tpl-pilot to avoid leaks.
 **********************************************************/

/*** Forces consistent scrollbar & prevents 1-2px horizontal “jiggle” on viewport resize *****/
html {
	overflow-y: scroll;
	background: rgba(22, 26, 70, 1);
	background-attachment: scroll;
	font-family: "Poppins", sans-serif;
}
/* allow the viewport to grow/shrink with the URL bar */
@supports (-webkit-touch-callout: none) {
	html {
		overflow-y: auto;
	}
}

.tpl-pilot h3 {
	font-family: "Poppins", sans-serif;
	font-size: 1.8rem;
}

.tpl-pilot p {
	font-family: "Poppins", sans-serif;
	font-size: 1rem;
	padding-left: 1.5rem;
}

.tpl-pilot .pilot-hero-title span {
	font-family: "Monainn";
	color: var(--colour-turquoise);
	font-size: 3.5rem;
}

@media (max-width: 1024px) {
	.tpl-pilot .pilot-hero-title span {
		font-size: 2.5rem;
	}
}

.tpl-pilot .timeline span {
	font-family: "Monainn";
	font-size: 1.5rem;
}

/* ---- Page wrapper ---- */
#pilot-gradient-canvas {
	position: fixed;
	backface-visibility: hidden;
	transform: translateZ(0); /* nudge GPU compositing to prevent hairline gaps */
	inset: 0; /* let overrides below handle any overscan */
	width: 100svw;
	height: 100svh;
	z-index: 0;
	pointer-events: none;
	will-change: transform;
	--gradient-color-1: #4c2a85; /* Deep Violet */
	--gradient-color-2: #7037c0; /* Royal Purple */
	--gradient-color-3: #3f8efc; /* Electric Blue */
	/* --gradient-color-5: #00e1ff; Bright Cyan */
	--gradient-color-9: #4c2a85; /* Deep Violet */
	--gradient-color-10: #7037c0; /* Royal Purple */
}

@supports (-webkit-touch-callout: none) {
	/* On iOS Safari, make the canvas part of the scrolling flow so it doesn't sit behind bounce-back gaps */
	#pilot-gradient-canvas {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: auto;
		width: 100%;
		height: auto; /* grow with content */
		min-height: 100svh; /* but never shorter than the viewport */
	}
}

.tpl-pilot {
	/* page-specific tokens */
	--rim: 18px;
	--panel: linear-gradient(
		rgba(11, 14, 50, 0.95),
		rgba(22, 26, 70, 0.85),
		rgba(33, 38, 90, 0.75),
		rgba(44, 50, 110, 0.65),
		rgba(33, 38, 90, 0.75),
		rgba(22, 26, 70, 0.85),
		rgba(11, 14, 50, 0.95)
	);
	position: relative;
	z-index: 1; /* sits above gradient canvas */
}

/* ---- Hero ---- */
.tpl-pilot .pilot-hero .pilot-hero-wrapper {
	display: flex;
	align-items: center;
	gap: clamp(0.5rem, 1vw, 1.5rem);
	position: relative;
	margin: auto 3rem;
}

.tpl-pilot .pilot-hero .pilot-hero-image,
.tpl-pilot .pilot-hero .pilot-hero-copy {
	flex: 1 1 0;
}

.tpl-pilot .pilot-hero .pilot-hero-image {
	display: flex;
	justify-content: center;
	margin-left: 10%;
}

.tpl-pilot .pilot-hero .pilot-hero-image img {
	height: 70vh;
	max-height: 800px;
	width: auto;
	border-radius: 1rem;
	z-index: 2;
}

@media (max-width: 1024px) {
	.tpl-pilot .pilot-hero .pilot-hero-image img {
		height: 50vh;
		padding-top: 1rem;
	}
}

.tpl-pilot .pilot-hero .pilot-hero-copy {
	display: flex;
	flex-direction: column;
	gap: clamp(0.5rem, 2vw, 1.25rem);
	text-align: left;
	align-items: flex-start;
}

.tpl-pilot .pilot-hero .pilot-hero-wrapper .pilot-hero-title {
	font-size: clamp(2rem, 6vw, 3rem);
	font-weight: 500;
	/* color: var(--colour-dark); */
	font-family: "Poppins", sans-serif;
	color: #ffff;
	margin: 0 0 0.75rem;
}

.tpl-pilot .pilot-hero .pilot-hero-text {
	max-width: 60ch;
	margin: 0;
	color: var(--colour-white);
	font-size: clamp(1rem, 3.1vw, 1.25rem);
	opacity: 0.9;
	font-family: "Poppins", sans-serif;
}

@media (max-width: 768px) {
	.tpl-pilot .pilot-hero .pilot-hero-wrapper {
		flex-direction: column;
		gap: clamp(1rem, 6vw, 2.5rem);
	}

	.tpl-pilot .pilot-hero .pilot-hero-copy {
		align-items: center;
		text-align: center;
	}

	.tpl-pilot .pilot-hero .pilot-hero-text {
		margin: 0 auto;
	}
}

/**************** Arrow SVG **************************/

/* .arrow .arrow-down {
	stroke: #00e3c3;
	stroke-width: 16;
	z-index: 3;
}

.tpl-pilot .pilot-hero .pilot-hero-copy .arrow {
	align-content: center;
} */

/***************** SVG Triangle ************************/
.pilot-triangle {
	position: relative;
	bottom: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	z-index: 2;
}

.pilot-triangle svg {
	position: relative;
	display: block;
	width: calc(135% + 1.3px);
	height: 174px;
}

/* .pilot-triangle svg .shape-fill {
	fill: white;
} */

@media (max-width: 600px) {
	.pilot-triangle svg {
		width: 100%;
	}
}

/* --  SVG Gradient colour defined in html defs -- */
.pilot-triangle svg path {
	fill: url(#pilotWaveGradient);
}

.tpl-pilot > *:not(.pilot-hero) {
	background: linear-gradient(
		rgba(11, 14, 50, 0.95),
		rgba(22, 26, 70, 0.85),
		rgba(33, 38, 90, 0.75),
		rgba(44, 50, 110, 0.65),
		rgba(33, 38, 90, 0.75),
		rgba(22, 26, 70, 0.85),
		rgba(11, 14, 50, 0.95)
	);
	position: relative;
}

/******* Timeline “Glass” middle row ******/
.tpl-pilot .timeline {
	display: flex;
	flex-direction: column;
	padding-inline: clamp(1rem, 20vw, 10rem);
	position: relative;
	gap: var(3rem, clamp(4rem, 8vw, 6rem));
}

/* Odd items (1st, 3rd) stick to the left */
.tpl-pilot .timeline .pilot-middle:nth-child(odd) {
	align-self: flex-start;
	margin-right: auto;
}

/* Even items (2nd) stick to the right */
.tpl-pilot .timeline .pilot-middle:nth-child(even) {
	align-self: flex-end;
	margin-left: auto;
}

.tpl-pilot .pilot-middle {
	margin: 2rem 0;
	width: min(70%, 900px);
	border-radius: 2rem;
	padding: 0.35rem;
	background: radial-gradient(
		120% 180% at 50% -40%,
		rgba(255, 255, 255, 0.06) 0%,
		rgba(255, 255, 255, 0) 60%
	);
	box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.75),
		inset 0 0 5px rgba(255, 255, 255, 0.75);
	position: relative;
	z-index: 2;
}

@media (max-width: 1024px) {
	.tpl-pilot .timeline {
		padding-top: 1.5rem;
		padding-inline: 0;
		gap: 1rem;
	}

	.tpl-pilot .timeline .pilot-middle:nth-child(odd) {
		align-self: center;
		width: min(95%);
		margin: auto;
		margin-bottom: 1rem;
	}
	.tpl-pilot .timeline .pilot-middle:nth-child(even) {
		align-self: center;
		width: min(95%);
		margin: auto;
		margin-bottom: 1rem;
	}
}

@media (min-width: 1900px) {
	.tpl-pilot .timeline .pilot-middle:nth-child(odd) {
		align-self: flex-start;
		margin-right: 25%;
		margin-left: 15%;
	}
	.tpl-pilot .timeline .pilot-middle:nth-child(even) {
		align-self: flex-end;
		margin-left: 25%;
		margin-right: 15%;
	}
}

@media (min-width: 2750px) {
	.tpl-pilot .timeline .pilot-middle:nth-child(odd) {
		align-self: flex-start;
		margin-right: 35%;
		margin-left: 25%;
	}
	.tpl-pilot .timeline .pilot-middle:nth-child(even) {
		align-self: flex-end;
		margin-left: 35%;
		margin-right: 25%;
	}
}

.tpl-pilot .pilot-middle .glass-left {
	display: flex;
	align-items: center;
	flex-direction: row;
}

.tpl-pilot .pilot-middle .glass-right {
	display: flex;
	align-items: center;
	flex-direction: row;
}

@media (max-width: 1024px) {
	.tpl-pilot .pilot-middle .glass-left {
		flex-direction: column;
	}
	.tpl-pilot .pilot-middle .glass-right {
		flex-direction: column-reverse;
	}
}

.tpl-pilot .timeline .glass-left img {
	width: auto;
	max-width: calc(100% - 1.5rem);
	height: 210px;
	display: block;
	object-fit: contain;
	object-position: center;
	padding: 0.75rem;
	margin: 0 auto;
}

.tpl-pilot .timeline .glass-left .feedback-image img {
	width: 35%;
	height: auto;
	object-fit: contain;
}

.tpl-pilot .timeline .glass-right img {
	width: auto;
	max-width: calc(100% - 1.5rem);
	height: 100px;
	display: block;
	object-fit: contain;
	object-position: center;
	padding: 0.75rem;
	margin: 0 auto;
}

.tpl-pilot .pilot-middle .row {
	display: flex;
	/* gap: 0.5rem; */
	align-items: center;
	flex-direction: column;
	padding: 0.5rem;
}

@media (max-width: 1024px) {
	.tpl-pilot .pilot-middle .row h3 {
		margin-bottom: 0;
		text-align: center;
	}
	.tpl-pilot .timeline .glass-left img {
		max-width: calc(50% - 1.5rem);
		height: auto;
	}
	.tpl-pilot .timeline .glass-right img {
		max-width: calc(70% - 1.5rem);
		height: auto;
	}
	.tpl-pilot .timeline .glass-left .feedback-image img {
		display: none;
	}
}

.tpl-pilot .timeline .glass-right .row h3 {
	margin-bottom: 0;
}

/******** Feedback timeline process *****/
.tpl-pilot .feedback-process {
	padding: 2rem;
	/* display: flex;
	flex-direction: column; */
	justify-content: center;
	align-items: center;
}

.tpl-pilot .pilot-feedback {
	margin: 2rem auto;
	width: min(95%);
	border-radius: 2rem;
	padding: 0.35rem auto;
	background: radial-gradient(
		120% 180% at 50% -40%,
		rgba(255, 255, 255, 0.06) 0%,
		rgba(255, 255, 255, 0) 60%
	);
	box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.75),
		inset 0 0 5px rgba(255, 255, 255, 0.75);
	position: relative;
	z-index: 2;
}

.pilot-feedback .row h3 {
	margin-top: 1.5rem;
	margin-bottom: 0;
}

.tpl-pilot .pilot-feedback .row {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: center;
	padding: 0.5rem 0.5rem;
}

.tpl-pilot .pilot-feedback .row li {
	list-style-type: square;
}

li::marker {
	color: var(--colour-pink);
}

/* ---- Mobile tweaks ---- */

@media (max-width: 600px) {
	.tpl-pilot {
		padding-bottom: calc(1.2rem + env(safe-area-inset-bottom));
	}
	.tpl-pilot .pilot-hero {
		min-height: 48svh;
	}
	.tpl-pilot .pilot-middle {
		max-width: 92svw;
	}
}

/*** "Beautiful Cookie Banner" Plugin CSS Overrides *****/

.cc-floating.cc-theme-classic {
	border-radius: 1rem !important;
	padding: 0.8rem;
}

.cc-message {
	font-family: "Poppins", sans-serif;
	font-size: 0.95rem;
	text-align: center;
	margin-bottom: 0.5rem !important;
}

.cc-btn {
	border-radius: 2rem !important;
	font-family: "Poppins", sans-serif;
}

@media screen and (max-width: 414px) and (orientation: portrait),
	screen and (max-width: 736px) and (orientation: landscape) {
	.cc-window.cc-floating {
		max-width: 95%;
		width: max-content;
		left: 50%;
		right: auto !important;
		transform: translateX(-50%);
		bottom: 0.5rem !important;
	}
}