/* Display Comparison Table — scoped to .stc */

.stc {
	--stc-gold: #C9A96E;
	--stc-text: #F5F0E8;
	background: #0A0A0B;
	padding: 3rem 1.25rem;
	font-family: 'Inter', 'Helvetica Neue', sans-serif;
	-webkit-font-smoothing: antialiased;
	border-top: 1px solid rgba(245, 240, 232, 0.10);
	color: var(--stc-text);
	box-sizing: border-box;
}
.stc *, .stc *::before, .stc *::after { box-sizing: border-box; }

@media (min-width: 768px) {
	.stc { padding: 4rem 2rem; }
}

.stc-inner { max-width: 1280px; margin: 0 auto; }

/* ───── Header ───── */
.stc-hd {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 2rem;
}
@media (min-width: 1024px) {
	.stc-hd {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		margin-bottom: 2.5rem;
	}
}
.stc-goldline { width: 40px; height: 1px; background: var(--stc-gold); margin-bottom: 1rem; }
.stc-eyebrow {
	font-size: 10px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: rgba(201, 169, 110, 0.72);
	margin: 0 0 0.625rem;
	font-weight: 400;
}
.stc-h2 {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp(1.75rem, 3.4vw, 3rem);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--stc-text);
	margin: 0;
}
.stc-h2 em { font-style: italic; }
.stc-intro {
	font-size: clamp(0.85rem, 1.3vw, 0.95rem);
	font-weight: 300;
	line-height: 1.65;
	color: rgba(245, 240, 232, 0.62);
	max-width: 280px;
	margin: 0;
}
@media (min-width: 1024px) { .stc-intro { text-align: right; } }

/* ───── Table wrap ───── */
.stc-table-wrap { position: relative; }

/* Sticky header row (desktop only).
 * `position: sticky` is broken by Rey's .site-wrapper { overflow: hidden },
 * so frontend.js polyfills it with position:fixed. The `top` value below is
 * still read by the JS to know the desired sticky offset. */
.stc-th-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1px;
	background: rgba(245, 240, 232, 0.10);
	top: 70px;
	z-index: 20;
}
.stc-th-placeholder { width: 100%; }

/* Cells */
.stc-th, .stc-td { background: #0A0A0B; position: relative; }
.stc-th--hi, .stc-td--hi { background: #161618; }
.stc-th--hi::before,
.stc-td--hi::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(201, 169, 110, 0.30);
}

/* Image */
.stc-th-img {
	width: 100%;
	overflow: hidden;
	position: relative;
	background: #111;
}
.stc-th-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	transition: transform 0.4s ease;
}
.stc-th:hover .stc-th-img img { transform: scale(1.03); }

@media (min-width: 768px) {
	.stc-th-img {
		height: 0;
		padding-bottom: 42%;
		position: relative;
	}
	.stc-th-img img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 20%;
	}
}

.stc-th-inner { padding: 1.1rem 1.25rem 1rem; }

/* Option labels */
.stc-opt-num {
	display: block;
	font-size: 9px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	font-weight: 400;
	margin-bottom: 0.4rem;
}
.stc-th-1 .stc-opt-num { color: rgba(245, 240, 232, 0.42); }
.stc-th-2 .stc-opt-num { color: rgba(245, 240, 232, 0.50); }
.stc-th-3 .stc-opt-num,
.stc-th--hi .stc-opt-num { color: rgba(201, 169, 110, 0.72); }
.stc-opt-name {
	display: block;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 300;
	font-size: clamp(1rem, 1.7vw, 1.2rem);
	letter-spacing: 0.02em;
	line-height: 1.2;
	margin-bottom: 0.3rem;
}
.stc-th-1 .stc-opt-name { color: rgba(245, 240, 232, 0.55); }
.stc-th-2 .stc-opt-name { color: rgba(245, 240, 232, 0.72); }
.stc-th-3 .stc-opt-name,
.stc-th--hi .stc-opt-name { color: var(--stc-text); }
.stc-opt-sub { display: block; font-size: 10px; font-weight: 300; line-height: 1.5; }
.stc-th-1 .stc-opt-sub { color: rgba(245, 240, 232, 0.38); }
.stc-th-2 .stc-opt-sub { color: rgba(245, 240, 232, 0.42); }
.stc-th-3 .stc-opt-sub,
.stc-th--hi .stc-opt-sub { color: rgba(201, 169, 110, 0.58); }

