/* ===========================================================================
   Pathway — /ppl-singapore/
   =========================================================================== */

/* --- "Read this first" + the flight plan ---------------------------------- */

/* The prose keeps its reading measure and the card takes the space that was
   sitting empty beside it. Text column is the wider of the two: the paragraphs
   are the answer, the card is the summary. */
.fts-first {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: clamp(1.75rem, 4vw, 3.25rem);
	align-items: start;
}

/* A flight plan strip. Navy, because it has to read as a document rather than a
   panel of the page, and because the site already speaks this language in the
   boarding pass and the footer's runway rule. */
.fts-glance {
	padding: clamp(1.25rem, 2.6vw, 1.75rem);
	border-radius: 0.9rem;
	background: var(--fts-navy);
	color: #fff;
	box-shadow: 0 22px 50px -28px rgba(11, 24, 48, 0.85);
}

.fts-glance__kick {
	margin: 0 0 0.9rem;
	font-family: var(--fts-font);
	font-weight: 700;
	font-size: 0.66rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--fts-blue-soft);
}

.fts-glance__route {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin: 0 0 1.1rem;
	padding-bottom: 1.1rem;
	/* The dashed rule is the boarding pass's perforation, not a generic divider. */
	border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
	font-family: var(--fts-font-cond);
	font-weight: 700;
	font-size: clamp(1.3rem, 2.6vw, 1.6rem);
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #fff;
}

/* The leg between the two places: a rule with an aeroplane riding it. Drawn, so
   it never reaches a screen reader as a stray glyph between two place names. */
.fts-glance__leg {
	position: relative;
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.35);
}

.fts-glance__leg::after {
	content: "✈";
	position: absolute;
	right: -0.15em;
	top: 50%;
	transform: translateY(-52%);
	font-size: 0.8rem;
	line-height: 1;
	color: var(--fts-blue-soft);
}

.fts-glance__list { margin: 0; }

.fts-glance__list > div + div {
	margin-top: 0.7rem;
	padding-top: 0.7rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.fts-glance__list dt {
	margin: 0 0 0.15rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	/* 5.92:1 on navy. */
	color: var(--fts-blue-soft);
}

.fts-glance__cta { margin: 1.1rem 0 0; }
.fts-glance__cta .fts-btn { width: 100%; }

.fts-glance__list dd {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.45;
	font-weight: 600;
	color: #fff;
	text-wrap: pretty;
}

/* --- The four stages ------------------------------------------------------ */

.fts-steps {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.fts-step {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) 12rem;
	gap: clamp(1rem, 2.5vw, 2rem);
	align-items: start;
	padding-block: clamp(1.6rem, 3.2vw, 2.4rem);
	border-top: 1px solid var(--fts-line);
}

.fts-step:last-child { border-bottom: 1px solid var(--fts-line); }

/* --- The rail ------------------------------------------------------------- */

/* The connecting line is drawn on the rail column, not between cards, so the
   four stages read as one continuous route rather than four separate offers.
   That is the whole argument of the page. */
.fts-step__rail {
	position: relative;
	display: flex;
	justify-content: center;
	align-self: stretch;
}

.fts-step__rail::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: calc(-1 * clamp(1.6rem, 3.2vw, 2.4rem) - 1px);
	left: 50%;
	width: 1px;
	margin-left: -0.5px;
	background: var(--fts-line);
}

.fts-step:last-child .fts-step__rail::before { bottom: auto; height: 1.4rem; }

.fts-step__no {
	position: relative;
	display: grid;
	place-items: center;
	width: 2.9rem;
	height: 2.9rem;
	border-radius: 50%;
	border: 1px solid var(--fts-line);
	background: #fff;
	font-family: var(--fts-font-cond);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	color: var(--fts-blue);
	font-variant-numeric: tabular-nums;
}

/* The last stage is the one that ends in a licence, so it is the only one that
   fills in. */
.fts-step.is-feature .fts-step__no {
	background: var(--fts-navy);
	border-color: var(--fts-navy);
	color: #fff;
}

/* --- Stage body ----------------------------------------------------------- */

