/**
 * Specialty capability detail page (page-specialty-detail.php).
 *
 * One stylesheet for all sixteen capability pages. It consumes the DDR-001 foundation tokens and
 * the shared .ce-container, .ce-btn and .ce-sr-only utilities from style.css and redefines none of
 * them, so these pages read as part of the same commerce system rather than a second website.
 *
 * Visual direction: the current light, white-dominant V2 product detail composition, and the SAME
 * shape as a direct-order product page. Large owner photograph on the left; on the right the
 * capability summary, the quote posture, and THE GOVERNED QUOTE FORM ITSELF, sitting exactly where
 * a direct-order product carries its configurator and Add to Cart. Compact information panels
 * follow below. Copper/rust is the only accent.
 *
 * Imagery: the media stage is the shared .ce-pmedia component in assets/css/ce-product-media.css,
 * so this file declares no image sizing of its own and the treatment cannot drift from the rest of
 * the product pages.
 *
 * Approved breakpoints only: 640, 768, 1024, 1280.
 *
 * Rule 13 self-review: presentation only. No new design tokens, no palette outside DDR-001, no
 * unapproved breakpoint, no em dashes.
 */

.ce-sdp {
	padding: 26px 0 var(--ce-space-8);
	background: var(--ce-color-bg-page);
}

/* ---------------------------------------------------------------- breadcrumb */
/* The shared breadcrumb is styled for a dark hero elsewhere; this page is light, so the trail is
   recoloured here for contrast on the page ground. Structure and markup are unchanged. */
.ce-sdp .ce-crumbs {
	margin: 0 0 var(--ce-space-5);
}
.ce-sdp .ce-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ce-sdp .ce-crumbs li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.78rem;
	font-weight: var(--ce-fw-semibold);
	letter-spacing: 0.04em;
	color: var(--ce-color-text-mid);
}
.ce-sdp .ce-crumbs li + li::before {
	content: "/";
	color: var(--ce-color-border);
}
/* Underlined as well as coloured, so a breadcrumb link is never identified by colour alone. This
   matches the product-page breadcrumb, so both page types read the same. */
.ce-sdp .ce-crumbs a {
	color: var(--ce-color-text-mid);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: color var(--ce-transition);
}
.ce-sdp .ce-crumbs a:hover,
.ce-sdp .ce-crumbs a:focus-visible {
	color: var(--ce-color-rust);
}
.ce-sdp .ce-crumbs [aria-current] {
	color: var(--ce-color-text);
}

/* ------------------------------------------------------- detail composition */
.ce-sdp__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ce-space-6);
	align-items: start;
}

/* The media stage itself is the shared .ce-pmedia component (assets/css/ce-product-media.css), the
   same one every product page uses, so this file no longer declares any image sizing of its own.
   The media column is sticky on wide screens only, so a tall product graphic does not leave the
   commercial column stranded beside empty space while the customer fills in the quote form. */
@media (min-width: 1280px) {
	.ce-sdp__visual {
		position: sticky;
		top: 96px;
	}
}

/* The group eyebrow is a link back to its section of the listing. It carries an underline as well
   as the rust colour, so it is never identified by colour alone. */
.ce-sdp__eyebrow {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: var(--ce-fw-bold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ce-color-rust);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
	transition: color var(--ce-transition);
}
.ce-sdp__eyebrow:hover,
.ce-sdp__eyebrow:focus-visible {
	color: var(--ce-color-text);
	text-decoration-thickness: 2px;
}

.ce-sdp__title {
	font-size: 1.9rem;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--ce-color-text);
	margin: var(--ce-space-3) 0 var(--ce-space-4);
}

.ce-sdp__lede {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ce-color-text-mid);
	max-width: var(--ce-measure);
	margin: 0 0 var(--ce-space-5);
}

.ce-sdp__status {
	border: 1.5px solid var(--ce-line-dark);
	border-left: 3px solid var(--ce-color-rust);
	border-radius: 0 var(--ce-radius-card-sm) var(--ce-radius-card-sm) 0;
	background: var(--ce-color-bg-cream);
	padding: 14px 18px;
	margin: 0 0 var(--ce-space-5);
}
.ce-sdp__status-pill {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: var(--ce-fw-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ce-color-rust);
	background: var(--ce-rust-pale);
	border-radius: var(--ce-radius-pill);
	padding: 6px 14px;
	margin: 0 0 10px;
}
.ce-sdp__status-note {
	font-size: 0.88rem;
	line-height: 1.65;
	color: var(--ce-color-text-mid);
	margin: 0;
}

