/*
 * Comparison table block.
 *
 * The Edumim template draws no "feature x format" matrix anywhere
 * (docs/figma-template/04-reuse-map.md, section 3), so only the section frame is
 * borrowed — from Pricing Table (docs/figma-template/blocks/pricing-table.md):
 * centred 44px heading with the brush stroke, rows running the full 1170 and
 * separated by 1px hairlines at 10% Dark, six line-art figures in the margins,
 * and the soft corner glow its "Blur Bg" layer gives the section. That glow is
 * the one place on this site where a section fill is not flat, and it is here
 * because the donor section is not flat either; it is mixed from the palette's
 * own accents at a tenth of their strength, so it reads as light rather than as
 * a second colour.
 *
 * The table and the narrow-screen behaviour are drawn from scratch. Mobile-first
 * means the cards are the base state and the table arrives at 782px — which is
 * also the specification's own requirement for this section: "на мобильном
 * таблица превращается в карточки, без горизонтального скролла текста".
 *
 * Turning table elements into blocks costs the table semantics in part of the
 * browsers, which is why render.php spells the roles out. The header row is
 * hidden with the screen-reader pattern rather than display:none, so the column
 * names stay in the accessibility tree while every cell also prints its own
 * caption from data-label. In table-navigation mode that says the column name
 * twice; the alternative was cells with no label at all wherever generated
 * content is not announced, which is the worse failure.
 *
 * Breakpoints are container queries, not media queries: the editor canvas is
 * narrower than the window, and a media query would style the block for a width
 * it does not actually have.
 */

.sws-comparison-table {
	container: sws-comparison-table / inline-size;

	/* Containing block for the decorative layer below. */
	position: relative;

	/* The corner figures reach past the section on purpose. */
	overflow: hidden;
}

/* The theme ships no global reset, so keep the box model local to the block. */
.sws-comparison-table,
.sws-comparison-table *,
.sws-comparison-table *::before,
.sws-comparison-table *::after {
	box-sizing: border-box;
}

/* Background
--------------------------------------------- */

