/*
 * Timeline block.
 *
 * The one block of the registry with no prototype anywhere in the template:
 * docs/figma-template/04-reuse-map.md leaves its "основа" column empty, the only
 * such row of the twenty-one. So the composition is designed here and only the
 * pieces are borrowed:
 *
 * 1. The row comes from the Carriculam panel of
 *    docs/figma-template/blocks/course-tabs.md — a marker on the left, the name
 *    at 20px SemiBold Dark, a meta value on the same line at 18px.
 * 2. The node on the rail comes from docs/figma-template/blocks/event-details.md
 *    section 9 — a 32px circle on a Green Shade plate with a Secondary glyph
 *    inside. Here the glyph is a dot, so no file is needed.
 * 3. The panel under the whole list, and the way its fill is computed from the
 *    section fill, come from the sibling block course-outcomes.
 *
 * Three departures from the donor row, all deliberate:
 *
 * - The time stands on the LEFT, not on the right where the donor puts its
 *   lecture counter. The donor is a table of contents, where the counter is a
 *   concession; here the times have to read down the page as the frame of the
 *   day, and a right-hand column of two filled cells out of seven reads as
 *   nothing at all.
 * - The rail is solid where the connector of process-steps is dashed. Time runs
 *   continuously; a sequence of steps does not, and the two blocks stand three
 *   sections apart on the same page.
 * - The donor's accent row — an expanded module header filled Secondary with
 *   white text — is not carried over. That pairing is 2.32:1, one of the five
 *   contrast failures the palette is known to carry, and here it would be a
 *   permanent state rather than a hover.
 *
 * 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-timeline {
	container: sws-timeline / inline-size;

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

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

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

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

/*
 * Each fill declares two locals: the panel colour and the tint of the
 * decorative disc. The panel is white everywhere except on a white section,
 * where it takes Shade — the same relationship course-outcomes uses, for the
 * same reason: white on #F8F8F8 is 1.03:1, so the panel needs either a
 * different colour or the shadow, and it gets both.
 */
