/*
Back to Beauty School Bundle landing page
Classic Niall on behalf of House Digital
Additions only. Nothing here overrides core theme styles outside
the landing page's own scoped classes.
*/

/* ---------------------------------------------------------- Content cards */
.content-cards {
	.content-card {
		height: 100%;
		padding: calc(var(--default-gutter-y) * 1) calc(var(--default-gutter-x) * 1);
		border: 1px solid transparent;
		border-radius: 12px;
		transition: var(--transition-background), var(--transition-border), box-shadow 0.25s ease-in-out;

		&:hover {
			background: var(--color-grey);
			border-color: var(--color-grey-darker);
			box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
		}
	}

	/* First card runs double width */
	>.col-12:first-child {
		@media (min-width: 992px) {
			flex: 0 0 auto;
			width: 50%;
		}
	}

	.content-card-image {
		overflow: hidden;

		img {
			display: block;
			height: 300px;
			object-fit: cover;
		}
	}

	.content-card-label {
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}

	.button {
		background: var(--color-white);
		color: var(--color-primary);

		&:after {
			background: var(--color-primary);
			color: var(--color-white);
		}

		&:hover {
			background: var(--color-grey);
			color: var(--color-primary);
		}
	}
}

/* ----------------------------------------------------------- Course cards */
.course-cards {
	/* Four cards across is tight at the theme's default gutter. The row
	   gutter matters once they wrap to two-up below lg. */
	--bs-gutter-x: 2.5rem;
	--bs-gutter-y: 2.5rem;

	.course-card {
		height: 100%;

		>.row:last-child {
			margin-top: auto !important;
		}
	}

	.course-card-author .boxen p {
		white-space: nowrap;
	}

	.course-card-video .ratio {
		--bs-aspect-ratio: 125%;
	}

	.course-card-author-image {
		overflow: hidden;
		width: calc(var(--default-gutter-x) * 2);

		img {
			display: block;
			aspect-ratio: 1 / 1;
			object-fit: cover;
		}
	}
}

/* ------------------------------------------------------------ Bundle hero */
.hero-bundle {
	--hero-max: 1400px;
	padding-top: 0 !important;
	overflow: hidden;

	>.container-fluid {
		padding-left: 0;
		padding-right: 0;

		/* The section itself has no top padding so the image column can bleed
		   to the header. The text column gets its own, to hold the rating
		   badge off the nav.

		   Stacked, so the two columns are full width and the padding has to
		   stay symmetrical or the text block reads as off-centre. */
		>.row>.col-12.col-lg-6:first-child {
			padding-top: calc(var(--default-gutter-y) * 1.5);
			padding-left: calc(var(--default-gutter-x) * 2);
			padding-right: calc(var(--default-gutter-x) * 2);
		}

		/* Side by side. The left padding centres the text column against the
		   capped hero width; the right one is just a gutter to the image. */
		@media (min-width: 992px) {
			>.row>.col-12.col-lg-6:first-child {
				padding-top: calc(var(--default-gutter-y) * 3);
				padding-left: max(calc(var(--default-gutter-x) * 2), calc((100vw - var(--hero-max)) / 2));
				padding-right: calc(var(--default-gutter-x) * 3);
			}
		}

		>.row>.col-12.col-lg-6:last-child {
			padding-left: 0;
			padding-right: 0;

			.rounded {
				border-radius: 0 !important;
			}

			.shadowed {
				box-shadow: none;
			}
		}
	}

	.title.xl {
		line-height: 1.05;
		max-width: 14ch;
		letter-spacing: -1.5px;
		font-weight: 700;
	}

	.highlights {
		/* The "You'll Receive" list reads as a tight group, not a spaced
		   list, so it runs closer than the theme default. */
		row-gap: calc(var(--default-gutter-y) * 0.4);

		.item {
			align-items: center;
			gap: calc(var(--default-gutter-x) * 0.5);
			border: 1px solid transparent;
			border-radius: 999px;
			padding: calc(var(--default-gutter-y) * 0.4) calc(var(--default-gutter-x) * 0.8);
			width: fit-content;

			p {
				margin: 0;
			}
		}

		.item:last-child {
			border-color: var(--gold);
			padding-right: 0;
			overflow: hidden;
		}

		.tag {
			display: inline-block;
			background: var(--gold);
			color: var(--color-white);
			font-weight: 500;
			border-radius: 0;
			padding: calc(var(--default-gutter-y) * 0.4) calc(var(--default-gutter-x) * 1);
			margin: calc(var(--default-gutter-y) * -0.4) 0;
			margin-left: calc(var(--default-gutter-x) * 0.75);
		}
	}

	.bundle-price {
		strong {
			font-weight: 700;
		}

		.bundle-price-figure {
			font-size: 1.5em;
			font-weight: 700;
		}
	}
}

