/* ============================================================
 * Keystone Pricing Table
 * ============================================================
 * 4-plan comparison with expandable feature sections.
 *
 * Design system: Material 3 conventions
 *   - Type scale: 12 / 14 / 16 / 22 / 24 / 28 / 32 (no off-grid sizes)
 *   - Spacing: 4 dp grid (0.25 / 0.5 / 0.75 / 1 / 1.5 / 2 / 3 / 4 rem)
 *   - Weights: 400 / 500 / 700 (no others)
 *   - Shape: 8 px (small) / 12 px (medium) / 16 px (large) / pill
 *   - State layers: 8 % hover, 12 % focus, 16 % pressed (M3 tokens)
 *   - Touch targets: 48 px minimum
 *   - Motion: opt-out via prefers-reduced-motion
 *
 * Pattern slug: keystone/pricing-table
 *
 * Single HTML structure handles all breakpoints via CSS Grid.
 * Mobile (<768 px) shows a tab nav + single active plan column.
 *
 * Conventions: see theme/COMPONENT-CONVENTIONS.md
 * ============================================================ */

.keystone-pricing-table {
	/* ── M3 colour roles ──────────────────────────────────────────── */
	/* Surface uses the SHARED dark gradient from tokens.css so a brand
	   override of --keystone-surface-gradient-dark cascades through
	   hero-banner, pricing-table, and any other dark-surface component
	   together — single source of truth for the brand's dark palette. */
	--kpt-surface-fallback:      #0f1654;
	--kpt-on-surface:            var(--keystone-surface-on-dark, #ffffff);
	--kpt-on-surface-medium:     color-mix(in srgb, var(--kpt-on-surface) 75%, transparent);
	--kpt-on-surface-low:        color-mix(in srgb, var(--kpt-on-surface) 55%, transparent);
	--kpt-outline:               color-mix(in srgb, var(--kpt-on-surface) 18%, transparent);
	--kpt-outline-variant:       color-mix(in srgb, var(--kpt-on-surface) 10%, transparent);

	/* Featured plan = secondary-container fill (high contrast) */
	--kpt-popular-bg:            #ffffff;
	--kpt-on-popular:            #0f1654;
	--kpt-on-popular-medium:     color-mix(in srgb, #0f1654 70%, transparent);

	/* Accent (CTA + checkmarks) — friendly blue, not purple */
	--kpt-accent:                #2b6cf6;
	--kpt-on-accent:             #ffffff;

	/* State layers (M3) */
	--kpt-state-hover:           color-mix(in srgb, currentColor 8%, transparent);
	--kpt-state-focus:           color-mix(in srgb, currentColor 12%, transparent);
	--kpt-state-pressed:         color-mix(in srgb, currentColor 16%, transparent);

	/* M3 shape tokens */
	--kpt-shape-card:            16px;
	--kpt-shape-section:         8px;
	--kpt-shape-pill:            9999px;

	/* Surface = shared dark gradient (tokens.css), with flat fallback */
	background:     var(--keystone-surface-gradient-dark, var(--kpt-surface-fallback));
	color:          var(--kpt-on-surface);
	padding-block:  clamp(2rem, 6vw, 4rem);
	padding-inline: var(--wp--preset--spacing--50, clamp(30px, 5vw, 50px)) !important;

	/* Flush-stack */
	margin-top:    0 !important;
	margin-bottom: 0 !important;
}

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

/* ── Mobile tab nav ──────────────────────────────────────────── */
.keystone-pricing-table__tabs {
	display:                    none;
	gap:                        1.5rem;
	overflow-x:                 auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width:            none;
	padding:                    0 0 0.5rem;
	margin:                     0;
	list-style:                 none;
	scroll-snap-type:           x proximity;
	border-bottom:              1px solid var(--kpt-outline-variant);
}

.keystone-pricing-table__tabs::-webkit-scrollbar { display: none; }

.keystone-pricing-table__tab {
	flex-shrink:    0;
	background:     transparent;
	border:         0;
	padding:        1rem 0.25rem;            /* 16px top/bottom = 48 px touch target */
	font-size:      0.875rem;                /* M3 Title Small (14sp) */
	font-weight:    500;
	line-height:    1.43;
	color:          var(--kpt-on-surface-medium);
	cursor:         pointer;
	white-space:    nowrap;
	scroll-snap-align: start;
	position:       relative;
	transition:     color 200ms cubic-bezier(0.2, 0, 0, 1);
}

.keystone-pricing-table__tab:hover {
	color: var(--kpt-on-surface);
}

.keystone-pricing-table__tab:focus-visible {
	outline:        2px solid var(--kpt-on-surface);
	outline-offset: 4px;
	border-radius:  4px;
}

.keystone-pricing-table__tab.is-active {
	color: var(--kpt-on-surface);
}

.keystone-pricing-table__tab.is-active::after {
	content:        '';
	position:       absolute;
	left:           0;
	right:          0;
	bottom:         -1px;
	height:         2px;
	background:     var(--kpt-on-surface);
	border-radius:  2px 2px 0 0;
}

/* ── Plan-headers row ────────────────────────────────────────── */
.keystone-pricing-table__plans,
.keystone-pricing-feature {
	display:               grid;
	grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr));
	gap:                   0.75rem;          /* 12 px */
	align-items:           stretch;
}

