/**
 * Components: buttons, cards, filters, badges, meta lists, pagination,
 * empty states, notices, forms.
 */

/* ---------------------------------------------------------------- buttons */

.bsl-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bsl-space-2);
	padding: var(--bsl-space-3) var(--bsl-space-5);
	border: var(--bsl-border-width-thick) solid transparent;
	border-radius: var(--bsl-radius);
	font-size: var(--bsl-text-sm);
	font-weight: var(--bsl-weight-semibold);
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	transition:
		background-color var(--bsl-duration-fast) var(--bsl-ease),
		border-color var(--bsl-duration-fast) var(--bsl-ease),
		color var(--bsl-duration-fast) var(--bsl-ease);
}

.bsl-button--primary {
	background-color: var(--bsl-accent-text);
	border-color: var(--bsl-accent-text);
	color: #fff;
}

.bsl-button--primary:hover,
.bsl-button--primary:visited:hover {
	background-color: var(--bsl-accent-strong);
	border-color: var(--bsl-accent-strong);
	color: #fff;
}

.bsl-button--primary:visited {
	color: #fff;
}

.bsl-button--secondary {
	background-color: var(--bsl-teal);
	border-color: var(--bsl-teal);
	color: var(--bsl-paper);
}

.bsl-button--secondary:hover,
.bsl-button--secondary:visited {
	color: var(--bsl-paper);
	background-color: #093843;
	border-color: #093843;
}

.bsl-button--ghost {
	background-color: transparent;
	border-color: var(--bsl-line-strong);
	color: var(--bsl-text);
}

.bsl-button--ghost:hover,
.bsl-button--ghost:visited {
	background-color: var(--bsl-text);
	border-color: var(--bsl-text);
	color: var(--bsl-bg);
}

.bsl-button__meta {
	font-weight: var(--bsl-weight-regular);
	font-size: var(--bsl-text-xs);
	opacity: 0.85;
}

.bsl-button-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bsl-space-3);
}

/* A text link that behaves like a call to action. */
.bsl-link {
	display: inline-flex;
	align-items: center;
	gap: var(--bsl-space-2);
	font-weight: var(--bsl-weight-semibold);
	text-decoration: none;
	color: var(--bsl-link);
}

.bsl-link::after {
	content: "\2192";
	transition: transform var(--bsl-duration-fast) var(--bsl-ease);
}

.bsl-link:hover {
	text-decoration: underline;
}

.bsl-link:hover::after {
	transform: translateX(2px);
}

/* ------------------------------------------------------------------ cards */

.bsl-cards {
	padding-block: var(--bsl-space-section) 0;
}

.bsl-cards__heading {
	margin-bottom: var(--bsl-space-6);
}

.bsl-cards__list {
	display: grid;
	gap: var(--bsl-space-6);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.bsl-cards__list > li {
	margin: 0;
}

.bsl-cards__more {
	margin-top: var(--bsl-space-6);
}

.bsl-card {
	height: 100%;
}

.bsl-card > article {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--bsl-bg-raised);
	border: var(--bsl-border-width) solid var(--bsl-line-soft);
	border-radius: var(--bsl-radius);
	overflow: hidden;
	transition: border-color var(--bsl-duration) var(--bsl-ease);
}

.bsl-card > article:hover {
	border-color: var(--bsl-line-strong);
}

/* Distinct treatments so the four content types never look interchangeable. */
.bsl-card--project > article {
	border-top: 4px solid var(--bsl-accent);
}

.bsl-card--resource > article {
	border-top: 4px solid var(--bsl-teal);
}

.bsl-card--opportunity > article {
	border-inline-start: 4px solid var(--bsl-area-3);
}

.bsl-card--news > article {
	border: 0;
	border-bottom: var(--bsl-rule);
	border-radius: 0;
	background-color: transparent;
}

.bsl-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--bsl-bg-sunken);
}

.bsl-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Generated cover for content with no photograph: the acronym on the brand
 * teal, with the slash motif. Never a random stock photo. */
.bsl-card__media--generated {
	display: grid;
	place-items: center;
	background-color: var(--bsl-teal);
	background-image: repeating-linear-gradient(
		115deg,
		rgba(244, 243, 233, 0.07) 0,
		rgba(244, 243, 233, 0.07) 2px,
		transparent 2px,
		transparent 14px
	);
}

