/*
 * Creative Exposure V2 - Artwork Templates resource library presentation.
 *
 * A compact grouped matrix, not a product-card grid. One product is one row: its identity sits in
 * a column of its own, and its sizes and print configurations sit beside it, so a product with
 * twelve PDFs stays one scannable row instead of twelve large cards.
 *
 * Every template is a PDF, so there is no format badge, no format chip and no format selector in
 * this stylesheet. The only download affordance is a single "Download PDF" control.
 *
 * At 1024 and above the record is two columns: identity left, matrix right, with each size as its
 * own block. Below 1024 the same record stacks cleanly: product, then size heading, then each
 * configuration with a full-width download beneath it. The core template data never scrolls
 * sideways at any width.
 *
 * The hero, section shell, tags, buttons and cross-links come from style.css and ce-catalog.css.
 * Presentation only: no pricing, cart, checkout or SEO logic. Approved breakpoints only
 * (640 / 768 / 1024 / 1280). DDR-001 palette tokens only. No supplier branding or vendor identity.
 * No em dashes.
 */

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

/* ------------------------------------------------------ Template User Guide */

.ce-tpl__guide { margin: 30px 0 4px; padding: 22px 22px 20px; background: var(--ce-color-bg-cream); border: 1px solid var(--ce-color-border); border-left: 3px solid var(--ce-color-rust); border-radius: var(--ce-radius-card-sm); }
.ce-tpl__guide-tag { display: inline-flex; font-size: 0.68rem; font-weight: var(--ce-fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ce-color-rust); margin-bottom: 8px; }
.ce-tpl__guide-h { font-size: 1.1rem; font-weight: var(--ce-fw-bold); line-height: 1.25; color: var(--ce-color-text); margin: 0 0 10px; }
.ce-tpl__guide-cols { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ce-tpl__guide-p { font-size: 0.95rem; line-height: 1.7; color: var(--ce-color-text-mid); margin: 0; max-width: 70ch; }
.ce-tpl__guide-warn { display: flex; align-items: flex-start; gap: 9px; font-size: 0.88rem; line-height: 1.65; font-weight: var(--ce-fw-medium); color: var(--ce-color-text); margin: 0; max-width: 70ch; }
.ce-tpl__guide-ic { flex-shrink: 0; display: inline-flex; margin-top: 1px; color: var(--ce-color-rust); }

/* ------------------------------------------------------------ Empty state */

.ce-tpl__empty { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 36px 0 72px; padding: 54px 24px 56px; background: var(--ce-color-bg-cream); border: 1px dashed var(--ce-line-dark); border-radius: var(--ce-radius-card); }
.ce-tpl__empty-ic { display: inline-flex; color: rgba(28, 26, 23, 0.22); margin-bottom: 16px; }
.ce-tpl__empty-h { font-size: 1.3rem; font-weight: var(--ce-fw-bold); line-height: 1.25; color: var(--ce-color-text); margin: 0 0 10px; }
.ce-tpl__empty-p { font-size: 0.95rem; line-height: 1.75; color: var(--ce-color-text-mid); margin: 0 0 24px; max-width: 64ch; }
.ce-tpl__empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ------------------------------------------------------- Category tabs */

/* Rendered as anchors and upgraded to tabs by the script, so the page works with JavaScript off. */
/* The strip clips horizontally so nothing inside it can widen the page, and the tab row is the
   only thing that scrolls. Both flex children carry min-width: 0 so neither can force a
   min-content width onto the viewport, which is what makes a page scroll sideways on a phone. */
.ce-tpl__tabs { position: sticky; top: var(--ce-header-h); z-index: 20; background: var(--ce-color-bg-cream); border-top: 1px solid var(--ce-color-border); border-bottom: 1px solid var(--ce-color-border); margin-top: 26px; overflow: hidden; }
.ce-tpl__tabs .ce-container { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 12px; padding-bottom: 12px; }
.ce-tpl__tabrow { flex: 1 1 100%; min-width: 0; display: flex; align-items: center; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.ce-tpl__tab { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 0.82rem; 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: 9px 16px; transition: color var(--ce-transition), background-color var(--ce-transition), border-color var(--ce-transition); }
.ce-tpl__tab:hover { color: var(--ce-color-bg-page); background: var(--ce-color-rust); border-color: var(--ce-color-rust); }
.ce-tpl__tab.is-active { color: var(--ce-color-bg-page); background: var(--ce-color-black); border-color: var(--ce-color-black); }
.ce-tpl__tab-n { font-size: 0.7rem; font-weight: var(--ce-fw-bold); color: var(--ce-color-text-muted); background: var(--ce-color-bg-cream); border-radius: var(--ce-radius-pill); padding: 2px 7px; }
.ce-tpl__tab:hover .ce-tpl__tab-n,
.ce-tpl__tab.is-active .ce-tpl__tab-n { color: var(--ce-color-text); background: rgba(253, 250, 246, 0.85); }
.ce-tpl__tabsearch { flex: 1 1 100%; min-width: 0; display: flex; }
.ce-tpl__tabsearch input { width: 100%; font-size: 0.86rem; color: var(--ce-color-text); background: var(--ce-color-bg-page); border: 1px solid var(--ce-color-border); border-radius: var(--ce-radius-pill); padding: 9px 16px; }
.ce-tpl__tabsearch input::placeholder { color: var(--ce-color-text-muted); }

/* ---------------------------------------------------------------- Matrix */

.ce-tpl__body { padding-top: 32px; padding-bottom: 72px; }
.ce-tpl__cat { margin-bottom: 46px; scroll-margin-top: calc(var(--ce-header-h) + 80px); }
.ce-tpl__cat:last-of-type { margin-bottom: 22px; }
.ce-tpl__cat.is-hidden { display: none; }
.ce-tpl__chead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 0; border-bottom: 2px solid var(--ce-color-black); }
.ce-tpl__chead h2 { font-size: 1.5rem; line-height: 1.16; margin: 0; }
.ce-tpl__ccount { flex-shrink: 0; font-size: 0.8rem; font-weight: var(--ce-fw-medium); color: var(--ce-color-text-muted); }

.ce-tpl__nomatch { display: none; font-size: 0.95rem; line-height: 1.7; color: var(--ce-color-text-mid); background: var(--ce-color-bg-cream); border: 1px solid var(--ce-color-border); border-radius: var(--ce-radius-card-sm); padding: 16px 18px; margin-bottom: 24px; }
.ce-tpl__nomatch.on { display: block; }
.ce-tpl__nomatch a { color: var(--ce-color-rust); text-decoration: underline; }

/* One PRODUCT is one row. Sizes and configurations live inside it. */
.ce-tpl-prod { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 22px 0 24px; border-bottom: 1px solid var(--ce-color-border); }
.ce-tpl-prod:last-child { border-bottom: 0; }
.ce-tpl-prod.is-hidden { display: none; }

/* Product / style identity. */
.ce-tpl-prod__id { display: flex; align-items: flex-start; gap: 14px; }
.ce-tpl-prod__visual { position: relative; flex-shrink: 0; width: 84px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: var(--ce-color-bg-cream); border: 1px solid var(--ce-color-border); border-radius: var(--ce-radius-card-sm); overflow: hidden; }
.ce-tpl-prod__visual img { width: 100%; height: 100%; object-fit: contain; object-position: center; }

/* Neutral mark where no accurate product or style visual exists. Deliberately not a borrowed
   photograph, and never presented as a preview of the PDF itself. */
.ce-tpl-prod__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(28, 26, 23, 0.2); background: repeating-linear-gradient(135deg, var(--ce-color-bg-cream) 0 12px, rgba(28, 26, 23, 0.02) 12px 24px); }