.keystone-pricing-table__plans-spacer {
	display: none;
}

@media (min-width: 1024px) {
	.keystone-pricing-table__plans-spacer { display: block; }
}

/* ── Plan card ──────────────────────────────────────────────── */
/* All cards share identical outer dimensions. The badge floats above
   the featured card without changing its height. Internal sections use
   min-heights and `margin-top: auto` on CTA so every plan card aligns
   on heading row, price row, and button row regardless of line count. */
.keystone-pricing-plan {
	background:    color-mix(in srgb, #ffffff 6%, transparent);
	border:        1px solid var(--kpt-outline);
	border-radius: var(--kpt-shape-card);
	padding:       1.5rem 1rem;              /* 24 px / 16 px */
	display:       flex;
	flex-direction: column;
	align-items:   center;
	text-align:    center;
	gap:           1rem;                      /* 16 px */
	position:      relative;
	color:         var(--kpt-on-surface);
	box-shadow:    var(--keystone-card-shadow);
	transition:    var(--keystone-card-shadow-transition, box-shadow 0.2s ease);
}

/* Featured = filled white surface + lifted elevation. Same dimensions as others. */
.keystone-pricing-plan--featured {
	background:   var(--kpt-popular-bg);
	color:        var(--kpt-on-popular);
	border-color: var(--kpt-popular-bg);
	box-shadow:   var(--keystone-card-shadow-hover);
}

/* "Most Popular" chip — floats ABOVE the featured card without making
   the card taller. Card outer dimensions stay equal across all plans. */
.keystone-pricing-plan__badge {
	position:        absolute;
	top:             -0.875rem;              /* 14 px above the card top edge */
	left:            50%;
	transform:       translateX(-50%);
	background:      var(--kpt-popular-bg);
	color:           var(--kpt-on-popular);
	font-size:       0.75rem;                 /* M3 Label Medium 12sp */
	font-weight:     600;
	letter-spacing:  0.04em;
	line-height:     1;
	padding:         0.5rem 0.875rem;         /* 8 / 14 */
	border-radius:   var(--kpt-shape-pill);
	text-align:      center;
	white-space:     nowrap;
	box-shadow:      var(--keystone-card-shadow);
}

/* Card content */
/* Heading sized so the longest name in the layout
   ("Enterprise Tailored Solutions") fits in 2 lines, matching
   "Individual Project" and "Growing Venture". Reserved space is
   2 lines so all 4 cards align on the heading row. */
.keystone-pricing-plan__name {
	margin:          0;
	font-size:       1.125rem;                 /* M3 Title Medium 18sp */
	font-weight:     500;
	line-height:     1.3;
	color:           inherit;
	min-height:      calc(1.3em * 2);
	display:         flex;
	align-items:     center;
	justify-content: center;
	text-wrap:       balance;
}

.keystone-pricing-plan__description {
	display:     block;
	margin:      0;
	font-size:   0.8125rem;                   /* M3 Body Small 13sp */
	font-weight: 400;
	line-height: 1.45;
	opacity:     0.8;
	text-wrap:   balance;
}

/* Reserve enough vertical space for the largest possible amount
   (clamp max 2rem × 1.25 line-height = 2.5rem). When the amount is
   the smaller --text variant, the reserved space keeps the row below
   ("Monthly Payment Available" / "Custom scope") aligned across all
   four cards. */
.keystone-pricing-plan__price {
	margin:          0;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             0.25rem;                  /* 4 px */
	min-height:      2.5rem;
}

.keystone-pricing-plan__amount {
	font-size:      clamp(1.75rem, 3vw, 2rem); /* 28 → 32 px Headline Small/Medium */
	font-weight:    700;
	line-height:    1.25;
	letter-spacing: -0.01em;
	display:        inline-flex;
	align-items:    baseline;
	gap:            0.25rem;
	white-space:    nowrap;
}

/* Text-amount variant — for non-numeric prices like "on Request".
   Smaller font fits the phrase on a single line and visually aligns
   with the height of "$58,008 USD" in the other cards. */
.keystone-pricing-plan__amount--text {
	font-size:      1.5rem;                    /* 24 px — Headline Small */
	font-weight:    700;
	line-height:    1.33;
	letter-spacing: -0.005em;
}

.keystone-pricing-plan__currency {
	font-size:      0.75rem;                  /* M3 Label Medium 12sp */
	font-weight:    500;
	letter-spacing: 0.05em;
	opacity:        0.7;
}

.keystone-pricing-plan__sub {
	margin:         0;
	font-size:      0.75rem;                  /* M3 Label Medium 12sp */
	font-weight:    400;
	letter-spacing: 0.025em;
	color:          inherit;
	opacity:        0.7;
}

/* CTA — pushed to the bottom of every card via margin-top:auto so all
   four buttons align horizontally regardless of name/price line count. */
.keystone-pricing-plan__cta {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-height:      48px;                    /* M3 touch target */
	padding:         0.75rem 1.5rem;          /* 12 / 24 */
	border-radius:   var(--kpt-shape-pill);
	font-size:       0.875rem;                /* Label Large 14sp */
	font-weight:     500;
	line-height:     1.43;
	letter-spacing:  0.007em;
	text-decoration: none;
	width:           auto;
	min-width:       8rem;
	margin-top:      auto;
	transition:      box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),
	                 background-color 100ms linear;
	position:        relative;
	overflow:        hidden;
}