/* --------------------------------------------------------- As featured in */
.as-featured {
	text-align: center;

	.title {
		font-weight: 500;
		color: #616161;
	}

	.logosSwiper {
		justify-content: center;
		row-gap: calc(var(--default-gutter-y) * 2);

		.swiper-slide img {
			max-height: 34px;
			width: auto;
			object-fit: contain;
		}
	}
}

.cta-band .row {
	justify-content: center;
}

/* ---------------------------------------------------------- Dark sections */
/* The Background Colour select offers white and grey only, so the
   black bands in the design are handled by their custom class. */
.testimonials,
.testimonials-cta,
.ready-to-start {
	background: var(--color-primary);
	color: var(--color-white);

	.title,
	:is(h1, h2, h3, h4, h5, h6),
	p,
	.blockquote,
	.blockquote-footer {
		color: var(--color-white);
	}

	.button:not(.outline) {
		background: var(--color-white);
		color: var(--color-primary);

		/* invert the arrow: white glyph on a dark circle */
		&:after {
			background: var(--color-primary);
			color: var(--color-white);
		}
	}
}

/* ----------------------------------------------------------- Page chrome  */
/* The design runs the header straight into the hero, so the delivery
   and finance strip is suppressed on this page only. */
body.landing .sub-header {
	display: none;
}

/* Gold ticks throughout the landing page */
body.landing {
	--gold: #9e6c21;

	.highlights .item .circle {
		background: none !important;
		background-color: transparent !important;
		border: none !important;
		border-radius: 0 !important;
		color: var(--gold) !important;
		width: auto !important;
		height: auto !important;
		min-width: 0 !important;
		font-size: 0.9rem !important;
	}
}

/* ----------------------------------------------------------------- Buttons */
/* The landing page's calls to action carry more weight than a button in the
   rest of the store, so they run a step larger. The arrow circle is sized in
   px by the theme and has to be scaled with them or it sits small in the pill. */
body.landing .button.standard {
	min-height: 54px;
	font-size: 1.0625rem;
	padding-left: calc(var(--default-gutter-x) * 2.4);
	padding-right: calc(var(--default-gutter-x) * 0.5);

	&:after {
		width: 40px;
		height: 40px;
	}
}

/* ------------------------------------------------ Shared section furniture */
/* The eyebrow label above each section heading. It is an ordinary small
   paragraph row in the data, so it is styled by position. */
.why-back-to-school,
.testimonials,
.student-portal,
.faqs {
	.boxen.sm-text:first-of-type p {
		letter-spacing: 0.12em;
		text-transform: uppercase;
		font-weight: 600;
	}

	h2.title {
		font-size: clamp(2rem, 3.2vw, 2.75rem);
		line-height: 1.12;
	}
}

/* ------------------------------ Ready to grow / Why go back to beauty school */
/* Left column: eyebrow, heading, paragraph.
   Right column: four numbered items. The numbers are a CSS counter,
   the markup carries no number content. */
