/*
 * Creative Exposure V2 - Specialty & Bulk quote catalog presentation.
 *
 * A high-end visual catalog rather than a text directory: large product cards on the wide white
 * surface, the image dominant, one factual line beneath the name, the governed order requirement
 * where one applies, and a quote action that carries the product with it. No prices anywhere,
 * because nothing on this page is priced online.
 *
 * The hero, note strip, section shell, tags, buttons and cross-links come from style.css and
 * ce-catalog.css. Presentation only: no pricing, cart, checkout or SEO logic. No em dashes.
 */

.ce-spec { background: var(--ce-color-bg-page); color: var(--ce-color-text); }

/* Sticky category strip, matching the FAQ topic strip rhythm. */
.ce-spec__nav { position: sticky; top: var(--ce-header-h); z-index: 20; background: var(--ce-color-bg-cream); border-bottom: 1px solid var(--ce-color-border); }
.ce-spec__nav .ce-container { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-top: 12px; padding-bottom: 12px; }
.ce-spec__nav-l { flex-shrink: 0; font-size: 0.72rem; font-weight: var(--ce-fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ce-color-text-muted); margin-right: 4px; }
.ce-spec__chip { flex-shrink: 0; white-space: nowrap; font-size: 0.8rem; font-weight: var(--ce-fw-semibold); color: var(--ce-color-text-mid); background: var(--ce-color-bg-page); border: 1px solid var(--ce-color-border); border-radius: var(--ce-radius-pill); padding: 8px 15px; transition: color var(--ce-transition), background-color var(--ce-transition), border-color var(--ce-transition); }
.ce-spec__chip:hover { color: var(--ce-color-bg-page); background: var(--ce-color-rust); border-color: var(--ce-color-rust); }

.ce-spec__body { padding-top: 36px; padding-bottom: 72px; }

/* Category block. */
.ce-spec__group { margin-bottom: 60px; scroll-margin-top: calc(var(--ce-header-h) + 72px); }
.ce-spec__group:last-of-type { margin-bottom: 28px; }
.ce-spec__ghead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 26px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 26px; border-bottom: 2px solid var(--ce-color-black); }
.ce-spec__ghead h2 { font-size: 1.75rem; line-height: 1.12; margin: 0 0 8px; }
.ce-spec__ghead p { font-size: 0.95rem; line-height: 1.7; color: var(--ce-color-text-mid); margin: 0; max-width: 78ch; }
.ce-spec__count { flex-shrink: 0; font-size: 0.8rem; font-weight: var(--ce-fw-medium); color: var(--ce-color-text-muted); }

/* Cards: one across on mobile, two on tablet, three from 1280 so the image stays large. */
.ce-spec__grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.ce-spec-card { position: relative; display: flex; flex-direction: column; background: var(--ce-color-bg-page); border: 1.5px solid var(--ce-line-dark); border-radius: var(--ce-radius-card-sm); overflow: hidden; transition: transform var(--ce-transition), border-color var(--ce-transition), box-shadow var(--ce-transition); }
.ce-spec-card:hover { transform: translateY(-4px); border-color: rgba(181, 86, 42, 0.6); box-shadow: 0 20px 42px -22px rgba(28, 26, 23, 0.38); }

/* The whole card is the link. The single CTA anchor carries a full-card overlay, so the image,
   the title and the body all navigate to the capability detail page while the document still holds
   exactly one anchor, one tab stop and one accessible name per card. No anchor is nested inside
   another and navigation never depends on JavaScript. Focus is drawn on the card itself, because
   the small CTA pill is not where the eye looks when the whole card is the target. */
.ce-spec-card:focus-within { border-color: var(--ce-color-rust); outline: 2px solid var(--ce-color-rust); outline-offset: 3px; }
/* Card media frame. Same rule as the product catalog card in ce-catalog.css, for the same reason:
   this frame is a fixed 4 / 3 but the capability artwork is a 2:3 sheet, so contain painted every
   picture as a narrow strip floating between two wide cream bands. Covering the frame fills it, and
   holding the top of the composition keeps the capability name and its hero panel legible on the
   card. The full artwork is still shown natively on the capability detail page. */
.ce-spec-card__media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--ce-color-bg-cream); overflow: hidden; }
.ce-spec-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.5s ease; }
.ce-spec-card:hover .ce-spec-card__media img { transform: scale(1.04); }

/* Neutral panel where the library holds no photograph that genuinely depicts the product. It is
   deliberately plain, so it reads as "no photograph yet" rather than as a stand-in product. */
.ce-spec-card__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(28, 26, 23, 0.16); background: repeating-linear-gradient(135deg, var(--ce-color-bg-cream) 0 14px, rgba(28, 26, 23, 0.02) 14px 28px); }

.ce-spec-card__b { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 20px; }
.ce-spec-card__t { font-size: 1.05rem; font-weight: var(--ce-fw-bold); line-height: 1.25; color: var(--ce-color-text); margin: 0 0 8px; }
.ce-spec-card__d { font-size: 0.9rem; line-height: 1.65; color: var(--ce-color-text-mid); margin: 0 0 16px; }

/* Governed order requirement. Deliberately loud enough to read before the action below it. */
.ce-spec-card__min { display: inline-flex; align-self: flex-start; align-items: center; font-size: 0.72rem; font-weight: var(--ce-fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ce-color-rust); background: var(--ce-rust-pale); border-radius: var(--ce-radius-pill); padding: 7px 14px; margin: 0 0 16px; }

.ce-spec-card__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 0.72rem; font-weight: var(--ce-fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ce-color-text); border: 1px solid rgba(28, 26, 23, 0.3); border-radius: var(--ce-radius-pill); padding: 9px 16px; transition: background-color var(--ce-transition), border-color var(--ce-transition), color var(--ce-transition); }
.ce-spec-card:hover .ce-spec-card__cta,
.ce-spec-card__cta:hover,
.ce-spec-card__cta:focus-visible { background: var(--ce-color-rust); border-color: var(--ce-color-rust); color: var(--ce-color-bg-page); }
.ce-spec-card__cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ce-spec-card__cta:focus-visible { outline: none; }

.ce-spec__note { font-size: 0.88rem; line-height: 1.7; color: var(--ce-color-text-muted); margin: 0; padding-top: 24px; border-top: 1px solid var(--ce-line-dark); max-width: 92ch; }

@media (min-width: 768px) {
	.ce-spec__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.ce-spec__nav .ce-container { flex-wrap: wrap; overflow-x: visible; row-gap: 8px; }
}
@media (min-width: 1024px) {
	.ce-spec__ghead h2 { font-size: 2rem; }
	.ce-spec__body { padding-top: 44px; padding-bottom: 88px; }
}
@media (min-width: 1280px) {
	.ce-spec__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
}