/*
 * PALS Featured Programs — panel styles.
 * Scoped to .pals-featured / .pals-featured__*. Adapted for a DARK hero background per owner decision:
 * panel is a light card that sits on the site's dark hero. Fallback colors below.
 */

.pals-featured{
	--pals-ink: #13233f;
	--pals-body: #3d4a5f;
	--pals-muted: #4a5568;
	--pals-card: #ffffff;
	--pals-line: #e2dccf;
	--pals-rule: #ece6d9;
	--pals-accent: #f2b134;
	--pals-chip: #e9eef7;
	--pals-chip-line: #8a94a6;

	background: var(--pals-card);
	border: 1px solid var(--pals-line);
	border-radius: 16px;
	overflow: hidden;
	color: var(--pals-ink);
	font-size: 15px;
	line-height: 1.5;
	max-width: 560px;
	margin: 24px auto 0;
	width: 100%;
	box-sizing: border-box;
}
.pals-featured *, .pals-featured *::before, .pals-featured *::after { box-sizing: border-box; }
.pals-featured a { color: inherit; }

.pals-featured__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	background: var(--pals-ink);
	color: #fff;
}
.pals-featured__head .pals-featured__title-h2{
	margin: 0;
	font-size: 20px;
	line-height: 1.2;
	color: #fff;
	font-weight: 700;
}
.pals-featured__head .pals-featured__all{
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.pals-featured__head .pals-featured__all:hover{ text-decoration: underline; }

.pals-featured__list{
	list-style: none;
	margin: 0;
	padding: 0;
}
.pals-featured__item{
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 22px;
	min-height: 108px;
}
.pals-featured__item + .pals-featured__item{
	border-top: 1px solid var(--pals-rule);
}

.pals-featured__top{
	display: flex;
	align-items: center;
	gap: 14px;
}
.pals-featured__title{
	flex: 1 1 auto;
	margin: 0;
	font-size: 17px;
	line-height: 1.28;
	font-weight: 700;
	color: var(--pals-ink);
}
.pals-featured__title a{
	color: inherit;
	text-decoration: none;
}
.pals-featured__title a:hover{ text-decoration: underline; }

.pals-featured__register{ flex: 0 0 auto; }

.pals-featured__chips{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.pals-chip{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--pals-ink);
	white-space: nowrap;
	min-height: 24px;
}
.pals-chip svg{
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
}
.pals-chip--outline{
	padding: 2px 9px;
	border: 1px solid var(--pals-chip-line);
	background: transparent;
}
.pals-chip--type{ background: var(--pals-chip); }
.pals-chip--timing{
	background: var(--pals-accent);
	color: var(--pals-ink);
	font-weight: 700;
}

.pals-featured__desc{
	margin: 0;
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--pals-muted);
}
.pals-featured__note{
	font-weight: 600;
	color: var(--pals-ink);
	margin-right: 4px;
}
.pals-featured__details{
	font-weight: 600;
	color: var(--pals-ink);
	white-space: nowrap;
	text-decoration: underline;
	margin-left: 4px;
}

/* Shared button used by the Register control. Class also defined by theme —
   we scope to .pals-featured__register so the theme's own .pals-btn is unaffected. */
.pals-featured__register.pals-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 16px;
	border-radius: 10px;
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
}
.pals-featured__register.pals-btn--ink{
	background: var(--pals-ink);
	color: #fff;
	border: 1px solid var(--pals-ink);
}
.pals-featured__register.pals-btn--ink:hover{ opacity: .92; }
.pals-featured__register:focus-visible{
	outline: 3px solid var(--pals-accent);
	outline-offset: 2px;
}

/* Mobile: keep register button below the description, tap target guarantees */
@media (max-width: 599px){
	.pals-featured{ margin-top: 18px; border-radius: 14px; }
	.pals-featured__head{ padding: 14px 16px; }
	.pals-featured__head .pals-featured__title-h2{ font-size: 18px; }
	.pals-featured__item{
		display: grid;
		grid-template-areas:
			"title"
			"chips"
			"desc"
			"cta";
		gap: 8px;
		padding: 14px 16px;
	}
	.pals-featured__top{ display: contents; }
	.pals-featured__title{ grid-area: title; font-size: 16.5px; }
	.pals-featured__chips{ grid-area: chips; }
	.pals-featured__desc{ grid-area: desc; font-size: 13.5px; }
	.pals-featured__register{
		grid-area: cta;
		justify-self: start;
		min-height: 44px;
	}
	.pals-chip{ font-size: 12px; }
}

/* Small nicety for the block editor preview */
.pals-fp-editor-wrap{ pointer-events: none; }

/* ---------------------------------------------------------------
   Two-column hero (desktop >=1024px).
   Applied when the homepage hero wrapper has the pals-hero-twocol class.
   Left column: existing centered lead content (H1, intro, pills, CTA).
   Right column: pals-featured panel.
   Below 1024px it stacks (default DOM order) — mobile-first fallback.
   --------------------------------------------------------------- */
@media (min-width: 1024px){
	.pals-hero-twocol.wp-block-group{
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(420px, 540px);
		gap: clamp(32px, 5vw, 64px);
		align-items: center;
		max-width: 1240px;
		margin-left: auto;
		margin-right: auto;
	}
	/* Kill the theme's constrained-layout child max-width on our two direct children so
	   the columns can breathe. Also zero the panel top margin (it was for the stacked view). */
	.pals-hero-twocol.wp-block-group > .pals-hero__lead,
	.pals-hero-twocol.wp-block-group > .pals-hero__panel{
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}
	.pals-hero-twocol .pals-hero__panel{
		margin-top: 0;
	}
	/* The panel itself already has max-width: 560px and margin auto — reset those so it
	   fills the right column. */
	.pals-hero-twocol .pals-hero__panel .pals-featured{
		max-width: none;
		margin: 0;
	}
}