.why-back-to-school {
	--gutter: 4rem;

	>.container>.row {
		gap: 0 var(--gutter);
		counter-reset: grow-item;
	}

	>.container>.row>.col-lg:first-child {
		flex: 0 0 auto;
		width: calc(38% - (var(--gutter) / 2));
		align-self: flex-start !important;
	}

	>.container>.row>.col-lg:last-child {
		flex: 0 0 auto;
		width: calc(62% - (var(--gutter) / 2));

		/* a title row opens each item */
		.row:has(> .boxen > .title) {
			counter-increment: grow-item;
			border-top: 1px solid var(--color-grey-darker, rgba(0, 0, 0, 0.12));
			padding-top: 1.5rem;
			padding-left: 4.5rem;
			position: relative;

			&::before {
				content: counter(grow-item, decimal-leading-zero);
				position: absolute;
				left: 0.5rem;
				top: 1.6rem;
				font-size: 0.8rem;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.65);
				font-variant-numeric: tabular-nums;
			}
		}

		/* the paragraph row that follows it */
		.row:has(> .boxen > .title)+.row {
			padding-left: 4.5rem;
			padding-bottom: 1.5rem;
		}

		.row:last-child {
			border-bottom: 1px solid var(--color-grey-darker, rgba(0, 0, 0, 0.12));
		}
	}

	.title.sm {
		display: block;
		font-size: 1.25rem;
		font-weight: 700;
		margin-bottom: 0.25rem;
	}
}

/* ----------------------------------------------------------- Testimonials */
/* col-12 heading, col-lg-4 video, col-lg-8 cards in an uneven 2-up grid. */
.testimonials {
	padding-bottom: 0 !important;

	/* Close the channel between the video and the card grid. Only the two
	   facing paddings are touched, not the row gutter, so the section
	   heading stays aligned with the rest of the page. Columns stack below
	   lg, where these paddings are the outer edges and must stay put. */
	@media (min-width: 992px) {
		>.container>.row>.col-lg-4 {
			padding-right: calc(var(--default-gutter-x) * 0.6);
		}

		>.container>.row>.col-lg-8 {
			padding-left: calc(var(--default-gutter-x) * 0.6);
		}
	}

	/* video column: pinned to the top and held to a portrait ratio,
	   otherwise it stretches to the full height of the card grid.

	   The theme wraps the video in Bootstrap's .ratio.ratio-9x16, so the
	   ratio has to be set on that wrapper. Setting it on the video instead
	   leaves the wrapper at 9:16 and the video floating in the top of it -
	   a quarter of the box empty, which is barely visible in a third-width
	   desktop column but is 157px of dead space once it goes full width. */
	>.container>.row>.col-lg-4 {
		align-self: start;

		.ratio {
			/* 3 / 4 as Bootstrap's percentage of width */
			--bs-aspect-ratio: 133.3333%;
		}

		/* .ratio positions its child absolutely at the full size of the box,
		   so the video fills it rather than sizing itself. */
		.ratio>:is(video, img) {
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 0.75rem;
		}
	}

	/* cards column: the stacked rows become a 12-column grid */
	.col-lg-8>.row>.col {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: 1rem 1.5rem;
		grid-auto-rows: 1fr;
		align-content: start;
	}

	/* Spacing between cards is the grid's gap. A margin here would be added
	   on top of it, and would push the first card away from the video. */
	.col-lg-8>.row>.col>.row {
		margin: 0 !important;
		padding: 2rem 1.75rem;
		background: var(--color-white);
		border-radius: 0.75rem;
		display: flex;
		align-items: center;
	}

	/* uneven spans: wide/narrow, then narrow/wide */
	.col-lg-8>.row>.col>.row:nth-child(1) {
		grid-column: span 7;
	}

	.col-lg-8>.row>.col>.row:nth-child(2) {
		grid-column: span 5;
	}

	.col-lg-8>.row>.col>.row:nth-child(3) {
		grid-column: span 5;
	}

	.col-lg-8>.row>.col>.row:nth-child(4) {
		grid-column: span 7;
	}

	.col-lg-8 {
		figure {
			margin: 0;
			width: 100%;
			text-align: center;
		}

		/* stars are not in the data, so they are drawn here */
		figure::before {
			content: "\2605\2605\2605\2605\2605";
			display: block;
			color: var(--gold);
			letter-spacing: 0.35em;
			font-size: 1.05rem;
			margin-bottom: 1rem;
		}

		/* the cards are white, so the dark-section colour has to be undone.
		   The quote sits in a <p> inside .blockquote, hence both selectors. */
		.blockquote,
		.blockquote p,
		.blockquote-footer,
		.blockquote-footer p {
			color: var(--color-primary);
		}

		.blockquote {
			font-size: 1rem;
			line-height: 1.5;
			margin: 0;
		}

		.blockquote-footer p span {
			display: block;
			font-weight: 400;
			font-size: 0.85rem;
			color: var(--color-secondary);
			margin-top: 0.15rem;
		}

		.blockquote-footer {
			margin-top: 1.25rem;

			p {
				font-weight: 700;
				font-size: 0.95rem;
				margin: 0;
			}

			/* Bootstrap's em dash before the author */
			&::before {
				content: none;
			}
		}
	}
}

