/* ==========================================================================
   Program pages — section redesign, shared by all 22 program pages:
   Introduction (stat cards, photo, badge), Benefits, Who This Program Is
   For, What Is Included + Investment, Your Teachers, Why Choose Us,
   What Our Students Say and the FAQ.
   Loaded after each page's own stylesheet and program-extras.css
   (inc/program-extras.php). Every rule is scoped to body.sty-program-page
   so it wins over them and never touches any other page.

   Hover colours: neighbouring cards light up in different colours from the
   theme palette (green, saffron, dusk blue, mauve, ochre, olive), set per
   card below as --ps-accent (solid) and --ps-tint (soft background).
   ========================================================================== */
body.sty-program-page { --ps-ease: cubic-bezier(.2, .7, .2, 1); }

/* ---- Colour rotation ---- */
body.sty-program-page :is(.stat-pill, .grid-3 > .icon-card, .audience-item, .includes-grid li, .instructor-card, .testimonial-grid > .testimonial-card):nth-child(6n+1) { --ps-accent: var(--color-primary); --ps-tint: rgba(47, 93, 80, .1); }
body.sty-program-page :is(.stat-pill, .grid-3 > .icon-card, .audience-item, .includes-grid li, .instructor-card, .testimonial-grid > .testimonial-card):nth-child(6n+2) { --ps-accent: var(--color-secondary); --ps-tint: rgba(217, 138, 61, .13); }
body.sty-program-page :is(.stat-pill, .grid-3 > .icon-card, .audience-item, .includes-grid li, .instructor-card, .testimonial-grid > .testimonial-card):nth-child(6n+3) { --ps-accent: var(--accent-dusk-blue); --ps-tint: rgba(107, 127, 158, .13); }
body.sty-program-page :is(.stat-pill, .grid-3 > .icon-card, .audience-item, .includes-grid li, .instructor-card, .testimonial-grid > .testimonial-card):nth-child(6n+4) { --ps-accent: var(--accent-mauve); --ps-tint: rgba(156, 107, 138, .13); }
body.sty-program-page :is(.stat-pill, .grid-3 > .icon-card, .audience-item, .includes-grid li, .instructor-card, .testimonial-grid > .testimonial-card):nth-child(6n+5) { --ps-accent: var(--accent-ochre); --ps-tint: rgba(181, 137, 74, .15); }
body.sty-program-page :is(.stat-pill, .grid-3 > .icon-card, .audience-item, .includes-grid li, .instructor-card, .testimonial-grid > .testimonial-card):nth-child(6n+6) { --ps-accent: var(--accent-olive); --ps-tint: rgba(122, 143, 92, .14); }

/* ==========================================================================
   Introduction — stat cards, framed photo, badge
   ========================================================================== */
body.sty-program-page .stat-pill {
	position: relative;
	overflow: hidden;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 14px 22px 14px 26px;
	box-shadow: var(--shadow-sm);
	transition: transform 350ms var(--ps-ease), box-shadow 350ms ease, border-color 350ms ease;
}
body.sty-program-page .stat-pill::before {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	background: var(--ps-accent);
}
body.sty-program-page .stat-pill::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--ps-tint);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 450ms var(--ps-ease);
}
body.sty-program-page .stat-pill strong,
body.sty-program-page .stat-pill span { position: relative; z-index: 1; }
body.sty-program-page .stat-pill:hover {
	transform: translateY(-4px);
	border-color: var(--ps-accent);
	box-shadow: 0 14px 30px rgba(43, 38, 32, .12);
}
body.sty-program-page .stat-pill:hover::after { transform: scaleX(1); }

/* Photo: an offset saffron frame behind it that slides in on hover. */
body.sty-program-page .two-col-media { isolation: isolate; }
body.sty-program-page .two-col-media::before {
	content: '';
	position: absolute;
	inset: 22px -22px -22px 22px;
	z-index: -1;
	border: 2px solid rgba(217, 138, 61, .45);
	border-radius: var(--radius-lg);
	transition: transform 500ms var(--ps-ease), border-color 400ms ease;
}
body.sty-program-page .two-col-media img { transition: transform 500ms var(--ps-ease), box-shadow 500ms ease; }
body.sty-program-page .two-col-media:hover::before { transform: translate(-10px, -10px); border-color: var(--color-primary-light); }
body.sty-program-page .two-col-media:hover img { transform: translateY(-4px); box-shadow: 0 26px 56px rgba(43, 38, 32, .2); }