.sws-comparison-table--bg-shade-warm {
	background-color: var(--wp--preset--color--shade-warm, #f8efee);
}

.sws-comparison-table--bg-shade-mint {
	background-color: var(--wp--preset--color--shade-mint, #e9fbfa);
}

.sws-comparison-table--bg-shade {
	background-color: var(--wp--preset--color--shade, #f8f8f8);
}

.sws-comparison-table--bg-white {
	background-color: var(--wp--preset--color--white, #fff);
}

/* Decoration
--------------------------------------------- */

/*
 * The layer itself carries the glow and stays at every width: it is the ground
 * of the section, not a figure placed for the wide layout. The figures below it
 * are the ones that wait for a margin to stand in.
 */
.sws-comparison-table__decor {
	position: absolute;
	inset: 0;

	/* Above the section fill, below everything in __inner. */
	z-index: 0;

	/* Blur Bg of the donor section: five 438px ellipses in the corners. */
	background-image:
		radial-gradient(30rem 30rem at 6% -6%, rgba(94, 185, 179, 0.14), transparent 62%),
		radial-gradient(30rem 30rem at 96% 4%, rgba(255, 178, 0, 0.10), transparent 62%),
		radial-gradient(30rem 30rem at 84% 104%, rgba(239, 87, 67, 0.09), transparent 62%),
		radial-gradient(26rem 26rem at 14% 96%, rgba(239, 87, 67, 0.07), transparent 62%);
}

.sws-comparison-table__shape {
	/* Placed for the wide layout; below that they would land on the table. */
	display: none;
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/*
 * The positions are deliberately not the layout's. In Figma the figures sit in
 * the 375px margins beside the 1170 container, and those margins only exist on a
 * 1920 canvas; here the container hugs the viewport. Five of the six move into
 * the vertical padding of the section, which is empty at any width, and the
 * protractor is the only one that genuinely needs a side margin — it stands
 * beside the table, so it waits for one.
 */
.sws-comparison-table__shape--rocket {
	top: 2rem;
	left: 2%;
	width: 4.8rem;
	aspect-ratio: 77 / 81;
	background-image: url("decor/rocket.svg");
}

.sws-comparison-table__shape--sparkle {
	top: 5rem;
	left: 7%;
	width: 1.625rem;
	aspect-ratio: 1;
	background-image: url("decor/sparkle.svg");
}

.sws-comparison-table__shape--pencil {
	top: 1.5rem;
	right: -1.5%;
	width: 8.875rem;
	aspect-ratio: 1;
	background-image: url("decor/pencil.svg");
}

.sws-comparison-table__shape--protractor {
	top: 52%;
	left: -1%;
	width: 5rem;
	aspect-ratio: 80 / 59;
	background-image: url("decor/protractor.svg");
}

.sws-comparison-table__shape--star {
	bottom: 2.5rem;
	left: 3.5%;
	width: 2.2rem;
	aspect-ratio: 35 / 30;
	background-image: url("decor/star.svg");
}

.sws-comparison-table__shape--ring {
	right: 2%;
	bottom: 4rem;
	width: 1.375rem;
	aspect-ratio: 1;
	background-image: url("decor/ring.svg");
}

.sws-comparison-table__inner {
	/* Lifts the content above the decoration. */
	position: relative;
	z-index: 1;

	/* 1170px of content plus the gutter, so the column matches the layout exactly. */
	max-width: calc(var(--wp--custom--container, 1170px) + var(--wp--custom--gutter, 1rem) * 2);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--70, clamp(3.5rem, 8vw, 8.5rem));
	padding-inline: var(--wp--custom--gutter, 1rem);
}

/* Section heading
--------------------------------------------- */

/* Centred, like the donor section's own title block. */
.sws-comparison-table__head {
	max-width: 42rem;
	margin: 0 auto var(--wp--preset--spacing--60, 3.5rem);
	text-align: center;
}

.sws-comparison-table__eyebrow {
	margin: 0 0 0.25rem;
	color: var(--wp--preset--color--secondary, #5eb9b3);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	font-weight: 500;
	line-height: 1.5;
}

.sws-comparison-table__title {
	margin: 0;
	color: var(--wp--preset--color--dark, #232d36);
	font-size: var(--wp--preset--font-size--huge, 2.75rem);
	font-weight: 700;
	line-height: 1.4;
}

/*
 * Hand-drawn stroke under the accent phrase. The file is shared by every block
 * that has a section heading, so the ragged path is defined once and cached
 * once; box-decoration-break keeps a stroke under every line when the phrase
 * wraps. See assets/brush.svg.
 */
.sws-comparison-table__accent {
	padding-bottom: 0.125rem;
	background-image: url("../../assets/brush.svg");
	background-repeat: no-repeat;
	background-position: 0 88%;
	background-size: 100% 0.08em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.sws-comparison-table__lead {
	margin: 1.5rem 0 0;
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	line-height: 1.5;
}

/* Cards — the base state
--------------------------------------------- */

.sws-comparison-table__table {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

/*
 * Off-screen but still in the accessibility tree, so the column names keep
 * labelling the cells while the layout is cards. See the file header.
 */
.sws-comparison-table__thead {
	display: block;
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.sws-comparison-table__table tbody {
	display: block;
}

.sws-comparison-table__row {
	display: block;
	padding: 1.5rem;
	border-radius: var(--wp--custom--radius, 8px);
	background-color: var(--wp--preset--color--white, #fff);
	box-shadow: var(--wp--custom--shadow--card, 0 4px 24px rgba(35, 45, 54, 0.08));
}

.sws-comparison-table__row + .sws-comparison-table__row {
	margin-top: 1rem;
}

.sws-comparison-table__cell {
	display: block;
	padding: 0;
	border: 0;
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
}

.sws-comparison-table__cell + .sws-comparison-table__cell {
	margin-top: 1rem;
}

/* A caption over nothing is worse than no caption: drop the whole cell. */
.sws-comparison-table__cell:empty {
	display: none;
}

/*
 * The value's caption, taken from the column it belongs to.
 *
 * Body rather than the Secondary an eyebrow would use: an eyebrow repeats a
 * heading that stands under it in Dark, so 2.32:1 costs nothing, while this
 * caption is the only thing saying which column the value belongs to once the
 * header row is off screen. Size and weight carry the distinction instead.
 */
.sws-comparison-table__cell::before {
	content: attr(data-label);
	display: block;
	margin-bottom: 0.125rem;
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5;
}

.sws-comparison-table__cell--key {
	color: var(--wp--preset--color--dark, #232d36);
	font-weight: 600;
}

/* Button and empty state
--------------------------------------------- */

.sws-comparison-table__cta {
	margin: var(--wp--preset--spacing--60, 3.5rem) 0 0;
	text-align: center;
}

.sws-comparison-table__empty {
	max-width: 34rem;
	margin: 0;
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	line-height: 1.5;
}

/* Table — the wide layout
--------------------------------------------- */

@container sws-comparison-table (min-width: 782px) {

	.sws-comparison-table__table {
		display: table;

		/* Deliberate column proportions beat content measurement here. */
		table-layout: fixed;
	}

	.sws-comparison-table__thead {
		display: table-header-group;
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}

	.sws-comparison-table__table tbody {
		display: table-row-group;
	}

	.sws-comparison-table__table tr {
		display: table-row;
	}

	.sws-comparison-table__col {
		padding: 0 1.5rem 1rem 0;
		border-bottom: 1px solid rgba(35, 45, 54, 0.1);
		color: var(--wp--preset--color--dark, #232d36);
		font-size: var(--wp--preset--font-size--medium, 1.125rem);
		font-weight: 600;
		line-height: 1.5;
		text-align: left;
		vertical-align: bottom;
	}

	/* The layout's own row rhythm: hairlines only, no card and no zebra. */
	.sws-comparison-table__row {
		padding: 0;
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;
	}

	.sws-comparison-table__row + .sws-comparison-table__row {
		margin-top: 0;
	}

	.sws-comparison-table__cell {
		display: table-cell;
		margin: 0;
		padding: 1.75rem 1.5rem 1.75rem 0;
		border-bottom: 1px solid rgba(35, 45, 54, 0.1);
		vertical-align: top;
	}

	.sws-comparison-table__cell + .sws-comparison-table__cell {
		margin-top: 0;
	}

	/* An empty cell still has to hold its column open. */
	.sws-comparison-table__cell:empty {
		display: table-cell;
	}

	.sws-comparison-table__cell::before {
		content: none;
	}

	.sws-comparison-table__col:last-child,
	.sws-comparison-table__cell:last-child {
		padding-right: 0;
	}

	/*
	 * Two columns are peers and split the container. Three is the hub's own
	 * shape — need, format, result — where the middle column is a course name
	 * and needs the least room. Four share evenly.
	 */
	.sws-comparison-table--cols-2 .sws-comparison-table__col,
	.sws-comparison-table--cols-2 .sws-comparison-table__cell {
		width: 50%;
	}

	.sws-comparison-table--cols-3 .sws-comparison-table__col:nth-child(1),
	.sws-comparison-table--cols-3 .sws-comparison-table__cell:nth-child(1) {
		width: 38%;
	}

	.sws-comparison-table--cols-3 .sws-comparison-table__col:nth-child(2),
	.sws-comparison-table--cols-3 .sws-comparison-table__cell:nth-child(2) {
		width: 24%;
	}

	.sws-comparison-table--cols-3 .sws-comparison-table__col:nth-child(3),
	.sws-comparison-table--cols-3 .sws-comparison-table__cell:nth-child(3) {
		width: 38%;
	}

	.sws-comparison-table--cols-4 .sws-comparison-table__col,
	.sws-comparison-table--cols-4 .sws-comparison-table__cell {
		width: 25%;
	}
}

@container sws-comparison-table (min-width: 1000px) {

	/*
	 * Five of the six live in the section's vertical padding, so what they need
	 * is not a side margin but a heading narrow enough to leave the corners
	 * free. The centred head is capped at 42rem, which clears the corners from
	 * a 1000px container up; at 782 — where the table itself appears — the
	 * figures would cross it.
	 */
	.sws-comparison-table__shape {
		display: block;
	}

	/* The one that stands beside the table waits for the block below. */
	.sws-comparison-table__shape--protractor {
		display: none;
	}
}

@container sws-comparison-table (min-width: 1400px) {

	/*
	 * The sixth stands beside the table rather than in the padding, so it waits
	 * until the container leaves a margin wide enough to hold it: __inner stops
	 * growing at 1230, and this figure is 80 wide.
	 */
	.sws-comparison-table__shape--protractor {
		display: block;
	}
}