/**
 * Masterclass supplemental styles.
 *
 * Layout, spacing and typography come from Tailwind utilities in the markup.
 * This file covers only the few pieces that are awkward as pure utilities:
 * the process stepper, the FAQ accordion transition, WYSIWYG prose spacing,
 * and a couple of brand background tints.
 *
 * Brand tokens: orange #fa510f · navy #101f3c · blue #0a96c1
 */

/* ---------- Base type scale ---------- */
/* Base body size for the masterclass templates is small (0.875rem). Headings
   and explicit text-size utilities in the markup override this. */
.ms-scope { font-size: 0.875rem; line-height: 1.6; }

/* Keep the masterclass content constrained and centred even when a theme or
   page-template rule on the live site forces the archive/single main to full
   width. Scoped to masterclass pages only. */
.ms-scope .max-w-6xl,
#masterclass .max-w-6xl {
	max-width: 72rem !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Right-align the archive filter tabs on larger screens — robust even when a
   prod rule neutralises Tailwind's justify-between on the sessions header row. */
@media (min-width: 640px) {
	.ms-filter-tabs { margin-left: auto !important; }
}

/* ---------- Brand background tints ---------- */
.ms-bg-peach { background-color: #fdeee7; }
.ms-bg-cream { background-color: #fdf9f5; }
.ms-navy     { background-color: #101f3c; }

/* ---------- Hero (full-bleed gradient + curvy bottom) ---------- */
/* Vertical gradient — light at top, warming to peach at the bottom — matching
   the standard hero bands elsewhere on the site, so the white wave reads. */
.ms-hero {
	position: relative;
	background: linear-gradient(180deg, #fffaf7 0%, #fde6d8 45%, #fbd9c4 100%);
}
.ms-hero .ms-hero-decor::before { width: 360px; height: 360px; top: -90px; left: -70px; background: rgba(250, 81, 15, 0.05); }
.ms-hero .ms-hero-decor::after  { width: 300px; height: 300px; bottom: -130px; left: 34%; background: rgba(250, 81, 15, 0.035); }

/* Curvy bottom: a white wave that transitions the hero into the white section
   below (same treatment as the other page heroes). Sits flush at the bottom. */
.ms-hero-wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;          /* hide sub-pixel seam */
	width: 100%;
	line-height: 0;
	z-index: 1;
	pointer-events: none;
}
.ms-hero-wave svg {
	display: block;
	width: 100%;
	height: 48px;
}
@media (min-width: 768px) {
	.ms-hero-wave svg { height: 72px; }
}

/* Hero image: rounded, with a subtle orange accent peeking at the bottom */
.ms-hero-media { position: relative; display: block; }
.ms-hero-media::before {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateY(8px);
	background: #fa510f;
	border-radius: 1rem;
	z-index: 0;
}
.ms-hero-media img {
	position: relative;
	z-index: 1;
	display: block;
	border-radius: 1rem;
}

/* Soft decorative circles behind the hero */
.ms-hero-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ms-hero-decor::before,
.ms-hero-decor::after {
	content: "";
	position: absolute;
	border-radius: 9999px;
	background: rgba(250, 81, 15, 0.10);
}
.ms-hero-decor::before { width: 320px; height: 320px; top: -60px; left: -80px; }
.ms-hero-decor::after  { width: 220px; height: 220px; bottom: -70px; left: 30%; background: rgba(250, 81, 15, 0.07); }

/* ---------- Process stepper ---------- */
.ms-stepper { position: relative; }
.ms-steps-grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) {
	.ms-steps-grid {
		grid-template-columns: repeat(var(--ms-steps, 5), minmax(0, 1fr));
		gap: 1.5rem;
	}
}
/* horizontal connector line behind the nodes (desktop) */
.ms-stepper__track {
	position: absolute;
	top: 22px;
	left: 10%;
	right: 10%;
	height: 2px;
	background: #fa510f;
	opacity: 0.35;
	z-index: 0;
}
.ms-step__node {
	position: relative;
	z-index: 1;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: #fa510f;
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
	box-shadow: 0 0 0 6px #fff;
}
@media (max-width: 767px) {
	.ms-stepper__track { display: none; }
}

/* ---------- FAQ accordion ---------- */
.ms-faq-item + .ms-faq-item { border-top: 1px solid rgba(16, 31, 60, 0.10); }
.ms-faq-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	text-align: left;
	padding: 1.35rem 0;
	color: #101f3c;
	font-weight: 700;
}
.ms-faq-icon { color: #fa510f; flex: 0 0 auto; transition: transform .25s ease; }
.ms-faq-answer {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height .3s ease, opacity .3s ease, padding .3s ease;
}
.ms-faq-item.is-open .ms-faq-answer {
	max-height: 500px;
	opacity: 1;
	padding-bottom: 1.35rem;
}
.ms-faq-item .ms-faq-icon-plus  { display: block; }
.ms-faq-item .ms-faq-icon-minus { display: none; }
.ms-faq-item.is-open .ms-faq-icon-plus  { display: none; }
.ms-faq-item.is-open .ms-faq-icon-minus { display: block; }

/* ---------- WYSIWYG prose spacing ---------- */
.ms-prose p { margin-bottom: 1rem; }
.ms-prose p:last-child { margin-bottom: 0; }
.ms-prose strong { font-weight: 700; }
.ms-prose a { color: #fa510f; text-decoration: underline; }

/* ---------- Takeaways image/navy overlap ---------- */
.ms-takeaways-panel { margin-top: -4rem; }
@media (max-width: 767px) {
	.ms-takeaways-panel { margin-top: -2rem; }
}

/* ---------- Aspect ratios / clamp / anchor (v2-safe helpers) ---------- */
.ms-ratio-4x3  { aspect-ratio: 4 / 3; }
.ms-ratio-16x10 { aspect-ratio: 16 / 10; }
.ms-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ms-anchor { scroll-margin-top: 6rem; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.ms-faq-answer, .ms-faq-icon { transition: none; }
}