/* ============================================================
 * Keystone Step Grid
 * ============================================================
 * Full-width section with intro (heading + lead) followed by a
 * grid of step / process cards. Each card may optionally include
 * a CTA button. Two gradient variants exist for visual rhythm
 * on highlight cards (--accent, --brand).
 *
 * Pattern slug: keystone/step-grid
 * Replaces the legacy "7 days away" process block on
 * /rma-badges/ and is reusable for any onboarding / how-it-works
 * / process explanation block.
 *
 * Variants:
 *   .keystone-step-card--accent   (gradient blue)
 *   .keystone-step-card--brand    (gradient navy)
 * ============================================================ */

.keystone-step-grid {
	--keystone-step-grid-bg:        transparent;
	--keystone-step-grid-heading:   var(--wp--preset--color--contrast, #111111);
	--keystone-step-grid-text:      var(--wp--preset--color--contrast, #111111);

	--keystone-step-card-bg:        var(--keystone-card-bg, #f1f1f4);
	--keystone-step-card-text:      #1a1a1a;
	--keystone-step-card-radius:    var(--keystone-card-radius, 14px);

	/* Gradient variants — brand layer overrides these. */
	--keystone-step-card-accent-bg: linear-gradient(135deg, #3a6bff 0%, #1a4ad6 100%);
	--keystone-step-card-brand-bg:  linear-gradient(135deg, #1a1a72 0%, #0d0d4d 100%);

	/* CTA — flat solid (matches Swift Cargo nav button language). */
	--keystone-step-cta-bg:         #1a1a72;
	--keystone-step-cta-bg-hover:   #2a2a92;
	--keystone-step-cta-text:       #ffffff;

	background:     var(--keystone-step-grid-bg);
	color:          var(--keystone-step-grid-text);
	padding-block:  clamp(2.5rem, 6vw, 5rem);
	padding-inline: var(--wp--preset--spacing--50, clamp(30px, 5vw, 50px)) !important;

	margin-top:    0 !important;
	margin-bottom: 0 !important;
}

.keystone-step-grid__inner {
	display:        flex;
	flex-direction: column;
	gap:            clamp(1.5rem, 3vw, 2.5rem);
	max-width:      var(--wp--style--global--wide-size, 1340px);
	margin-inline:  auto;
}

/* ── Intro ─────────────────────────────────────────────────── */
.keystone-step-grid__intro {
	display:        flex;
	flex-direction: column;
	gap:            0.5rem;
}

.keystone-step-grid__heading {
	color:          var(--keystone-step-grid-heading);
	margin:         0;
	font-size:      clamp(1.5rem, 3.5vw, 2.25rem);
	line-height:    1.2;
	font-weight:    700;
	letter-spacing: -0.01em;
}

.keystone-step-grid__lead {
	color:       var(--keystone-step-grid-text);
	margin:      0;
	font-size:   var(--wp--preset--font-size--medium, 1rem);
	line-height: 1.6;
}

/* ── Card grid ─────────────────────────────────────────────── */
.keystone-step-grid__grid {
	display:               grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap:                   clamp(1rem, 2vw, 1.5rem);
}

@media (max-width: 1023px) {
	.keystone-step-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.keystone-step-grid__grid { grid-template-columns: 1fr; }
}

/* ── Card ──────────────────────────────────────────────────── */
.keystone-step-card {
	display:        flex;
	flex-direction: column;
	gap:            0.75rem;
	padding:        clamp(1.25rem, 2vw, 1.75rem);
	background:     var(--keystone-step-card-bg);
	color:          var(--keystone-step-card-text);
	border-radius:  var(--keystone-step-card-radius);
	min-height:     220px;

	box-shadow:     var(--keystone-card-shadow);
	transition:     var(--keystone-card-shadow-transition);
}

.keystone-step-card:hover {
	box-shadow: var(--keystone-card-shadow-hover);
	transform:  var(--keystone-card-hover-transform);
}

.keystone-step-card__heading {
	margin:       0;
	font-size:    1.125rem;
	line-height:  1.3;
	font-weight:  600;
	color:        inherit;
}

.keystone-step-card__body {
	margin:       0;
	font-size:    var(--wp--preset--font-size--medium, 1rem);
	line-height:  1.5;
	color:        inherit;
}

/* Push CTA to the bottom of any card that has one and right-align it. */
.keystone-step-card__cta-wrap {
	margin-top:   auto;
	padding-top:  0.75rem;
	display:      flex;
	justify-content: flex-end;
}

/* ── CTA — flat solid pill, jiggle on hover ────────────────── */
.keystone-step-card__cta {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	padding:         0.625rem 1.25rem;
	border:          0;
	border-radius:   999px;
	background:      var(--keystone-step-cta-bg);
	color:           var(--keystone-step-cta-text);
	font-weight:     600;
	font-size:       0.95rem;
	line-height:     1.2;
	text-decoration: none;
	cursor:          pointer;
	transition:      background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.keystone-step-card__cta:hover,
.keystone-step-card__cta:focus-visible {
	background: var(--keystone-step-cta-bg-hover);
	animation:  keystone-button-jiggle 0.4s ease;
	box-shadow: 0 4px 12px rgba(26, 26, 114, 0.4);
}

/* ── Variant: --accent (gradient blue) ─────────────────────── */
.keystone-step-card--accent {
	background: var(--keystone-step-card-accent-bg);
	color:      #ffffff;
}

/* ── Variant: --brand (gradient navy) ──────────────────────── */
.keystone-step-card--brand {
	background: var(--keystone-step-card-brand-bg);
	color:      #ffffff;
}

/* CTA on coloured variants flips to a light pill so it stays legible. */
.keystone-step-card--accent .keystone-step-card__cta,
.keystone-step-card--brand .keystone-step-card__cta {
	background: #ffffff;
	color:      var(--keystone-step-grid-heading, #1a1a72);
}

.keystone-step-card--accent .keystone-step-card__cta:hover,
.keystone-step-card--accent .keystone-step-card__cta:focus-visible,
.keystone-step-card--brand .keystone-step-card__cta:hover,
.keystone-step-card--brand .keystone-step-card__cta:focus-visible {
	background: #f5f7ff;
}

/* ============================================================
 * BRAND: VaaSBlock
 * ============================================================ */
body.brand-vaasblock .keystone-step-grid {
	--keystone-step-grid-heading: #1a1a72;
	--keystone-step-grid-text:    #1a1a1a;
	--keystone-step-card-bg:      #eef0f4;

	--keystone-step-card-accent-bg: linear-gradient(135deg, #3a6bff 0%, #1a4ad6 100%);
	--keystone-step-card-brand-bg:  linear-gradient(135deg, #1a1a72 0%, #0d0d4d 100%);

	--keystone-step-cta-bg:         #1a1a72;
	--keystone-step-cta-bg-hover:   #2a2a92;
}