/**
 * Pricing page styles — matches pricing_rcc_industrial_pivot/code.html,
 * adapted to the established RCC conventions (square-cornered content
 * panels, rounded corners reserved for buttons, existing typography/button
 * system). Loaded only on the Pricing page (see functions.php).
 *
 * The actual pricing content (tables, cards, copy) lives in the Page's own
 * post content (see patterns/pricing-content.php) so it stays editable
 * through the normal WordPress editor — this stylesheet only styles the
 * classNames those blocks carry.
 *
 * Note on block-gap: rather than a blanket reset, only the direct children
 * of components arranged with CSS flex/grid get `margin: 0` here — surgical
 * and scoped to each component, so nothing here can accidentally cancel an
 * `margin-inline: auto` centering rule the way the Home-page incident did.
 */

.rcc-pricing-container {
	max-width: var(--wp--custom--container--max);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg);
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */
.rcc-pricing-hero {
	margin-bottom: var(--wp--preset--spacing--xl);
	border-left: 4px solid var(--wp--preset--color--primary);
	padding-left: var(--wp--preset--spacing--md);
}
.rcc-pricing-hero__row {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md);
}
.rcc-pricing-hero__row > * {
	margin: 0;
}
@media (min-width: 768px) {
	.rcc-pricing-hero__row {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
}
.rcc-pricing-hero__main {
	display: flex;
	flex-direction: column;
}
.rcc-pricing-hero__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--xs);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--label-caps);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.rcc-pricing-hero__title {
	margin: 0;
}
.rcc-pricing-hero__note {
	margin: var(--wp--preset--spacing--sm) 0 0;
	color: var(--wp--preset--color--on-surface-variant);
}
.rcc-pricing-hero__note + .rcc-pricing-hero__note {
	margin-top: 2px;
}
.rcc-pricing-hero__meta {
	display: flex;
	flex-direction: column;
}
.rcc-pricing-hero__meta > * {
	margin: 0;
	color: var(--wp--preset--color--on-surface-variant);
}
@media (min-width: 768px) {
	.rcc-pricing-hero__meta {
		text-align: right;
	}
}

/* ---------------------------------------------------------------------- */
/* Category sections + tables                                             */
/* ---------------------------------------------------------------------- */
.rcc-pricing-category {
	margin-bottom: var(--wp--preset--spacing--xl);
}
.rcc-pricing-category__heading {
	margin: 0 0 var(--wp--preset--spacing--md);
}
.rcc-pricing-table-card {
	background-color: var(--wp--preset--color--surface-container-lowest);
	border: 1px solid var(--wp--preset--color--outline-variant);
}
.rcc-pricing-table-card > * {
	margin: 0;
}
.rcc-pricing-table-card__subhead {
	padding: var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--surface-container-low);
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 700;
}
.rcc-pricing-table-card__footnote {
	padding: var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--surface-container-low);
	border-top: 1px solid var(--wp--preset--color--outline-variant);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--on-surface-variant);
}
.rcc-pricing-table {
	margin: 0;
}
/*
 * Same fix as the Products page's Application Table: WordPress core puts a
 * 1px border on every td/th plus a 3px thead border by default
 * (wp-includes/blocks/table/style.css), which produces a boxed/spreadsheet
 * look. Cleared here and replaced with the editorial, horizontal-rule-only
 * treatment from the Stitch source.
 */
.rcc-pricing-table table {
	width: 100%;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-md);
	border-collapse: collapse;
}
.rcc-pricing-table th,
.rcc-pricing-table td {
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
	text-align: left;
	padding: var(--wp--preset--spacing--md);
}
/*
 * Same fix as the Products page's Application Table: core's
 * .has-fixed-layout td/th rule (wp-includes/blocks/table/style.css) sets
 * word-break: break-word, which browsers treat as word-break: normal +
 * overflow-wrap: anywhere -- it breaks mid-word eagerly ("Concentra" /
 * "te") even when a normal space-based line break would fit. Restoring
 * word-break: normal and using overflow-wrap: break-word keeps whole
 * words together whenever possible, only breaking within a word as a
 * last resort.
 *
 * This has to be a separate, more specific rule (not just added to the
 * block above): core's selector is `.wp-block-table .has-fixed-layout td`
 * -- two classes plus an element -- and on this table `rcc-pricing-table`
 * and `wp-block-table` are both classes on the same <figure> (see
 * patterns/pricing-content.php), so plain `.rcc-pricing-table td` (one
 * class) has lower specificity than core's rule and loses regardless of
 * source order. Compounding the two classes and adding the `table` hop
 * (`.rcc-pricing-table.wp-block-table table td`) is unambiguously more
 * specific than core's rule, so it wins outright.
 */
.rcc-pricing-table.wp-block-table table th,
.rcc-pricing-table.wp-block-table table td {
	word-break: normal;
	overflow-wrap: break-word;
}
.rcc-pricing-table tbody tr:last-child th,
.rcc-pricing-table tbody tr:last-child td {
	border-bottom: none;
}
/*
 * A rowspan="2" product-name cell lives in the DOM row above the table's
 * true last row, so `tr:last-child` above never matches it — it keeps its
 * own 1px bottom border while the last row's other cells correctly lose
 * theirs, leaving a heavier border segment under just that column. Every
 * rowspan in this content spans exactly the final two rows of its table,
 * so the rowspan cell is always in tr:nth-last-child(2); scoped to
 * [rowspan] specifically so this can't affect any other cell.
 */