body.sty-program-page .floating-badge {
	min-width: 128px;
	padding: 18px 24px;
	background: linear-gradient(145deg, var(--color-primary), var(--color-primary-dark));
	border: 1px solid rgba(244, 217, 168, .35);
	box-shadow: 0 18px 40px rgba(30, 63, 54, .35);
	transition: transform 450ms var(--ps-ease), box-shadow 450ms ease;
}
body.sty-program-page .floating-badge strong { font-size: 2.1rem; line-height: 1.1; color: #f4d9a8; }
body.sty-program-page .floating-badge span { color: rgba(255, 255, 255, .85); letter-spacing: .1em; }
body.sty-program-page .two-col-media:hover .floating-badge {
	transform: translateY(-6px) rotate(-3deg);
	box-shadow: 0 24px 48px rgba(30, 63, 54, .42);
}

/* ==========================================================================
   Benefits & Why Choose Us — icon cards with a number, colour bar and
   an icon that fills with the card's colour on hover
   ========================================================================== */
body.sty-program-page .grid-3 { counter-reset: ps-card; }
body.sty-program-page .grid-3 > .icon-card {
	counter-increment: ps-card;
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	padding: 32px 28px 30px;
	transition: opacity 700ms ease, transform 400ms var(--ps-ease), box-shadow 400ms ease, border-color 400ms ease;
}
body.sty-program-page .grid-3 > .icon-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--ps-accent), var(--color-gold));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 450ms var(--ps-ease);
}
body.sty-program-page .grid-3 > .icon-card::after {
	content: counter(ps-card, decimal-leading-zero);
	position: absolute;
	top: 20px; right: 26px;
	font-family: var(--font-heading);
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1;
	color: var(--ps-accent);
	opacity: .12;
	transition: opacity 400ms ease, transform 450ms var(--ps-ease);
}
body.sty-program-page .grid-3 > .icon-card .icon-badge {
	background: var(--ps-tint);
	color: var(--ps-accent);
	transition: background 400ms ease, color 400ms ease, border-radius 400ms ease, transform 500ms var(--ps-ease);
}
body.sty-program-page .grid-3 > .icon-card h3 { position: relative; z-index: 1; }
body.sty-program-page .grid-3 > .icon-card:hover {
	transform: translateY(-8px);
	border-color: var(--ps-accent);
	box-shadow: 0 22px 44px rgba(43, 38, 32, .13);
}
body.sty-program-page .grid-3 > .icon-card:hover::before { transform: scaleX(1); }
body.sty-program-page .grid-3 > .icon-card:hover::after { opacity: .28; transform: translateY(-4px) scale(1.08); }
body.sty-program-page .grid-3 > .icon-card:hover .icon-badge {
	background: var(--ps-accent);
	color: #fff;
	border-radius: 50%;
	transform: rotate(-10deg) scale(1.06);
}

/* ==========================================================================
   Who This Program Is For
   ========================================================================== */