.ce-sdp__min {
	display: inline-flex;
	align-items: center;
	font-size: 0.74rem;
	font-weight: var(--ce-fw-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ce-color-bg-page);
	background: var(--ce-color-rust);
	border-radius: var(--ce-radius-pill);
	padding: 9px 18px;
	margin: 0 0 var(--ce-space-5);
}

.ce-sdp__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 var(--ce-space-5);
}
.ce-sdp__actions .ce-btn {
	justify-content: center;
}

.ce-sdp__assure {
	list-style: none;
	margin: var(--ce-space-5) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ce-sdp__assure li {
	position: relative;
	padding-left: 22px;
	font-size: 0.86rem;
	line-height: 1.6;
	color: var(--ce-color-text-mid);
}
.ce-sdp__assure li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ce-color-rust);
}

.ce-sdp__wa {
	margin-top: var(--ce-space-5);
}

/* The information cards are the shared .ce-pinfo component (assets/css/ce-product-info.css), the
   same one every product page uses, so this file no longer defines a second set of panel rules. */

/* ------------------------------- the embedded governed quote form (final action) */
/* The quote is completed on this page. The section is styled as part of the same premium page
   rather than as an inserted widget: same surface language, same tokens, same rhythm. The form
   markup itself is the governed renderer's, untouched, and is themed by ce-catalog / the page
   shell exactly as it is on Contact. */
/* The form sits IN the commercial column, where a direct-order product carries its configurator and
   Add to Cart, so a quote-only page reads the same way and the customer can start filling it in
   immediately without hunting down the page. */
.ce-sdp__quote {
	margin-top: var(--ce-space-5);
	background: var(--ce-color-bg-page);
	border: 1.5px solid var(--ce-line-dark);
	border-radius: var(--ce-radius-card);
	padding: 22px 20px;
	scroll-margin-top: 96px;
}
.ce-sdp__quote:focus {
	outline: none;
}
.ce-sdp__quote-head {
	margin: 0 0 var(--ce-space-5);
}
.ce-sdp__quote-head h2 {
	font-size: 1.25rem;
	font-weight: var(--ce-fw-bold);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ce-color-text);
	margin: 0 0 8px;
}
.ce-sdp__quote-head p {
	font-size: 0.9rem;
	line-height: 1.65;
	color: var(--ce-color-text-mid);
	margin: 0;
}
/* An alternative to the form, for a customer who would rather talk first. */
.ce-sdp__alt {
	margin: var(--ce-space-5) 0 0;
	font-size: 0.88rem;
	line-height: 1.65;
	color: var(--ce-color-text-mid);
}
.ce-sdp__alt a {
	color: var(--ce-color-rust);
	font-weight: var(--ce-fw-semibold);
	text-decoration: underline;
}
.ce-sdp__backrow {
	margin: var(--ce-space-7) 0 0;
	padding-top: var(--ce-space-5);
	border-top: 1.5px solid var(--ce-line-dark);
}
.ce-sdp__back {
	font-size: 0.78rem;
	font-weight: var(--ce-fw-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ce-color-text);
	border-bottom: 1.5px solid var(--ce-color-rust);
	padding-bottom: 2px;
	transition: color var(--ce-transition);
}
.ce-sdp__back:hover,
.ce-sdp__back:focus-visible {
	color: var(--ce-color-rust);
}

/* -------------------------------------------------------------- focus states */
.ce-sdp a:focus-visible {
	outline: 2px solid var(--ce-color-rust);
	outline-offset: 3px;
	border-radius: 3px;
}

/* ------------------------------------------------------------- 640 and above */
@media (min-width: 640px) {
	.ce-sdp__title { font-size: 2.1rem; }
}

/* ------------------------------------------------------------- 768 and above */
@media (min-width: 768px) {
	.ce-sdp { padding: 30px 0 var(--ce-space-9); }
}

/* ------------------------------------------------------------ 1024 and above */
@media (min-width: 1024px) {
	.ce-sdp__top { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; }
	.ce-sdp__media { padding: 8px; }
	.ce-sdp__title { font-size: 2.4rem; }
	.ce-sdp__lede { font-size: 1.05rem; }
	.ce-sdp__quote { padding: 26px 24px; }
}

/* ------------------------------------------------------------ 1280 and above */
@media (min-width: 1280px) {
	.ce-sdp__top { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 52px; }
	.ce-sdp__title { font-size: 2.6rem; }
}