/**
 * Landing page components
 *
 * Shared sections for pages with the PIBSI Landingpage template, opt-in via
 * `.pibsi-lp`. Hand-written and loaded on its own by
 * pibsi_enqueue_landingpage_components(), not part of the Gulp build.
 * Pages with their own inline CSS (`.pibsi-sigeko`) are not affected.
 *
 * @package pibsi
 */
.pibsi-lp {
	--lp-blue: #0088bd;
	--lp-navy: #12354a;
	--lp-pale: #eff7fa;
	--lp-yellow: #f7ff3e;

	color: #193444;
	line-height: 1.65;
}

.pibsi-lp,
.pibsi-lp * {
	box-sizing: border-box;
}

.pibsi-lp .lp-wrap {
	max-inline-size: 1120px;
	margin-inline: auto;
	padding-inline: 22px;
}

.pibsi-lp section {
	padding-block: clamp(38px, 5vw, 66px);
}

.pibsi-lp .lp-hero {
	background: linear-gradient(120deg, #12354a, #08678d);
	color: #fff;
	padding-block: clamp(52px, 7vw, 78px);
}

.pibsi-lp .lp-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.82rem;
	font-weight: 750;
	color: #00759f;
}

.pibsi-lp .lp-hero .lp-eyebrow {
	color: var(--lp-yellow);
}

.pibsi-lp h1 {
	font-size: clamp(2rem, 4.5vw, 3.4rem);
	line-height: 1.13;
	margin: 12px 0 22px;
	color: inherit;
}

.pibsi-lp h2 {
	font-size: clamp(1.65rem, 3vw, 2.3rem);
	line-height: 1.25;
	color: var(--lp-navy);
}

.pibsi-lp h3 {
	font-size: 1.16rem;
	color: var(--lp-navy);
}

.pibsi-lp .lp-lead {
	font-size: 1.17rem;
	max-inline-size: 780px;
}

.pibsi-lp .lp-btn {
	display: inline-block;
	background: var(--lp-yellow);
	color: var(--lp-navy) !important;
	padding: 13px 22px;
	border-radius: 7px;
	font-weight: 750;
	text-decoration: none;
	margin: 10px 10px 0 0;
}

.pibsi-lp .lp-btn-secondary {
	background: #fff;
}

.pibsi-lp .lp-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.pibsi-lp .lp-card {
	background: #fff;
	border: 1px solid #dce8ed;
	border-radius: 12px;
	padding: 24px;
}

.pibsi-lp .lp-shade {
	background: var(--lp-pale);
}

.pibsi-lp .lp-note {
	border-inline-start: 5px solid var(--lp-blue);
	background: #fff;
	padding: 16px 22px;
}

.pibsi-lp .lp-cta {
	background: var(--lp-navy);
	color: #fff;
}

.pibsi-lp .lp-cta h2 {
	color: #fff;
}

.pibsi-lp .lp-faq details {
	border-block-end: 1px solid #d7e4e9;
	padding: 16px 0;
}

.pibsi-lp .lp-faq summary {
	cursor: pointer;
	font-weight: 700;
}

.pibsi-lp .lp-faq summary:focus-visible,
.pibsi-lp a:focus-visible {
	outline: 3px solid var(--lp-blue);
	outline-offset: 3px;
}

.pibsi-lp .lp-hero a:not(.lp-btn),
.pibsi-lp .lp-cta a:not(.lp-btn) {
	color: #fff;
}

.pibsi-lp .lp-form-anchor {
	scroll-margin-top: 90px;
}

@media (width <= 760px) {
	.pibsi-lp .lp-grid {
		grid-template-columns: 1fr;
	}

	.pibsi-lp .lp-wrap {
		padding-inline: 18px;
	}
}