/* The CTA is its own section row. Closing the padding makes it read
   as the foot of the testimonials band. */
.testimonials-cta {
	padding-top: 0 !important;

	.row {
		justify-content: center;
	}
}

/* --------------------------------------------------------- Student Portal */
/* White section holding one inset grey rounded panel across both columns,
   with the phone image bleeding to the panel's right edge. */
.student-portal {

	>.container {
		>.row {
			background-color: var(--color-grey);
			background-image: url('/wp-content/uploads/2026/09/BG-Logo.webp');
			background-repeat: no-repeat;
			background-position: right -2rem top -2rem;
			background-size: 55% auto;
			border-radius: 1rem;
			overflow: hidden;

			.col-lg:first-child {
				padding: 4rem 3rem;
			}

			.col-lg:last-child {
				background: transparent;
				padding: 0;

				.rounded,
				.shadowed {
					border-radius: 0 !important;
					box-shadow: none !important;
				}
			}
		}
	}

	/* the per-column panel wrapper is redundant now the row is the panel */
	.panel {
		background: transparent !important;
		box-shadow: none !important;
		border-radius: 0 !important;
	}

	h2.title {
		font-size: clamp(1.75rem, 2.8vw, 2.4rem);
		line-height: 1.15;
	}

	.highlights .item {
		align-items: center;
		gap: 0.75rem;

		p {
			font-size: 1.05rem;
		}
	}

	/* This section's ticks are filled gold discs with a white glyph,
	   unlike the bare gold ticks used elsewhere on the page. */
	.boxen .highlights .item .circle {
		background-color: var(--gold) !important;
		border-radius: 50% !important;
		color: var(--color-white) !important;
		width: 1.5rem !important;
		height: 1.5rem !important;
		min-width: 1.5rem !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		font-size: 0.7rem !important;

		&::before {
			color: var(--color-white) !important;
		}
	}

	/* App store badges, side by side and small.

	   Both source PNGs are padded out with transparency: Apple-Store.png is
	   an 800x800 canvas holding badge art of 800x238, and Google-Play.png is
	   880x572 holding 811x241. Sizing them by width alone therefore gives two
	   badges of very different apparent heights, which is what made them look
	   oversized and mismatched.

	   The art is centred in both canvases and both share an aspect ratio of
	   ~3.36, so each is cropped back to its own art with object-fit: cover on
	   a box of that ratio. The two widths differ only because Apple's art
	   spans its full canvas width while Google's spans 92% of it. Both run
	   off one variable, so the pair resizes together.

	   Worth replacing with properly trimmed PNGs when there's a chance; this
	   then reduces to a plain height. */
	.boxen p:has(img[src*="Apple-Store"]) {
		--badge-height: 34px;

		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		gap: calc(var(--default-gutter-x) * 0.75);

		a {
			display: block;
			flex: 0 0 auto;
			margin: 0;
			line-height: 0;
		}

		img {
			display: block;
			height: var(--badge-height);
			max-width: none;
			object-fit: cover;
			object-position: center;
		}

		img[src*="Apple-Store"] {
			width: calc(var(--badge-height) * 3.36);
		}

		img[src*="Google-Play"] {
			width: calc(var(--badge-height) * 3.65);
		}
	}
}

