/**
 * Mainsail Journeys — Buyer/Seller/Financing guide page layout.
 *
 * Per MAM-Buyer-Seller-Financing-Journeys-Architecture.md §38 ("Visual
 * Locks"): six journey menu items, icon above label, uppercase labels, thin
 * active border, black/neutral visual language, Playfair Display headings,
 * Mulish body text, featured image right on desktop / full-width on
 * mobile, long horizontal Previous/Next arrows, centered Previous/Next
 * controls. No card shadows, no rounded journey cards, no gradients, no
 * colored fills, no horizontal mobile carousel, no full-height hero.
 *
 * Every color/font references the same Mainsail Child Theme CSS custom
 * properties (with the same inline fallbacks) already established and
 * reused by every other Mainsail plugin — no new hardcoded brand palette.
 * No bare element selectors — every rule is scoped under a
 * `.mainsail-journey*` class, so nothing here can leak into unrelated page
 * content.
 */

/* ----------------------------------------------------------------------
   Inner page banner (§15)
   ---------------------------------------------------------------------- */

.mainsail-journey__banner {
	width: 100%;
	aspect-ratio: 1600 / 548;
	max-height: 420px;
	background: var(--mainsail-journey-banner-image) center center / cover no-repeat, #222222;
}

@media (max-width: 767px) {
	.mainsail-journey__banner {
		aspect-ratio: 4 / 3;
		max-height: 260px;
	}
}

/* ----------------------------------------------------------------------
   Breadcrumb row (§16) — reuses the theme's existing Kadence breadcrumb
   output; this only adds spacing/typography around it, scoped so it can't
   affect any other breadcrumb instance on the site.
   ---------------------------------------------------------------------- */

.mainsail-journey__breadcrumb-row {
	padding: 14px 6.25vw;
}

.mainsail-journey__breadcrumb-row .kadence-breadcrumbs {
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: 13px;
	color: #5a5a5a;
}

.mainsail-journey__breadcrumb-row .kadence-breadcrumbs a {
	color: #5a5a5a;
	text-decoration: none;
}

.mainsail-journey__breadcrumb-row .kadence-breadcrumbs a:hover {
	text-decoration: underline;
}

/* ----------------------------------------------------------------------
   Section wrapper
   ---------------------------------------------------------------------- */

.mainsail-journey {
	padding: 0 6.25vw 60px;
	max-width: 1600px;
	margin: 0 auto;
}

/* ----------------------------------------------------------------------
   Six-item journey navigation (§13/§14/§36)
   ---------------------------------------------------------------------- */

.mainsail-journey__list {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

.mainsail-journey__item {
	width: 16.6667%;
	padding: max(0.156vw, 2px);
	box-sizing: border-box;
}

.mainsail-journey__item a,
.mainsail-journey__item-inner {
	display: block;
	border: 1px solid transparent;
	padding: 1vw 0.5vw;
	text-align: center;
	text-decoration: none;
	color: #000000;
	transition: border-color 0.2s ease;
}

/* Hover, keyboard focus, and the active (current-page) state all share
   this one rule so the border is guaranteed identical across all three
   states — and across Buyer/Seller/Finance, since it's the same shared
   class on every group's nav. */
.mainsail-journey__item a:hover,
.mainsail-journey__item a:focus-visible,
.mainsail-journey__item.is-active > a {
	border-color: #000000;
}

.mainsail-journey__item.is-unavailable .mainsail-journey__item-inner {
	color: #b3b3b3;
	cursor: default;
}

/* 1.5x the original reference size (max(2.813vw,45px) / 50px cap). */
.mainsail-journey__icon {
	display: block;
	width: 100%;
	height: max(4.22vw, 67.5px);
	margin-bottom: 8px;
}

.mainsail-journey__icon svg {
	width: 100%;
	height: 100%;
	max-width: 75px;
	margin-inline: auto;
	display: block;
}

.mainsail-journey__label {
	display: block;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: max(0.6vw, 13px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	/* Every label reserves 2 lines' worth of height, whether it actually
	   wraps or not (longest labels, e.g. "Escrow inspections &
	   appraisals", always wrap to 2; shorter ones like "Moving In" don't).
	   Without this, a 1-line item's border box is shorter than a 2-line
	   item's, so the hover/active border appears a different size/shape
	   depending on which item — this keeps every item's box identical. */
	min-height: calc(1.3em * 2);
}

@media (prefers-reduced-motion: reduce) {
	.mainsail-journey__item a {
		transition: none;
	}
}

@media (max-width: 767px) {
	.mainsail-journey__list {
		flex-direction: column;
		align-items: center;
		width: 100%;
		max-width: 250px;
		margin-left: auto;
		margin-right: auto;
	}

	.mainsail-journey__item {
		width: 100%;
	}
}

/* ----------------------------------------------------------------------
   Page title (§17)
   ---------------------------------------------------------------------- */

.mainsail-journey__title {
	font-family: var(--global-heading-font-family, "Cormorant", Georgia, "Times New Roman", serif);
	font-size: max(1.875vw, 25px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: #000000;
	margin: 0 0 1.5rem;
}

/* ----------------------------------------------------------------------
   Content + featured image (§18-20)
   ---------------------------------------------------------------------- */

.mainsail-journey__body {
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: 16px;
	line-height: 1.8;
	color: #000000;
}

.mainsail-journey__body::after {
	content: "";
	display: block;
	clear: both;
}

.mainsail-journey__image {
	float: right;
	width: 50%;
	padding-left: 5%;
	padding-bottom: 4%;
}

.mainsail-journey__image img {
	display: block;
	width: 100%;
	height: auto;
}

.mainsail-journey__body h2,
.mainsail-journey__body h3 {
	font-family: var(--global-heading-font-family, "Cormorant", Georgia, "Times New Roman", serif);
	font-weight: 400;
	color: #000000;
}

.mainsail-journey__body table {
	border-collapse: collapse;
	width: 100%;
	text-align: center;
	font-weight: 600;
}

.mainsail-journey__body table td,
.mainsail-journey__body table th {
	border: 1px solid rgba(0, 0, 0, 0.15);
	padding: 10px;
}

@media (max-width: 991px) {
	.mainsail-journey__image {
		float: none;
		width: 100%;
		padding: 0 0 1.5rem;
	}
}

/* ----------------------------------------------------------------------
   Previous / Next (§23/§24)
   ---------------------------------------------------------------------- */

.mainsail-journey__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2vw;
	margin-top: 3rem;
	clear: both;
}

.mainsail-journey__pagination-link {
	display: inline-flex;
	align-items: center;
	gap: 1vw;
	padding: 0 2vw;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	color: #000000;
}

.mainsail-journey__arrow {
	width: 53px;
	height: 17px;
	flex-shrink: 0;
}

.mainsail-journey__pagination-divider {
	width: 1px;
	height: 24px;
	background-color: rgba(0, 0, 0, 0.2);
}

@media (max-width: 767px) {
	.mainsail-journey__pagination {
		gap: 4vw;
	}

	.mainsail-journey__pagination-link span {
		display: none;
	}
}

/* ----------------------------------------------------------------------
   Fallback for a page assigned this template without journey meta yet
   (e.g. the hidden group parent pages) — plain, unstyled article so the
   template never renders a visibly broken page.
   ---------------------------------------------------------------------- */

.mainsail-journey__plain {
	max-width: 900px;
	margin: 0 auto;
	padding: 60px 6.25vw;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
}