/* ==========================================================================
   GrowthStudioz — packages

   A grid of package cards on the grey band. Two today; the grid is written for
   any number, so a third package is a post rather than a deploy.
   ========================================================================== */

/* No background, so no full bleed either. The negative margin and the
   padding that put the gutter back existed only to carry a coloured band to
   the viewport edges; with the band gone the section sits in main's gutter
   like an ordinary block and lands on the same 1320 with none of that. */
.gs-packages {
	padding-block: var(--gs-section-pad);
}

.gs-packages__title {
	margin: 0 0 var(--gs-space-6);
	line-height: var(--gs-lh-heading);
}

/* Both headings ship in the markup and CSS picks one. `display: none` rather
   than visual hiding, so the unused wording is out of the accessibility tree
   too and a screen reader hears the heading once. */
.gs-packages__title-short {
	display: none;
}

/* --- the grid ------------------------------------------------------------- */

.gs-packages__grid {
	display: grid;
	/* auto-fit, not a fixed two columns: a third package drops onto the row on
	   its own, and below ~760px of available width the cards stack without a
	   breakpoint being written for it. */
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: var(--gs-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-package {
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: none;
	padding: var(--gs-space-6);
	/* The same gradient edge as the testimonial card, E0E0E0 into FF2222. A
	   border cannot itself hold a gradient, so the card paints two layers: the
	   surface clipped to the padding box, the gradient to the border box. The
	   transparent border is what leaves that gradient showing. */
	border: var(--gs-border-width) solid transparent;
	border-radius: 12px;
	background:
		linear-gradient(var(--gs-surface), var(--gs-surface)) padding-box,
		linear-gradient(135deg, var(--gs-card-border-from) 0%, var(--gs-card-border-to) 100%) border-box;
	/* The illustration sits in the bottom-right corner, absolutely placed, and
	   must not spill past the rounded corner. */
	overflow: hidden;
	/* Own stacking context, so the two background layers above cannot be
	   re-ordered by anything painted inside the card. */
	isolation: isolate;
}

.gs-package__name {
	margin: 0;
	max-width: none;
	font-size: var(--gs-b1);
	font-weight: var(--gs-weight-semibold);
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.gs-package__eyebrow {
	margin: var(--gs-space-2) 0 0;
	max-width: none;
	color: var(--gs-red);
	font-size: var(--gs-b3);
	font-weight: var(--gs-weight-medium);
}

.gs-package__body {
	margin: var(--gs-space-4) 0 0;
	max-width: 46ch;
	color: var(--gs-body-soft);
	font-size: var(--gs-b3);
	line-height: var(--gs-lh-body);
}

/* --- the ticked list ------------------------------------------------------ */

.gs-package__points {
	display: flex;
	flex-direction: column;
	gap: var(--gs-space-2);
	/* The bottom margin is a FLOOR under the button's `margin-block-start:
	   auto`. Auto pushes the button to the card's base, but resolves to zero
	   when the content already fills the card, which left the button flush
	   against this list. Flex margins do not collapse, so this gap always
	   survives and the auto only ever adds to it. */
	margin: var(--gs-space-5) 0 var(--gs-space-5);
	padding: 0;
	list-style: none;
}

.gs-package__point {
	display: grid;
	/* A fixed icon column, so a line that wraps aligns under its own text
	   rather than under the tick. */
	grid-template-columns: 14px minmax(0, 1fr);
	align-items: start;
	gap: var(--gs-space-2);
	max-width: none;
	color: var(--gs-ink);
	font-size: var(--gs-b3);
	line-height: var(--gs-lh-body);
}

.gs-package__tick {
	color: var(--gs-red);
	/* Nudged to sit on the text's baseline rather than its box top. */
	margin-block-start: 0.35em;
}

/* --- CTA ------------------------------------------------------------------ */

/* Fill, ink and hover come from .gs-btn--solid. What stays here is placement
   inside the card, which is genuinely local. */
.gs-package__cta {
	/* Pushed to the bottom so every card's button sits on one line however
	   much copy each carries. */
	margin-block-start: auto;
	align-self: flex-start;
	min-width: 11rem;
	/* Above the illustration, which is absolutely placed behind it. */
	position: relative;
	z-index: 1;
}

.gs-package__cta-icon {
	flex: none;
}

/* --- illustration --------------------------------------------------------- */

.gs-package__art {
	position: absolute;
	right: var(--gs-space-5);
	bottom: var(--gs-space-5);
	width: auto;
	height: auto;
	max-width: 42%;
	max-height: 38%;
	object-fit: contain;
	/* Decorative and behind the content: it must never intercept a click meant
	   for the button beside it. */
	pointer-events: none;
}

/* --- editor-only empty state ---------------------------------------------- */

.gs-packages--empty {
	display: grid;
	place-items: center;
	min-height: 160px;
	padding: var(--gs-space-6);
	border: 1px dashed var(--gs-border);
	background: var(--gs-surface-alt);
	color: var(--gs-body);
}

.gs-packages--empty p {
	margin: 0;
	max-width: none;
}

/* ==========================================================================
   Phones
   ========================================================================== */

@media (max-width: 767px) {
	.gs-packages__title-long {
		display: none;
	}

	.gs-packages__title-short {
		display: block;
	}

	.gs-packages__grid {
		/* One column outright rather than relying on the minmax floor, which a
		   340px card would otherwise overflow on a 360px screen. */
		grid-template-columns: minmax(0, 1fr);
	}

	.gs-package {
		padding: var(--gs-space-5);
	}

	/* Phone type, per Adarsh: body copy 12, button 20 down to 16. The plan name
	   and section heading are not restated, so they keep their desktop steps. */
	.gs-package__eyebrow,
	.gs-package__body,
	.gs-package__point {
		font-size: var(--gs-b5);
	}

	/* The button and the campfire share the bottom of the card, and at a phone
	   width they were colliding: a 176px button plus 111px of artwork does not
	   fit 280px of usable card. The button gives on WIDTH only — its padding
	   and type size are the sitewide button's and are not a section's to
	   change. */
	.gs-package__cta {
		min-width: 0;
	}

	.gs-package__art {
		max-width: 30%;
		max-height: 30%;
	}
}

/* ==========================================================================
   Reduced motion

   A looping campfire is exactly the kind of ambient animation this setting
   exists to stop. A GIF can be frozen from CSS, but a <video> cannot: nothing
   in CSS pauses playback, so that half is done in packages.js. The frame stays
   on screen either way, so the card is never left with a hole.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.gs-package__art {
		animation-play-state: paused;
	}
}