/**
 * Programs page template.
 *
 * Ported from the design's own <style> block plus the repeated inline
 * patterns in "Residential Programs.dc.html". Everything is scoped under
 * .ij-programs so it cannot leak onto the site's other pages.
 */

.ij-programs {
	font-family: var(--font-sans);
	font-weight: 500;
	color: var(--color-text);
	-webkit-font-smoothing: antialiased;
}

.ij-programs a { color: var(--color-link); text-decoration: none; }
.ij-programs a:hover { color: var(--color-link-hover); }

/* ---- Repeated pattern: the pill eyebrow above each section heading ---- */

.ij-programs .ij-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	background: var(--color-success-soft);
	color: var(--brand-green-dark);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

/* ---- Repeated pattern: the primary pill button ---- */

.ij-programs .ij-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	border-radius: var(--radius-pill);
	background: var(--brand-green);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ij-programs .ij-btn-primary:hover { background: var(--brand-green-dark); color: #fff; }

/* ---- Repeated pattern: heading on the left, body on the right ---- */

.ij-programs .ij-prog-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: clamp(40px, 6vw, 120px);
	align-items: start;
}

/* ---- Hero: the country pill ---- */

.ij-programs .ij-country {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 4px 4px 12px;
	border-radius: var(--radius-pill);
	background: var(--slate-100);
}

.ij-programs .ij-country-prefix {
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text);
	white-space: nowrap;
}

.ij-programs .ij-country-pill {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 11px;
	border-radius: var(--radius-pill);
	background: #fff;
	border: 1px solid var(--color-border-strong);
	box-shadow: var(--shadow-low);
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text);
	cursor: pointer;
}

.ij-programs .ij-country-flag {
	width: 14px;
	height: 10px;
	object-fit: cover;
	border-radius: 2px;
	display: block;
}

/* The select covers the whole pill so the entire chip is the control,
   which is how the design behaves. It stays a real <select>, so it keeps
   its keyboard behaviour and its native picker on touch devices. */
.ij-programs .ij-country-select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	font-family: var(--font-sans);
}

/* The select itself is transparent, so the focus ring has to go on the
   chip the reader can actually see. */
.ij-programs .ij-country-pill:focus-within {
	outline: 2px solid var(--brand-green-dark);
	outline-offset: 2px;
}

.ij-programs .ij-country-fallback {
	margin: 12px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 14px;
	font-weight: 600;
}

.ij-programs .ij-country-fallback a { color: var(--brand-green-dark); }

/* ---- Hero: the wide photo ---- */

.ij-programs .ij-prog-hero-media {
	position: relative;
	border-radius: var(--radius-32);
	overflow: hidden;
	height: clamp(420px, 46vw, 600px);
	background: var(--slate-900);
}

/* ---- "How the structure works" ---- */

.ij-programs .ij-prog-feature {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: clamp(40px, 5vw, 96px);
	align-items: center;
}

.ij-programs .ij-prog-feature-media {
	position: relative;
	border-radius: var(--radius-32);
	overflow: hidden;
	min-height: 560px;
	background: var(--slate-100);
}

.ij-programs .ij-prog-point-icon {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-12);
	background: var(--color-success-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--brand-green-dark);
}

/* ---- "Where we finance": the tab switcher ---- */

/* The tablist is only useful once the script has wired it up, so it is
   hidden until then and all the panels render stacked. ij-has-js is set by
   assets/js/programs.js. */
.ij-programs .ij-prog-tablist { display: none; }

.ij-programs.ij-has-js .ij-prog-tablist {
	display: flex;
	align-items: stretch;
	border-radius: var(--radius-32);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--shadow-card);
}

.ij-programs .ij-prog-tab {
	flex: 1 1 0;
	min-width: 0;
	padding: 22px 24px;
	border: none;
	background: transparent;
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 600;
	color: var(--color-text-secondary);
	cursor: pointer;
	text-align: center;
	transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ij-programs .ij-prog-tab:hover { background: var(--slate-50); }
.ij-programs .ij-prog-tab:focus-visible { outline: 2px solid var(--brand-green-dark); outline-offset: -2px; }

.ij-programs .ij-prog-tab[aria-selected="true"] {
	background: var(--brand-green-dark);
	color: #fff;
}

.ij-programs .ij-prog-panel {
	margin-top: 24px;
	border-radius: var(--radius-32);
	background: #fff;
	box-shadow: var(--shadow-card);
	padding: 24px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 32px;
	align-items: stretch;
}

/* `display: grid` above outranks the browser's own `[hidden] { display:
   none }`, so a panel the script hides would stay on screen without this.
   The same mistake shipped twice elsewhere on this site — see the
   "nothing toggled with `hidden` carries an inline display" test. */
.ij-programs .ij-prog-panel[hidden] { display: none !important; }

.ij-programs .ij-prog-panel:focus-visible { outline: 2px solid var(--brand-green-dark); outline-offset: 4px; }

.ij-programs .ij-prog-panel-media {
	position: relative;
	border-radius: var(--radius-24);
	overflow: hidden;
	min-height: 520px;
	background: var(--slate-100);
}

.ij-programs .ij-prog-panel-body {
	padding: 40px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ij-programs .ij-prog-bullets {
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ij-programs .ij-prog-bullets li {
	position: relative;
	padding-left: 18px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text-secondary);
}

/* The design's 6px dot, as a marker rather than an extra element. */
.ij-programs .ij-prog-bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: var(--radius-round);
	background: var(--brand-green);
}

/* ---- #programs: the mosaic ---- */

.ij-programs .offergrid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 24px;
}

