/*
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 is a shared theme class, used by any page with a content
   cards section, and this stylesheet loads site-wide. Scoped to body.landing
   so these card styles stay on this page, per the header note above. */
body.landing .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;
	}

	/* The light variant, per the design: no fill and no border at rest, so
	   the label and the solid primary chip sit directly on the section. This
	   is a third button style alongside the theme's solid and outline, and it
	   exists only here - do not reach for it elsewhere. Keeping the border off
	   rather than setting it transparent leaves the base .button's border: 0
	   geometry intact, so the pill matches the others' padding and height.

	   On hover it fills primary and the chip flips to white, which is the
	   outline variant's hover and the only state where a pill shape appears.

	   The template hardcodes class="button" and is shared with other page
	   templates, so the variant is applied here rather than by adding a class
	   to the markup. The hover selector repeats the base's own :not() list so
	   it outranks .button:not(.label, .outline, :disabled), which would
	   otherwise win and fill the pill with the secondary grey. */

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

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

		&:not(.label, .outline, :disabled):hover {
			background-color: var(--color-primary);
			color: var(--color-white);
		}

		&:not(.label, .outline, :disabled):hover:after {
			background-color: var(--color-white);
			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: calc(var(--default-gutter-x) * 0.8);
			overflow: hidden;
		}

		/* With the gold tag, the pill drops its right padding so the tag
		   runs flush to the edge. */
		.item:last-child:has(.tag) {
			padding-right: 0;
		}

		.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;
	}
}

/* The CTA bands centre their row. A centred button that gets wider on hover
   re-centres, so the whole pill slides left by half the growth and the label
   goes with it - the "entire button moves" that the arrow slide is supposed
   to replace. The growth is reserved up front as a right margin that
   collapses on hover instead: the border box still grows to the right by the
   same 15px, but the margin box never changes width, so the row has nothing
   to re-centre and only the pill's right edge moves. */

body.landing :is(.cta-band, .testimonials-cta, .ready-to-start) .button:not(.iconless) {
	margin-right: var(--default-gutter-x);
	transition: var(--transition-background), var(--transition-border), var(--transition-color), margin-right 0.5s ease-in-out;
}

body.landing :is(.cta-band, .testimonials-cta, .ready-to-start) .button:not(.iconless):hover {
	margin-right: 0;
}

/* ------------------------------------------------ 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. */

/* Kept flat: WP Rocket's background lazyload can't parse nested selectors. */
.student-portal > .container > .row {
	background-image: url('/wp-content/uploads/2026/09/BG-Logo.webp');
}

.student-portal {

	>.container {
		>.row {
			background-color: var(--color-grey);
			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;
}
/* Centre a course card when it is the only rendered card in the row */
.course-cards > :only-child {
    margin-left: auto;
    margin-right: auto;
}

/* What's Included: centre incomplete four-column card rows */
#section-group-1-section-3-pills-1 .content-cards:has(> :last-child:nth-child(-n+3)) {
    justify-content: center;
}

/* What's Included tab - desktop layout matching approved visual */
@media (min-width: 992px) {

    /* 50 / 25 / 25 layout */
    #section-group-1-section-3-pills-1 .content-cards {
        align-items: stretch !important;
    }

    #section-group-1-section-3-pills-1 .content-cards > div {
        display: flex !important;
        align-items: stretch !important;
    }

    #section-group-1-section-3-pills-1 .content-cards > div:nth-child(1) {
        flex: 0 0 50%;
        width: 50%;
    }

    #section-group-1-section-3-pills-1 .content-cards > div:nth-child(2),
    #section-group-1-section-3-pills-1 .content-cards > div:nth-child(3) {
        flex: 0 0 25%;
        width: 25%;
    }

    /*
     * Cards only stretch to the height of the tallest card in this row.
     * Do NOT use flex:1 here - that was causing the huge empty area.
     */
    #section-group-1-section-3-pills-1 .content-card {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }

    /*
     * The highlighted card has padding-wrapper, including bottom padding.
     * Give the two plain cards the same bottom inset so all CTA buttons align.
     */
    #section-group-1-section-3-pills-1 .content-card:not(.highlighted) {
        padding-bottom: calc(var(--default-gutter-y) * 2);
    }

    /* Restricted, consistent image height */
    #section-group-1-section-3-pills-1 .content-card-image {
        height: 300px !important;
        min-height: 300px !important;
        overflow: hidden;
        flex: 0 0 300px;
    }

    #section-group-1-section-3-pills-1 .content-card-image img {
        display: block;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center;
    }

    /* Use the template's existing mt-auto CTA row */
    #section-group-1-section-3-pills-1 .content-card > .row:last-child {
        margin-top: auto !important;
    }
}

@media (min-width: 992px) {
    #section-group-1-section-3-pills-1 .content-card.highlighted .content-card-image {
        height: 280px !important;
        min-height: 280px !important;
        flex-basis: 280px;
    }
}

/* What's Included - content alignment tuning */
@media (min-width: 992px) {

    /*
     * Keep the label area consistent across all three cards.
     */
    #section-group-1-section-3-pills-1 .content-card > .row:has(.content-card-label) {
        min-height: 28px;
        align-items: flex-start;
    }

    /*
     * Reserve enough space for a two-line heading.
     * This makes the Product description begin at the same level
     * as the Training and Bundle descriptions.
     */
    #section-group-1-section-3-pills-1 .content-card > .row:has(h3.title) {
        min-height: 76px;
        align-items: flex-start;
    }

    /*
     * Keep the CTA spacing consistent.
     * mt-auto still handles the final alignment.
     */
    #section-group-1-section-3-pills-1 .content-card > .row:last-child {
        margin-top: auto !important;
        padding-top: 20px;
    }

    /*
     * Plain cards need the same effective bottom breathing room
     * as the highlighted/padded card.
     */
    #section-group-1-section-3-pills-1 .content-card:not(.highlighted) {
        padding-bottom: 24px;
    }

    /*
     * The highlighted card already has its own padding-wrapper,
     * so don't add another bottom padding layer to it.
     */
    #section-group-1-section-3-pills-1 .content-card.highlighted > .row:last-child {
        padding-bottom: 0;
    }
}