/*
 * en2x Content Grid – module styles (stage 2).
 *
 * Responsive grid, two filter representations (pills on desktop, selects from
 * tablet down), combined page navigation + "Mehr laden", download placeholder
 * and loading state. Final visual polish comes later with the custom CSS layer.
 * The outer container has NO background colour on purpose – that is set by the
 * user via Salient.
 */

.en2x-grid-module {
	position: relative;
	/* Self-brought side gutter (same token as the article modules) so the grid
	 * aligns with the other layouts in full-width-content rows instead of sitting
	 * flush to the screen edge. Insets the filter bar, cards, pagination and the
	 * embedded download block uniformly. */
	padding-left: var(--en2x-side-gutter, 20px);
	padding-right: var(--en2x-side-gutter, 20px);
}

/* Optional module headline – aligns left with the cards (it sits inside the
 * gutter-padded module). Uppercase headline colour like the section titles. */
.en2x-grid__headline {
	margin: 0 0 24px;
	font-size: clamp(24px, 4vw, 32px);
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--en2x-color-headline, #250F51);
}

/* ---------------------------------------------------------------------------
 * Filter bar – pills (desktop) vs. selects (tablet/mobile)
 * ------------------------------------------------------------------------- */

.en2x-grid__filter {
	margin-bottom: 28px;
}

.en2x-grid__filter-pills {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.en2x-grid__filter-selects {
	display: none;
	flex-direction: column;
	gap: 12px;
}

.en2x-grid__filter-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.en2x-grid__filter-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--en2x-color-headline);
	margin-right: 4px;
}

/* Rectangular pills, consistent with the card tags (same shape + colours).
 * Font stays inherited (Rubik from Salient). A transparent base border keeps
 * the size stable when the active state colours it. */