.rcc-pricing-table tbody tr:nth-last-child(2) td[rowspan] {
	border-bottom: none;
}
.rcc-pricing-table thead tr {
	background-color: var(--wp--preset--color--surface-container-highest);
}
.rcc-pricing-table th {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--label-caps);
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: none;
	color: var(--wp--preset--color--on-surface-variant);
}
.rcc-pricing-table td {
	font-weight: 500;
}
.rcc-pricing-table td.has-text-align-right,
.rcc-pricing-table th.has-text-align-right {
	text-align: right;
}
.rcc-pricing-table td em {
	display: inline-block;
	margin-top: 2px;
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 400;
}

/* ---------------------------------------------------------------------- */
/* MOQ / Shipping / Tiered Partnership bento                              */
/* ---------------------------------------------------------------------- */
.rcc-pricing-bento {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--lg);
	margin-bottom: var(--wp--preset--spacing--xl);
}
/*
 * WordPress's default "flow" layout injects margin-block-start on every
 * child after the first (`.is-layout-flow > * + *`) inside this Group.
 * That gave cards 2 and 3 a 24px top margin the first card didn't have,
 * pushing them down and breaking the shared top edge — the grid's row
 * placement itself was already correct. Zeroing each card's own margin
 * (not the grid's gap, which still provides the intentional spacing)
 * removes the injected offset without touching gutters or grid layout.
 */
.rcc-pricing-bento > * {
	margin: 0;
}
@media (min-width: 768px) {
	.rcc-pricing-bento {
		grid-template-columns: repeat(3, 1fr);
	}
}
.rcc-pricing-bento-card {
	background-color: var(--wp--preset--color--surface-container-lowest);
	border: 1px solid var(--wp--preset--color--outline-variant);
	padding: var(--wp--preset--spacing--lg);
}
.rcc-pricing-bento-card--tier {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}
.rcc-pricing-bento-card__title {
	margin: 0 0 var(--wp--preset--spacing--md);
}
.rcc-pricing-bento-card__desc {
	margin: 0 0 var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--on-surface-variant);
}
.rcc-pricing-bento-card--tier .rcc-pricing-bento-card__desc {
	color: var(--wp--preset--color--on-primary);
	opacity: 0.9;
}
.rcc-pricing-bento-card__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--wp--preset--spacing--sm);
	padding-bottom: var(--wp--preset--spacing--xs);
	margin-bottom: var(--wp--preset--spacing--sm);
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
}
.rcc-pricing-bento-card__row > * {
	margin: 0;
}
.rcc-pricing-bento-card__row--last {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}
.rcc-pricing-bento-card__label {
	color: var(--wp--preset--color--on-surface-variant);
}
.rcc-pricing-bento-card--tier .rcc-pricing-bento-card__row {
	border-bottom-color: rgba(255, 255, 255, 0.3);
}
.rcc-pricing-bento-card--tier .rcc-text-data-mono {
	font-size: 12px;
}
.rcc-pricing-bento-card__checklist {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
}
.rcc-pricing-bento-card__checklist > * {
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
}
/*
 * Reuses the site's existing self-hosted Material Symbols Outlined icon
 * font (see .material-symbols-outlined in the global style.css) as a pure
 * CSS ::before icon, so these two checklist lines get their check-circle
 * mark with zero markup change — no new wp:html block, no pattern edit, no
 * need to re-insert the pattern or touch saved post content.
 */
.rcc-pricing-bento-card__checklist > *::before {
	content: "check_circle";
	font-family: "Material Symbols Outlined";
	font-weight: normal;
	font-style: normal;
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
	-webkit-font-feature-settings: "liga";
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
	color: var(--wp--preset--color--primary);
	font-size: 16px;
	line-height: 1;
	flex-shrink: 0;
}
.rcc-pricing-bento-card__actions {
	margin-top: var(--wp--preset--spacing--md);
}
.rcc-pricing-bento-card__actions .wp-block-button {
	width: 100%;
}
.is-style-inverse-solid .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--xl);
	border-radius: var(--wp--custom--radius--xl);
	background-color: #ffffff;
	color: var(--wp--preset--color--primary);
	/*
	 * font-family/font-size/font-weight/letter-spacing intentionally
	 * omitted here: they duplicated the theme.json button default exactly,
	 * so this now just inherits it (currently body-sm/14px) rather than
	 * pinning its own stale copy.
	 */
	text-transform: uppercase;
}
.is-style-inverse-solid .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--on-primary-container);
}

/* ---------------------------------------------------------------------- */
/* Visual section (Precision in Formulation)                              */
/* ---------------------------------------------------------------------- */
.rcc-pricing-visual {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--lg);
	align-items: center;
	background-color: var(--wp--preset--color--surface-container-low);
	border: 1px solid var(--wp--preset--color--outline-variant);
	padding: var(--wp--preset--spacing--lg);
}
.rcc-pricing-visual > * {
	margin: 0;
}
@media (min-width: 768px) {
	.rcc-pricing-visual {
		grid-template-columns: repeat(2, 1fr);
	}
}
.rcc-pricing-visual__text {
	display: flex;
	flex-direction: column;
}
.rcc-pricing-visual__text > * {
	margin: 0;
}
.rcc-pricing-visual__desc {
	margin: var(--wp--preset--spacing--sm) 0 var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--on-surface-variant);
}
.rcc-pricing-visual__stat {
	display: flex;
	flex-direction: column;
}
.rcc-pricing-visual__stat > * {
	margin: 0;
}
.rcc-pricing-visual__stat-value {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--headline-md);
	color: var(--wp--preset--color--primary);
}
.rcc-pricing-visual__stat-label {
	color: var(--wp--preset--color--on-surface-variant);
}
.rcc-pricing-visual__image {
	position: relative;
	height: 256px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--outline-variant);
}
.rcc-pricing-visual__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}