body.sty-program-page .audience-item {
	position: relative;
	overflow: hidden;
	align-items: center;
	gap: 16px;
	padding: 20px 22px 20px 24px;
	box-shadow: var(--shadow-sm);
	transition: transform 350ms var(--ps-ease), box-shadow 350ms ease, border-color 350ms ease;
}
body.sty-program-page .audience-item::before {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	background: var(--ps-accent);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 400ms var(--ps-ease);
}
body.sty-program-page .audience-item::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--ps-tint), transparent 75%);
	opacity: 0;
	transition: opacity 400ms ease;
}
body.sty-program-page .audience-item > * { position: relative; z-index: 1; }
body.sty-program-page .audience-item svg {
	width: 40px; height: 40px;
	padding: 9px;
	margin-top: 0;
	border-radius: 50%;
	background: var(--ps-tint);
	color: var(--ps-accent);
	transition: background 400ms ease, color 400ms ease, transform 500ms var(--ps-ease);
}
body.sty-program-page .audience-item:hover {
	transform: translateY(-4px);
	border-color: var(--ps-accent);
	box-shadow: 0 16px 34px rgba(43, 38, 32, .1);
}
body.sty-program-page .audience-item:hover::before { transform: scaleY(1); }
body.sty-program-page .audience-item:hover::after { opacity: 1; }
body.sty-program-page .audience-item:hover svg { background: var(--ps-accent); color: #fff; transform: rotate(-10deg) scale(1.06); }

/* ==========================================================================
   What Is Included + Investment
   ========================================================================== */
body.sty-program-page .includes-grid li {
	border-radius: var(--radius-md);
	padding: 14px 18px;
	box-shadow: var(--shadow-sm);
	transition: transform 300ms var(--ps-ease), box-shadow 300ms ease, border-color 300ms ease, background-color 300ms ease;
}
body.sty-program-page .includes-grid svg {
	width: 32px; height: 32px;
	padding: 7px;
	border-radius: 50%;
	background: var(--ps-tint);
	color: var(--ps-accent);
	transition: background 350ms ease, color 350ms ease, transform 450ms var(--ps-ease);
}
body.sty-program-page .includes-grid li:hover {
	transform: translateY(-3px);
	border-color: var(--ps-accent);
	background-color: #fffdf8;
	box-shadow: 0 12px 26px rgba(43, 38, 32, .1);
}
body.sty-program-page .includes-grid li:hover svg { background: var(--ps-accent); color: #fff; transform: scale(1.1) rotate(-8deg); }

body.sty-program-page .price-box {
	position: relative;
	overflow: hidden;
	border-top: 1px solid var(--color-border);
	padding: 42px 34px 34px;
	background:
		radial-gradient(circle at 100% 0%, rgba(217, 138, 61, .13), transparent 45%),
		radial-gradient(circle at 0% 100%, rgba(47, 93, 80, .1), transparent 50%),
		var(--color-surface);
	transition: opacity 700ms ease, transform 450ms var(--ps-ease), box-shadow 450ms ease;
}
body.sty-program-page .price-box::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 6px;
	background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-gold), var(--color-primary));
	background-size: 200% 100%;
	transition: background-position 900ms ease;
}
body.sty-program-page .price-box::after {
	content: 'ॐ';
	position: absolute;
	right: -10px; bottom: -34px;
	font-family: var(--font-heading);
	font-size: 9rem;
	line-height: 1;
	color: var(--color-primary);
	opacity: .05;
	pointer-events: none;
	transition: transform 700ms var(--ps-ease), opacity 500ms ease;
}
body.sty-program-page .price-box > * { position: relative; z-index: 1; }
body.sty-program-page .price-box .eyebrow {
	display: inline-flex;
	padding: 6px 16px;
	border-radius: 999px;
	background: rgba(217, 138, 61, .13);
	color: var(--color-secondary-dark);
}
body.sty-program-page .price-box .price { transition: color 400ms ease; }
body.sty-program-page .price-box:hover {
	transform: translateY(-6px);
	box-shadow: 0 28px 60px rgba(43, 38, 32, .16);
}
body.sty-program-page .price-box:hover::before { background-position: 100% 0; }
body.sty-program-page .price-box:hover::after { opacity: .09; transform: rotate(-12deg) scale(1.08); }
body.sty-program-page .price-box:hover .price { color: var(--color-primary); }

/* ==========================================================================
   Your Teachers — cards with a coloured photo ring
   ========================================================================== */