/* Data grid */
.stc-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1px;
	background: rgba(245, 240, 232, 0.10);
}
.stc-tr { display: contents; }

/* Data cells — compact paddings */
.stc-td-inner { padding: 1.4rem 1.25rem; }
.stc-crit-label {
	display: block;
	font-size: 9px;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	font-weight: 400;
	margin-bottom: 0.625rem;
}
.stc-td-1 .stc-crit-label { color: rgba(245, 240, 232, 0.40); }
.stc-td-2 .stc-crit-label { color: rgba(245, 240, 232, 0.45); }
.stc-td-3 .stc-crit-label,
.stc-td--hi .stc-crit-label { color: rgba(201, 169, 110, 0.52); }

.stc-mob-name { display: none; }

.stc-badge {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 0.5rem;
}
.stc-badge svg { flex-shrink: 0; }
.stc-badge-txt {
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 400;
}
.stc-badge-full   { color: var(--stc-gold); }
.stc-badge-full   .stc-badge-txt { color: var(--stc-gold); }
.stc-badge-mid    { color: rgba(245, 240, 232, 0.62); }
.stc-badge-mid    .stc-badge-txt { color: rgba(245, 240, 232, 0.62); }
.stc-badge-none   { color: rgba(245, 240, 232, 0.52); }
.stc-badge-none   .stc-badge-txt { color: rgba(245, 240, 232, 0.52); }

.stc-body {
	font-size: 12.5px;
	font-weight: 300;
	line-height: 1.6;
	margin: 0;
}
.stc-td-1 .stc-body { color: rgba(245, 240, 232, 0.60); }
.stc-td-2 .stc-body { color: rgba(245, 240, 232, 0.72); }
.stc-td-3 .stc-body,
.stc-td--hi .stc-body { color: rgba(245, 240, 232, 0.88); }

