/* ==========================================================================
   Mid-page call to action (gs/mid-cta), Launchpad, under the video row

   From Adarsh's export "Mid CTA Section", 7th October 2026.

   Desktop (1200 up): #F9F9F9 band, 48 below. A #E11D2E pill 1201 wide at
   most, radius 59.5, 24 / 32 in, copy left and button right (space-between),
   middles level. Heading 800 32 white, the box 1.3 tall (Figma lists "100%"
   but measures 42); 8 under it the line 400 16 white. Button white, 302 x 69
   (24 / 48 in), full radius, 700 16 #E11D2E, 10 to the 14 Lucide arrow-right.

   Tablet and phone, not drawn: stacked and centred (Adarsh's pick). A red
   block with 24 corners, the heading over the line over the button. Phones:
   heading 24, button the full width.

   White on #E11D2E, and #E11D2E on white, are 4.7:1: AA at 15 and 16px.
   ========================================================================== */

.gs-midcta {
	/* Full bleed, as the bands around it. */
	margin-inline: calc(var(--gs-gutter-now) * -1) !important;
	max-width: none !important;
	padding: 2.5rem var(--gs-gutter-now);                /* phone: 40 */
	background: #F9F9F9;
}

/* Under the video row the gap is the row's to set. */
.gs-reels + .gs-midcta {
	padding-block-start: 0;
}

.gs-midcta__pill {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;                                        /* 20 */
	max-width: 75.0625rem;                               /* 1201 */
	margin-inline: auto;
	padding: 2rem 1.5rem;                                /* 32 / 24 */
	border-radius: 1.5rem;                               /* 24 */
	background: var(--gs-pm-red);
	color: #FFFFFF;
	text-align: center;
}

.gs-midcta__copy {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;                                         /* 8 */
	min-width: 0;
}

.gs-midcta__title {
	margin: 0;
	max-width: none;
	color: #FFFFFF;
	font-size: 1.5rem;                                   /* 24 */
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0;
	text-wrap: balance;
}

.gs-midcta__text {
	margin: 0;
	max-width: none;
	color: #FFFFFF;
	font-size: 0.9375rem;                                /* 15 */
	line-height: 1.45;
	text-wrap: pretty;
}

.gs-midcta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;                                       /* 10 */
	width: 100%;
	padding: 1.125rem 1.5rem;                            /* 57 tall */
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--gs-pm-red);
	font-size: 1rem;                                     /* 16 */
	font-weight: 700;
	line-height: 1.3125;                                 /* 21 */
	text-decoration: none;
	white-space: nowrap;
	touch-action: manipulation;
	transition:
		transform var(--gs-dur-press) var(--gs-ease-out),
		background-color var(--gs-dur-hover) ease,
		color var(--gs-dur-hover) ease;
}

.gs-midcta__btn svg {
	flex: none;
	width: 0.875rem;                                     /* 14 */
	height: 0.875rem;
}

/* `a.` in front: base.css's a:not(.gs-btn):hover (0,2,1) turns link text the
   accent red, which a tap on a touch screen also triggers. */
a.gs-midcta__btn:hover,
a.gs-midcta__btn:focus {
	color: var(--gs-pm-red);
	text-decoration: none;
}

a.gs-midcta__btn:active {
	transform: scale(0.97);
}

.gs-midcta__btn:focus-visible {
	outline: 0.125rem solid #FFFFFF;
	outline-offset: 0.1875rem;
}

/* Ink on hover, the white button turning solid on the red. Mouse only. */
@media (hover: hover) and (pointer: fine) {
	a.gs-midcta__btn:hover {
		background: #0A0A0A;
		color: #FFFFFF;
	}
}

@media (prefers-reduced-motion: reduce) {
	a.gs-midcta__btn:active {
		transform: none;
	}
}

/* --- tablet: still stacked, the frame's type and button --------------------------- */

@media (min-width: 768px) {
	.gs-midcta {
		padding-block: 3rem;                             /* 48 */
	}

	.gs-midcta__pill {
		gap: 1.5rem;                                     /* 24 */
		padding: 2.5rem 2rem;
		border-radius: 2rem;
	}

	.gs-midcta__title {
		font-size: 1.75rem;                              /* 28 */
		line-height: 1.3;
	}

	.gs-midcta__text {
		font-size: 1rem;
		line-height: 1.3;
	}

	.gs-midcta__btn {
		width: auto;
		padding: 1.5rem 3rem;                            /* 302 x 69 */
	}
}

/* --- desktop: the pill -----------------------------------------------------------

   From 1200: the heading sets 688 wide at 32 and needs that beside a 303
   button. Below 1200 it would wrap or drop to 22px, so it stays stacked. */

@media (min-width: 1200px) {
	.gs-midcta__pill {
		flex-direction: row;
		justify-content: space-between;
		gap: 1.5rem;
		padding: 1.5rem 2rem;                            /* 24 / 32 */
		border-radius: 3.71875rem;                       /* 59.5 */
		text-align: start;
	}

	/* 32 from about 1290; a touch smaller between 1200 and that, so it stays
	   on one line (about 30 at 1200). */
	.gs-midcta__title {
		font-size: clamp(1.75rem, 2.48vw, 2rem);
	}

	.gs-midcta__btn {
		flex: none;
	}
}