/* Lync Comparison Table widget — grid-based comparison table. The brand
   name uses Anton; everything else uses Poppins. */

.aiol-ct {
	--aiol-cols: 3;
	--aiol-border-color: #ececec;
	--aiol-highlight-bg: #f7f7f7;

	display: grid;
	/* Actual column widths are set inline per-instance by the widget's
	   PHP render() — this is only a fallback in case that's missing. */
	grid-template-columns: repeat( 4, 1fr );
	gap: 1px;
	width: 100%;
	background: var(--aiol-border-color);
	border: 1px solid var(--aiol-border-color);
	/* !important: this widget has no rounded-corner design and older
	   saved widget instances may still carry a stale border-radius
	   value from a previous version — always force square corners. */
	border-radius: 0 !important;
	overflow: hidden;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}

.aiol-ct__cell {
	box-sizing: border-box;
	padding: 24px 28px;
	display: flex;
	align-items: center;
	background: #fff;
	min-width: 0;
}

/* First row (header) cells */
.aiol-ct__cell--corner {
	background: #fff;
}

.aiol-ct__cell--header {
	gap: 10px;
}

.aiol-ct__col-title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #6f6f6f;
}

/* Brand (highlighted) column — every cell in that column, header + rows */
.aiol-ct__cell--brand {
	background: var(--aiol-highlight-bg);
}

.aiol-ct__brand-logo {
	/* height is set per-instance by the "Logo Height" style control;
	   this is just a safety fallback. */
	height: 32px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.aiol-ct__brand-name {
	font-family: 'Anton', sans-serif;
	font-size: 18px;
	font-weight: 400;
	color: #161616;
	white-space: nowrap;
}

/* Row label column — plain white like every other non-brand cell. */
.aiol-ct__cell--label {
	background: #fff;
}

.aiol-ct__row-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #3d3d3d;
}

/* Value cells (icon + text) */
.aiol-ct__cell--value {
	gap: 10px;
}

.aiol-ct__value-text {
	font-size: 13px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: #4a4a4a;
	line-height: 1.4;
}

.aiol-ct__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #2f2f2f;
}

.aiol-ct__icon svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* Responsive: below 767px the grid collapses to a single column and each
   row becomes a small stacked card — a wide grid squeezed or horizontally
   scrolled on a phone reads as broken, so we restructure instead. */
@media ( max-width: 767px ) {
	.aiol-ct {
		/* Beats the inline per-instance grid-template-columns (inline
		   styles otherwise always win over an external stylesheet). */
		grid-template-columns: 1fr !important;
	}

	/* The blank corner cell and the plain column-title header cells only
	   make sense next to their column — hide them and rely on the
	   per-value data-col-label caption below instead. */
	.aiol-ct__cell--corner,
	.aiol-ct__cell--header:not( .aiol-ct__cell--brand ) {
		display: none;
	}

	.aiol-ct__cell {
		padding: 14px 16px;
	}

	/* Brand logo/name becomes a banner introducing the whole table. */
	.aiol-ct__cell--header.aiol-ct__cell--brand {
		justify-content: center;
	}

	.aiol-ct__brand-name {
		font-size: 14px;
	}

	/* Each metric name becomes a section divider between stacked cards. */
	.aiol-ct__cell--label {
		background: #fafafa;
	}

	.aiol-ct__row-label,
	.aiol-ct__col-title {
		font-size: 11px;
	}

	/* Value cells: a small caption naming the column, then icon + text
	   on their own line right below it. */
	.aiol-ct__cell--value {
		flex-wrap: wrap;
		row-gap: 4px;
	}

	.aiol-ct__cell--value::before {
		content: attr( data-col-label );
		flex-basis: 100%;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.4px;
		text-transform: uppercase;
		color: #9a9a9a;
	}

	.aiol-ct__value-text {
		font-size: 12px;
	}
}