/*
 * cs-portfolio — the printed sheet.
 *
 * PHYSICAL UNITS THROUGHOUT. A face is sized in inches by the renderer
 * (width/height inline), type is in points, and the safe margin arrives as
 * --cs-sh-sx / --cs-sh-sy in inches. On screen a Card face is 528px wide;
 * on paper it is 5.5in; the builder scales the whole stage with a transform
 * when it needs to fit a window. Nothing here converts anything.
 *
 * ONE DOM, TEN TEMPLATES. Every face is a grid of the same children — cells,
 * an optional spine, one type block, an optional plate — and the template
 * class only rearranges them. See Templates::valid() for the rule that keeps
 * it that way.
 *
 * Colour is deliberate: paper white, near-black ink, one hairline grey. A
 * card is judged by its photographs; chrome has no business on it.
 */

.cs-sh {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45in;
	align-items: flex-start;
	--cs-sh-paper: #ffffff;
	--cs-sh-ink: #111111;
	--cs-sh-ink-2: #555555;
	--cs-sh-rule: #d9d9d6;
	--cs-sh-empty: #ececea;
	--cs-sh-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--cs-sh-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

.cs-sh-face-w { display: grid; gap: 0.08in; }
.cs-sh-label {
	font: 600 6.5pt/1 var(--cs-sh-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #8a8a8a;
}

.cs-sh-face {
	position: relative;
	box-sizing: border-box;
	display: grid;
	gap: 0.02in;
	padding: 0.02in;
	overflow: hidden;
	background: var(--cs-sh-paper);
	color: var(--cs-sh-ink);
	font-family: var(--cs-sh-sans);
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}
.cs-sh-face--flush { gap: 0; padding: 0; }
.cs-sh-face--bleed { outline: 0; }

/* ---- cells ------------------------------------------------------------ */
.cs-sh-cell {
	position: relative;
	overflow: hidden;
	min-width: 0;
	min-height: 0;
	background: var(--cs-sh-empty);
}
.cs-sh-cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cs-sh-cell--empty {
	display: grid;
	place-items: center;
	color: #a8a8a2;
	font: 6pt var(--cs-sh-mono);
	background: repeating-linear-gradient(45deg, #f4f4f2, #f4f4f2 0.06in, #ececea 0.06in, #ececea 0.12in);
}
@media print {
	/* On paper an unfilled slot is plain paper, never a numbered hatch. */
	.cs-sh-cell--empty { background: var(--cs-sh-paper); }
	.cs-sh-cell--empty span { display: none; }
}

/* ---- type block -------------------------------------------------------- */
.cs-sh-type {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.03in 0.1in;
	/* The safe margin is the floor; a template may pad more, never less. */
	padding: max(0.08in, var(--cs-sh-sy, 0in)) max(0.1in, var(--cs-sh-sx, 0in));
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	align-content: start;
	position: relative;
}
.cs-sh-type > * { grid-column: 1; margin: 0; }
/* The QR sits out of the grid's flow. As a spanning grid item its height was
   shared out across the text rows and opened a gap under the name. */
.cs-sh-type > .cs-sh-qr { position: absolute; right: max(0.1in, var(--cs-sh-sx, 0in)); bottom: max(0.08in, var(--cs-sh-sy, 0in)); }
.cs-sh-type--stats, .cs-sh-type--cv { padding-right: calc(max(0.1in, var(--cs-sh-sx, 0in)) + 0.95in); }
.cs-sh-type--caption { padding-right: calc(max(0.1in, var(--cs-sh-sx, 0in)) + 0.7in); }
.cs-sh-type h2 {
	font-size: 9pt;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
}

.cs-sh-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 0.12in;
	margin: 0;
	font: 7pt/1.5 var(--cs-sh-mono);
}
.cs-sh-stats div {
	display: flex;
	justify-content: space-between;
	gap: 0.06in;
	border-bottom: 1px solid var(--cs-sh-rule);
	padding: 0.01in 0;
}
.cs-sh-stats dt, .cs-sh-stats dd { margin: 0; }
.cs-sh-stats dt { color: var(--cs-sh-ink-2); }
.cs-sh-stats dd { font-variant-numeric: tabular-nums; text-align: right; }

.cs-sh-rep {
	font: 6.5pt/1.5 var(--cs-sh-mono);
	color: var(--cs-sh-ink-2);
}
.cs-sh-credits { font-size: 7.5pt; line-height: 1.5; }
.cs-sh-credits p { margin: 0 0 0.04in; }

.cs-sh-qr { width: 0.85in; height: 0.85in; }
.cs-sh-qr:empty { display: none; }
.cs-sh-qr canvas, .cs-sh-qr img { width: 100% !important; height: 100% !important; display: block; }

/* ---- plate: the name over the photograph ------------------------------- */
.cs-sh-plate {
	position: absolute;
	inset: auto 0 0 0;
	padding: 0.45in max(0.15in, var(--cs-sh-sx, 0in)) max(0.12in, var(--cs-sh-sy, 0in));
	color: #fff;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.74));
}
.cs-sh-plate b { display: block; font-size: 14pt; font-weight: 600; letter-spacing: 0.06em; }
.cs-sh-plate span { font: 6.5pt/1.6 var(--cs-sh-mono); letter-spacing: 0.08em; opacity: 0.85; }

/* ---- spine: the name set vertically ------------------------------------ */
.cs-sh-spine {
	writing-mode: vertical-rl;
	display: grid;
	align-content: center;
	justify-items: center;
	font-size: 8.5pt;
	font-weight: 600;
	letter-spacing: 0.24em;
	padding: max(0.06in, var(--cs-sh-sy, 0in)) 0 max(0.06in, var(--cs-sh-sy, 0in)) var(--cs-sh-sx, 0in);
	background: var(--cs-sh-paper);
}

/* ======================================================================
   TEMPLATES — grids only. A template that needs anything more than a
   grid arrangement of the children above is refused by the registry.
   ====================================================================== */

/* ---- professional -------------------------------------------------- */
.cs-sh-t-classic.cs-sh-f0,
.cs-sh-t-fiveup.cs-sh-f0,
.cs-sh-t-headsheet.cs-sh-f0,
.cs-sh-t-bleed.cs-sh-f0,
.cs-sh-t-poster.cs-sh-f0 { grid-template: minmax(0, 1fr) / 1fr; }

.cs-sh-t-classic.cs-sh-f1 { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto; }
.cs-sh-t-classic.cs-sh-f1 .cs-sh-type { grid-column: 1 / -1; }

.cs-sh-t-fiveup.cs-sh-f1 { grid-template-columns: 1fr 1fr; grid-template-rows: 1.3fr 1fr 1fr auto; }
.cs-sh-t-fiveup.cs-sh-f1 .cs-sh-cell[data-i="1"] { grid-column: 1 / -1; }
.cs-sh-t-fiveup.cs-sh-f1 .cs-sh-type { grid-column: 1 / -1; }

.cs-sh-t-headsheet.cs-sh-f1 { grid-template: minmax(0, 1fr) / 1fr; }
.cs-sh-t-headsheet.cs-sh-f1 .cs-sh-type { padding: max(0.3in, var(--cs-sh-sy, 0in)) max(0.3in, var(--cs-sh-sx, 0in)); gap: 0.08in 0.1in; }
.cs-sh-t-headsheet.cs-sh-f1 .cs-sh-type h2 { font-size: 13pt; }
.cs-sh-t-headsheet.cs-sh-f1 .cs-sh-stats { font-size: 8.5pt; }
.cs-sh-t-headsheet.cs-sh-f1 .cs-sh-rep { font-size: 8pt; }
.cs-sh-t-headsheet.cs-sh-f1 .cs-sh-credits { font-size: 9.5pt; }

.cs-sh-t-plain.cs-sh-f0 { grid-template-rows: 64% minmax(0, 1fr); }

/* ---- editorial ----------------------------------------------------- */
.cs-sh-t-bleed.cs-sh-f1 { grid-template-rows: repeat(3, minmax(0, 1fr)) auto; }
.cs-sh-t-bleed .cs-sh-type { background: var(--cs-sh-paper); }

.cs-sh-t-split.cs-sh-f0 { grid-template-columns: 1.08fr 1fr; }
.cs-sh-t-split.cs-sh-f0 .cs-sh-type { padding: max(0.15in, var(--cs-sh-sy, 0in)) max(0.12in, var(--cs-sh-sx, 0in)); }
.cs-sh-t-split.cs-sh-f0 .cs-sh-stats { grid-template-columns: 1fr; }
.cs-sh-t-split.cs-sh-f1 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.cs-sh-t-contact.cs-sh-f0 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)) auto; }
/* The strip carries the QR, so it keeps the caption's right-hand reserve —
   a padding shorthand here once wiped it, and the code printed over the end
   of the phone number — and it is tall enough for the code to print whole:
   0.6in of code, its bottom offset, and a hairline of air above. */
