/**
 * core/table – "Pricing" style: package comparison. The header row holds one
 * package per column: name (first <strong>), short description, price (last
 * <strong>) and a note (<sub>); an optional <sup> becomes a badge. The third
 * column is the highlighted package. Wide tables scroll sideways on phones.
 */

/* Room for the badge above the table (the scrolling wrapper would clip it). */
.wp-block-table.is-style-pricing {
	padding-block-start: 1rem;
}

.wp-block-table.is-style-pricing table {
	min-width: 48rem;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
}

.wp-block-table.is-style-pricing :is(th, td) {
	padding: 0.4rem var(--wp--preset--spacing--30);
	border: 0;
	border-block-end: 1px solid var(--wp--custom--line--subtle);
	color: var(--wp--preset--color--muted);
	font-weight: 400;
	text-align: center;
	vertical-align: middle;
}

.wp-block-table.is-style-pricing :is(th, td):first-child {
	width: 26%;
	padding-inline-start: 0;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	text-align: start;
}

.wp-block-table.is-style-pricing thead {
	border: 0;
}

.wp-block-table.is-style-pricing thead th {
	position: relative;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
	border-block-end: 0;
	line-height: 1.5;
	vertical-align: top;
}

.wp-block-table.is-style-pricing thead strong {
	display: block;
	margin-block-end: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
}

.wp-block-table.is-style-pricing thead strong:last-of-type:not(:first-of-type) {
	margin-block: var(--wp--preset--spacing--40) 0;
	font-size: var(--wp--preset--font-size--lg);
}

.wp-block-table.is-style-pricing thead sub {
	font-size: var(--wp--preset--font-size--xs);
	vertical-align: baseline;
}

/* Value line under a price (`<mark>`, the editor's highlight format), e.g.
   when the package pays off; accent coloured, like on the package cards. */
.wp-block-table.is-style-pricing thead mark {
	display: block;
	margin-block-start: var(--wp--preset--spacing--20);
	background: none;
	color: var(--rowww-accent-text-start);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 1.4;
}

.wp-block-table.is-style-pricing thead mark::before {
	content: "↗ ";
	font-weight: 600;
}

.wp-block-table.is-style-pricing thead sup {
	position: absolute;
	top: 0;
	left: 50%;
	padding: 0.35rem 1rem;
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--rowww-accent-start);
	color: var(--rowww-accent-on);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
	transform: translate(-50%, -50%);
}

/* Highlighted package: the third column. */
.wp-block-table.is-style-pricing :is(th, td):nth-child(3) {
	border-inline: 1px solid var(--rowww-accent-start);
	background: color-mix(in srgb, var(--rowww-accent-start) 10%, transparent);
	color: var(--wp--preset--color--contrast);
}

.wp-block-table.is-style-pricing thead th:nth-child(3) {
	border-block-start: 1px solid var(--rowww-accent-start);
	border-start-start-radius: var(--wp--preset--border-radius--card);
	border-start-end-radius: var(--wp--preset--border-radius--card);
}

.wp-block-table.is-style-pricing tbody tr:last-child td:nth-child(3) {
	border-block-end: 1px solid var(--rowww-accent-start);
	border-end-start-radius: var(--wp--preset--border-radius--card);
	border-end-end-radius: var(--wp--preset--border-radius--card);
}

.wp-block-table.is-style-pricing tbody tr:last-child td {
	padding-block-end: var(--wp--preset--spacing--40);
	border-block-end: 0;
}

.wp-block-table.is-style-pricing figcaption {
	margin-block-start: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	text-align: start;
}

/*
 * Phones: the table (Pricing and Comparison styles) scrolls sideways. The
 * right edge fades out while there is more to see, and a "swipe" pill
 * above the table (paragraph with `rowww-scroll-hint`) fades away once
 * scrolling starts. The fades are
 * scroll-driven animations: no JavaScript; browsers without support simply
 * show both.
 */
.rowww-scroll-hint {
	display: none;
}

@property --rowww-edge-fade {
	syntax: "<number>";
	inherits: false;
	initial-value: 0;
}