.bsl-cover__text {
	font-family: var(--bsl-font-display);
	font-size: var(--bsl-text-xl);
	font-weight: var(--bsl-weight-bold);
	letter-spacing: var(--bsl-tracking-tight);
	color: var(--bsl-paper);
	text-align: center;
	padding: var(--bsl-space-4);
}

.bsl-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--bsl-space-3);
	padding: var(--bsl-space-5);
}

.bsl-card--news .bsl-card__body {
	padding-inline: 0;
}

.bsl-card__eyebrow {
	margin: 0;
	font-size: var(--bsl-text-xs);
	font-weight: var(--bsl-weight-semibold);
	letter-spacing: var(--bsl-tracking-wide);
	text-transform: uppercase;
	color: var(--bsl-text-muted);
}

.bsl-card__acronym {
	margin: 0;
	font-family: var(--bsl-font-display);
	font-size: var(--bsl-text-md);
	font-weight: var(--bsl-weight-bold);
	color: var(--bsl-accent-text);
	letter-spacing: var(--bsl-tracking-tight);
}

.bsl-card__title {
	margin: 0;
	font-family: var(--bsl-font-sans);
	font-size: var(--bsl-text-md);
	font-weight: var(--bsl-weight-semibold);
	line-height: var(--bsl-leading-snug);
	letter-spacing: var(--bsl-tracking-normal);
}

.bsl-card__title a {
	/* A heading that is entirely a link is its own target, so it gets the 24px
	 * of SC 2.5.8 rather than relying on the inline-text exception. */
	display: inline-block;
	min-height: 24px;
	color: var(--bsl-text);
	text-decoration: none;
}

.bsl-card__title a:hover {
	color: var(--bsl-link-hover);
	text-decoration: underline;
}

.bsl-card__summary {
	margin: 0;
	font-size: var(--bsl-text-sm);
	color: var(--bsl-text-muted);
	line-height: var(--bsl-leading-normal);
}

.bsl-card__facts {
	margin: 0;
	font-size: var(--bsl-text-xs);
	color: var(--bsl-text-muted);
}

.bsl-card__cta {
	margin: auto 0 0;
	padding-top: var(--bsl-space-2);
}

/* Card links and inline calls to action also need 24px of height. */
.bsl-card__cta .bsl-link,
.bsl-card__facts a,
.bsl-cards__more a {
	min-height: 24px;
}

/* ----------------------------------------------------------------- badges */

.bsl-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--bsl-space-1);
	margin: 0;
	padding: 0.15rem var(--bsl-space-3);
	border: var(--bsl-border-width) solid currentColor;
	border-radius: var(--bsl-radius-pill);
	font-size: var(--bsl-text-xs);
	font-weight: var(--bsl-weight-semibold);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	align-self: flex-start;
}

/* A dot as well as the colour, so status is not conveyed by colour alone. */
.bsl-badge::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: currentColor;
}

.bsl-badge--open,
.bsl-badge--active {
	color: var(--bsl-success);
}

.bsl-badge--upcoming {
	color: var(--bsl-warning);
}

.bsl-badge--closed,
.bsl-badge--completed {
	color: var(--bsl-text-muted);
}

.bsl-badge--closed::before,
.bsl-badge--completed::before {
	border-radius: 0;
}

.bsl-badge--cancelled {
	color: var(--bsl-error);
}

.bsl-badge--cancelled::before {
	border-radius: 0;
	transform: rotate(45deg);
}

/* ------------------------------------------------------------ meta lists */

.bsl-facts {
	display: grid;
	gap: var(--bsl-space-4) var(--bsl-space-6);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	margin: 0 0 var(--bsl-space-6);
	padding: var(--bsl-space-5);
	background-color: var(--bsl-bg-sunken);
	border-radius: var(--bsl-radius);
}

.bsl-facts > div {
	min-width: 0;
}

.bsl-facts dt {
	margin: 0 0 var(--bsl-space-1);
	font-size: var(--bsl-text-xs);
	font-weight: var(--bsl-weight-semibold);
	letter-spacing: var(--bsl-tracking-wide);
	text-transform: uppercase;
	color: var(--bsl-text-muted);
}

