/* ==========================================================================
   Wall Street Prep certificates (template-wsp-certificates.php, §6.9)
   The hero photo under a blue-ink wash; a discount card overlapping it, with the code on a
   coupon stub (punched notches; the button is css/components.css .roc-coupon); the programs
   ([available_programs], css/available-programs.css); an exclusive FAQ accordion.
   Tokens: css/tokens.css. Loaded only with the site chrome.
   ========================================================================== */

.roc-wsp {
	padding-bottom: var(--roc-space-section);
	background: var(--roc-surface);
}

/* ---------- Hero ---------- */
.roc-wsp-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(40px, 2rem + 4vw, 96px) clamp(96px, 4rem + 6vw, 152px); /* room for the card's overlap */
	background: var(--roc-ink);
	color: var(--roc-white);
}

.roc-wsp-hero__img.roc-wsp-hero__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}

/* A wash dark enough for white text on any part of the photo */
.roc-wsp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg, rgba(2, 6, 23, 0.9) 0%, rgba(30, 58, 138, 0.82) 55%, rgba(30, 64, 175, 0.62) 100%);
}

.roc-wsp-hero__inner {
	display: grid;
	justify-items: start;
	gap: var(--roc-space-4);
}

.roc-wsp-hero .roc-breadcrumb.roc-breadcrumb ol {
	color: rgba(255, 255, 255, 0.72);
}

.roc-wsp-hero .roc-breadcrumb.roc-breadcrumb li + li::before {
	color: rgba(255, 255, 255, 0.4);
}

.roc-wsp-hero .roc-breadcrumb.roc-breadcrumb a {
	color: rgba(255, 255, 255, 0.82);
}

.roc-wsp-hero .roc-breadcrumb.roc-breadcrumb a:hover {
	color: var(--roc-white);
}

.roc-wsp-hero .roc-breadcrumb.roc-breadcrumb [aria-current="page"] {
	color: var(--roc-white);
}

.roc-wsp-hero .roc-breadcrumb a:focus-visible {
	outline: var(--roc-focus-on-dark);
	outline-offset: var(--roc-focus-offset);
}

.roc-wsp-hero__title.roc-wsp-hero__title {
	max-width: 16ch;
	margin: 0;
	color: var(--roc-white);
	font: 800 var(--roc-h1) / var(--roc-leading-tight) var(--roc-font-display);
	letter-spacing: var(--roc-tracking-display);
	text-wrap: balance;
}

.roc-wsp-hero__lead {
	max-width: 50ch;
	margin: 0;
	color: rgba(255, 255, 255, 0.88);
	font-size: var(--roc-text-xl);
	line-height: var(--roc-leading-body);
}

/* ---------- Discount card ---------- */
.roc-wsp-offer {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--roc-space-8);
	margin-top: calc(-1 * clamp(64px, 2.5rem + 4vw, 104px));
	padding: clamp(24px, 1rem + 2vw, 44px);
	border: 1px solid var(--roc-border);
	border-radius: var(--roc-radius-xl);
	background: var(--roc-surface);
	box-shadow: var(--roc-shadow-pop);
}

.roc-wsp-offer__text {
	display: grid;
	justify-items: start;
	gap: var(--roc-space-3);
	min-width: 0;
}

.roc-wsp-offer__icon {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--roc-radius-md);
	background: var(--roc-blue-50);
	color: var(--roc-blue-600);
}

.roc-wsp-offer__icon .roc-icon {
	width: 22px;
	height: 22px;
}

.roc-wsp-offer__title.roc-wsp-offer__title,
.roc-wsp-section-title.roc-wsp-section-title {
	margin: 0;
	color: var(--roc-text);
	font: 800 var(--roc-h2) / var(--roc-leading-tight) var(--roc-font-display);
	letter-spacing: var(--roc-tracking-display);
	text-wrap: balance;
}

.roc-wsp-offer__copy {
	max-width: 56ch;
	margin: 0;
	color: var(--roc-text-muted);
	font-size: var(--roc-text-lg);
	line-height: var(--roc-leading-body);
}

/* The coupon stub: a tinted ticket with punched notches at both edges */
.roc-wsp-offer__ticket {
	position: relative;
	display: grid;
	place-items: center;
	min-width: 0;
	padding: clamp(28px, 1.5rem + 1.5vw, 44px) clamp(24px, 1rem + 2vw, 40px);
	border-radius: var(--roc-radius-lg);
	background:
		radial-gradient(circle at 0 50%, var(--roc-surface) 0 12px, transparent 12.5px),
		radial-gradient(circle at 100% 50%, var(--roc-surface) 0 12px, transparent 12.5px),
		var(--roc-blue-50);
}

/* The page's one coupon, a size up from the card coupons */
.roc-wsp-offer__ticket .roc-coupon.roc-coupon {
	align-self: center;
	gap: 14px;
	max-width: 100%;
	min-height: 56px;
	padding: 7px 7px 7px 18px;
	font-size: var(--roc-text-base);
}

.roc-wsp-offer__ticket .roc-coupon__img {
	height: 25px;
}

/* ---------- Programs ---------- */
.roc-wsp-programs {
	margin-top: var(--roc-space-section);
}

.roc-wsp-programs__list {
	margin-top: var(--roc-space-6);
}

/* ---------- FAQ: an exclusive accordion (details name="wsp-faq") ---------- */
.roc-wsp-faq {
	max-width: 860px;
	margin-top: var(--roc-space-section);
}

.roc-wsp-faq__list {
	display: grid;
	gap: var(--roc-space-3);
	margin-top: var(--roc-space-6);
}

.roc-wsp-faq__item {
	border: 1px solid var(--roc-border);
	border-radius: var(--roc-radius-md);
	background: var(--roc-surface);
}

.roc-wsp-faq__item[open] {
	border-color: var(--roc-blue-200);
	box-shadow: var(--roc-shadow-card);
}

.roc-wsp-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--roc-space-4);
	padding: 18px 20px;
	border-radius: var(--roc-radius-md);
	color: var(--roc-text);
	font: 700 var(--roc-h4) / var(--roc-leading-snug) var(--roc-font-display);
	list-style: none;
	cursor: pointer;
}

.roc-wsp-faq__question::-webkit-details-marker {
	display: none;
}

.roc-wsp-faq__question:hover {
	color: var(--roc-blue-700);
}

.roc-wsp-faq__question:focus-visible {
	outline: var(--roc-focus);
	outline-offset: var(--roc-focus-offset);
}

.roc-wsp-faq__question .roc-icon {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--roc-blue-600);
}

.roc-wsp-faq__item[open] .roc-wsp-faq__question .roc-icon {
	rotate: 180deg;
}

.roc-wsp-faq__answer {
	max-width: 68ch;
	margin: 0;
	padding: 0 20px 20px;
	color: var(--roc-text-muted);
	line-height: var(--roc-leading-body);
}

/* ---------- Narrow screens ---------- */
@media (max-width: 860px) {
	.roc-wsp-offer {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--roc-space-6);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.roc-wsp-faq__item {
		transition: border-color var(--roc-fast) var(--roc-ease), box-shadow var(--roc-base) var(--roc-ease);
	}

	.roc-wsp-faq__question .roc-icon {
		transition: rotate var(--roc-base) var(--roc-ease-out);
	}
}

@media (forced-colors: active) {
	.roc-wsp-hero::before {
		background: Canvas;
	}

	.roc-wsp-offer__ticket {
		border: 1px solid CanvasText;
	}
}