.fts-step__meta {
	margin: 0 0 0.35rem;
	font-family: var(--fts-font-cond);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--fts-blue);
}

.fts-step__h {
	margin: 0 0 0.5rem;
	font-family: var(--fts-font-cond);
	font-weight: 700;
	font-size: clamp(1.6rem, 3.2vw, 2.05rem);
	line-height: 1.02;
	text-transform: uppercase;
	color: var(--fts-navy);
}

.fts-step__desc {
	margin: 0 0 1rem;
	font-size: clamp(0.94rem, 1.7vw, 1rem);
	line-height: 1.65;
	color: var(--fts-slate);
	text-wrap: pretty;
	max-width: 58ch;
}

/* --- Stage price and action ----------------------------------------------- */

.fts-step__side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding-top: 0.15rem;
}

.fts-step__price {
	margin: 0;
	font-family: var(--fts-font-cond);
	font-weight: 800;
	font-size: clamp(1.45rem, 2.8vw, 1.8rem);
	line-height: 1.1;
	color: var(--fts-navy);
	font-variant-numeric: tabular-nums;
	text-wrap: balance;
}

.fts-step__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding-block: 0.4rem;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--fts-navy);
	text-decoration: none;
}

.fts-step__cta:hover,
.fts-step__cta:focus-visible { color: var(--fts-blue); }

/* --- Cost note ------------------------------------------------------------ */

/* Body size, not small print. The point of the sentence is that the Singapore
   figures are not the whole cost, and setting that in 11px would undo it. */
.fts-costnote {
	max-width: 62ch;
	margin: clamp(1.5rem, 3vw, 2rem) 0 0;
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--fts-slate);
	text-wrap: pretty;
}

/* --- Paperwork ------------------------------------------------------------ */

.fts-handled {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem 1.25rem;
	margin: 1.35rem 0 0;
	padding: 0;
	list-style: none;
}

.fts-handled li {
	position: relative;
	padding-left: 1.5rem;
	font-size: 0.92rem;
	line-height: 1.5;
	font-weight: 500;
	color: var(--fts-navy);
}

.fts-handled li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.34em;
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 50%;
	border: 1px solid var(--fts-blue);
	background:
		linear-gradient(var(--fts-blue), var(--fts-blue)) center / 0.34rem 0.34rem no-repeat;
	background-clip: content-box;
}

/* --- After the PPL -------------------------------------------------------- */

/* The second column of this split is an argument, not a photograph, so it gets
   a rule to separate the two rather than sitting in undifferentiated space. */
.fts-after {
	padding-left: clamp(1.5rem, 3vw, 2.5rem);
	border-left: 1px solid var(--fts-line);
}

/* --- Breakpoints ---------------------------------------------------------- */

/* The price column folds under the body first — it is the narrowest thing on
   the row and the first to look cramped. */
@media (max-width: 64rem) {
	.fts-step { grid-template-columns: 4.5rem minmax(0, 1fr); }

	.fts-step__side {
		grid-column: 2;
		flex-direction: row;
		align-items: center;
		gap: 1.25rem;
		margin-top: 1rem;
		padding-top: 1rem;
		border-top: 1px solid var(--fts-line);
		width: 100%;
	}

	.fts-step__cta { margin-left: auto; }
}

/* The card drops below the prose rather than shrinking — at half of a tablet it
   would put "Whitman Airport, Los Angeles" on three lines. */
@media (max-width: 60rem) {
	.fts-first { grid-template-columns: 1fr; }

	.fts-after {
		padding-left: 0;
		padding-top: clamp(1.5rem, 4vw, 2.25rem);
		border-left: 0;
		border-top: 1px solid var(--fts-line);
	}
}

@media (max-width: 34rem) {
	/* The rail costs 4.5rem of a 320px screen for a decorative line; below this
	   the number moves inline above the stage title instead. */
	.fts-step { grid-template-columns: 1fr; gap: 0; }

	.fts-step__rail {
		justify-content: flex-start;
		align-self: auto;
		margin-bottom: 0.85rem;
	}

	.fts-step__rail::before { display: none; }

	.fts-step__side { grid-column: 1; }

	.fts-handled { grid-template-columns: 1fr; }
}