/* Footer */
.stc-footer {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(245, 240, 232, 0.10);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
@media (min-width: 768px) {
	.stc-footer {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 2rem;
	}
}
.stc-footer-eyebrow {
	display: block;
	font-size: 10px;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	color: rgba(245, 240, 232, 0.40);
	margin-bottom: 0.5rem;
	font-weight: 400;
}
.stc-footer-body {
	font-size: clamp(0.85rem, 1.3vw, 0.95rem);
	font-weight: 300;
	line-height: 1.65;
	color: rgba(245, 240, 232, 0.65);
	max-width: 540px;
	margin: 0;
}
.stc-cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	border: 1px solid rgba(201, 169, 110, 0.50);
	color: var(--stc-gold);
	font-family: inherit;
	font-size: 10px;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	font-weight: 500;
	padding: 0.85rem 1.5rem;
	text-decoration: none;
	white-space: nowrap;
	background: transparent;
	cursor: pointer;
	transition: background 0.25s;
	align-self: flex-start;
}
.stc-cta,
.stc-cta:link,
.stc-cta:visited { color: var(--stc-gold); }
.stc-cta:hover,
.stc-cta:focus,
.stc-cta:active {
	background: rgba(201, 169, 110, 0.12);
	color: #ffffff;
	border-color: rgba(201, 169, 110, 0.75);
}
.stc-cta:hover svg,
.stc-cta:focus svg { stroke: #ffffff; }

/* Hide tabs and mobile-header cards on desktop */
.stc-tabs,
.stc-mob-th { display: none; }

/* ════════════════════════
   MOBILE — column tabs
   ════════════════════════ */
@media (max-width: 767px) {

	.stc { padding: 2.25rem 1rem; }
	.stc-h2 { font-size: clamp(1.6rem, 7vw, 2.1rem); }
	.stc-hd { gap: 0.75rem; margin-bottom: 1.25rem; }

	/* Hide the desktop sticky header */
	.stc-th-row { display: none; }

	/* Tabs */
	.stc-tabs {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 1px;
		background: rgba(245, 240, 232, 0.10);
		border: 1px solid rgba(245, 240, 232, 0.10);
		margin-bottom: 12px;
	}
	.stc-tab {
		appearance: none;
		background: #0A0A0B;
		border: 0;
		color: inherit;
		font-family: inherit;
		padding: 0.65rem 0.5rem;
		text-align: left;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap: 4px;
		min-height: 62px;
		transition: background 0.2s;
	}
	.stc-tab-num {
		font-size: 8px;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: rgba(245, 240, 232, 0.45);
		font-weight: 400;
	}
	.stc-tab-name {
		font-family: 'Cormorant Garamond', Georgia, serif;
		font-size: 0.82rem;
		font-weight: 300;
		line-height: 1.15;
		color: rgba(245, 240, 232, 0.70);
		word-break: break-word;
		overflow-wrap: break-word;
		hyphens: none;
	}
	.stc-tab--hi .stc-tab-num { color: rgba(201, 169, 110, 0.75); }
	.stc-tab[aria-selected="true"] {
		background: #161618;
	}
	.stc-tab[aria-selected="true"] .stc-tab-num { color: var(--stc-gold); }
	.stc-tab[aria-selected="true"] .stc-tab-name { color: var(--stc-text); }
	.stc-tab--hi[aria-selected="true"] {
		background: rgba(201, 169, 110, 0.08);
		box-shadow: inset 2px 0 0 rgba(201, 169, 110, 0.55);
	}

	/* Mobile single column header card (image + name of active tab) */
	.stc-mob-th {
		display: block;
		position: relative;
		margin-bottom: 12px;
	}
	.stc-mob-th .stc-th {
		display: none;
		border: 1px solid rgba(245, 240, 232, 0.12);
	}
	.stc-mob-th .stc-th-img {
		height: 0;
		padding-bottom: 38%;
		position: relative;
	}
	.stc-mob-th .stc-th-img img {
		position: absolute;
		top: 0; left: 0;
		width: 100%; height: 100%;
		object-fit: cover;
		object-position: center 20%;
	}
	.stc-mob-th .stc-th-inner { padding: 0.875rem 1rem; }

	/* Show only the active tab's mobile header card */
	.stc[data-stc-active="1"] .stc-mob-th .stc-th-1 { display: block; }
	.stc[data-stc-active="2"] .stc-mob-th .stc-th-2 { display: block; }
	.stc[data-stc-active="3"] .stc-mob-th .stc-th-3 { display: block; }

	/* Data grid → list of criteria, single visible column */
	.stc-grid {
		display: flex;
		flex-direction: column;
		gap: 8px;
		background: transparent;
	}
	.stc-tr {
		display: flex;
		flex-direction: column;
		border: 1px solid rgba(245, 240, 232, 0.10);
		background: #0A0A0B;
		overflow: hidden;
	}
	.stc-tr::before {
		content: attr(data-criterion);
		display: block;
		font-size: 9px;
		letter-spacing: 0.24em;
		text-transform: uppercase;
		color: rgba(245, 240, 232, 0.55);
		font-weight: 400;
		padding: 0.7rem 1rem 0.55rem;
		background: rgba(245, 240, 232, 0.03);
		border-bottom: 1px solid rgba(245, 240, 232, 0.08);
	}
	.stc-td { display: none; background: transparent; }
	.stc-td-inner { padding: 0.875rem 1rem 1rem; }
	.stc-crit-label { display: none; }
	.stc-mob-name { display: none; }
	.stc-body { font-size: 12.5px; line-height: 1.55; }

	/* Show only the active tab's column */
	.stc[data-stc-active="1"] .stc-td-1,
	.stc[data-stc-active="2"] .stc-td-2,
	.stc[data-stc-active="3"] .stc-td-3 { display: block; }

	/* Highlight the gold column when it's the active tab */
	.stc[data-stc-active="1"] .stc-td-1.stc-td--hi,
	.stc[data-stc-active="2"] .stc-td-2.stc-td--hi,
	.stc[data-stc-active="3"] .stc-td-3.stc-td--hi {
		background: rgba(201, 169, 110, 0.04);
		border-left: 2px solid rgba(201, 169, 110, 0.35);
	}
	.stc-td--hi::before { display: none; }

	.stc-footer { margin-top: 1.5rem; padding-top: 1.25rem; }
}

/* Tablet → keep table, but tighter than desktop */
@media (min-width: 768px) and (max-width: 1023px) {
	.stc-th-inner { padding: 0.9rem 1rem 0.85rem; }
	.stc-td-inner { padding: 1.1rem 1rem; }
	.stc-body { font-size: 12px; }
}