body.sty-program-page .instructor-card {
	position: relative;
	overflow: hidden;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 34px 26px 30px;
	box-shadow: var(--shadow-sm);
	transition: opacity 700ms ease, transform 450ms var(--ps-ease), box-shadow 450ms ease, border-color 450ms ease;
}
body.sty-program-page .instructor-card::before {
	content: '';
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 104px;
	background: linear-gradient(160deg, var(--ps-tint), transparent);
	transition: height 550ms var(--ps-ease);
}
body.sty-program-page .instructor-card > * { position: relative; z-index: 1; }
body.sty-program-page .instructor-card img {
	box-shadow: 0 0 0 5px var(--ps-tint), var(--shadow-md);
	transition: transform 500ms var(--ps-ease), box-shadow 450ms ease;
}
body.sty-program-page .instructor-card .instructor-role {
	display: inline-block;
	padding: 4px 14px;
	border-radius: 999px;
	background: var(--ps-tint);
	color: var(--color-primary-dark);
	color: color-mix(in srgb, var(--ps-accent) 72%, #111);
	transition: background 400ms ease, color 400ms ease;
}
body.sty-program-page .instructor-card:hover {
	transform: translateY(-8px);
	border-color: var(--ps-accent);
	box-shadow: 0 24px 50px rgba(43, 38, 32, .14);
}
body.sty-program-page .instructor-card:hover::before { height: 100%; }
body.sty-program-page .instructor-card:hover img {
	transform: scale(1.05);
	box-shadow: 0 0 0 5px var(--ps-accent), 0 18px 36px rgba(43, 38, 32, .2);
}
body.sty-program-page .instructor-card:hover .instructor-role { background: var(--ps-accent); color: #fff; }

/* ==========================================================================
   What Our Students Say — big quote mark, colour bar, ringed avatar
   ========================================================================== */
body.sty-program-page .testimonial-grid > .testimonial-card {
	position: relative;
	overflow: hidden;
	padding: 30px 28px 26px;
	transition: opacity 700ms ease, transform 450ms var(--ps-ease), box-shadow 450ms ease, border-color 450ms ease;
}
body.sty-program-page .testimonial-grid > .testimonial-card::before {
	content: '\201C';
	position: absolute;
	top: -18px; right: 18px;
	font-family: var(--font-heading);
	font-size: 8rem;
	line-height: 1;
	color: var(--ps-accent);
	opacity: .14;
	pointer-events: none;
	transition: opacity 450ms ease, transform 550ms var(--ps-ease);
}
body.sty-program-page .testimonial-grid > .testimonial-card::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 4px;
	background: var(--ps-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 450ms var(--ps-ease);
}
body.sty-program-page .testimonial-grid > .testimonial-card > * { position: relative; z-index: 1; }
body.sty-program-page .testimonial-grid .testimonial-stars { color: var(--color-gold); font-size: 1.05rem; }
body.sty-program-page .testimonial-grid .testimonial-author {
	gap: 12px;
	padding-top: 16px;
	border-top: 1px dashed var(--color-border);
}
body.sty-program-page .testimonial-grid .testimonial-author img,
body.sty-program-page .testimonial-grid .testimonial-initial {
	box-shadow: 0 0 0 3px var(--ps-tint);
	transition: box-shadow 400ms ease, transform 450ms var(--ps-ease);
}
body.sty-program-page .testimonial-grid .testimonial-initial {
	background: linear-gradient(135deg, var(--ps-accent), var(--color-primary-dark));
}
body.sty-program-page .testimonial-grid > .testimonial-card:hover {
	transform: translateY(-8px);
	border-color: var(--ps-accent);
	box-shadow: 0 24px 50px rgba(43, 38, 32, .14);
}
body.sty-program-page .testimonial-grid > .testimonial-card:hover::before { opacity: .32; transform: rotate(-8deg) scale(1.08); }
body.sty-program-page .testimonial-grid > .testimonial-card:hover::after { transform: scaleX(1); }
body.sty-program-page .testimonial-grid > .testimonial-card:hover .testimonial-author img,
body.sty-program-page .testimonial-grid > .testimonial-card:hover .testimonial-initial {
	box-shadow: 0 0 0 3px var(--ps-accent);
	transform: scale(1.08);
}

/* ==========================================================================
   FAQ — each question is its own card; round "+" button; the open one
   gets a green-to-saffron side bar
   ========================================================================== */
body.sty-program-page .faq-list { max-width: 820px; }
body.sty-program-page .faq-list .faq-item {
	position: relative;
	overflow: hidden;
	margin-bottom: 12px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms var(--ps-ease);
}
body.sty-program-page .faq-list .faq-item::before {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 400ms var(--ps-ease);
}
body.sty-program-page .faq-list .faq-question {
	padding: 18px 22px 18px 24px;
	gap: 16px;
	transition: color 250ms ease;
}
body.sty-program-page .faq-list .faq-question .faq-icon {
	position: relative;
	width: 34px; height: 34px;
	margin-left: 0;
	border-radius: 50%;
	background: rgba(217, 138, 61, .13);
	transition: transform 300ms ease, background 300ms ease;
}
body.sty-program-page .faq-list .faq-question .faq-icon::before,
body.sty-program-page .faq-list .faq-question .faq-icon::after { transition: background 300ms ease; }
body.sty-program-page .faq-list .faq-answer { padding-left: 24px; padding-right: 22px; }
body.sty-program-page .faq-list .faq-item:hover {
	border-color: rgba(217, 138, 61, .55);
	box-shadow: 0 12px 28px rgba(43, 38, 32, .09);
	transform: translateY(-2px);
}
body.sty-program-page .faq-list .faq-item:hover .faq-question { color: var(--color-secondary-dark); }
body.sty-program-page .faq-list .faq-item:hover .faq-icon { background: var(--color-secondary); }
body.sty-program-page .faq-list .faq-item:hover .faq-icon::before,
body.sty-program-page .faq-list .faq-item:hover .faq-icon::after,
body.sty-program-page .faq-list .faq-item.is-open .faq-icon::before,
body.sty-program-page .faq-list .faq-item.is-open .faq-icon::after { background: #fff; }
body.sty-program-page .faq-list .faq-item.is-open {
	border-color: var(--color-primary-light);
	box-shadow: 0 14px 32px rgba(30, 63, 54, .12);
}
body.sty-program-page .faq-list .faq-item.is-open::before { transform: scaleY(1); }
body.sty-program-page .faq-list .faq-item.is-open .faq-question { color: var(--color-primary); }
body.sty-program-page .faq-list .faq-item.is-open .faq-icon { background: var(--color-primary); }

/* ==========================================================================
   Responsive & reduced motion
   ========================================================================== */
@media (max-width: 1024px) {
	/* The badge sits under the photo here (tablet.css), so drop the frame. */
	body.sty-program-page .two-col-media::before { display: none; }
}
@media (max-width: 600px) {
	body.sty-program-page .grid-3 > .icon-card::after { font-size: 2.6rem; top: 18px; right: 20px; }
	body.sty-program-page .price-box { padding: 36px 22px 26px; }
	body.sty-program-page .faq-list .faq-question { padding: 16px 16px 16px 18px; }
	body.sty-program-page .faq-list .faq-answer { padding-left: 18px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	body.sty-program-page :is(.stat-pill, .two-col-media img, .floating-badge, .grid-3 > .icon-card, .icon-badge, .audience-item, .audience-item svg, .includes-grid li, .includes-grid svg, .price-box, .instructor-card, .instructor-card img, .testimonial-grid > .testimonial-card, .faq-list .faq-item),
	body.sty-program-page :is(.stat-pill, .two-col-media, .grid-3 > .icon-card, .audience-item, .price-box, .instructor-card, .testimonial-grid > .testimonial-card, .faq-list .faq-item)::before,
	body.sty-program-page :is(.stat-pill, .grid-3 > .icon-card, .audience-item, .price-box, .testimonial-grid > .testimonial-card)::after { transition: none; }
	body.sty-program-page :is(.stat-pill, .two-col-media img, .floating-badge, .grid-3 > .icon-card, .audience-item, .includes-grid li, .price-box, .instructor-card, .instructor-card img, .testimonial-grid > .testimonial-card, .faq-list .faq-item):hover,
	body.sty-program-page .two-col-media:hover :is(img, .floating-badge),
	body.sty-program-page :is(.grid-3 > .icon-card, .audience-item, .includes-grid li):hover :is(.icon-badge, svg) { transform: none; }
}