/*
Back to Beauty School Bundle landing page - mobile and tablet
Classic Niall on behalf of House Digital

Loaded after landing.css, which it depends on. Breakpoint is Bootstrap's
lg, so 768 to 991 gets the mobile treatment: there is no tablet design.
*/

@media (max-width: 991.98px) {

	/* ------------------------------------------------------- Bundle hero */
	/* The gold "Bundle exclusive" tag sits inline beside the text on
	   desktop. There is no room for that on mobile, so it wraps onto its
	   own full-width line inside the bordered pill. */
	.hero-bundle {

		.highlights {
			.item:last-child {
				display: block;
				padding: 0;
				overflow: hidden;
				position: relative;
				border-radius: 1.25rem;
			}

			.item:last-child .circle {
				position: absolute;
				left: calc(var(--default-gutter-x) * 0.8);
				top: calc(var(--default-gutter-y) * 0.75);
			}

			.item:last-child p {
				padding: calc(var(--default-gutter-y) * 0.5) calc(var(--default-gutter-x) * 0.8) 0 calc(var(--default-gutter-x) * 2.2);
			}

			.tag {
				display: block;
				margin: calc(var(--default-gutter-y) * 0.5) calc(var(--default-gutter-x) * -0.8) 0 calc(var(--default-gutter-x) * -2.2);
				padding: calc(var(--default-gutter-y) * 0.5) 0;
				text-align: center;
				border-radius: 0;
			}
		}

		.bundle-price {
			white-space: nowrap;
			font-size: 0.95rem;

			.bundle-price-figure {
				font-size: 1.35em;
			}
		}
	}

	/* ------------------------------ Ready to grow / Why go back to beauty */
	/* Single column. The number keeps its gutter to the left, as on desktop,
	   and the description sits on the same left edge as the title so each
	   item reads as one indented block hanging off its number. */
	.why-back-to-school {
		/* Narrower than the desktop 4.5rem: the numbers are the same size
		   but there is far less line length to give away. */
		--number-gutter: 2.75rem;

		>.container>.row {
			gap: 2rem 0;
		}

		>.container>.row>.col-lg:first-child,
		>.container>.row>.col-lg:last-child {
			width: 100%;
		}

		>.container>.row>.col-lg:last-child {

			.row:has(> .boxen > .title) {
				padding-left: var(--number-gutter);
				padding-top: 1.25rem;

				/* follows the smaller padding-top above */
				&::before {
					top: 1.4rem;
				}
			}

			.row:has(> .boxen > .title)+.row {
				padding-left: var(--number-gutter);
			}
		}
	}

	/* -------------------------------------------------------- Testimonials */
	/* Swipeable scroll-snap carousel rather than the desktop grid.
	   No JS: the theme's Swiper is not wired up to testimonial blocks,
	   and adding it would mean changing shared templates. */
	.testimonials {

		/* Stacked, so this is the gap between the video and the first
		   testimonial card rather than a column gutter. */
		>.container>.row>.col-lg-4 {
			margin-bottom: 0.75rem;
		}

		.col-lg-8>.row>.col {
			display: flex;
			grid-template-columns: none;
			overflow-x: auto;
			scroll-snap-type: x mandatory;
			gap: 1rem;
			padding-bottom: 1rem;
			scrollbar-width: none;

			&::-webkit-scrollbar {
				display: none;
			}
		}

		.col-lg-8>.row>.col>.row {
			flex: 0 0 82%;
			scroll-snap-align: center;
		}

		/* grid spans are meaningless once the track is flex */
		.col-lg-8>.row>.col>.row:nth-child(1),
		.col-lg-8>.row>.col>.row:nth-child(2),
		.col-lg-8>.row>.col>.row:nth-child(3),
		.col-lg-8>.row>.col>.row:nth-child(4) {
			grid-column: auto;
		}
	}

	/* ------------------------------------------------------ Student Portal */
	.student-portal {
		>.container>.row {
			align-items: stretch;
			overflow: visible;

			/* Stacked, the desktop placement leaves the mark floating in the
			   top right corner with nothing under it. Move it to the foot of
			   the panel at full width, so it sits behind the phone. The
			   element's own background is clipped by the border-radius
			   regardless of the overflow above. */
			background-position: center bottom;
			background-size: 100% auto;
		}

		>.container>.row>.col-lg:first-child {
			padding: 2.5rem 1.5rem;
			border-radius: 1rem 1rem 0 0;
		}

		[class*="padding-wrapper"] {
			padding: 0 !important;
		}

		.highlights .item {
			margin-bottom: 0.35rem;
		}

		/* No background of its own: an opaque panel here would paint over the
		   row's mark, which now sits behind this column. */
		>.container>.row>.col-lg:last-child {
			background: transparent;
			padding: 0 1.5rem;
			border-radius: 0 0 1rem 1rem;

			img {
				width: 100%;
				height: auto;
				object-fit: contain;
			}
		}
	}

	/* ---------------------------------------------------------------- FAQs */
	.faqs .faq-accordion.col-12 {
		width: 100%;
	}
}