/* Non-featured plan: outlined CTA on dark surface */
.keystone-pricing-plan:not(.keystone-pricing-plan--featured) .keystone-pricing-plan__cta {
	background: transparent;
	color:      var(--kpt-on-surface);
	border:     1px solid var(--kpt-accent);
}

/* Featured plan: filled CTA — accent on white */
.keystone-pricing-plan--featured .keystone-pricing-plan__cta {
	background: var(--kpt-accent);
	color:      var(--kpt-on-accent);
	border:     0;
}

/* Hover state — Keystone shared motion language: subtle jiggle from
   tokens.css keyframe, plus an M3 state-layer overlay and a soft
   shadow lift. Same recipe as keystone-step-card__cta and the brand
   nav buttons (vaasblock-button-jiggle / swiftcargo-button-jiggle). */
.keystone-pricing-plan__cta:hover,
.keystone-pricing-plan__cta:focus-visible {
	background-image: linear-gradient(var(--kpt-state-hover), var(--kpt-state-hover));
	animation:        keystone-button-jiggle 0.4s ease;
	box-shadow:       0 4px 12px rgba(0, 0, 0, 0.25);
}

.keystone-pricing-plan__cta:focus-visible {
	outline:        2px solid currentColor;
	outline-offset: 2px;
}

/* Respect reduced-motion users — no jiggle animation. */
@media (prefers-reduced-motion: reduce) {
	.keystone-pricing-plan__cta:hover,
	.keystone-pricing-plan__cta:focus-visible {
		animation: none;
	}
}

/* ── Feature comparison ─────────────────────────────────────── */
.keystone-pricing-table__features {
	display:        flex;
	flex-direction: column;
}

.keystone-pricing-feature {
	padding:       1rem 0.5rem;               /* 16 / 8 */
	border-bottom: 1px solid var(--kpt-outline-variant);
	font-size:     0.875rem;                  /* Body Medium 14sp */
	font-weight:   400;
	line-height:   1.43;
	min-height:    48px;                      /* touch target if expandable */
}

.keystone-pricing-feature:last-child {
	border-bottom: 0;
}

.keystone-pricing-feature__name {
	color:        var(--kpt-on-surface);
	font-weight:  500;
	display:      flex;
	align-items:  center;
	gap:          0.5rem;
}

.keystone-pricing-feature__value {
	color:           var(--kpt-on-surface);
	display:         flex;
	align-items:     center;
	justify-content: center;
}

/* Section heading row — proper <h3> */
.keystone-pricing-section {
	margin:         0;
	padding:        1.5rem 0.5rem 0.5rem;     /* 24 / 8 / 8 */
	font-size:      1rem;                     /* h4-level — emphasises section importance */
	font-weight:    700;
	letter-spacing: -0.01em;
	line-height:    1.3;
	text-transform: none;
	color:          var(--kpt-on-surface);
	border-bottom:  1px solid var(--kpt-outline-variant);
}

/* Expandable parent row */
.keystone-pricing-feature--parent {
	cursor:      pointer;
	user-select: none;
	transition:  background-color 100ms linear;
}

