/**
 * Product line and service detail pages (/products/…, /services/…).
 *
 * Everything visual comes from the existing components (cispp-card,
 * cispp-table, cispp-steps, cispp-faq, cispp-key-grid). This file only adds the
 * mobile treatment for the reference tables, which are too wide to read at
 * 390px in their desktop form.
 */

.cispp-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 700px) {
	.cispp-table-wrap {
		overflow: visible;
	}

	.cispp-table-wrap .cispp-table {
		display: block;
		border: 0;
		font-size: 0.9375rem;
	}

	.cispp-table-wrap .cispp-table thead {
		display: none;
	}

	.cispp-table-wrap .cispp-table tbody {
		display: block;
	}

	.cispp-table-wrap .cispp-table tbody tr {
		display: block;
		margin-bottom: 0.9rem;
		padding: 1rem 1.1rem;
		background: #fff;
		border: 1px solid #e2e8f0;
		border-radius: 0.85rem;
	}

	.cispp-table-wrap .cispp-table tbody th,
	.cispp-table-wrap .cispp-table tbody td {
		display: block;
		padding: 0;
		border: 0;
		background: transparent;
	}

	.cispp-table-wrap .cispp-table tbody th {
		font-size: 1rem;
		font-weight: 700;
		color: #0f172a;
		background: transparent;
		margin-bottom: 0.55rem;
	}

	.cispp-table-wrap .cispp-table tbody td {
		position: relative;
		padding-left: 7.2rem;
		min-height: 1.5rem;
		margin-bottom: 0.4rem;
		font-size: 0.875rem;
		color: #475569;
	}

	.cispp-table-wrap .cispp-table tbody td:last-child {
		margin-bottom: 0;
	}

	.cispp-table-wrap .cispp-table tbody td::before {
		content: attr(data-label);
		position: absolute;
		left: 0;
		top: 0;
		width: 6.6rem;
		font-size: 0.75rem;
		font-weight: 600;
		line-height: 1.5;
		color: #94a3b8;
	}
}

/* The step list sits on a light panel; keep the connector line visible. */
.cispp-steps > li > div {
	min-width: 0;
}