/*
 * Current intakes block.
 *
 * The section follows docs/figma-template/blocks/events.md: centred heading with
 * a brush stroke under the accent word, three line-art figures in the corners,
 * and a grid of three 370px cards with 30px gaps — 370*3 + 30*2 = 1170, the
 * container width exactly. The card follows
 * docs/figma-template/components/event-item.md: white, soft shadow, 32px inner
 * padding, everything flush left including the button.
 *
 * Three departures from the template, all deliberate:
 *
 * 1. No poster. The layout's card gives one heading, two meta rows and a button;
 *    the specification wants eight facts. An intake has no image of its own, and
 *    the template itself offers the stripped variant (event-item.md, section 10).
 *    The 270px the poster occupied carry the badges and the extra rows instead.
 * 2. The button is the theme's own, not the layout's Dark 167x48 rectangle. Fill,
 *    radius, padding and states come from styles.elements.button in theme.json,
 *    so every button on the site stays one button.
 * 3. The price is Dark, not Secondary. The layout tints prices #5EB9B3, which is
 *    2.32:1 on white; the number is the one figure on the card a reader looks for,
 *    so it earns weight and size instead of a colour that cannot be read. The
 *    teal identity survives in the meta icons and the level badge.
 *
 * 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-current-intakes {
	container: sws-current-intakes / 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-current-intakes,
.sws-current-intakes *,
.sws-current-intakes *::before,
.sws-current-intakes *::after {
	box-sizing: border-box;
}

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

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

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

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

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

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

/*
 * The three figures of the Events section: a mint squiggle top left, a spark on
 * the right and a fan of coral dots bottom right. Unlike its neighbours this
 * section has no Abstract Bg frame in the layout — the shapes sit loose in the
 * section root — and it carries no large soft shape at all, which is what keeps
 * the events grid visually quieter than the course grid. Colours stay inside the
 * files: the template tints the same doodle differently per section.
 *
 * The yellow of the layout's spark is not reproduced. 01-design-tokens.md section 7
 * asks for the yellow to stop being a standalone accent, and it was the only
 * yellow element in the whole section.
 *
 * Positions are the layout's intent, not its coordinates: in Figma the figures
 * live in the 375px margins beside the 1170 container, and those margins only
 * exist on a 1920 canvas. Here each one sits in the vertical padding band the
 * content leaves empty, so it can never land on a card.
 */
.sws-current-intakes__decor {
	/* Shown only once there is room; below that the shapes land under the cards. */
	display: none;
	position: absolute;
	inset: 0;

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

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

.sws-current-intakes__shape--swirl {
	top: 2rem;
	left: 3%;
	width: 4.5rem;
	aspect-ratio: 76 / 59;
	background-image: url("decor/swirl.svg");
}

.sws-current-intakes__shape--sparkle {
	top: 3.5rem;
	right: 5%;
	width: 2.25rem;
	aspect-ratio: 1;
	background-image: url("decor/sparkle.svg");
}

.sws-current-intakes__shape--dots {
	right: 2%;
	bottom: 1.5rem;
	width: 4.5rem;
	aspect-ratio: 53.5731 / 57.5389;
	background-image: url("decor/dots.svg");
}

/* Layout
--------------------------------------------- */

.sws-current-intakes__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-current-intakes__head {
	max-width: 36rem;
	margin-inline: auto;
	margin-bottom: var(--wp--preset--spacing--60, 3.5rem);
	text-align: center;
}

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

/* Grid
--------------------------------------------- */

.sws-current-intakes__grid {
	display: grid;
	gap: var(--wp--preset--spacing--40, 1.875rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sws-current-intakes__item {
	/* Stretches the card to the tallest in the row, so the buttons line up. */
	display: flex;
	margin: 0;
}

/* Card
--------------------------------------------- */

.sws-current-intakes__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--wp--preset--spacing--40, 1.875rem);
	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));
}

/*
 * On a white section the card would disappear into the background, so it takes
 * a hairline instead of leaning on the shadow alone.
 */
.sws-current-intakes--bg-white .sws-current-intakes__card {
	border: 1px solid var(--wp--preset--color--shade, #f8f8f8);
}

.sws-current-intakes__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1rem;
}

/*
 * Dark on a tint rather than white on the fill: white on Secondary is 2.32:1 and
 * white on Theme Color 3.43:1, and these two labels carry the facts a reader
 * scans first — the level of the course and whether the group is still open.
 */