/* The grey panel butts straight onto the black band below it. */
.student-portal {
	padding-bottom: 0 !important;
}

/* -------------------------------------------------------- Ready to Start  */
.ready-to-start {
	h2.title {
		font-size: clamp(1.6rem, 2.4vw, 2.1rem);
		margin-bottom: 0.5rem;
	}

	.col-lg-4 .row {
		justify-content: flex-start;
	}
}

/* ------------------------------------------------------------------ FAQs  */
/* Full-width heading over two independent four-item accordions. Two blocks
   rather than one: columns have to move independently, so an open panel on
   one side does not push the other down. */
.faqs {
	--gutter: 4rem;

	h2.title {
		margin-bottom: 2rem;
	}

	.faq-accordion .accordion-item {
		background: transparent !important;
		border: 0 !important;
		border-top: 1px solid var(--color-grey-darker, rgba(0, 0, 0, 0.12)) !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	.faq-accordion.accordion .accordion-item .accordion-button {
		background: transparent !important;
		box-shadow: none !important;
		padding: 1.35rem 2.5rem 1.35rem 0 !important;

		.title {
			font-size: 1.05rem;
			font-weight: 700;
		}
	}

	.faq-accordion.accordion .accordion-item .accordion-body {
		padding: 0 2.5rem 1.5rem 0 !important;

		p {
			font-size: 0.98rem;
			line-height: 1.55;
		}
	}

	/* The theme circles a rotated 'next' arrow (\f101). Swap to the
	   'arrow-down' glyph (\f102) and drop the border and rotation. */
	.faq-accordion.accordion .accordion-item .accordion-button::after {
		content: '\f102';
		border: 0 !important;
		width: auto !important;
		height: auto !important;
		border-radius: 0 !important;
		background: transparent !important;
		color: var(--color-primary) !important;
		font-size: 1.1rem;
		transform: none;
	}

	.faq-accordion.accordion .accordion-item .accordion-button:not(.collapsed)::after {
		transform: rotate(180deg);
	}

	.faq-accordion.accordion .accordion-item .accordion-button:hover::after {
		background-color: transparent !important;
		color: var(--color-primary) !important;
	}

	.faq-accordion .accordion-item {
		margin-top: 0 !important;
	}

	>.container>.row>.col-12:first-child {
		margin-bottom: 0;
	}

	.row.justify-content-center {
		margin-top: 0 !important;
	}
}

.nav-link:not(.active) .label.button {
	border: 1px solid #d1d5dc;
}

.testimonials>.container>.row>.col-lg:first-child,
.faqs>.container>.row>.col-lg:first-child {
	flex: 0 0 100%;
	width: 100%;
}

/* ------------------------------------------- What's Included: training tab */
/* One column: intro, then "What You'll Receive" and "Requirements" stacked.
   The grid is kept purely for its row-gap, since the rows carry no margin.

   The tab's own section has custom class "training-tab" set in ACF, but the
   tab-item template does not print custom classes the way the top-level
   section template does, so this is stuck with the generated ID. Reordering
   the tabs will move it: it is the third tab, "Foundational Training". */
#section-group-1-section-3-pills-3 .col-lg-8>.row>.col {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 1rem;
	align-items: start;
}

.rating-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.rating-badge .trustpilot {
	display: inline-block;
	font-size: 24px;
}