/* ==========================================================================
   Programs page (UI-17)
   No Figma frame exists for this page -- typography and spacing reuse
   the About page's scale through the Programs block in tokens.css,
   which aliases the About tokens, so the two standalone content pages
   read as one system. Enqueued only on /programs/, not site-wide.

   Same reading-measure rule as about.css: the 768px cap goes on the
   CONTENT inside a full-width inner, never on a narrower centered
   container, so the lede, the type grid and the tier grid all share
   one left edge.

   Mobile: both grids collapse to a single column at the site's
   existing 1024px breakpoint. Nothing on this page can overflow a
   narrow viewport (no tables), so that is the only reflow needed.
   ========================================================================== */

.loa-programs {
	background: var(--loa-programs-bg);
}

.loa-programs__inner {
	max-width: var(--loa-programs-max);
	margin: 0 auto;
	padding-inline: var(--loa-programs-pad-x);
}

.loa-programs__section {
	padding-block: var(--loa-programs-section-pad-y);
	border-top: 1px solid var(--loa-programs-rule);
}

/* The first section sits directly under the masthead and does not need
   the divider rule. */
.loa-programs__section--first {
	border-top: 0;
}

/* ---- Masthead ---- */

.loa-programs__masthead {
	padding-top: var(--loa-programs-masthead-pad-top);
	padding-bottom: var(--loa-programs-masthead-pad-bottom);
}

.loa-programs__eyebrow {
	margin: 0 0 var(--loa-programs-eyebrow-gap);
	font-family: var(--loa-font-body);
	font-weight: 500;
	font-size: var(--loa-programs-eyebrow-size);
	letter-spacing: var(--loa-programs-eyebrow-tracking);
	text-transform: uppercase;
	color: var(--loa-programs-eyebrow-color);
}

.loa-programs__title {
	margin: 0;
	font-family: var(--loa-font-display);
	font-weight: 500;
	font-size: var(--loa-programs-title-size);
	line-height: var(--loa-programs-title-line);
	color: var(--loa-programs-title-color);
}

.loa-programs__lede {
	max-width: var(--loa-programs-narrow-max);
	margin: var(--loa-programs-lede-gap) 0 0;
	font-family: var(--loa-font-body);
	font-weight: 300;
	font-size: var(--loa-programs-lede-size);
	line-height: var(--loa-programs-lede-line);
	color: var(--loa-programs-lede-color);
}

/* ---- Shared prose ---- */

.loa-programs__h2 {
	margin: 0 0 var(--loa-programs-h2-gap);
	font-family: var(--loa-font-display);
	font-weight: 500;
	font-size: var(--loa-programs-h2-size);
	color: var(--loa-programs-h2-color);
}

.loa-programs__intro {
	max-width: var(--loa-programs-narrow-max);
	margin: 0 0 48px;
	font-family: var(--loa-font-body);
	font-weight: 300;
	font-size: var(--loa-programs-p-size);
	line-height: var(--loa-programs-p-line);
	color: var(--loa-programs-p-color);
}

/* ---- Program types (2 x 2) ---- */

.loa-programs__type-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--loa-programs-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.loa-programs__type {
	padding: var(--loa-programs-card-pad);
	background: var(--loa-programs-card-bg);
	border: 1px solid var(--loa-programs-card-border);
}

.loa-programs__type-name {
	margin: 0 0 12px;
	font-family: var(--loa-font-display);
	font-weight: 500;
	font-size: var(--loa-programs-card-name-size);
	letter-spacing: var(--loa-programs-card-name-tracking);
	color: var(--loa-programs-card-name-color);
}

.loa-programs__type-text {
	margin: 0;
	font-family: var(--loa-font-body);
	font-weight: 300;
	font-size: var(--loa-programs-p-size);
	line-height: var(--loa-programs-p-line);
	color: var(--loa-programs-p-color);
}

/* The one-line bridge from the program types into the tiers. Set in the
   display italic so it reads as a statement, not a fifth card. */
.loa-programs__types-closing {
	max-width: var(--loa-programs-narrow-max);
	margin: 40px 0 0;
	font-family: var(--loa-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: var(--loa-programs-closing-size);
	line-height: var(--loa-programs-closing-line);
	color: var(--loa-programs-closing-color);
}

/* "Shape Your Program" (UI-17 TN 10, for UI-23): the NAV-05 outlined
   button, left-aligned with the section text, 32px below the bridge
   line. Hover matches the header CTA's interim gold fill. */
.loa-programs__types-cta {
	display: inline-flex;
	align-items: center;
	height: var(--loa-programs-types-cta-h);
	margin-top: var(--loa-programs-types-cta-gap);
	padding-inline: var(--loa-programs-types-cta-pad-x);
	box-sizing: border-box;
	font-family: var(--loa-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--loa-programs-types-cta-tracking);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--loa-gold);
	background: transparent;
	border: 1px solid var(--loa-gold);
	transition: background var(--loa-speed) var(--loa-ease),
	            color var(--loa-speed) var(--loa-ease);
}