.ce-tpl-prod__idb { min-width: 0; }
.ce-tpl-prod__t { font-size: 1.05rem; font-weight: var(--ce-fw-bold); line-height: 1.25; color: var(--ce-color-text); margin: 0 0 4px; }
.ce-tpl-prod__style { font-size: 0.82rem; font-weight: var(--ce-fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ce-color-rust); margin: 0 0 8px; }
.ce-tpl-prod__note { font-size: 0.85rem; line-height: 1.6; color: var(--ce-color-text-mid); margin: 0 0 10px; }
.ce-tpl-prod__cta { display: inline-flex; align-items: center; gap: 7px; font-size: 0.7rem; font-weight: var(--ce-fw-bold); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ce-color-text); border: 1px solid rgba(28, 26, 23, 0.3); border-radius: var(--ce-radius-pill); padding: 7px 13px; transition: background-color var(--ce-transition), border-color var(--ce-transition), color var(--ce-transition); }
.ce-tpl-prod__cta:hover { background: var(--ce-color-rust); border-color: var(--ce-color-rust); color: var(--ce-color-bg-page); }

/* Size blocks and the configuration rows inside them. */
.ce-tpl-prod__sizes { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ce-tpl-size { min-width: 0; }
.ce-tpl-size__t { font-size: 0.74rem; font-weight: var(--ce-fw-bold); letter-spacing: 0.11em; text-transform: uppercase; color: var(--ce-color-text-muted); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--ce-color-border); }
.ce-tpl-size__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

/* Mobile first: the configuration name on its own line, then a full-width download action, so
   nothing is squeezed and no configuration name is clipped. */
