/**
 * Standard product information cards (inc/ce-product-info.php).
 *
 * ONE information area shared by every individual product and detail page, so a direct-order
 * product and a quote-only capability present their guidance identically.
 *
 * This is NOT a redesign. The card surface, border, radius, type scale and spacing are the same
 * visual language the quote-only detail pages already used; that page's own .ce-sdp__panel rules
 * are replaced by these, so there is now one definition instead of two.
 *
 * Approved breakpoints only: 640, 768, 1024, 1280. DDR-001 tokens only. No em dashes.
 */

.ce-pinfo {
	display: grid;
	grid-template-columns: 1fr;
	/* Cards hug their own content rather than stretching to the tallest in the row, so a product
	   with less governed information keeps a short honest card instead of a tall empty one. */
	align-items: start;
	gap: 18px;
	margin-top: var(--ce-space-7);
	padding-top: var(--ce-space-7);
	border-top: 1.5px solid var(--ce-line-dark);
}

.ce-pinfo__card {
	background: var(--ce-color-bg-page);
	border: 1.5px solid var(--ce-line-dark);
	border-radius: var(--ce-radius-card-sm);
	padding: 22px 22px 24px;
}
.ce-pinfo__card h2 {
	font-size: 1.02rem;
	font-weight: var(--ce-fw-bold);
	letter-spacing: -0.005em;
	line-height: 1.3;
	color: var(--ce-color-text);
	margin: 0 0 12px;
}
.ce-pinfo__card p {
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--ce-color-text-mid);
	margin: 0 0 12px;
}
.ce-pinfo__card p:last-child {
	margin-bottom: 0;
}
.ce-pinfo__card a {
	color: var(--ce-color-rust);
	font-weight: var(--ce-fw-semibold);
	text-decoration: underline;
}
.ce-pinfo__fact strong {
	color: var(--ce-color-text);
	font-weight: var(--ce-fw-bold);
}
.ce-pinfo__muted {
	color: var(--ce-color-text-muted);
}

.ce-pinfo__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.ce-pinfo__list li {
	position: relative;
	padding-left: 20px;
	font-size: 0.9rem;
	line-height: 1.65;
	color: var(--ce-color-text-mid);
}
.ce-pinfo__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ce-color-rust);
}

@media (min-width: 768px) {
	.ce-pinfo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

@media (min-width: 1024px) {
	.ce-pinfo__card { padding: 24px 26px 26px; }
}

/* Four cards on a direct-order page and five on a quote-only page both read cleanly in a
   three-column grid: nothing is left as a lone stretched card on its own row. */
@media (min-width: 1280px) {
	.ce-pinfo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
}