.bsl-facts dd {
	margin: 0;
	font-size: var(--bsl-text-sm);
	font-weight: var(--bsl-weight-medium);
}

.bsl-facts dd ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------------------------------------------------------------- filters */

.bsl-filters {
	padding-block: var(--bsl-space-6);
	border-bottom: var(--bsl-rule);
}

.bsl-filters__search {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bsl-space-3);
	margin-bottom: var(--bsl-space-5);
}

.bsl-filters__search label {
	flex: 1 1 18rem;
	margin: 0;
}

.bsl-filters__groups {
	display: grid;
	gap: var(--bsl-space-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.bsl-filters__group label {
	font-size: var(--bsl-text-xs);
	font-weight: var(--bsl-weight-semibold);
	letter-spacing: var(--bsl-tracking-wide);
	text-transform: uppercase;
	color: var(--bsl-text-muted);
}

.bsl-filters__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bsl-space-3);
	margin-top: var(--bsl-space-5);
}

.bsl-filters__count {
	margin: 0;
	font-size: var(--bsl-text-sm);
	font-weight: var(--bsl-weight-medium);
}

.bsl-filters__active {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bsl-space-2);
	margin: var(--bsl-space-4) 0 0;
	padding: 0;
	list-style: none;
}

.bsl-filters__active li {
	margin: 0;
}

.bsl-filter__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--bsl-space-2);
	padding: 0.2rem var(--bsl-space-3);
	background-color: var(--bsl-bg-raised);
	border: var(--bsl-border-width) solid var(--bsl-line);
	border-radius: var(--bsl-radius-pill);
	font-size: var(--bsl-text-xs);
	text-decoration: none;
	color: var(--bsl-text);
	min-height: 1.75rem;
}

.bsl-filter__chip:hover {
	border-color: var(--bsl-error);
	color: var(--bsl-error);
}

.bsl-filter__chip::after {
	content: "\00d7";
	font-size: 1.1em;
	line-height: 1;
}

/* ------------------------------------------------------------ empty state */

.bsl-empty {
	padding: var(--bsl-space-8) var(--bsl-space-5);
	margin-block: var(--bsl-space-7);
	background-color: var(--bsl-bg-sunken);
	border-radius: var(--bsl-radius);
	text-align: center;
}

.bsl-empty h2 {
	margin-bottom: var(--bsl-space-3);
	font-size: var(--bsl-text-lg);
}

.bsl-empty p {
	max-width: 46ch;
	margin-inline: auto;
	color: var(--bsl-text-muted);
}

.bsl-empty__actions {
	margin-top: var(--bsl-space-5);
	justify-content: center;
}

/* ------------------------------------------------------------- pagination */

.bsl-pagination {
	margin-block: var(--bsl-space-8);
}

.bsl-pagination .nav-links,
.bsl-pagination__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bsl-space-2);
}

.bsl-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding-inline: var(--bsl-space-2);
	border: var(--bsl-border-width) solid var(--bsl-line-soft);
	border-radius: var(--bsl-radius);
	text-decoration: none;
	color: var(--bsl-text);
	font-size: var(--bsl-text-sm);
	font-weight: var(--bsl-weight-medium);
}

.bsl-pagination .page-numbers:hover {
	border-color: var(--bsl-line-strong);
}

.bsl-pagination .page-numbers.current {
	background-color: var(--bsl-text);
	border-color: var(--bsl-text);
	color: var(--bsl-bg);
}

.bsl-pagination .page-numbers.dots {
	border-color: transparent;
	min-width: auto;
}

/* --------------------------------------------------------------- notices */

.bsl-notice {
	padding: var(--bsl-space-4) var(--bsl-space-5);
	margin-block: var(--bsl-space-5);
	border-inline-start: 4px solid var(--bsl-line-strong);
	border-radius: var(--bsl-radius-sm);
	background-color: var(--bsl-bg-sunken);
	font-size: var(--bsl-text-sm);
}

.bsl-notice--error {
	border-inline-start-color: var(--bsl-error);
	background-color: var(--bsl-error-bg);
	color: var(--bsl-error);
}