.cs-sh-t-contact.cs-sh-f0 .cs-sh-type {
	grid-column: 1 / -1;
	padding: 0.08in calc(max(0.1in, var(--cs-sh-sx, 0in)) + 0.7in) max(0.16in, var(--cs-sh-sy, 0in)) max(0.1in, var(--cs-sh-sx, 0in));
	min-height: calc(0.6in + max(0.08in, var(--cs-sh-sy, 0in)) + 0.08in);
}
.cs-sh-t-contact.cs-sh-f0 .cs-sh-qr { width: 0.6in; height: 0.6in; }

/* ---- creative ------------------------------------------------------ */
.cs-sh-t-poster.cs-sh-f0 .cs-sh-type {
	position: absolute;
	inset: auto 0 0 0;
	color: #fff;
	align-content: end;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
	padding: 0.6in max(0.18in, var(--cs-sh-sx, 0in)) max(0.18in, var(--cs-sh-sy, 0in));
}
.cs-sh-t-poster.cs-sh-f0 .cs-sh-type h2 { font-size: 26pt; line-height: 0.92; letter-spacing: -0.015em; }
.cs-sh-t-poster.cs-sh-f0 .cs-sh-rep { color: rgba(255, 255, 255, 0.82); }

.cs-sh-t-bands.cs-sh-f0 { grid-template-columns: 0.36in minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)) auto; }
.cs-sh-t-bands.cs-sh-f0 .cs-sh-cell { grid-column: 2; }
.cs-sh-t-bands.cs-sh-f0 .cs-sh-spine { grid-column: 1; grid-row: 1 / 4; }
.cs-sh-t-bands.cs-sh-f0 .cs-sh-type { grid-column: 1 / -1; }