.ce-tpl-cfg { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 11px 13px; background: var(--ce-color-bg-cream); border: 1px solid var(--ce-color-border); border-radius: var(--ce-radius-card-sm); }
.ce-tpl-cfg__l { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; font-size: 0.9rem; font-weight: var(--ce-fw-semibold); line-height: 1.4; color: var(--ce-color-text); min-width: 0; }
.ce-tpl-cfg__wt { font-size: 0.74rem; font-weight: var(--ce-fw-regular); color: var(--ce-color-text-muted); }
/* One action per approved format this configuration is genuinely supplied in. Each is labelled with
   its own format, so a customer never has to guess which file a button gives them. */
.ce-tpl-cfg__dls { display: flex; flex-wrap: wrap; gap: 8px; }
.ce-tpl-cfg__dl { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 0.72rem; font-weight: var(--ce-fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ce-color-text); background: var(--ce-color-bg-page); border: 1px solid rgba(28, 26, 23, 0.3); border-radius: var(--ce-radius-pill); padding: 10px 16px; transition: background-color var(--ce-transition), border-color var(--ce-transition), color var(--ce-transition); }
.ce-tpl-cfg__dl svg { flex-shrink: 0; }
/* The size sits inside its own action, so two formats show their own weights. */
.ce-tpl-cfg__dl .ce-tpl-cfg__wt { font-size: 0.68rem; font-weight: var(--ce-fw-regular); letter-spacing: 0; text-transform: none; color: var(--ce-color-text-muted); }
.ce-tpl-cfg__dl:hover .ce-tpl-cfg__wt,
.ce-tpl-cfg__dl:focus-visible .ce-tpl-cfg__wt { color: rgba(253, 250, 246, 0.75); }
.ce-tpl-cfg__dl:hover,
.ce-tpl-cfg__dl:focus-visible { background: var(--ce-color-rust); border-color: var(--ce-color-rust); color: var(--ce-color-bg-page); }

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

/* ------------------------------------- Product page contextual resource link */

.sp__template { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 18px 0 0; padding: 14px 16px; background: var(--ce-color-bg-cream); border: 1px solid var(--ce-color-border); border-left: 3px solid var(--ce-color-rust); border-radius: var(--ce-radius-card-sm); }
.sp__template-l { font-size: 0.92rem; font-weight: var(--ce-fw-semibold); color: var(--ce-color-text); }
.sp__template-a { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: var(--ce-fw-bold); letter-spacing: 0.04em; color: var(--ce-color-rust); text-decoration: underline; text-underline-offset: 3px; }
.sp__template-a:hover { color: var(--ce-color-text); }

/* ----------------------------------------------------------- Breakpoints */

@media (min-width: 640px) {
	/* Enough width for the configuration name and its action to share a line without crowding. */
	/* The configuration cell stays STACKED even on wide screens. Sizes are laid out as columns, so
	   each cell is narrow; putting the label beside the action squeezed "Single Sided, Print Thru
	   Reverse" into four cramped lines. Stacked, the label gets the full cell width and the actions
	   sit beneath it, which is also what makes room for two format buttons. */
	.ce-tpl-cfg { gap: 10px; }
	.ce-tpl-cfg__dls { flex-wrap: wrap; }
}

@media (min-width: 768px) {
	.ce-tpl__guide { padding: 26px 26px 24px; }
	/* Enough room for the tabs to wrap onto their own lines and the search to share the row. */
	.ce-tpl__tabrow { flex: 1 1 auto; flex-wrap: wrap; overflow-x: visible; row-gap: 8px; }
	.ce-tpl__tabsearch { flex: 0 1 260px; }
	.ce-tpl__chead h2 { font-size: 1.7rem; }
	.ce-tpl-prod__visual { width: 96px; }
}

@media (min-width: 1024px) {
	.ce-tpl__guide-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 32px; }

	/* Identity in its own column, the size and configuration matrix beside it. */
	.ce-tpl-prod { grid-template-columns: minmax(230px, 264px) minmax(0, 1fr); gap: 28px; padding: 26px 0 28px; }
	.ce-tpl-prod__id { position: sticky; top: calc(var(--ce-header-h) + 88px); align-self: start; }

	/* Sizes sit side by side once there is room, so a product with several sizes stays short. */
	.ce-tpl-prod__sizes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; }
}

@media (min-width: 1280px) {
	.ce-tpl__body { padding-top: 40px; }
	.ce-tpl__guide { margin-top: 36px; padding: 30px 32px 28px; }
	.ce-tpl-prod { grid-template-columns: minmax(250px, 290px) minmax(0, 1fr); gap: 34px; }
	.ce-tpl-prod__visual { width: 108px; }
	.ce-tpl-prod__sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 28px; }
}