/*
 * Native group-classes page.
 *
 * It deliberately uses the shared homepage tokens and controls, while all
 * layout selectors are scoped to this page so legacy Elementor content stays
 * untouched.
 */

.vv-group-classes {
	overflow: clip;
	background: var(--vv-paper);
	color: var(--vv-ink);
}

.vv-group-classes h1,
.vv-group-classes h2,
.vv-group-classes h3,
.vv-group-classes p,
.vv-group-classes figure {
	margin-top: 0;
}

.vv-group-classes h1,
.vv-group-classes h2,
.vv-group-classes h3 {
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1.05;
}

.vv-group-classes h1 {
	max-width: none;
	margin-bottom: 1.05rem;
	font-size: clamp(1.95rem, 3.8vw, 3.75rem);
}

@media (max-width: 39.9375rem) {
	.vv-group-classes h1 {
		max-width: none;
		font-size: clamp(1.85rem, 7.5vw, 2.2rem);
		line-height: 1.05;
		letter-spacing: -0.025em;
	}
}

/* homepage.css deliberately styles its marketing hero heading white. This
 * compact service hero has a pale surface, so its heading must opt back in to
 * the page's dark text token without affecting any dark service sections. */
.vv-group-classes .group-hero h1 { color: var(--vv-ink); }

.vv-group-classes h2 {
	max-width: 20ch;
	margin-bottom: 1rem;
	font-size: clamp(2rem, 3.4vw, 3.25rem);
}

.vv-group-classes h3 {
	margin-bottom: .65rem;
	font-size: clamp(1.32rem, 2.2vw, 1.65rem);
}

.vv-group-classes p { color: var(--vv-ink-soft); }

.group-hero,
.group-classes,
.group-related,
.group-help,
.group-faq,
.group-final { padding-block: clamp(3.5rem, 7vw, 6.25rem); }