.ij-programs .ij-prog-card {
	position: relative;
	border-radius: var(--radius-24);
	overflow: hidden;
	background: var(--slate-900);
}

.ij-programs .ij-prog-card img { display: block; }

/* A card that links somewhere is an <a>. It must still lay out like the
   <div> version, and its own colour must not win over the white copy
   inside it. */
.ij-programs a.ij-prog-card,
.ij-programs a.ij-prog-card:hover { display: block; color: inherit; text-decoration: none; }

.ij-programs .ij-prog-card-link { transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); }
.ij-programs .ij-prog-card-link:hover { transform: translateY(-3px); }
.ij-programs .ij-prog-card-link:focus-visible { outline: 3px solid var(--brand-green); outline-offset: 3px; }

.ij-programs .ij-prog-card-cta {
	margin-top: 20px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
}

.ij-programs .ij-prog-card-link:hover .ij-prog-card-cta { text-decoration: underline; text-underline-offset: 3px; }

.ij-programs .ij-prog-card-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(9, 13, 16, 0.78) 0%,
		rgba(9, 13, 16, 0.5) 42%,
		rgba(9, 13, 16, 0.24) 72%,
		rgba(9, 13, 16, 0.45) 100%
	);
	pointer-events: none;
}

/* ---- #faq ---- */

.ij-programs .ij-prog-faq {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 96px;
	align-items: start;
}

.ij-programs #faq details[open] .faq-chev { transform: rotate(45deg); }
.ij-programs .faq-chev { transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); }
.ij-programs #faq summary { list-style: none; }
.ij-programs #faq summary::-webkit-details-marker { display: none; }
.ij-programs #faq summary:focus-visible { outline: 2px solid var(--brand-green-dark); outline-offset: 2px; }

/* ---- Grid floor on the narrowest phones ----------------------------------
   These grids set a fixed track minimum, and auto-fit collapsing to one column
   does not shrink it: at 32px page padding a 340px track ends past the edge of a
   320px phone. tokens.css carries the same floor for the grids the templates
   set inline; these are declared here, so they need it here. */
@media (max-width: 420px) {
	.ij-programs .ij-prog-split,
	.ij-programs .ij-prog-feature,
	.ij-programs .ij-prog-panel,
	.ij-programs .ij-prog-faq { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (prefers-reduced-motion: reduce) {
	.ij-programs .faq-chev,
	.ij-programs .ij-prog-tab,
	.ij-programs .ij-prog-card-link,
	.ij-programs .ij-btn-primary { transition: none; }
	.ij-programs .ij-prog-card-link:hover { transform: none; }
}

/* ---- Responsive ---- */

/* The design's own breakpoints for the mosaic. */
@media (max-width: 1100px) {
	.ij-programs .offergrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ij-programs .ij-prog-card { grid-column: span 1 !important; }
}

@media (max-width: 640px) {
	.ij-programs .offergrid { grid-template-columns: minmax(0, 1fr); }
}

/* Three 16px tabs side by side stop fitting well before the panels do. */
@media (max-width: 860px) {
	.ij-programs.ij-has-js .ij-prog-tablist {
		flex-direction: column;
		border-radius: var(--radius-24);
	}
	.ij-programs .ij-prog-tab { padding: 16px 20px; }
	.ij-programs .ij-prog-panel-media { min-height: 260px; }
	.ij-programs .ij-prog-panel-body { padding: 16px 8px 8px; }
	.ij-programs .ij-prog-feature-media { min-height: 320px; }
}

@media (max-width: 820px) {
	.ij-programs .ij-prog-faq { gap: 40px; }
}

@media (max-width: 600px) {
	.ij-programs #hero { padding-left: 20px !important; padding-right: 20px !important; }
	.ij-programs #structure,
	.ij-programs #finance,
	.ij-programs #programs,
	.ij-programs #faq { padding-left: 20px !important; padding-right: 20px !important; }
	.ij-programs #structure { padding-top: 72px !important; padding-bottom: 72px !important; }
	.ij-programs #hero h1 { font-size: 26px !important; letter-spacing: -1.1px !important; line-height: 1.14 !important; }
	.ij-programs #structure h2,
	.ij-programs #finance h2,
	.ij-programs #programs h2,
	.ij-programs #faq h2 { font-size: 23px !important; letter-spacing: -0.8px !important; line-height: 1.2 !important; }
	.ij-programs .ij-prog-panel { padding: 16px; }
	.ij-programs .ij-prog-card { min-height: 380px !important; }
	.ij-programs .ij-prog-card > div:last-child { padding: 24px !important; }
}

/* Beaver Builder's Customizer skin sets `h1…h6 { font-family: Helvetica }`
   and loads after this file, so headings on every Programs page (USA,
   Canada, commercial analysis) rendered in Helvetica, not the design's
   Poppins. Same reset as residential.css; the leading `body` outscores the
   skin's bare element selector regardless of load order. (2026-09-29) */
body .ij-programs :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-display); color: var(--color-text); }

/* Tabs + accordion page: the FAQ keeps the design's two columns with an empty
   heading column. Once the grid stacks (below ~808px) that empty cell would
   only add a gap above the questions, so drop it. */
@media (max-width: 800px) {
	.ij-analysis .an-faq-aside:empty { display: none; }
}