.cs-sh-t-index.cs-sh-f0 { grid-template-columns: minmax(0, 1fr) 34%; grid-template-rows: 27% auto minmax(0, 1fr); background: var(--cs-sh-paper); }
.cs-sh-t-index.cs-sh-f0 .cs-sh-cell { grid-column: 2; grid-row: 1 / 3; }
/* Same reserve as every other type block that carries the code: without it
   the agency line ran under the QR. */
.cs-sh-t-index.cs-sh-f0 .cs-sh-type { grid-column: 1; grid-row: 1 / -1; padding: max(0.15in, var(--cs-sh-sy, 0in)) calc(max(0.12in, var(--cs-sh-sx, 0in)) + 0.95in) max(0.15in, var(--cs-sh-sy, 0in)) max(0.12in, var(--cs-sh-sx, 0in)); align-content: space-between; }
.cs-sh-t-index.cs-sh-f0 .cs-sh-type h2 { font-size: 12pt; letter-spacing: 0.04em; }
.cs-sh-t-index.cs-sh-f0 .cs-sh-stats { grid-template-columns: 1fr; font-size: 7.5pt; }
.cs-sh-t-index.cs-sh-f0 .cs-sh-rep { border-top: 1px solid var(--cs-sh-rule); padding-top: 0.08in; }

/* ---- the standalone sheet page ------------------------------------- */
.cs-sheet-page { margin: 0; background: #e9e9e6; }
.cs-sheet-page .cs-sh { padding: 0.4in; justify-content: center; }
.cs-sheet-page .cs-sh-face { box-shadow: 0 0.12in 0.4in rgba(0, 0, 0, 0.18); }

@media print {
	.cs-sheet-page, body { background: #fff; margin: 0; }
	/* Builder::fit_boot() scales a sheet to the screen; paper is 1:1. */
	.cs-sh { transform: none !important; margin-bottom: 0 !important; }
	.cs-sheet-page .cs-sh { display: block; padding: 0; }
	.cs-sh-face-w { display: block; }
	.cs-sh-label, .cs-print-hide { display: none !important; }
	.cs-sh-face { box-shadow: none; margin: 0; }
	/* A page break BETWEEN faces only; a one-face template must not emit a
	   blank trailing page. */
	.cs-sh-face-w:not(:last-child) { break-after: page; page-break-after: always; }
}