/* Overrides for layout problems inherited from the WordPress original.
 *
 * Kept separate from compare.css so it is obvious which rules are ours and
 * which belong to the migrated theme. Everything here is scoped as tightly as
 * possible — Kadence's own stylesheets are left untouched so they can be
 * re-mirrored without losing these fixes.
 */

/* --- testimonials carousel, small screens ------------------------------- *
 *
 * Kadence's "outlinewhite" arrow style reserves a 35px gutter each side of
 * .kt-blocks-carousel-init to hold the absolutely-positioned arrows. With
 * three columns on desktop that is fine. On a 390px phone the carousel is one
 * column, and the gutters take 70px of 343px — 20% of the width — leaving a
 * 273px card with a 223px text column floating between two empty margins.
 *
 * The carousel has pagination dots and is drag/swipe enabled, so the arrows
 * are redundant on touch. Reclaiming the gutter widens the text column by 26%.
 */
@media (max-width: 600px) {
	/* Kadence sets this gutter with
	 *   .wp-block-kadence-testimonials .kt-blocks-carousel
	 *     .kt-blocks-carousel-init:not(.kt-carousel-...)
	 * whose :not() holds a class, so it scores four classes. A media query
	 * adds no specificity, so the override has to out-score it on selector
	 * alone — hence matching their ancestor chain and adding .kb-splide.
	 */
	.wp-block-kadence-testimonials .kt-blocks-carousel
	.kt-blocks-carousel-init.splide.kb-splide {
		padding-left: 0;
		padding-right: 0;
	}

	.kt-blocks-testimonials-inner-wrap .splide__arrows {
		display: none;
	}
}

/* --- testimonials carousel, stale column count on resize ---------------- *
 *
 * Splide writes the column count into an inline style on every slide when it
 * initialises — width: calc((100% + gap)/N - gap) — and never recomputes it.
 * Kadence's init does not re-run on resize either.
 *
 * So whenever the layout viewport at init is wider than the final one, the
 * slides keep a desktop N. On a phone that happens on rotation, on a tab
 * restored from memory, or on a page loaded in a background tab. Reproduced
 * by loading at 1280 and resizing to 390 without reloading: the divisor stays
 * at 3 and slides collapse to 91px, wrapping text one character per line.
 *
 * Media queries re-evaluate on resize, so re-asserting the width here fixes
 * it for good. !important is required — this overrides an inline style, which
 * nothing else can beat.
 *
 * The breakpoints below were measured against Splide's own behaviour on this
 * page, not guessed: <=767 -> 1 column, 768-991 -> 2, >=992 -> 3.
 */
.kt-blocks-testimonials-inner-wrap .splide__slide {
	width: calc((100% + var(--global-kb-spacing-md, 2rem)) / 3
	            - var(--global-kb-spacing-md, 2rem)) !important;
}

@media (max-width: 991px) {
	.kt-blocks-testimonials-inner-wrap .splide__slide {
		width: calc((100% + var(--global-kb-spacing-md, 2rem)) / 2
		            - var(--global-kb-spacing-md, 2rem)) !important;
	}
}

@media (max-width: 767px) {
	/* (100% + gap)/1 - gap collapses to 100%. */
	.kt-blocks-testimonials-inner-wrap .splide__slide {
		width: 100% !important;
	}
}

/* --- testimonials, name pinned to the card bottom ----------------------- *
 *
 * Splide stretches every slide to the tallest, so the cream boxes already
 * match; but the name follows the quote, so it sits at a different height in
 * each card. Pin it to the bottom, as on the landing page.
 */
.kt-blocks-testimonials-inner-wrap .kt-testimonial-item-wrap {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* --- pricing: three cards ---------------------------------------------- *
 *
 * Kadence lays the pricing row out as repeat(2, ...) in an inline <style>
 * keyed on the row id. The Trial card makes it three, which only fits side
 * by side on a wide screen; below that the cards stack, as Kadence already
 * does for two cards under 768px.
 */
.kb-row-layout-id1301_a52e27-c1 > .kt-row-column-wrap {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
}
/* Equal-height cards: the column is the grid item, its inner col carries the
 * background, so it has to fill the column. */
.kb-row-layout-id1301_a52e27-c1 > .kt-row-column-wrap > .wp-block-kadence-column,
.kb-row-layout-id1301_a52e27-c1 > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
	height: 100%;
}
@media (max-width: 1100px) {
	.kb-row-layout-id1301_a52e27-c1 > .kt-row-column-wrap {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* Guarantee line pinned to the card bottom so it lines up across cards: the
 * card's inner row is a one-column grid (heading, list, guarantee); make the
 * chain fill the card and push the last block down. */
.kb-row-layout-id1301_a52e27-c1 > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
	display: flex;
	flex-direction: column;
}
.kb-row-layout-id1301_a52e27-c1 > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
.kb-row-layout-id1301_a52e27-c1 > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap > .kt-row-column-wrap {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
.kb-row-layout-id1301_a52e27-c1 > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap > .kt-row-column-wrap > :last-child {
	margin-top: auto;
}
/* Dividers aligned across cards. Only the subscription card has the "Most
 * popular" badge, which pushed its heading, price and divider down. The badge
 * now sits in a reserved strip at the top of every card's heading block, and
 * the description keeps three lines' height so a shorter one cannot lift the
 * divider either. */
.kb-row-layout-id1301_a52e27-c1 .kb-row-layout-wrap > .kt-row-column-wrap > :first-child > .kt-inside-inner-col {
	position: relative;
	padding-top: 31px;
}
.kb-row-layout-id1301_a52e27-c1 .kb-row-layout-wrap > .kt-row-column-wrap > :first-child > .kt-inside-inner-col > .wp-block-kadence-advancedbtn {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
}
.kb-row-layout-id1301_a52e27-c1 .kb-row-layout-wrap > .kt-row-column-wrap > :first-child > .kt-inside-inner-col > p {
	min-height: 3lh;
}
/* Guarantee / "No card needed" line: icon and text on one row. Kadence lets
 * the row wrap, so a line too long for the card dropped the text under the
 * icon and made the paid cards' bottom block taller than the trial's. */
.kb-row-layout-id1301_a52e27-c1 .kb-section-dir-horizontal > .kt-inside-inner-col {
	flex-wrap: nowrap;
}
.kb-row-layout-id1301_a52e27-c1 .kb-section-dir-horizontal > .kt-inside-inner-col > figure {
	flex: 0 0 auto;
}
.kb-row-layout-id1301_a52e27-c1 .kb-section-dir-horizontal > .kt-inside-inner-col > p {
	flex: 1 1 auto;
	min-width: 0;
	/* Two lines' height on every card, so the buttons above line up whether
	 * the text wraps or not. */
	min-height: 2lh;
	display: flex;
	align-items: center;
}
/* Kadence zeroes the margins of a column's direct children, so the gap is
 * padding. */
.kt-inside-inner-col > p.kl-pricing-note {
	margin: 0;
	padding-top: 2.5rem;
	text-align: center;
	color: var(--global-palette9, #fff);
	opacity: .8;
	font-size: .95rem;
}