/*!
 * Forum Sozial e.V. - 06-responsive partial.
 * Global responsive media queries (moved out of the old 06-pages-responsive).
 * NOTE: cascade order is significant - see inc/enqueue.php.
 */

/* ─── Tablet (max-width: 1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) {
	.fsev-event-grid {
		grid-template-columns: 1fr;
		gap:30px
	}

	/* The ice-blue panel bleeds past the content column with a fixed -100px on
	   each side, which is the wide/content difference of the 1400px desktop
	   layout. Below that width the bleed pushes the panel out of the viewport
	   and the whole page scrolls sideways. */
	.fsev-member-list-panel {
		margin-inline: 0;
		padding-inline: 24px;
	}
}

/* ─── Small mobile: hide header Jobs/Kontakt, keep only Menü ──────── */

@media (max-width: 550px) {
	/* Direct children only. The navigation block sits in the same container
	   and renders the menu overlay inside it, so a descendant selector also
	   hit the overlay's Kontakt button - leaving phones with no way at all to
	   reach the contact page. */
	.fsev-header-actions > .wp-block-button {
		display: none;
	}
}

/* ─── Overlay menu grid: 3 columns before it stacks to 1 at 700px ───── */

@media (max-width: 900px) {
	.fsev-overlay-menu-grid {
		grid-template-columns: repeat(3, minmax(130px, 1fr));
	}
}

/* ─── Mobile (max-width: 700px) ─────────────────────────────────────── */

@media (max-width: 700px) {
	.fsev-site-header {
		padding: 28px 24px 24px;
	}

	.fsev-site-header:after,
	.fsev-page:before {
		height: 190px;
		right: -150px;
		width: 320px;
	}

	.fsev-site-header__inner {
		align-items: flex-start;
		gap: 20px;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.fsev-logo img {
		width: 140px !important;
	}

	.fsev-page {
		padding: 32px 24px 64px;
	}

	.fsev-hero p {
		font-size: var(--wp--preset--font-size--mobile-intro);
	}

	.fsev-band {
		padding-bottom: 40px;
		padding-top: 40px;
	}

	.fsev-login-layout,
	.fsev-dashboard-layout {
		grid-template-columns: 1fr;
	}

	.fsev-event-grid {
		grid-template-columns: 1fr;
	}

	.fsev-event-single__hero {
		flex-direction: column;
	}

	.fsev-event-date--lg {
		flex-direction: row;
		gap: 10px;
		align-items: baseline;
		justify-content: center;
		min-width: 0;
		padding: 16px 20px;
	}

	.fsev-event-date--lg .fsev-event-date__day {
		font-size: 40px;
	}

	.fsev-event-facts__row {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.fsev-event-single {
		padding-bottom: var(--wp--preset--spacing--3-xl);
	}

	.fsev-event-single__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.fsev-event-single__actions .wp-block-button,
	.fsev-event-single__actions .wp-block-button__link {
		width: 100%;
	}

	.fsev-footer-nav {
		justify-content: flex-start;
	}

	.fsev-footer-address {
		text-align: left;
	}

	.fsev-form-row,
	.fsev-cf-row {
		grid-template-columns: 1fr;
	}

	.fsev-cf-privacy {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	/* Stacked, the portrait no longer spans the full card width, so it needs
	   the same 20px above it that .fsev-partner-info already provides below -
	   otherwise the image sits flush against the top edge while the text
	   below is inset. */
	.fsev-partner-card {
		align-items: center;
		flex-direction: column;
		padding-top: 20px;
		text-align: center;
	}

	/* flex-direction did nothing here: the grid is display:grid, so the two
	   columns survived on phones and squeezed every card into ~135px. Names,
	   focus areas and e-mail addresses broke mid-word and were unreadable. */
	.fsev-partners-grid {
		grid-template-columns: 1fr;
	}

	.fsev-member-grid {
		grid-template-columns: 1fr;
	}

	.fsev-member-controls {
		flex-direction: column;
		align-items: flex-start;
	}

	.fsev-404-title {
		font-size: 80px;
	}

	.fsev-404-page {
		min-height: 50vh;
		padding: 48px 24px;
	}

	.fsev-menu-overlay {
		padding: 0 16px 48px;
	}

	.fsev-menu-overlay__panel {
		padding: 26px 24px 36px;
	}

	/* Logo, close button and Kontakt do not fit on one line on a phone. The
	   row is nowrap by design, so without this the logo was shrunk from
	   220px down to 25px to make room. */
	.fsev-menu-overlay__top {
		flex-wrap: wrap;
		gap: 20px;
	}

	.fsev-overlay-logo {
		flex-shrink: 0;
	}

	.fsev-overlay-menu-grid {
		gap: 22px;
		grid-template-columns: 1fr;
	}

	.fsev-cf-row {
		grid-template-columns: 1fr;
	}

	.fsev-form-row {
		grid-template-columns: 1fr;
	}

	.fsev-member-grid {
		grid-template-columns: 1fr;
	}
}