.loa-programs__types-cta:hover,
.loa-programs__types-cta:focus-visible {
	background: var(--loa-gold);
	color: #000;
}

.loa-programs__types-cta:focus-visible {
	outline: 2px solid var(--loa-gold);
	outline-offset: 4px;
}

/* ---- Service tiers (3-up, same card as the About page) ---- */

.loa-programs__tier-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--loa-programs-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.loa-programs__tier {
	padding: var(--loa-programs-card-pad);
	background: var(--loa-programs-card-bg);
	border: 1px solid var(--loa-programs-card-border);
}

.loa-programs__tier-name {
	margin: 0 0 8px;
	font-family: var(--loa-font-display);
	font-weight: 500;
	font-size: var(--loa-programs-card-name-size);
	letter-spacing: var(--loa-programs-card-name-tracking);
	color: var(--loa-programs-card-name-color);
}

.loa-programs__tier-fee {
	margin: 0 0 20px;
	font-family: var(--loa-font-body);
	font-weight: 500;
	font-size: var(--loa-programs-fee-size);
	letter-spacing: var(--loa-programs-fee-tracking);
	text-transform: uppercase;
	color: var(--loa-programs-fee-color);
}

.loa-programs__tier-list {
	margin: 0;
	padding-left: 18px;
	/* Nested inside the grid <ul>, so the UA default would be the
	   second-level hollow circle. Pin it. */
	list-style: disc;
	font-family: var(--loa-font-body);
	font-weight: 300;
	font-size: var(--loa-programs-p-size);
	line-height: var(--loa-programs-p-line);
	color: var(--loa-programs-p-color);
}

.loa-programs__tier-list li {
	margin-bottom: 8px;
}

.loa-programs__tier-list li:last-child {
	margin-bottom: 0;
}

/* ---- Council teaser (UI-21) ----
   Photo left, text right, same container as the tiers grid; the photo
   sits in a 3:2 frame (object-fit) and the text centers against it. */

.loa-programs__teaser-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--loa-programs-teaser-gap);
	align-items: center;
}

.loa-programs__teaser-media {
	margin: 0;
}

.loa-programs__teaser-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--loa-programs-teaser-img-bg);
}

.loa-programs__teaser-text {
	max-width: var(--loa-programs-narrow-max);
}

.loa-programs__teaser-body {
	margin: 0 0 var(--loa-programs-h2-gap);
	font-family: var(--loa-font-body);
	font-weight: 300;
	font-size: var(--loa-programs-p-size);
	line-height: var(--loa-programs-p-line);
	color: var(--loa-programs-p-color);
}

/* Same look as the Specialties card CTA (UI-05 TN 15). */
.loa-programs__teaser-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 5px;
	border-bottom: 1px solid var(--loa-programs-teaser-link-underline);
	font-family: var(--loa-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--loa-programs-teaser-link-tracking);
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	transition: color var(--loa-speed) var(--loa-ease),
	            border-color var(--loa-speed) var(--loa-ease);
}

.loa-programs__teaser-link:hover,
.loa-programs__teaser-link:focus-visible {
	color: var(--loa-gold);
	border-color: var(--loa-gold);
}

.loa-programs__teaser-link:focus-visible {
	outline: 2px solid var(--loa-gold);
	outline-offset: 4px;
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 1024px) {
	.loa-programs__inner {
		padding-inline: var(--loa-programs-m-pad-x);
	}

	.loa-programs__section {
		padding-block: var(--loa-programs-m-section-pad-y);
	}

	.loa-programs__masthead {
		padding-top: var(--loa-programs-m-masthead-pad-top);
	}

	.loa-programs__title {
		font-size: var(--loa-programs-m-title-size);
		line-height: var(--loa-programs-m-title-line);
	}

	.loa-programs__lede {
		font-size: var(--loa-programs-m-lede-size);
		line-height: var(--loa-programs-m-lede-line);
	}

	.loa-programs__h2 {
		font-size: var(--loa-programs-m-h2-size);
	}

	/* Criterion #3: every multi-column block collapses to one column. */
	.loa-programs__type-grid,
	.loa-programs__tier-grid,
	.loa-programs__teaser-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.loa-programs__teaser-grid {
		gap: var(--loa-programs-m-teaser-gap);
	}

	.loa-programs__types-closing {
		font-size: var(--loa-programs-m-closing-size);
		line-height: var(--loa-programs-m-closing-line);
	}
}