.bsl-notice--warning {
	border-inline-start-color: var(--bsl-warning);
	background-color: var(--bsl-warning-bg);
	color: var(--bsl-warning);
}

.bsl-notice--success {
	border-inline-start-color: var(--bsl-success);
	background-color: var(--bsl-success-bg);
	color: var(--bsl-success);
}

.bsl-notice p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ forms */

.bsl-form {
	max-width: 44rem;
}

.bsl-form__row {
	margin-bottom: var(--bsl-space-5);
}

.bsl-form__row--split {
	display: grid;
	gap: var(--bsl-space-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.bsl-form__hint {
	margin: var(--bsl-space-2) 0 0;
	font-size: var(--bsl-text-xs);
	color: var(--bsl-text-muted);
}

.bsl-form__required {
	color: var(--bsl-error);
	font-weight: var(--bsl-weight-bold);
}

.bsl-form__error {
	margin: var(--bsl-space-2) 0 0;
	font-size: var(--bsl-text-sm);
	font-weight: var(--bsl-weight-medium);
	color: var(--bsl-error);
}

.bsl-form__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--bsl-space-3);
}

.bsl-form__consent input {
	width: 1.15rem;
	height: 1.15rem;
	min-height: 0;
	margin-top: 0.2rem;
	flex-shrink: 0;
}

.bsl-form__consent label,
.bsl-form__consent span {
	margin: 0;
	font-weight: var(--bsl-weight-regular);
	font-size: var(--bsl-text-sm);
}

/* Contact Form 7 shares the same look without needing its own stylesheet. */
.wpcf7-form label {
	font-weight: var(--bsl-weight-medium);
}

.wpcf7-not-valid-tip {
	margin-top: var(--bsl-space-2);
	font-size: var(--bsl-text-sm);
	color: var(--bsl-error);
}

.wpcf7-response-output {
	margin: var(--bsl-space-5) 0 0 !important;
	padding: var(--bsl-space-4) var(--bsl-space-5) !important;
	border: 0 !important;
	border-inline-start: 4px solid var(--bsl-line-strong) !important;
	border-radius: var(--bsl-radius-sm);
	background-color: var(--bsl-bg-sunken);
	font-size: var(--bsl-text-sm);
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
	border-inline-start-color: var(--bsl-error) !important;
	background-color: var(--bsl-error-bg);
	color: var(--bsl-error);
}

.wpcf7-form.sent .wpcf7-response-output {
	border-inline-start-color: var(--bsl-success) !important;
	background-color: var(--bsl-success-bg);
	color: var(--bsl-success);
}

/* ---------------------------------------------------------------- gallery */

.bsl-gallery-grid {
	display: grid;
	gap: var(--bsl-space-3);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.bsl-gallery-grid li {
	margin: 0;
}

.bsl-gallery-grid img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--bsl-radius-sm);
}

/* ------------------------------------------------------- partners table */

.bsl-partners {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--bsl-space-3);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

.bsl-partners li {
	margin: 0;
	padding: var(--bsl-space-4);
	background-color: var(--bsl-bg-raised);
	border: var(--bsl-border-width) solid var(--bsl-line-soft);
	border-radius: var(--bsl-radius);
	font-size: var(--bsl-text-sm);
}

.bsl-partners__name {
	display: block;
	font-weight: var(--bsl-weight-semibold);
}

.bsl-partners__country {
	display: block;
	color: var(--bsl-text-muted);
	font-size: var(--bsl-text-xs);
}

.bsl-partners__role {
	display: inline-block;
	margin-top: var(--bsl-space-2);
	font-size: var(--bsl-text-xs);
	font-weight: var(--bsl-weight-semibold);
	letter-spacing: var(--bsl-tracking-wide);
	text-transform: uppercase;
	color: var(--bsl-accent-text);
}

/* -------------------------------------------------------- section anchors */

.bsl-toc {
	margin: 0 0 var(--bsl-space-6);
	padding: var(--bsl-space-4) var(--bsl-space-5);
	background-color: var(--bsl-bg-sunken);
	border-radius: var(--bsl-radius);
	font-size: var(--bsl-text-sm);
}