@media (max-width: 781px) {

	/* A clear pill: accent outline, white text and a swipe track. */
	.rowww-scroll-hint {
		display: flex;
		gap: 0.6em;
		align-items: center;
		justify-content: center;
		width: fit-content;
		margin-inline: auto;
		margin-block-end: calc(-1 * var(--wp--preset--spacing--40));
		padding: 0.6rem 1.1rem;
		border: 1px solid var(--rowww-accent-start);
		border-radius: var(--wp--preset--border-radius--pill);
		background: color-mix(in srgb, var(--rowww-accent-start) 18%, transparent);
		color: var(--wp--preset--color--contrast);
		font-size: var(--wp--preset--font-size--sm);
		font-weight: 600;
		box-shadow: 0 0 1.5rem color-mix(in srgb, var(--rowww-accent-start) 35%, transparent);
	}

	/* Swipe gesture: a dot sliding along a short track. */
	.rowww-scroll-hint::after {
		content: "";
		flex: none;
		width: 2.25rem;
		height: 0.5rem;
		border-radius: var(--wp--preset--border-radius--pill);
		background:
			radial-gradient(circle, var(--rowww-accent-text-start) 0 0.2rem, transparent 0.22rem) no-repeat,
			color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
		background-size: 0.5rem 0.5rem, auto;
		animation: rowww-swipe 1.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
	}

	/* Wide enough that every package column (about 15rem) reads without
	   breaking after every word; the table scrolls sideways. */
	.wp-block-table.is-style-pricing table {
		min-width: 54rem;
	}

	.wp-block-table.is-style-pricing :is(th, td):first-child {
		width: 9.5rem;
	}

	/* Thin accent scrollbar with room below the table, so it never overlaps it. */
	.wp-block-table.is-style-pricing {
		padding-block-end: var(--wp--preset--spacing--30);
		scrollbar-color: var(--rowww-accent-start) transparent;
		scrollbar-width: thin;
	}

	.wp-block-table.is-style-comparison {
		scrollbar-color: var(--rowww-accent-start) transparent;
		scrollbar-width: thin;
	}

	.wp-block-table:is(.is-style-pricing, .is-style-comparison) {
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3.5rem), rgb(0 0 0 / var(--rowww-edge-fade)));
		mask-image: linear-gradient(90deg, #000 calc(100% - 3.5rem), rgb(0 0 0 / var(--rowww-edge-fade)));
	}
}

@keyframes rowww-swipe {

	0%,
	15% {
		background-position: 100% 50%, 0 0;
	}

	70%,
	100% {
		background-position: 0 50%, 0 0;
	}
}

@supports (animation-timeline: scroll()) {

	@media (max-width: 781px) {

		/* The hint and the table share the table's scroll timeline. */
		.rowww-section:has(> .wp-block-table:is(.is-style-pricing, .is-style-comparison)) {
			timeline-scope: --rowww-pricing-scroll;
		}

		.wp-block-table:is(.is-style-pricing, .is-style-comparison) {
			scroll-timeline: --rowww-pricing-scroll inline;
			animation: rowww-edge-reveal linear both;
			animation-timeline: --rowww-pricing-scroll;
			animation-range: 85% 100%;
		}

		.rowww-scroll-hint {
			animation: rowww-hint-out linear both;
			animation-timeline: --rowww-pricing-scroll;
			animation-range: 0% 15%;
		}
	}
}

@keyframes rowww-edge-reveal {

	to {
		--rowww-edge-fade: 1;
	}
}

@keyframes rowww-hint-out {

	to {
		opacity: 0;
		transform: translateY(-0.25rem);
	}
}

/**
 * core/table – "Comparison" style: options side by side in an outlined
 * card. In a cell, bold text (Ctrl/Cmd+B) renders as a lime check circle
 * and strikethrough text as a grey cross circle; any other text stays text
 * (e.g. "partly"). The header row names the options; the first column holds
 * the criteria.
 */
.wp-block-table.is-style-comparison {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--custom--line--default);
	border-radius: var(--wp--preset--border-radius--card);
}

.wp-block-table.is-style-comparison table {
	min-width: 44rem;
	border-collapse: collapse;
}

.wp-block-table.is-style-comparison :is(th, td) {
	padding: 1.05rem 0.75rem;
	border: 0;
	border-block-end: 1px solid var(--wp--custom--line--subtle);
	color: var(--wp--preset--color--muted);
	text-align: center;
	vertical-align: middle;
}

.wp-block-table.is-style-comparison tr:last-child td {
	border-block-end: 0;
}

.wp-block-table.is-style-comparison thead {
	border: 0;
}

.wp-block-table.is-style-comparison thead th {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
}

.wp-block-table.is-style-comparison :is(th, td):first-child {
	width: 34%;
	padding-inline-start: 0;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	text-align: start;
}

.wp-block-table.is-style-comparison td :is(strong, s) {
	display: inline-grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	font-size: 0;
	text-decoration: none;
	vertical-align: middle;
}

