/*
 * Full-bleed section, same header pattern (heading left, fixed-width intro
 * column right) as linking-cards-section/people-section. Defaults to
 * white; editable via the block's own "Background color" panel
 * (supports.color.background in block.json) - the Figma source itself uses
 * this exact section on alternating white/bg-surface-strong instances, so
 * "editable, default white" (this project's own general policy) fits
 * better than hardcoding either one.
 */
.wp-block-andrei-saguna-program-filter-section {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--12);
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--4);
	background-color: var(--wp--preset--color--base-white);
}

/*
 * This block's editor.js wraps a live wp.serverSideRender preview inside
 * its own useBlockProps() div, whose auto-derived className is the exact
 * same one render.php's own get_block_wrapper_attributes() output already
 * carries - the editor canvas is the only place this class ever nests
 * inside itself. Resetting full-bleed on the INNER copy (plain descendant
 * selector, not a ":not()" guard on the outer one) keeps the outer copy's
 * own rule at the same specificity as every other full-bleed section, so
 * the editor's generic preview-width cap still treats it consistently -
 * see people-section/style.css for the full writeup of the regression this
 * avoids from the start.
 */
.wp-block-andrei-saguna-program-filter-section .wp-block-andrei-saguna-program-filter-section {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.wp-block-andrei-saguna-program-filter-section__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--12);
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

.wp-block-andrei-saguna-program-filter-section__header {
	display: flex;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--4);
	width: 100%;
}

h2.wp-block-andrei-saguna-program-filter-section__heading {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	font-family: var(--wp--preset--font-family--ivypresto-headline);
	font-size: var(--wp--preset--font-size--h-1);
	line-height: 1.1;
	color: #002547;
}

.wp-block-andrei-saguna-program-filter-section__intro {
	flex: 0 0 424px;
	width: 424px;
}

.wp-block-andrei-saguna-program-filter-section__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--body-base);
	line-height: 1.5;
	color: #3f4a5a;
}

/* Filter chips - visually identical to document-section's own tab chips
   (the same "Atom / Chip" component), duplicated per this plugin's
   convention of each block owning its own stylesheet. */
.wp-block-andrei-saguna-program-filter-section__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
}

.wp-block-andrei-saguna-program-filter-section__chip {
	margin: 0;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	border: 1px solid var(--wp--preset--color--border-default);
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--preset--color--base-white);
	color: #002547;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--ui-interactive);
	letter-spacing: 1.12px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wp-block-andrei-saguna-program-filter-section__chip:hover {
	border-color: #002547;
}

.wp-block-andrei-saguna-program-filter-section__chip.is-active {
	border-color: #002547;
	background-color: #002547;
	color: var(--wp--preset--color--base-white);
}

.wp-block-andrei-saguna-program-filter-section__grid {
	display: grid;
	grid-template-columns: repeat(var(--program-filter-columns, 3), minmax(0, 1fr));
	gap: var(--wp--preset--spacing--6);
	width: 100%;
}

.wp-block-andrei-saguna-program-filter-section__card.is-hidden {
	display: none;
}

/*
 * The whole card is a real <a> (Figma's own "Molecule / SchemeCard" docs:
 * "the whole card is the hit area... the link inside is the visual
 * affordance, not a second target") - simpler than document-row's
 * whole-row click-through script, since there's no competing interactive
 * element inside a programme card the way a document row's own file link
 * needed to stay independently clickable.
 */
.wp-block-andrei-saguna-program-filter-section__card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
	padding: var(--wp--preset--spacing--6);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--program-filter-card-bg, var(--wp--preset--color--base-white));
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.15s ease;
}

.wp-block-andrei-saguna-program-filter-section__card:hover {
	box-shadow: 0 4px 16px rgba(14, 19, 27, 0.12);
}

.wp-block-andrei-saguna-program-filter-section__labels {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--1);
	align-items: center;
}

.wp-block-andrei-saguna-program-filter-section__badge {
	margin: 0;
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--2);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--accent-500);
	color: var(--wp--preset--color--base-white);
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--label-small-caps);
	letter-spacing: 0.96px;
	text-transform: uppercase;
	white-space: nowrap;
}

.wp-block-andrei-saguna-program-filter-section__badge--muted {
	background-color: var(--wp--preset--color--surface-strong);
	color: #5d6979;
}

.wp-block-andrei-saguna-program-filter-section__content {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
}

.wp-block-andrei-saguna-program-filter-section__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--ivypresto-headline);
	font-size: var(--wp--preset--font-size--h-4);
	line-height: 1.2;
	letter-spacing: 0.64px;
	color: #002547;
}

.wp-block-andrei-saguna-program-filter-section__meta {
	margin: 0;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: 1.4;
	letter-spacing: 0.28px;
	color: #5d6979;
}

.wp-block-andrei-saguna-program-filter-section__description {
	margin: 0;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--body-base);
	line-height: 1.5;
	color: #3f4a5a;
}

