/**
 * momentive/comparison-table — Front-end styles
 *
 * Mobile behaviour:
 *   .mobile-column-picker  — one data column at a time, ← → UI (default)
 *   .mobile-scroll         — horizontal scroll on small screens
 */

/* ── Wrapper & scroll container ───────────────────────────────────────────── */

.momentive-ct-wrapper {
	width: 100%;
	position: relative;
}

.momentive-ct-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ── Table base ───────────────────────────────────────────────────────────── */

.momentive-comparison-table {
	--menu-border-color: #ccc;
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

/* ── Column widths ────────────────────────────────────────────────────────── */
/* Row-header column gets a fixed slice; data columns share the rest evenly.  */
/* data-column-count = number of competitors + 1 (the row-header column).     */

.momentive-ct-cell.is-empty-cell,
.momentive-comparison-table thead th:first-child { width: 40%; }

.momentive-comparison-table thead th {
	width: 30%;
}

.momentive-comparison-table[data-column-count="4"] .momentive-ct-cell.is-empty-cell,
.momentive-comparison-table[data-column-count="4"] thead th:first-child { width: 25%; }

.momentive-comparison-table[data-column-count="5"] .momentive-ct-cell.is-empty-cell,
.momentive-comparison-table[data-column-count="5"] thead th:first-child { width: 22%; }

.momentive-comparison-table[data-column-count="6"] .momentive-ct-cell.is-empty-cell,
.momentive-comparison-table[data-column-count="6"] thead th:first-child,
.momentive-comparison-table[data-column-count="7"] .momentive-ct-cell.is-empty-cell,
.momentive-comparison-table[data-column-count="7"] thead th:first-child { width: 18%; }

/* ── Cell base ────────────────────────────────────────────────────────────── */

.momentive-ct-cell {
	padding: var(--wp--preset--spacing--small, 1.25rem) var(--wp--preset--spacing--x-small, 0.75rem);
	text-align: center;
	vertical-align: middle;
	font-size: 1rem;
	color: var(--wp--preset--color--primary, #1a1a2e);
	background: #fff;
	/* Gap between data columns */
	border-right: 1px solid var(--menu-border-color);
	border-bottom: 1px solid var(--menu-border-color);
	transition: background-color 0.2s ease;
}

table tbody>tr:nth-child(odd)>td.momentive-ct-cell, table tbody>tr:nth-child(odd)>th.momentive-ct-row-header {
	background: #fff;
}

.momentive-ct-cell:last-child {
	border-right: none;
}

/* ── Row header (left column) ─────────────────────────────────────────────── */

th.momentive-ct-row-header {
	text-align: center;
	text-wrap: balance;
	font-weight: 600;
	color: var(--text-color);
	font-size: var(--wp--preset--font-size--medium);
/*    background-color: var(--wp--preset--color--neutral, #f5f5f7);*/
	border-right: 1px solid var(--menu-border-color) !important;
	padding-left: 1.25rem;
}

/* ── Header row ───────────────────────────────────────────────────────────── */

.is-header-row .momentive-ct-cell.is-empty-cell {
	background-color: transparent;
/*    border-right: none;*/
}

.momentive-ct-cell.is-header-cell {
	font-weight: 700;
	border-bottom: 1px solid var(--menu-border-color);
	padding: 1rem 0.75rem;
	vertical-align: middle;
}

.momentive-ct-cell.is-header-cell img {
	width: auto;
	height: auto;
	max-width: 14rem;
	max-height: 6rem;
}

/* ── Body alternating rows ────────────────────────────────────────────────── */

tbody tr:nth-child(even) .momentive-ct-cell:not(.is-featured-column) {
/*    background-color: var(--wp--preset--color--superlight-accent, #f8faff);*/
}

tbody tr:last-child .momentive-ct-cell {
	border-bottom: none;
}

/* ── Featured column ──────────────────────────────────────────────────────── */
/* JS adds .is-featured-column to every cell in the designated column.         */

.momentive-ct-cell.is-featured-column {
	background-color: var(--wp--preset--color--extralight-accent, #e6f0ff) !important;
}

thead .momentive-ct-cell.is-featured-column.is-header-cell {
	background-color: #fff !important;
}

/* ── Logo images ──────────────────────────────────────────────────────────── */

.momentive-ct-logo {
	max-width: 12rem;
	width: 100%;
	height: auto;
	max-height: 4rem;
	object-fit: contain;
	display: block;
	margin: 0.75rem auto;
}

/* ── Check / X / Partial icons ────────────────────────────────────────────── */
/* Icons are inline SVGs rendered by block.php; CSS handles sizing and color. */

.momentive-ct-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	flex-shrink: 0;
}

.momentive-ct-icon svg {
	width: 75%;
	height: 75%;
	display: block;
	flex-shrink: 0;
}

/* Yes — blue tinted circle + blue checkmark */
.momentive-ct-icon.is-yes {
	background-color: var(--accent-color, #0078FF);
}
.momentive-ct-icon.is-yes svg { fill: var(--light-color, #fff); }

/* No — red circle + X */
.momentive-ct-icon.is-no { background-color: var(--secondary-color, #e63946); }
.momentive-ct-icon.is-no svg { fill: var(--light-color, #fff); }

/* Partial — grey circle + dash */
.momentive-ct-icon.is-partial { background-color: #ebebeb; }
.momentive-ct-icon.is-partial svg { fill: #888; }

/* Text cell */
.momentive-ct-text {
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--wp--preset--color--primary, #1a1a2e);
}

/* Optional footnote inside a cell */
.momentive-ct-note {
	display: block;
	font-size: 0.75rem;
	color: #666;
	margin-top: 0.25rem;
	font-style: italic;
}

/* ── Mobile column picker UI ──────────────────────────────────────────────── */

.momentive-ct-picker {
	display: none; /* JS / media query enable this */
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--secondary, #1a1a2e);
	color: #fff;
	border-radius: 0.75rem 0.75rem 0 0;
	font-weight: 700;
	font-size: 0.9rem;
	gap: 0.5rem;
}

.momentive-ct-picker-prev,
.momentive-ct-picker-next {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #fff;
	border-radius: 50%;
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	cursor: pointer;
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
	line-height: 1;
}

.momentive-ct-picker-prev:hover,
.momentive-ct-picker-next:hover {
	background-color: rgba(255, 255, 255, 0.18);
}

.momentive-ct-picker-prev:disabled,
.momentive-ct-picker-next:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.momentive-ct-picker-label {
	flex: 1;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 0.25rem;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

	/* Column picker mode */
	.mobile-column-picker .momentive-ct-picker {
		display: flex;
	}

	/* Hide all cells by default; JS re-shows .is-visible-column */
	.mobile-column-picker .momentive-comparison-table .momentive-ct-cell {
		display: none;
	}

	/* Row header always visible */
	.mobile-column-picker .momentive-comparison-table .momentive-ct-cell:first-child {
		display: table-cell;
		width: 45%;
	}

	/* JS-controlled active column */
	.mobile-column-picker .momentive-comparison-table .momentive-ct-cell.is-visible-column {
		display: table-cell;
	}

	/* Scroll mode: min-width forces horizontal scroll */
	.mobile-scroll .momentive-comparison-table {
		min-width: 36rem;
	}

	/* Shared size reductions */
	.momentive-ct-logo { max-width: 6rem; max-height: 3rem; }
	.momentive-ct-cell { padding: 0.875rem 0.5rem; font-size: 0.875rem; }
	.momentive-ct-icon { width: 1.5rem; height: 1.5rem; }
}

/* ── Editor preview placeholder ───────────────────────────────────────────── */

.momentive-comparison-table .is-placeholder {
	min-height: 4rem;
}