.sws-timeline--bg-shade-warm {
	--sws-timeline-panel: var(--wp--preset--color--white, #fff);
	--sws-decor-disc: #ffeeeb;

	background-color: var(--wp--preset--color--shade-warm, #f8efee);
}

.sws-timeline--bg-shade-mint {
	--sws-timeline-panel: var(--wp--preset--color--white, #fff);
	--sws-decor-disc: #dcf6f4;

	background-color: var(--wp--preset--color--shade-mint, #e9fbfa);
}

.sws-timeline--bg-shade {
	--sws-timeline-panel: var(--wp--preset--color--white, #fff);
	--sws-decor-disc: #f1f1f1;

	background-color: var(--wp--preset--color--shade, #f8f8f8);
}

.sws-timeline--bg-white {
	--sws-timeline-panel: var(--wp--preset--color--shade, #f8f8f8);
	--sws-decor-disc: #fbf4f3;

	background-color: var(--wp--preset--color--white, #fff);
}

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

/*
 * The block has no Abstract Bg of its own to carry over, so the layer follows
 * the precedent comparison-table set: the figures come from a section that does
 * not already stand on the same page. These four are the Pricing Table set
 * (node 425:16826), minus its ring and sparkle — those two are already on the
 * mock test page inside feature-grid.
 *
 * The files are copied into this folder rather than referenced across blocks:
 * a block folder is self-contained, the way services-grid and case-studies-grid
 * both carry the same four figures.
 *
 * Positions are not the layout's. Every shape lives in a band the content
 * leaves empty — the section's own vertical padding, or past the edge — so it
 * can never land on a row.
 */
.sws-timeline__decor {
	/* Shown only once there is room; below that the shapes land on the panel. */
	display: none;
	position: absolute;
	inset: 0;

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

.sws-timeline__shape {
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/*
 * The soft disc bleeding off the top right corner. The vertical offset is a
 * transform, not `top`: a percentage in `top` resolves against the height of
 * the section, and this section is the tallest of the family — seven rows, each
 * able to carry a paragraph — so the disc would walk clean off the edge. A
 * percentage in `transform` resolves against the element's own square box and
 * holds its offset at any height.
 */
.sws-timeline__shape--disc {
	top: 0;
	right: -6%;
	width: 30%;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--sws-decor-disc, #ffeeeb);
	transform: translateY(-28%);
}

/*
 * The band the shapes live in is the section's own padding, so they are offset
 * and sized from the same token: whatever the viewport does to the padding, the
 * shape follows and can never reach the content.
 */
/*
 * Sized down from the 35px of the donor: this is the one figure standing above
 * a left-aligned heading, and at the narrowest container that shows the layer
 * the top padding is 8vw ≈ 63px. A 35px star clears the heading box by 10px,
 * which is inside the margin of error; a 30px one clears it by 14 (measured at
 * a 785 container, the first width at which the layer appears at all).
 */
.sws-timeline__shape--star {
	top: 1.5rem;
	left: 3%;
	width: 1.875rem;
	aspect-ratio: 35 / 30;
	background-image: url("decor/star.svg");
}

/* The three below need bands that only exist on a wider container. */
.sws-timeline__shape--rocket,
.sws-timeline__shape--pencil,
.sws-timeline__shape--protractor {
	display: none;
}

.sws-timeline__shape--rocket {
	bottom: 0.75rem;
	left: 2%;
	width: auto;
	height: min(4.8125rem, calc(var(--wp--preset--spacing--70, clamp(3.5rem, 8vw, 8.5rem)) - 1.75rem));
	aspect-ratio: 77 / 81;
	background-image: url("decor/rocket.svg");
}

.sws-timeline__shape--pencil {
	right: 4%;
	bottom: 0.75rem;
	width: auto;
	height: min(5.5rem, calc(var(--wp--preset--spacing--70, clamp(3.5rem, 8vw, 8.5rem)) - 1.75rem));
	aspect-ratio: 1;
	background-image: url("decor/pencil.svg");
}

/* The only figure standing beside the panel rather than above or below it. */
.sws-timeline__shape--protractor {
	top: 42%;
	right: 1.5%;
	width: 5rem;
	aspect-ratio: 80 / 59;
	background-image: url("decor/protractor.svg");
}

.sws-timeline__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 (markup from sws_theme_section_heading)
--------------------------------------------- */

.sws-timeline__head {
	/* A 44px heading across the full 1170 reads as a banner, not as a heading. */
	max-width: 42rem;
	margin-bottom: var(--wp--preset--spacing--60, 3.5rem);
}

.sws-timeline__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-timeline__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-timeline__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-timeline__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;
}

/* The scale
--------------------------------------------- */

/*
 * The panel and the list are one element: nothing else ever stands inside it,
 * so a wrapper around the <ol> would only add a box to reason about.
 *
 * It is capped at the donor's own 770 rather than stretched to the 1170
 * container the way course-outcomes stretches its panel. That block needs the
 * width — it lays its rows out in two columns of 530. A schedule is one column
 * by definition, and at 1170 a row like "Writing" leaves half a white card
 * empty; the same emptiness outside the card is just section fill with the
 * decor in it, which is what every other section on the site looks like.
 *
 * Left-aligned rather than centred, so the panel and the heading above it share
 * one spine.
 */
.sws-timeline__list {
	max-width: var(--wp--style--global--content-size, 770px);
	display: grid;
	row-gap: 1.5rem;
	margin: 0;
	padding: 2rem;
	border-radius: var(--wp--custom--radius, 8px);
	background-color: var(--sws-timeline-panel, #fff);
	box-shadow: var(--wp--custom--shadow--card, 0 4px 24px rgba(35, 45, 54, 0.08));

	/* Our own nodes stand on the rail; the list marker would double them. */
	list-style: none;
}

/*
 * Narrow layout: the node column and the content, with the time — when there is
 * one — as a small line above the stage name. A column of its own would be
 * half the width of a phone for the sake of two filled cells out of seven.
 */
.sws-timeline__item {
	/* Containing block for the rail drawn in ::after. */
	position: relative;

	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	column-gap: 1rem;
	align-items: start;
}

/*
 * The node. A Ø32 plate in Green Shade with a Ø12 Secondary dot in it — the
 * plate never lands on a mint section, because the panel above it is only ever
 * white or Shade. The dot is a gradient rather than a second element: it says
 * nothing a list item does not already say.
 */
.sws-timeline__item::before {
	content: "";
	grid-column: 1;
	grid-row: 1;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--shade-mint, #e9fbfa);
	background-image: radial-gradient(
		circle at center,
		var(--wp--preset--color--secondary, #5eb9b3) 0 0.375rem,
		transparent calc(0.375rem + 1px)
	);
}

/*
 * The rail, drawn from the bottom of one node into the gap above the next. It
 * is absolute rather than a border on the column, because the row gap belongs
 * to the list and a border would stop at the row edge.
 */
.sws-timeline__item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 2rem;
	bottom: -1.5rem;

	/* Centre of the 2rem node column. */
	left: 1rem;
	border-left: 2px solid var(--wp--preset--color--secondary, #5eb9b3);
	opacity: 0.4;
	transform: translateX(-1px);
}

.sws-timeline__time-cell {
	grid-column: 2;
}

.sws-timeline__body {
	grid-column: 2;
}

/*
 * Dark rather than the Secondary an accent would use: this is the one value in
 * the row a reader scans for, and Secondary on white is 2.32:1. The same
 * substitution hero and course-outcomes already make.
 */
.sws-timeline__time {
	display: inline-block;
	color: var(--wp--preset--color--dark, #232d36);
	font-size: var(--wp--preset--font-size--small, 1rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
}

.sws-timeline__item-title {
	margin: 0;
	color: var(--wp--preset--color--dark, #232d36);
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	font-weight: 600;
	line-height: 1.5;
}

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

.sws-timeline__footnote {
	max-width: 42rem;
	margin: var(--wp--preset--spacing--50, 2rem) 0 0;
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: var(--wp--preset--font-size--small, 1rem);
	line-height: 1.5;
}

/* Editor only: the front end returns before printing anything. */
.sws-timeline__empty {
	margin: 0;
	padding: 2rem;
	border: 1px dashed var(--wp--preset--color--body, #7b7b8a);
	border-radius: var(--wp--custom--radius, 8px);
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	line-height: 1.5;
	text-align: center;
}

/* Wide layout
--------------------------------------------- */

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

	/* The top and bottom bands are tall enough now for the first shapes. */
	.sws-timeline__decor {
		display: block;
	}

	/*
	 * The times get a column of their own, so they line up down the left edge
	 * and read as the frame of the day. Only on an instance that has any: an
	 * empty column would be a dead gutter running the whole height of the list.
	 */
	.sws-timeline--has-times .sws-timeline__item {
		grid-template-columns: 5rem 2rem minmax(0, 1fr);
	}

	.sws-timeline--has-times .sws-timeline__item::before {
		grid-column: 2;
	}

	.sws-timeline--has-times .sws-timeline__time-cell {
		grid-column: 1;
		grid-row: 1;

		/* Optically level with the first line of the stage name, not with the node. */
		padding-top: 0.25rem;
		text-align: right;
	}

	.sws-timeline--has-times .sws-timeline__body {
		grid-column: 3;
		grid-row: 1;
	}

	/* 5rem time column + 1rem gap + half of the 2rem node column. */
	.sws-timeline--has-times .sws-timeline__item:not(:last-child)::after {
		left: 7rem;
	}
}

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

	/* The panel is at its full width, so the layout's wider padding fits. */
	.sws-timeline__list {
		padding: 2.5rem;
	}

	/* The bottom corners are clear of the panel now. */
	.sws-timeline__shape--rocket,
	.sws-timeline__shape--pencil {
		display: block;
	}
}

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

	/*
	 * The only figure that needs a margin beside the 1170 container rather than
	 * above or below it, so it waits until that margin exists — the same place
	 * comparison-table holds its own protractor.
	 */
	.sws-timeline__shape--protractor {
		display: block;
	}
}