/* Check: lime circle with a dark tick. */
.wp-block-table.is-style-comparison td strong {
	background: var(--wp--preset--color--cta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.2l2.7 2.7L14.2 7.4' fill='none' stroke='%230B0B0B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* Cross: grey circle with a dark ×. */
.wp-block-table.is-style-comparison td s {
	background: var(--wp--preset--color--muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 7l6 6M13 7l-6 6' fill='none' stroke='%230B0B0B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/*
 * Phones: a narrower criteria column and slimmer cells, so the criteria and
 * the highlighted (first) option fit side by side without scrolling; the
 * other options are a swipe away.
 */
@media (max-width: 781px) {

	.wp-block-table.is-style-comparison {
		padding-inline: var(--wp--preset--spacing--30);
	}

	.wp-block-table.is-style-comparison table {
		min-width: 34rem;
	}

	.wp-block-table.is-style-comparison :is(th, td) {
		padding: 0.9rem 0.5rem;
		font-size: var(--wp--preset--font-size--sm);
	}

	.wp-block-table.is-style-comparison :is(th, td):first-child {
		width: 8.5rem;
		hyphens: auto;
	}

	.wp-block-table.is-style-comparison thead th {
		font-size: var(--wp--preset--font-size--sm);
		hyphens: auto;
	}
}

/*
 * core/table – "Data sheet" style: label/value rows, e.g. company details or
 * one data processing purpose (data, legal basis, retention). The first
 * column is the muted label, the rest the value; no outer frame, only thin
 * row lines. On phones the label sits above its value.
 */
.wp-block-table.is-style-data table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table.is-style-data :is(th, td) {
	padding: var(--wp--preset--spacing--20) 0;
	border: 0;
	border-block-end: 1px solid var(--wp--custom--line--subtle);
	line-height: 1.6;
	text-align: start;
	vertical-align: top;
}

.wp-block-table.is-style-data tr:last-child > * {
	border-block-end: 0;
}

.wp-block-table.is-style-data :is(th, td):first-child {
	width: 34%;
	padding-inline-end: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

@media (max-width: 599px) {

	.wp-block-table.is-style-data :is(tr, th, td) {
		display: block;
		width: auto;
	}

	.wp-block-table.is-style-data :is(th, td):first-child {
		width: auto;
		padding-block-end: 0;
		border-block-end: 0;
	}
}

/*
 * "Comparison" with our own column highlighted: `is-highlight-last` (the last
 * column) or `is-highlight-first` (the first option after the criteria). The
 * column becomes a rounded accent band with a thin accent edge, like a
 * highlighted package; its heading takes the accent text colour and its text
 * answers stand out. Cells use `separate` borders so the corners can round.
 */
.wp-block-table.is-style-comparison:is(.is-highlight-last, .is-highlight-first) table {
	border-collapse: separate;
	border-spacing: 0;
}

.wp-block-table.is-style-comparison.is-highlight-last :is(th, td):last-child,
.wp-block-table.is-style-comparison.is-highlight-first :is(th, td):nth-child(2) {
	--rowww-band-edge: color-mix(in srgb, var(--rowww-accent-start) 55%, transparent);

	background: color-mix(in srgb, var(--rowww-accent-start) 12%, transparent);
	box-shadow: inset 1px 0 0 var(--rowww-band-edge), inset -1px 0 0 var(--rowww-band-edge);
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.wp-block-table.is-style-comparison.is-highlight-last thead th:last-child,
.wp-block-table.is-style-comparison.is-highlight-first thead th:nth-child(2) {
	border-start-start-radius: var(--wp--preset--border-radius--sm);
	border-start-end-radius: var(--wp--preset--border-radius--sm);
	background: color-mix(in srgb, var(--rowww-accent-start) 22%, transparent);
	box-shadow: inset 1px 0 0 var(--rowww-band-edge), inset -1px 0 0 var(--rowww-band-edge), inset 0 1px 0 var(--rowww-band-edge);
	color: var(--rowww-accent-text-start);
	font-size: var(--wp--preset--font-size--md);
}

.wp-block-table.is-style-comparison.is-highlight-last tr:last-child td:last-child,
.wp-block-table.is-style-comparison.is-highlight-first tr:last-child td:nth-child(2) {
	border-end-start-radius: var(--wp--preset--border-radius--sm);
	border-end-end-radius: var(--wp--preset--border-radius--sm);
	box-shadow: inset 1px 0 0 var(--rowww-band-edge), inset -1px 0 0 var(--rowww-band-edge), inset 0 -1px 0 var(--rowww-band-edge);
}

@media (forced-colors: active) {

	.wp-block-table.is-style-comparison.is-highlight-last :is(th, td):last-child,
	.wp-block-table.is-style-comparison.is-highlight-first :is(th, td):nth-child(2) {
		border-inline: 2px solid Highlight;
	}
}

/*
 * "Pricing": a highlighted row (AI features). The label is wrapped in
 * `<span class="rowww-pricing-ai">`: accent gradient text with a spark, and
 * the whole row gets a faint accent tint.
 */
.wp-block-table.is-style-pricing .rowww-pricing-ai {
	background: linear-gradient(90deg, var(--rowww-accent-text-start), var(--rowww-accent-text-end));
	-webkit-background-clip: text;
	background-clip: text;
	color: var(--rowww-accent-text-start);
	-webkit-text-fill-color: transparent;
}

.wp-block-table.is-style-pricing .rowww-pricing-ai::before {
	content: "✦" / "";
	margin-inline-end: 0.4em;
}

.wp-block-table.is-style-pricing tr:has(.rowww-pricing-ai) > td {
	background-color: color-mix(in srgb, var(--rowww-accent-start) 9%, transparent);
}

@media (forced-colors: active) {

	.wp-block-table.is-style-pricing .rowww-pricing-ai {
		background: none;
		-webkit-text-fill-color: currentcolor;
	}
}