.sws-current-intakes__badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	color: var(--wp--preset--color--dark, #232d36);
	font-size: var(--wp--preset--font-size--small, 1rem);
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

.sws-current-intakes__badge--level {
	background-color: var(--wp--preset--color--shade-mint, #e9fbfa);
}

.sws-current-intakes__badge--state {
	background-color: var(--wp--preset--color--shade-warm, #f8efee);
}

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

.sws-current-intakes__card-link {
	color: inherit;
	text-decoration: none;
}

.sws-current-intakes__card-link:hover,
.sws-current-intakes__card-link:focus-visible {
	color: var(--wp--preset--color--primary, #ef5743);
	text-decoration: underline;
}

/* The one number a reader looks for; it earns weight rather than a weak colour. */
.sws-current-intakes__price {
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--dark, #232d36);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	font-weight: 700;
	line-height: 1.4;
}

/* Meta rows
--------------------------------------------- */

.sws-current-intakes__meta {
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

/*
 * Icon column of a fixed width so the labels align whatever the icon. The glyphs
 * are colourless files painted through a mask, so one file serves any palette
 * colour — the same technique the decorative doodles use.
 */
.sws-current-intakes__meta-item {
	position: relative;
	margin: 0;
	padding-left: 1.75rem;
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: var(--wp--preset--font-size--small, 1rem);
	line-height: 1.5;
}

.sws-current-intakes__meta-item + .sws-current-intakes__meta-item {
	margin-top: 0.625rem;
}

.sws-current-intakes__meta-item::before {
	content: "";
	position: absolute;
	top: 0.125rem;
	left: 0;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--wp--preset--color--secondary, #5eb9b3);
}

.sws-current-intakes__meta-item--when::before {
	-webkit-mask: url("../../assets/decor/calendar.svg") no-repeat center / contain;
	mask: url("../../assets/decor/calendar.svg") no-repeat center / contain;
}

.sws-current-intakes__meta-item--group::before {
	-webkit-mask: url("../../assets/decor/users.svg") no-repeat center / contain;
	mask: url("../../assets/decor/users.svg") no-repeat center / contain;
}

.sws-current-intakes__meta-item--where::before {
	-webkit-mask: url("../../assets/decor/pin.svg") no-repeat center / contain;
	mask: url("../../assets/decor/pin.svg") no-repeat center / contain;
}

.sws-current-intakes__meta-item--seats::before {
	-webkit-mask: url("../../assets/decor/ticket.svg") no-repeat center / contain;
	mask: url("../../assets/decor/ticket.svg") no-repeat center / contain;
}

.sws-current-intakes__meta-item--deadline::before {
	-webkit-mask: url("../../assets/decor/clock.svg") no-repeat center / contain;
	mask: url("../../assets/decor/clock.svg") no-repeat center / contain;
}

/* Seats left is the line that decides whether to act today. */
.sws-current-intakes__meta-item--seats {
	color: var(--wp--preset--color--dark, #232d36);
	font-weight: 600;
}

.sws-current-intakes__card--few_places .sws-current-intakes__meta-item--seats::before {
	background-color: var(--wp--preset--color--primary, #ef5743);
}

/* Action
--------------------------------------------- */

/*
 * margin-top: auto pins the button to the bottom of the card, so a two-line
 * course name in one card does not shift the buttons out of line in the row.
 * Fill, radius, padding and states come from styles.elements.button.
 */
.sws-current-intakes__action {
	margin: 1.5rem 0 0;
	padding-top: 0.5rem;
}

.sws-current-intakes__card .sws-current-intakes__action {
	margin-top: auto;
}

.sws-current-intakes__button {
	display: inline-block;
	text-decoration: none;
}

/* The waiting list is a weaker promise than a place, and it says so. */
.sws-current-intakes__card--waitlist .sws-current-intakes__button,
.sws-current-intakes__card--full .sws-current-intakes__button {
	background-color: var(--wp--preset--color--dark, #232d36);
}

.sws-current-intakes__note {
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: var(--wp--preset--font-size--small, 1rem);
	line-height: 1.5;
}

/* Empty state
--------------------------------------------- */

/*
 * Not in the layout, and required by the specification: a section with no open
 * group still has to lead somewhere, otherwise the page ends in a dead end.
 */
.sws-current-intakes__none {
	max-width: 36rem;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--50, 2rem);
	border-radius: var(--wp--custom--radius, 8px);
	background-color: var(--wp--preset--color--shade-mint, #e9fbfa);
	text-align: center;
}

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

.sws-current-intakes__none-text {
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--dark, #232d36);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	line-height: 1.5;
}

.sws-current-intakes__none .sws-current-intakes__action {
	margin-top: 1.5rem;
}

/* Wider layouts
--------------------------------------------- */

@container sws-current-intakes (min-width: 560px) {

	.sws-current-intakes__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

	.sws-current-intakes__decor {
		display: block;
	}

	.sws-current-intakes__card {
		padding: 2rem;
	}
}

@container sws-current-intakes (min-width: 960px) {

	.sws-current-intakes__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}