.en2x-grid__filter-pill {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid transparent;
	border-radius: 3px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Format filter: neutral grey background, primary-coloured text. */
.en2x-grid__filter-pill[data-taxonomy="en2x_format"] {
	background: #e2e4e7;
	color: var(--en2x-color-primary);
}

/* Thema and Kategorie filter: primary background, white text. */
.en2x-grid__filter-pill[data-taxonomy="en2x_thema"],
.en2x-grid__filter-pill[data-taxonomy="category"] {
	background: var(--en2x-color-primary);
	color: #fff;
}

.en2x-grid__filter-pill:hover,
.en2x-grid__filter-pill:focus {
	border-color: var(--en2x-color-primary);
}

/* Active state – clearly marked for BOTH axes via a darker variant of the
 * primary colour (never the headline colour #250F51). Format goes grey ->
 * dark blue, Thema goes primary -> dark blue, both with white text. */
.en2x-grid__filter-pill.is-active {
	background: #190b63; /* darker variant of var(--en2x-color-primary) */
	border-color: #190b63;
	color: #fff;
}

/* Thema and Kategorie filter: active state in the en2x accent cyan. Dark text
 * (not white) on the light cyan – white on #34c7d6 is only 2.04:1 and fails
 * WCAG AA, dark headline blue reaches ~7.5:1. */
.en2x-grid__filter-pill[data-taxonomy="en2x_thema"].is-active,
.en2x-grid__filter-pill[data-taxonomy="category"].is-active {
	background: #34c7d6;
	border-color: #34c7d6;
	color: var(--en2x-color-headline, #250F51);
}

/* Reset button – shown only while a filter is active (JS toggles [hidden]). */
.en2x-grid__filter-reset {
	margin-top: 14px;
	padding: 6px 16px;
	border: 1px solid #d2d2dc;
	border-radius: 3px;
	background: #fff;
	color: var(--en2x-color-primary, #221182);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.en2x-grid__filter-reset:hover,
.en2x-grid__filter-reset:focus {
	border-color: var(--en2x-color-primary, #221182);
}

.en2x-grid__filter-reset[hidden] {
	display: none;
}

/* Select fields (tablet/mobile). */
.en2x-grid__filter-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Mobile/tablet selects styled like the Page-Finder "Themenauswahl" widget: a
 * white pill with uppercase, semibold dark-blue text and a custom chevron. (The
 * select is only shown from tablet down; desktop uses the pills above.) */
.en2x-grid__filter-select {
	padding: 12px 44px 12px 16px;
	border: none;
	border-radius: var(--en2x-button-radius, 999px);
	background-color: #fff;
	color: var(--en2x-color-headline, #250F51);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	font-family: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%23221182' d='M1.4 0 7 5.6 12.6 0 14 1.4 7 8.4 0 1.4z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 16px center;
}

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

.en2x-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(4, 1fr);
}

.en2x-grid--cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.en2x-grid--cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.en2x-grid--cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

/* Cards stretch to fill their grid cell so a row stays even. */
.en2x-grid .en2x-card {
	max-width: none;
	height: 100%;
}

.en2x-grid__empty {
	grid-column: 1 / -1;
	padding: 24px;
	color: #50575e;
	font-size: 15px;
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * Download block – spans two card columns, sits as a grid item. Holds the
 * shared .en2x-downloads markup (styled by download-module.css).
 * ------------------------------------------------------------------------- */

.en2x-grid__download {
	grid-column: span 2;
	/* Even padding so the DOWNLOADS headline has breathing room to the top edge. */
	padding: 28px;
	background: #fff;
	border-radius: 8px;
}

/* ---------------------------------------------------------------------------
 * Responsive: desktop = configured columns, tablet = 2, mobile = 1.
 * ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.en2x-grid__filter-pills {
		display: none;
	}

	.en2x-grid__filter-selects {
		display: flex;
	}

	.en2x-grid,
	.en2x-grid--cols-3,
	.en2x-grid--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Two columns: the download block fills the row. */
	.en2x-grid__download {
		grid-column: span 2;
	}
}

@media (max-width: 600px) {
	.en2x-grid,
	.en2x-grid--cols-2,
	.en2x-grid--cols-3,
	.en2x-grid--cols-4 {
		grid-template-columns: 1fr;
	}

	/* Mobile: download block at the very end of the cards (full width). */
	.en2x-grid__download {
		grid-column: 1 / -1;
		order: 9999;
	}
}

/* ---------------------------------------------------------------------------
 * Page navigation
 * ------------------------------------------------------------------------- */

.en2x-grid__pages {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 28px;
}

.en2x-grid__pages[hidden] {
	display: none;
}

.en2x-grid__page,
.en2x-grid__page-arrow {
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid #d2d2dc;
	border-radius: 6px;
	background: #fff;
	color: var(--en2x-color-primary);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.en2x-grid__page:hover,
.en2x-grid__page-arrow:hover:not([disabled]) {
	border-color: var(--en2x-color-primary);
}

.en2x-grid__page.is-active {
	background: var(--en2x-color-primary);
	border-color: var(--en2x-color-primary);
	color: #fff;
	cursor: default;
}

.en2x-grid__page-arrow[disabled] {
	opacity: 0.4;
	cursor: default;
}

/* ---------------------------------------------------------------------------
 * "Mehr laden"
 * ------------------------------------------------------------------------- */

.en2x-grid__more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

.en2x-grid__more-wrap[hidden] {
	display: none;
}

.en2x-grid__more {
	padding: 10px 28px;
	background: var(--en2x-color-primary);
	border: none;
	border-radius: var(--en2x-button-radius, 999px);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.en2x-grid__more:hover,
.en2x-grid__more:focus {
	background: #190b63; /* darker variant of var(--en2x-color-primary) */
}

.en2x-grid__more:disabled {
	opacity: 0.7;
	cursor: default;
}

/* ---------------------------------------------------------------------------
 * Loading state
 * ------------------------------------------------------------------------- */

.en2x-grid-module.is-loading .en2x-grid {
	opacity: 0.55;
	transition: opacity 0.15s ease;
	pointer-events: none;
}