/**
 * VM Pass Comparison Block
 *
 * @package VM_Base_Theme
 * @since 1.0.0
 */

/* ==========================================================================
   Block wrapper
   ========================================================================== */

.vm-cb-main.vm-pass-comparison-block {
	max-width: unset !important;
	width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-inline: auto;
	background: var(--wp--preset--color--background, #f7efdc);
}

.vm-pass-comparison-inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

/* ==========================================================================
   Header
   ========================================================================== */

.vm-pass-comparison-header {
	text-align: center;
	max-width: 42rem;
	margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.vm-pass-comparison-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--small);
	margin: 0 0 var(--wp--preset--spacing--medium);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal-ink, #062b26);
}

.vm-pass-comparison-eyebrow::before,
.vm-pass-comparison-eyebrow::after {
	content: "";
	display: block;
	width: clamp(2rem, 6vw, 3.5rem);
	height: 1px;
	background: var(--wp--preset--color--teal-ink, #062b26);
	opacity: 0.55;
}

.vm-pass-comparison-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--zilla-slab, Georgia, serif) ;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--wp--preset--color--teal-ink, #062b26);
}

/* ==========================================================================
   Comparison table
   ========================================================================== */

.vm-pass-comparison-table-wrap {
	overflow-x: auto;
	border: 1px solid rgba(26, 20, 16, 0.1);
	border-radius: var(--vm-radius-lg, 12px);
	background: var(--wp--preset--color--background, #f7efdc);
	box-shadow: 0 2px 16px rgba(26, 20, 16, 0.04);
	-webkit-overflow-scrolling: touch;
}

.vm-pass-comparison-table {
	width: 100%;
	min-width: 42rem;
	border-collapse: collapse;
	table-layout: fixed;
}

.vm-pass-comparison-corner {
	width: 28%;
}

.vm-pass-comparison-tier-head {
	width: calc(72% / var(--vm-pass-tier-count, 4));
}

/* Header row */
.vm-pass-comparison-table thead th {
	padding: 1.35rem 1rem 1.15rem;
	background: var(--wp--preset--color--teal-ink, #062b26);
	border-right: 1px solid rgba(247, 239, 220, 0.08);
	vertical-align: bottom;
}

.vm-pass-comparison-table thead th:last-child {
	border-right: 0;
}

.vm-pass-comparison-table thead .vm-pass-comparison-corner {
	border-radius: var(--vm-radius-lg, 12px) 0 0 0;
}

.vm-pass-comparison-table thead th:last-child {
	border-radius: 0 var(--vm-radius-lg, 12px) 0 0;
}

.vm-pass-comparison-tier-name {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--wp--preset--font-family--dm-serif-display);
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

.vm-pass-comparison-tier-price {
	display: block;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--gold, #b98b3d);
}

/* Body rows */
.vm-pass-comparison-row {
	background: var(--wp--preset--color--background, #f7efdc);
}

.vm-pass-comparison-row.is-alt {
	background: var(--wp--preset--color--secondary-dark, #f0e1c2);
}

.vm-pass-comparison-feature,
.vm-pass-comparison-cell {
	padding: 1.1rem 1rem;
	border-top: 1px solid rgba(26, 20, 16, 0.08);
	vertical-align: middle;
}

.vm-pass-comparison-feature {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	color: var(--wp--preset--color--teal-ink, #062b26);
}

.vm-pass-comparison-feature.is-bold {
	font-weight: 800;
}

.vm-pass-comparison-cell {
	text-align: center;
	border-left: 1px solid rgba(26, 20, 16, 0.06);
}

.vm-pass-comparison-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--teal, #0e6b58);
}

.vm-pass-comparison-check svg {
	display: block;
}

.vm-pass-comparison-dash {
	color: rgba(26, 20, 16, 0.35);
	font-size: 1.1rem;
	line-height: 1;
}

.vm-pass-comparison-value {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--teal-ink, #062b26);
}

.vm-pass-comparison-value.is-number {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 800;
}

/* Footer CTAs — shortcode wraps with style modifier classes */
.vm-pass-comparison-cta-row {
	background: var(--wp--preset--color--background, #f7efdc);
}

.vm-pass-comparison-cta-cell {
	padding: 1.35rem 1rem 1.5rem;
	text-align: center;
	border-top: 1px solid rgba(26, 20, 16, 0.08);
	border-left: 1px solid rgba(26, 20, 16, 0.06);
	vertical-align: middle;
}

.vm-pass-comparison-cta-row .vm-pass-comparison-corner {
	border-radius: 0 0 0 var(--vm-radius-lg, 12px);
}

.vm-pass-comparison-cta-row td:last-child {
	border-radius: 0 0 var(--vm-radius-lg, 12px) 0;
}

.vm-pass-comparison-cta-button {
	display: flex;
	justify-content: center;
	width: 100%;
}

.vm-pass-comparison-cta-button a,
.vm-pass-comparison-cta-button .fh-button,
.vm-pass-comparison-cta-button button,
.vm-pass-comparison-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 7.5rem;
	max-width: 100%;
	padding: 0.8rem 1.35rem;
	border: 0;
	border-radius: var(--vm-radius-md, 8px);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: #fff;
	box-shadow: 0 4px 14px rgba(26, 20, 16, 0.14);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	cursor: pointer;
}

.vm-pass-comparison-cta-style-primary a,
.vm-pass-comparison-cta-style-primary .fh-button,
.vm-pass-comparison-cta-style-primary button,
.vm-pass-comparison-cta.is-primary {
	background: var(--wp--preset--color--primary, #c75a2c);
}

.vm-pass-comparison-cta-style-primary a:hover,
.vm-pass-comparison-cta-style-primary a:focus-visible,
.vm-pass-comparison-cta-style-primary .fh-button:hover,
.vm-pass-comparison-cta-style-primary .fh-button:focus-visible,
.vm-pass-comparison-cta-style-primary button:hover,
.vm-pass-comparison-cta-style-primary button:focus-visible,
.vm-pass-comparison-cta.is-primary:hover,
.vm-pass-comparison-cta.is-primary:focus-visible {
	background: var(--wp--preset--color--primary-dark, #9f4822);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(26, 20, 16, 0.18);
}

.vm-pass-comparison-cta-style-outline a,
.vm-pass-comparison-cta-style-outline .fh-button,
.vm-pass-comparison-cta-style-outline button,
.vm-pass-comparison-cta.is-outline {
	background: var(--wp--preset--color--teal, #0e6b58);
}

.vm-pass-comparison-cta-style-outline a:hover,
.vm-pass-comparison-cta-style-outline a:focus-visible,
.vm-pass-comparison-cta-style-outline .fh-button:hover,
.vm-pass-comparison-cta-style-outline .fh-button:focus-visible,
.vm-pass-comparison-cta-style-outline button:hover,
.vm-pass-comparison-cta-style-outline button:focus-visible,
.vm-pass-comparison-cta.is-outline:hover,
.vm-pass-comparison-cta.is-outline:focus-visible {
	background: var(--wp--preset--color--teal-ink, #062b26);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(26, 20, 16, 0.18);
}

.vm-pass-comparison-cta-button a:focus-visible,
.vm-pass-comparison-cta-button .fh-button:focus-visible,
.vm-pass-comparison-cta-button button:focus-visible,
.vm-pass-comparison-cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold, #b98b3d);
	outline-offset: 2px;
}

/* ==========================================================================
   Editor placeholder
   ========================================================================== */

.vm-pass-comparison-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	background: var(--wp--preset--color--neutral-lighter);
	border: 2px dashed var(--wp--preset--color--neutral-light);
	border-radius: var(--vm-radius-lg, 8px);
	color: var(--wp--preset--color--neutral-medium);
	font-size: var(--wp--preset--font-size--medium);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
	.vm-pass-comparison-corner {
		width: 34%;
	}

	.vm-pass-comparison-feature,
	.vm-pass-comparison-cell,
	.vm-pass-comparison-cta-cell {
		padding-inline: 0.75rem;
	}

	.vm-pass-comparison-tier-name {
		font-size: 1rem;
	}

	.vm-pass-comparison-cta-button a,
	.vm-pass-comparison-cta-button .fh-button,
	.vm-pass-comparison-cta-button button,
	.vm-pass-comparison-cta {
		min-width: 0;
		width: 100%;
		padding-inline: 0.85rem;
		font-size: 0.82rem;
	}
}