/**
 * PW Comparison Table — genesis-custom-blocks/pw-table (v2.1)
 *
 * Design from Andreas's spec-table.css + SpecTable.jsx reference impl
 * (2026-05-21). Card layout at ALL widths because the PW article column
 * is 656px max — there is no viewport at which a 6-column real table
 * has room to breathe without wrapping. Each <tr> stacks as a self-
 * contained card with a navy gradient header, white body, monospace
 * tabular-nums on spec values, and a sky-blue accent for the recommended
 * row.
 *
 * The markup remains a semantic <table>/<thead>/<tbody> so crawlers and
 * LLMs see a real comparison table. CSS handles the visual stacking.
 *
 * Class names mirror Andreas's reference impl. Selectors are prefixed
 * with .pw-table-block (the outer <figure>) so class specificity (0,2,0)
 * cleanly overrides Astra's bare `table` styling.
 */

/* --- Design tokens (scoped to the block; safe to lift to :root later) --- */
.pw-table-block {
	--pw-ink-50:  #f7f8fa;
	--pw-ink-100: #eef0f3;
	--pw-ink-200: #e1e4ea;
	--pw-ink-500: #6b7a92;
	--pw-ink-600: #4b5b72;
	--pw-ink-700: #3a4760;
	--pw-ink-900: #0b1a2e;
	--pw-sky:     #28acdf;
	--pw-shadow-card: 0 1px 3px rgba(11, 26, 46, 0.06), 0 1px 2px rgba(11, 26, 46, 0.04);
	--pw-font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	margin: 24px 0 28px;
	padding: 0;
	font-family: var(--pw-font-ui);
	color: var(--pw-ink-700);
}

/* --- Outer block: eyebrow / title / subtitle (above the table) --- */
.pw-table-block__header {
	margin: 0 0 16px;
}
.pw-table-block__eyebrow {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #F26B1A;
	margin-bottom: 6px;
}
.pw-table-block__title {
	font-size: 1.4rem;
	font-weight: 700;
	margin: 0 0 6px;
	line-height: 1.25;
	color: var(--pw-ink-900);
}
.pw-table-block__subtitle {
	font-size: 0.95rem;
	color: var(--pw-ink-500);
	margin: 0;
	line-height: 1.5;
}

/* --- Table base — cards-always layout --- */
.pw-table-block .pw-table {
	display: block;
	width: 100%;
	background: transparent;
	border: none !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	border-radius: 0;
	box-shadow: none;
	font-family: var(--pw-font-ui);
	font-size: 14px;
	color: var(--pw-ink-700);
	margin: 0;
}

/* <thead> stays in the DOM for SEO/screen-readers but is visually hidden. */
.pw-table-block .pw-table thead {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pw-table-block .pw-table tbody {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Each <tr> = one card */
.pw-table-block .pw-table .pw-table__row {
	display: block;
	background: #fff;
	border: 1px solid var(--pw-ink-200);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--pw-shadow-card);
	position: relative;
}

/* Recommended card: sky-blue left rail + tint */
.pw-table-block .pw-table .pw-table__row--recommended {
	border-color: rgba(40, 172, 223, 0.35);
	border-left: 4px solid var(--pw-sky);
	background: linear-gradient(180deg, rgba(40, 172, 223, 0.04) 0%, rgba(56, 189, 248, 0.02) 100%);
}

/* All cells inside the card behave as blocks. The default cell padding
 * lives here (NOT on `tbody td`) so it beats the lower-specificity element
 * selector and applies to td.pw-table__cell uniformly. */
.pw-table-block .pw-table .pw-table__cell {
	display: block;
	padding: 11px 16px;
	border: none;
	border-top: 1px solid var(--pw-ink-100);
	color: var(--pw-ink-700);
}
.pw-table-block .pw-table .pw-table__th {
	display: block;
	padding: 0;
	border: none;
}

/* Scenario cell — navy gradient card header */
.pw-table-block .pw-table .pw-table__cell--scenario {
	background: linear-gradient(135deg, #0b1a2e 0%, #132a47 100%);
	color: #fff;
	padding: 14px 16px;
	text-align: center;
	border: none !important;
}
.pw-table-block .pw-table .pw-table__row--recommended .pw-table__cell--scenario {
	padding-left: 16px;
}
.pw-table-block .pw-table .pw-table__scenario-label {
	display: block;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}
.pw-table-block .pw-table .pw-table__scenario-note {
	display: block;
	color: rgba(255, 255, 255, 0.72);
	font-size: 12px;
	font-weight: 400;
	margin-top: 2px;
	font-style: italic;
}
.pw-table-block .pw-table .pw-table__recommended-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 9px 4px;
	border-radius: 999px;
	background: linear-gradient(135deg, #38bdf8 0%, #28acdf 100%);
	color: #0b1a2e;
	box-shadow: 0 2px 6px rgba(40, 172, 223, 0.35);
	margin-bottom: 6px;
	white-space: nowrap;
}

/* Column-name eyebrow above each cell's value */
.pw-table-block .pw-table .pw-table__cell::before {
	content: attr(data-label);
	display: block;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pw-ink-500);
	margin-bottom: 3px;
}
/* Scenario cell is the navy header — no eyebrow inside it */
.pw-table-block .pw-table .pw-table__cell--scenario::before {
	display: none;
}

/* Spec value cells — monospace tabular-nums for Aperture / Shutter / ISO */
.pw-table-block .pw-table .pw-table__cell[data-label="Aperture"],
.pw-table-block .pw-table .pw-table__cell[data-label="Shutter"],
.pw-table-block .pw-table .pw-table__cell[data-label="ISO"] {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--pw-ink-900);
}

/* Notes cell — tinted background to differentiate from spec rows */
.pw-table-block .pw-table .pw-table__cell--notes {
	background: var(--pw-ink-50);
	color: var(--pw-ink-600);
	font-size: 13px;
	line-height: 1.55;
}
.pw-table-block .pw-table .pw-table__row--recommended .pw-table__cell--notes {
	background: rgba(40, 172, 223, 0.05);
}

/* --- Caption --- */
.pw-table-block__caption {
	margin: 12px 2px 0;
	font-size: 0.82rem;
	color: var(--pw-ink-500);
	line-height: 1.5;
	font-style: normal;
}
.pw-table-block__caption a {
	color: var(--pw-sky);
}

/* --- Empty state (editors only) --- */
.pw-table-block--empty {
	padding: 16px;
	background: #f0f9ff;
	border: 1px dashed var(--pw-sky);
	border-radius: 8px;
	color: var(--pw-ink-600);
}