.wp-block-andrei-saguna-program-filter-section__action {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	margin-top: auto;
	color: var(--wp--preset--color--accent-500);
}

.wp-block-andrei-saguna-program-filter-section__action-text {
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--ui-interactive);
	font-weight: 500;
	letter-spacing: 0.14px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wp-block-andrei-saguna-program-filter-section__action-icon {
	display: flex;
	width: 16px;
	height: 16px;
}

.wp-block-andrei-saguna-program-filter-section__action-icon svg {
	width: 100%;
	height: 100%;
}

/*
 * Button below the card grid. Its style options mirror the theme's own
 * core/button style variations (registered both in theme.json and via
 * register_block_style() in functions.php) - but because a variation
 * registered from both places gets a WP-core collision-avoidance suffix
 * appended to the class its generated global CSS actually targets (e.g.
 * "is-style-big-primary--7", not "is-style-big-primary", and that suffix
 * shifts whenever a variation is added/removed), the plain "is-style-*"
 * class this hand-rendered <a> carries never matches that generated
 * selector. So, same as linking-cards-section, these rules are duplicated
 * here scoped to the plain class name, which stays stable regardless of
 * core's suffixing.
 */
/*
 * Figma "Text and Action" (node 769:32013): the optional bottom text is
 * "justify-content: space-between" from the button - by request, only when
 * that text is actually set ("has-text"); with no text the row keeps its
 * original "justify-content: flex-start" (button alone, on the left).
 */
.wp-block-andrei-saguna-program-filter-section__button-row {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--6);
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

.wp-block-andrei-saguna-program-filter-section__button-row.has-text {
	justify-content: space-between;
}

/* Same fixed 424px column the header's own intro text uses (__intro above) - the Figma source reuses that exact width here too. */
.wp-block-andrei-saguna-program-filter-section__bottom-text {
	flex: 0 0 424px;
	width: 424px;
}

/* Bottom text next to the button: Body/Small (14px/1.4/0.28px), smaller than the header intro (__text, Body/Base). */
.wp-block-andrei-saguna-program-filter-section__bottom-text-copy {
	margin: 0;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: 1.4;
	letter-spacing: 0.28px;
	color: #3f4a5a;
}

.wp-block-andrei-saguna-program-filter-section__button-row .wp-block-button.is-style-big-primary .wp-block-button__link,
.wp-block-andrei-saguna-program-filter-section__button-row .wp-block-button.is-style-small-primary .wp-block-button__link {
	background-color: var(--wp--preset--color--accent-500);
	color: var(--wp--preset--color--base-white);
	border-radius: var(--wp--custom--radius--md);
}

.wp-block-andrei-saguna-program-filter-section__button-row .wp-block-button.is-style-big-primary .wp-block-button__link {
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
}

.wp-block-andrei-saguna-program-filter-section__button-row .wp-block-button.is-style-small-primary .wp-block-button__link {
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
}

.wp-block-andrei-saguna-program-filter-section__button-row .wp-block-button.is-style-big-secondary .wp-block-button__link,
.wp-block-andrei-saguna-program-filter-section__button-row .wp-block-button.is-style-small-secondary .wp-block-button__link {
	background-color: var(--wp--preset--color--base-white);
	color: #002547;
	border: 1.5px solid #002547;
	border-radius: var(--wp--custom--radius--md);
}

.wp-block-andrei-saguna-program-filter-section__button-row .wp-block-button.is-style-big-secondary .wp-block-button__link {
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
}

.wp-block-andrei-saguna-program-filter-section__button-row .wp-block-button.is-style-small-secondary .wp-block-button__link {
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
}

.wp-block-andrei-saguna-program-filter-section__button-row .wp-block-button.is-style-big-outline .wp-block-button__link,
.wp-block-andrei-saguna-program-filter-section__button-row .wp-block-button.is-style-small-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--base-white);
	border: 1.5px solid var(--wp--preset--color--border-on-image);
	border-radius: var(--wp--custom--radius--md);
}

.wp-block-andrei-saguna-program-filter-section__button-row .wp-block-button.is-style-big-outline .wp-block-button__link {
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
}

.wp-block-andrei-saguna-program-filter-section__button-row .wp-block-button.is-style-small-outline .wp-block-button__link {
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
}

@media (max-width: 1024px) {
	.wp-block-andrei-saguna-program-filter-section__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.wp-block-andrei-saguna-program-filter-section__header {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--4);
	}

	.wp-block-andrei-saguna-program-filter-section__intro {
		flex: 1 1 100%;
		width: 100%;
	}

	.wp-block-andrei-saguna-program-filter-section__grid {
		grid-template-columns: 1fr;
	}

	.wp-block-andrei-saguna-program-filter-section__button-row.has-text {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--4);
	}

	.wp-block-andrei-saguna-program-filter-section__bottom-text {
		flex: 1 1 100%;
		width: 100%;
	}
}