.keystone-pricing-feature--parent:hover {
	background: var(--kpt-state-hover);
}

.keystone-pricing-feature--parent:focus-visible {
	outline:        2px solid var(--kpt-accent);
	outline-offset: -2px;
	border-radius:  4px;
}

/* Chevron icon */
.keystone-pricing-feature__chevron {
	width:           1rem;
	height:          1rem;
	margin-left:     auto;
	flex-shrink:     0;
	transition:      transform 200ms cubic-bezier(0.2, 0, 0, 1);
	color:           var(--kpt-on-surface-low);
}

.keystone-pricing-feature--parent.is-expanded .keystone-pricing-feature__chevron {
	transform: rotate(180deg);
}

/* Child rows */
.keystone-pricing-feature--child {
	display:       none;
	font-size:     0.8125rem;                /* 13 px — slight downsize for hierarchy */
	font-weight:   400;
	background:    transparent;
	border-bottom: 0;
	padding:       0.5rem 0.5rem;             /* 8 / 8 */
	min-height:    auto;
}

.keystone-pricing-feature--child.is-visible {
	display: grid;
}

.keystone-pricing-feature--child .keystone-pricing-feature__name {
	color:        var(--kpt-on-surface-medium);
	font-weight:  400;
	padding-left: 1.5rem;                     /* 24 px indent */
}

/* Child rows use a thinner check icon (less emphasis than parent) */
.keystone-pricing-feature--child .keystone-pricing-check-icon {
	background: transparent;
	color:      var(--kpt-on-surface-medium);
}

/* ── Check / dash icons ─────────────────────────────────────── */
.keystone-pricing-check-icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           1.5rem;
	height:          1.5rem;
	border-radius:   50%;
	background:      var(--kpt-accent);
	color:           var(--kpt-on-accent);
	flex-shrink:     0;
}

.keystone-pricing-check-icon svg {
	width:  0.875rem;
	height: 0.875rem;
}

.keystone-pricing-dash {
	color:        var(--kpt-on-surface-low);
	font-weight:  400;
	font-size:    1rem;
}

/* ── Responsive: tablet (768–1023 px) ───────────────────────── */
@media (max-width: 1023px) {
	.keystone-pricing-table__plans,
	.keystone-pricing-feature { gap: 0.5rem; }
	.keystone-pricing-plan { padding: 1rem 0.75rem; }
}

/* ── Responsive: mobile (<768 px) ───────────────────────────── */
@media (max-width: 767px) {
	.keystone-pricing-table__tabs { display: flex; }

	.keystone-pricing-table__plans,
	.keystone-pricing-feature,
	.keystone-pricing-feature--child.is-visible {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	}

	/* Hide non-active plan columns */
	.keystone-pricing-plan:not(.is-active),
	.keystone-pricing-feature__value:not(.is-active) {
		display: none;
	}

	/* Active plan card spans the whole row on mobile so it gets the
	   full container width instead of being trapped in column 1. */
	.keystone-pricing-plan.is-active {
		grid-column: 1 / -1;
	}

	/* Featured card on mobile: don't lift (no other cards visible to compare) */
	.keystone-pricing-plan--featured {
		margin-top:    0;
		padding-top:   1.5rem;
		border-radius: var(--kpt-shape-card);
	}

	.keystone-pricing-plan--featured .keystone-pricing-plan__badge {
		display: none;
	}

	/* Single section heading column-spans full row */
	.keystone-pricing-section { grid-column: 1 / -1; }

	.keystone-pricing-feature__value {
		justify-content: flex-end;
	}

	/* Mobile shows one plan at a time, so the outlined-vs-filled
	   visual hierarchy between non-featured and featured CTAs has
	   no purpose. Every CTA goes filled blue for clarity. */
	.keystone-pricing-plan:not(.keystone-pricing-plan--featured) .keystone-pricing-plan__cta {
		background: var(--kpt-accent);
		color:      var(--kpt-on-accent);
		border:     0;
	}
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.keystone-pricing-table *,
	.keystone-pricing-table *::before,
	.keystone-pricing-table *::after {
		animation-duration:    0.001ms !important;
		transition-duration:   0.001ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ============================================================
 * BRAND OVERRIDES
 * Each brand can re-tone the surface + accent here.
 * Surface ideally stays in the dark range so the white-fill
 * featured card and white text retain contrast.
 * ============================================================ */
body.brand-vaasblock .keystone-pricing-table {
	--kpt-surface: #1a1a72;
	--kpt-accent:  #2b6cf6;
}