.group-hero { padding-top: clamp(2.4rem, 5vw, 4.25rem); background: #f5eee8; }
.group-hero__grid { display: grid; gap: 2rem; }
.group-hero__copy { align-self: center; max-width: 43rem; }
.group-hero__lead { max-width: 42rem; margin-bottom: 1.45rem; font-size: clamp(1.03rem, 1.55vw, 1.2rem); line-height: 1.62; }
.group-hero__actions { align-items: stretch; margin-bottom: 1.5rem; }
.group-hero__actions .button { width: 100%; }
.group-hero__note { max-width: 40rem; margin-bottom: 0; padding: .8rem 0 .05rem .9rem; border-left: .18rem solid var(--vv-red); font-size: .92rem; font-weight: 500; line-height: 1.55; }
.group-hero__media { aspect-ratio: 4 / 3; margin: 0; overflow: hidden; background: #c9d2cb; }
.group-hero__media img,
.group-class-card__media img,
.group-related__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.group-hero__media img { object-position: 50% 50%; }

#group-classes { scroll-margin-top: 7rem; background: var(--vv-paper); }
.group-classes__heading { max-width: 45rem; margin-bottom: 1.85rem; }
.group-classes__grid { display: grid; gap: 1.2rem; }
.group-class-card { min-width: 0; overflow: hidden; border-top: .25rem solid var(--vv-green); background: var(--vv-white); box-shadow: 0 1rem 2.7rem rgb(32 35 45 / .055); }
.group-class-card__media { aspect-ratio: 3 / 2; margin: 0; overflow: hidden; background: #c9d2cb; }
.group-class-card--1 .group-class-card__media img { object-position: 50% 46%; }
.group-class-card--2 .group-class-card__media img { object-position: 50% 34%; }
.group-class-card__content { min-width: 0; padding: clamp(1.35rem, 3vw, 2rem); }
.group-class-card__content > p:not(.group-class-card__price) { margin-bottom: 1.1rem; line-height: 1.58; }
.group-class-card .button { width: fit-content; max-width: 100%; }
.group-class-card__price { margin: 0 0 1.15rem; color: var(--vv-ink) !important; font-size: 1rem; font-weight: 850; }

.group-youth { display: grid; gap: 0; margin-top: clamp(1.2rem, 3vw, 1.7rem); overflow: hidden; border-top: .25rem solid var(--vv-red); background: #f5eee8; }
.group-youth__media { aspect-ratio: 3 / 2; margin: 0; overflow: hidden; background: #c9d2cb; }
.group-youth__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 37%; }
.group-youth__content { min-width: 0; padding: clamp(1.4rem, 3.5vw, 2.4rem); }
.group-youth__content > p:not(.eyebrow) { max-width: 43rem; margin-bottom: 1.25rem; line-height: 1.6; }
.group-youth__details { display: grid; gap: 0; margin: 0 0 1.2rem; border-top: 1px solid rgb(35 74 64 / .25); }
.group-youth__details div { display: grid; grid-template-columns: minmax(5.5rem, .58fr) minmax(0, 1fr); gap: .75rem; padding: .72rem 0; border-bottom: 1px solid rgb(35 74 64 / .18); }
.group-youth__details dt { color: var(--vv-muted); font-size: .76rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.group-youth__details dd { margin: 0; color: var(--vv-ink); font-weight: 800; }
.group-youth__prices { display: flex; flex-wrap: wrap; gap: .45rem .9rem; margin: 0 0 1.3rem; padding: 0; list-style: none; color: var(--vv-ink); font-size: .92rem; font-weight: 800; }
.group-youth__prices li + li { padding-left: .9rem; border-left: 1px solid rgb(35 74 64 / .3); }

.group-related { padding-block: clamp(2.5rem, 4vw, 3.75rem); background: var(--vv-green); color: var(--vv-white); }
.group-related__grid { display: grid; gap: 1.4rem; }
.group-related__media { aspect-ratio: 3 / 2; margin: 0; overflow: hidden; background: #c9d2cb; }
.group-related__media img { object-position: 50% 38%; }
.group-related__copy { align-self: center; max-width: 41rem; }
.group-related h2 { color: var(--vv-white); }
.group-related__copy > p:not(.eyebrow) { max-width: 41rem; margin-bottom: 1.2rem; color: rgb(255 255 255 / .88); font-size: clamp(1rem, 1.45vw, 1.12rem); line-height: 1.58; }
.group-related .eyebrow--light { color: rgb(255 255 255 / .9) !important; }

.group-help { display: grid; gap: 1.15rem; align-items: center; margin-top: clamp(1.2rem, 3vw, 1.7rem); padding: clamp(1.35rem, 3vw, 1.85rem); border-left: .22rem solid var(--vv-red); background: var(--vv-sage); }
.group-help h3 { margin-bottom: .45rem; font-size: clamp(1.22rem, 2vw, 1.5rem); }
.group-help__copy { max-width: 47rem; }
.group-help__copy > p { margin-bottom: 0; font-size: 1rem; line-height: 1.55; }
.group-help .button { width: fit-content; max-width: 100%; }

.group-faq { background: var(--vv-paper); }
.group-faq__inner { display: grid; gap: 1.75rem; }
.group-faq__items { border-top: 1px solid var(--vv-line); }
.group-faq details { border-bottom: 1px solid var(--vv-line); }
.group-faq summary { position: relative; padding: 1.1rem 2.5rem 1.1rem 0; color: var(--vv-ink); cursor: pointer; font-size: 1.02rem; font-weight: 800; list-style: none; }
.group-faq summary::-webkit-details-marker { display: none; }
.group-faq summary::after { position: absolute; top: 1rem; right: .25rem; color: var(--vv-red-deep); content: "+"; font-size: 1.4rem; font-weight: 500; }
.group-faq details[open] summary::after { content: "−"; }
.group-faq__answer { max-width: 44rem; padding: 0 0 1.15rem; }
.group-faq__answer p { margin-bottom: 0; line-height: 1.6; }

.group-final { background: var(--vv-red-dark); color: var(--vv-white); }
.group-final h2 { color: var(--vv-white); }
.group-final p:not(.eyebrow) { max-width: 44rem; color: rgb(255 255 255 / .9); font-size: 1.05rem; line-height: 1.58; }
.group-final__inner { display: grid; gap: 1.75rem; }
.group-final__actions { display: flex; flex-wrap: wrap; gap: .8rem 1.1rem; align-items: center; }
.group-final__phone { width: 100%; color: var(--vv-white); font-weight: 850; }
.group-final .eyebrow--light { color: rgb(255 255 255 / .92) !important; }

@media (min-width: 40rem) {
	.group-hero__actions { flex-direction: row; align-items: center; }
	.group-hero__actions .button { width: auto; }
	.group-classes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.group-class-card__content { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
	.group-youth { grid-template-columns: minmax(16rem, .84fr) minmax(0, 1.16fr); align-items: start; }
	.group-youth__media { align-self: start; }
	.group-help { grid-template-columns: minmax(0, 1fr) auto; gap: 1.75rem; }
}

@media (min-width: 48rem) {
	.group-hero__grid { grid-template-columns: minmax(0, .9fr) minmax(21rem, 1.1fr); align-items: center; gap: clamp(2.5rem, 6vw, 5.5rem); }
	.group-hero__media { min-height: 30rem; }
	.group-related__grid { grid-template-columns: minmax(15rem, .68fr) minmax(0, 1.32fr); align-items: center; gap: clamp(2rem, 5vw, 4rem); }
	.group-related__media { min-height: 16rem; }
	.group-faq__inner { grid-template-columns: minmax(14rem, .75fr) minmax(0, 1.25fr); gap: clamp(2rem, 8vw, 7rem); }
	.group-final__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2.5rem; }
	.group-final__actions { justify-content: flex-end; max-width: 19rem; }
	.group-final__phone { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.group-faq summary { scroll-behavior: auto; }
}