/* ==========================================================================
   Binham — visa detail page
   Loaded only on a single bnh_visa. Every colour comes from tokens.css.
   ========================================================================== */

/* --- Type cards ----------------------------------------------------------- */

.bnh-vtypes { margin: 0 0 var(--bnh-s7); }

.bnh-vtypes__grid {
	display: grid;
	gap: var(--bnh-s4);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin-top: var(--bnh-s5);
}

.bnh-vcard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--bnh-white);
	border: 1px solid var(--bnh-line);
	border-radius: var(--bnh-r);
	box-shadow: var(--bnh-sh-sm);
}

/*
 * Brand palette, not the reference's blue: navy for the structural band and
 * orange for the accents, the same split the rest of the site uses.
 */
.bnh-vcard {
	--bnh-vcard-band: var(--bnh-navy);
	--bnh-vcard-tick: var(--bnh-orange);
}

.bnh-vcard__band {
	margin: 0;
	padding: .6rem var(--bnh-s4);
	background: var(--bnh-vcard-band);
	color: var(--bnh-white);
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	letter-spacing: .01em;
}

.bnh-vcard__title {
	margin: 0;
	padding: var(--bnh-s4) var(--bnh-s4) var(--bnh-s3);
	border-bottom: 1px solid var(--bnh-line);
	color: var(--bnh-navy-800);
	font-size: 1.125rem;
	font-weight: 700;
	text-align: center;
}

.bnh-vcard__points {
	flex: 1 1 auto;
	display: grid;
	gap: .55rem;
	align-content: start;
	margin: 0;
	padding: var(--bnh-s4);
	list-style: none;
}

.bnh-vcard__points li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .5rem;
	align-items: start;
	color: var(--bnh-ink);
	font-size: var(--bnh-fs-sm);
	line-height: 1.5;
}

/* Filled disc with a white tick — the brand orange, as the accent elsewhere. */
.bnh-vcard__points svg {
	flex: none;
	margin-top: .1rem;
	padding: 3px;
	background: var(--bnh-vcard-tick);
	border-radius: 50%;
	color: var(--bnh-white);
	stroke-width: 2.6;
}

.bnh-vcard__price {
	margin: 0;
	padding: var(--bnh-s3) var(--bnh-s4);
	border-top: 1px solid var(--bnh-line);
	text-align: center;
}

.bnh-vcard__price strong {
	color: var(--bnh-navy-800);
	font-size: 1.25rem;
	font-weight: 700;
}

.bnh-vcard__price span {
	color: var(--bnh-muted);
	font-size: var(--bnh-fs-xs);
}

/* --- Enquiry form --------------------------------------------------------- */

.bnh-single__facts { margin-top: var(--bnh-s4); }

.bnh-vform {
	position: sticky;
	/* Clears the sticky site header, which is --bnh-nav-h tall. */
	top: calc(var(--bnh-nav-h) + var(--bnh-s4));
	padding: var(--bnh-s5);
	background: var(--bnh-grey-050);
	border: 1px solid var(--bnh-line);
	border-radius: var(--bnh-r-lg);
}

.bnh-vform__title {
	margin: 0 0 .35rem;
	color: var(--bnh-navy-800);
	font-size: 1.25rem;
	font-weight: 700;
}

.bnh-vform__lead {
	margin: 0 0 var(--bnh-s4);
	color: var(--bnh-muted);
	font-size: var(--bnh-fs-sm);
}

.bnh-vform__opt {
	color: var(--bnh-muted);
	font-style: normal;
	font-weight: 400;
}

.bnh-vform__note {
	margin: var(--bnh-s3) 0 0;
	color: var(--bnh-muted);
	font-size: var(--bnh-fs-xs);
	text-align: center;
}

.bnh-vform .bnh-form__field { margin-bottom: var(--bnh-s3); }

/*
 * Below the two-column breakpoint the form leads the page — it is the reason
 * most visitors are here, and burying it under the detail costs enquiries.
 * Sticky is released so it scrolls away normally on a phone.
 */
@media (max-width: 1023px) {
	.bnh-visa__aside { order: -1; }

	.bnh-vform {
		position: static;
		top: auto;
	}
}