.bsl-toc h2 {
	margin-bottom: var(--bsl-space-3);
	font-family: var(--bsl-font-sans);
	font-size: var(--bsl-text-xs);
	letter-spacing: var(--bsl-tracking-wide);
	text-transform: uppercase;
	color: var(--bsl-text-muted);
}

.bsl-toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: var(--bsl-space-6);
}

@media (max-width: 40em) {
	.bsl-toc ol {
		columns: 1;
	}
}

.bsl-toc li {
	margin: 0 0 var(--bsl-space-2);
	break-inside: avoid;
}

/* ==========================================================================
   Participant testimonials
   --------------------------------------------------------------------------
   Presentation only. Every decision about *what* may appear — consent, media
   permission, anonymity, withdrawal — is made in backslash-core before any of
   this markup exists. If the component renders nothing, these rules apply to
   nothing, and there is no empty section to collapse.

   No carousel, no rotation, no autoplay, no decorative quotation glyphs. A
   large "  before a quotation is read aloud by some screen readers as
   punctuation noise, and the blockquote element already says what this is.
   ========================================================================== */

.bsl-testimonials {
	margin-block: var(--bsl-space-section);
}

.bsl-testimonials__heading {
	font-family: var(--bsl-font-display);
	font-size: var(--bsl-text-2xl);
	margin-block-end: var(--bsl-space-6);
}

.bsl-testimonials__list {
	display: grid;
	gap: var(--bsl-space-6);
}

@media (min-width: 48rem) {
	.bsl-testimonials--grid .bsl-testimonials__list {
		grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	}
}

.bsl-testimonial {
	display: flex;
	flex-direction: column;
	gap: var(--bsl-space-4);
	margin: 0;
	padding: var(--bsl-space-6);
	background: var(--bsl-bg-raised);
	border-inline-start: var(--bsl-border-width-thick) solid var(--bsl-accent);
	border-radius: var(--bsl-radius);
}

/* One testimonial on its own is given the room to be read, not stretched
   across a full-width line: measured text stays measured. */
.bsl-testimonials--featured .bsl-testimonial {
	max-width: 44rem;
	padding: var(--bsl-space-7);
}

.bsl-testimonials--featured .bsl-testimonial__quote p,
.bsl-testimonials--featured .bsl-testimonial__summary p {
	font-size: var(--bsl-text-lg);
}

.bsl-testimonial__media {
	flex: 0 0 auto;
}

.bsl-testimonial__image {
	display: block;
	width: 4.5rem;
	height: 4.5rem;
	object-fit: cover;
	border-radius: 50%;
}

.bsl-testimonial__body {
	display: flex;
	flex-direction: column;
	gap: var(--bsl-space-3);
}

.bsl-testimonial__quote,
.bsl-testimonial__summary {
	margin: 0;
}

.bsl-testimonial__quote p,
.bsl-testimonial__summary p {
	margin: 0;
	/* Long quotations and long Spanish translations both need this: Spanish
	   runs roughly 20% longer than the English it came from. */
	overflow-wrap: break-word;
	hyphens: none;
}

.bsl-testimonial__quote p {
	font-style: normal;
}

.bsl-testimonial__source {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--bsl-space-1) var(--bsl-space-3);
	font-size: var(--bsl-text-sm);
	color: var(--bsl-text-muted);
}

.bsl-testimonial__who {
	font-style: normal;
	font-weight: var(--bsl-weight-semibold);
	color: var(--bsl-text);
}

/* An impact summary is the organisation speaking, and says so. Without this
   label a paraphrase reads as though the participant said it. */
.bsl-testimonial__kind {
	font-size: var(--bsl-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bsl-text-muted);
}

.bsl-testimonial__project {
	color: var(--bsl-link);
}

.bsl-testimonial__extra {
	margin-block-start: var(--bsl-space-2);
}

.bsl-testimonial__audio {
	width: 100%;
	max-width: 24rem;
}

.bsl-testimonial__video a {
	font-size: var(--bsl-text-sm);
}

@media (prefers-reduced-motion: reduce) {
	.bsl-testimonial,
	.bsl-testimonial * {
		transition: none !important;
		animation: none !important;
	}
}