/* Lives in a half-width column (see the "Stay up to date" section in
   home.php) alongside the releases table, so this is a fixed 2x2 grid
   (4 events) rather than a width-responsive count. */
.mariadb-upcoming-events {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}

@media (max-width: 480px) {
	.mariadb-upcoming-events {
		grid-template-columns: 1fr;
	}
}

/* Used outside the homepage's half-width column (e.g. the /events archive
   pages) — a single chronological column reads far better than a grid for
   dated events, since a grid forces zigzag left-to-right/top-to-bottom
   scanning instead of a plain top-to-bottom read. */
.mariadb-upcoming-events--wide {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

/* Grid areas (not DOM order) place these — title/status share row 1,
   location/dates share row 2, regardless of the markup's own element order.
   Column 2 is auto-sized to content, so status/dates right-align within it
   via justify-self rather than depending on the column being full-width. */
.mariadb-upcoming-events--wide .mariadb-event-card {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"title    status"
		"location dates";
	box-sizing: border-box;
	grid-template-rows: auto;
	align-items: start;
	column-gap: 1.5rem;
	row-gap: 0.4rem;
	width: 68%;
}

.mariadb-upcoming-events--wide .mariadb-event-footer {
	display: contents;
}

.mariadb-upcoming-events--wide .mariadb-event-title {
	grid-area: title;
}

.mariadb-upcoming-events--wide .mariadb-event-status {
	grid-area: status;
	justify-self: end;
	margin-block-start: 0;
}

.mariadb-upcoming-events--wide .mariadb-event-location {
	grid-area: location;
}

.mariadb-upcoming-events--wide .mariadb-event-dates {
	grid-area: dates;
	justify-self: end;
}

.mariadb-upcoming-events--wide .mariadb-event-dates,
.mariadb-upcoming-events--wide .mariadb-event-location {
	margin-block: 0;
}

.mariadb-events-separator,
.wp-block-post-content .mariadb-events-separator {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 68%;
	margin: 1.5rem 0 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--primary) 70%, var(--wp--preset--color--secondary) 30%);
}

.mariadb-events-separator:first-child,
.wp-block-post-content .mariadb-events-separator:first-child {
	margin-top: 0;
}

.mariadb-events-separator::before,
.mariadb-events-separator::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--wp--preset--color--secondary);
}

@media (max-width: 600px) {
	.mariadb-events-separator,
	.wp-block-post-content .mariadb-events-separator {
		width: 100%;
	}

	/* Phones: same stacked layout as the compact cards. */
	.mariadb-upcoming-events--wide .mariadb-event-card {
		display: flex;
		width: 100%;
	}

	.mariadb-upcoming-events--wide .mariadb-event-footer {
		display: flex;
	}
}

/* Overrides .wp-block-post-content's generic descendant a/heading styling
   (style.css) when the block renders inside page content, which otherwise
   outranks these cards' own styling by specificity. */
.wp-block-post-content .mariadb-event-card {
	text-decoration: none;
	color: inherit;
}

.wp-block-post-content .mariadb-event-title {
	margin-block: 0 0.25rem;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
}

/* Title, location, then a footer row pinned to the bottom: dates left, status right. */
.mariadb-event-card {
	display: flex;
	flex-direction: column;
	padding: 1rem;
	background: var(--mariadb-card-bg);
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: 8px;
	box-shadow: 0 1px 4px var(--mariadb-card-shadow-color);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.mariadb-event-card:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 4px 14px var(--mariadb-card-shadow-color);
	transform: translateY(-2px);
}

/* Already happened — recedes visually rather than competing with
   upcoming/ongoing events for attention. */
.mariadb-event-card--past {
	opacity: 0.55;
}

/* Happening right now — stands out from the rest of a long chronological list. */
.mariadb-event-card--ongoing {
	border-color: var(--wp--preset--color--accent);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, var(--mariadb-card-bg) 88%);
}

/* The status drops to its own line (still right-aligned) when the card is too narrow for both. */
.mariadb-event-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
	margin-top: auto;
}

.mariadb-event-status {
	display: inline-block;
	margin-inline-start: auto;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--tertiary);
	/* Fixed color, ignores the card's hover state. */
	color: var(--wp--preset--color--primary);
	margin-block: 0;
	white-space: nowrap;
}

.mariadb-event-status--ongoing {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
}

.mariadb-event-status--past {
	background: transparent;
	border: 1px solid var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--secondary);
}

.mariadb-event-title {
	margin-block: 0 0.25rem;
	font-size: 1.15rem;
	line-height: 1.3;
}

/* Card leads to the event's own site, not a page here. */
.mariadb-event-card--external .mariadb-event-title::after {
	content: " \2197";
	font-size: 0.8em;
	opacity: 0.7;
}

.mariadb-event-dates,
.mariadb-event-location {
	margin-block: 0.15rem;
	font-size: 0.9rem;
}

.mariadb-event-dates {
	white-space: nowrap;
}

.mariadb-section-link {
	color: inherit;
	text-decoration: none;
}

.mariadb-section-link:hover,
.mariadb-section-link:focus-visible {
	text-decoration: underline;
}

.mariadb-home-tabs-nav {
	display: flex;
	justify-content: center;
	gap: 2rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--wp--preset--color--secondary);
}

.mariadb-home-tab {
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	padding: 0.5rem 0.25rem 1rem;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	line-height: 1.125;
	letter-spacing: -0.1px;
	color: var(--wp--preset--color--primary);
	opacity: 0.55;
	cursor: pointer;
	transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mariadb-home-tab:hover {
	opacity: 0.85;
}

.mariadb-home-tab.is-active {
	color: var(--wp--preset--color--accent);
	border-bottom-color: var(--wp--preset--color--accent);
	opacity: 1;
}

.mariadb-home-tab-panel[hidden] {
	display: none;
}

.mariadb-home-tab-viewall {
	margin-top: 1.5rem;
	margin-bottom: 0;
	text-align: center;
}

/* Evens out the line lengths when the heading wraps. */
.mariadb-hero h1 {
	text-wrap: balance;
}

.mariadb-hero-buttons .wp-block-button__link {
	box-shadow: 0 4px 14px var(--mariadb-card-shadow-color);
}

/* Sections butt up against each other and the footer, so no page background shows between their backgrounds. */
main :is(.mariadb-hero, .mariadb-home-updates-section, .mariadb-home-sponsors-section, .mariadb-home-blog-section, .mariadb-get-involved) {
	margin-block: 0;
}

.wp-site-blocks > main:has(.mariadb-hero),
.wp-site-blocks > main:has(.mariadb-hero) + * {
	margin-block-start: 0;
}

/* Same in both modes; navy text keeps ~4.6:1 contrast on this orange. */
.mariadb-hero-download .wp-block-button__link {
	background: #F08A5D;
	border-color: #1B3C53;
	color: #1B3C53;
}

.mariadb-hero-download .wp-block-button__link:hover {
	background: #E8794A;
	color: #1B3C53 !important;
}

/* !important: the buttons' preset color classes are !important. */
.mariadb-get-involved-buttons .wp-block-button__link:hover {
	background-color: #F08A5D !important;
	border-color: #1B3C53;
	color: #1B3C53 !important;
}

.mariadb-hero-buttons .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--background);
}

.mariadb-hero-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover {
	color: var(--wp--preset--color--background) !important;
}

.mariadb-releases-table-wrapper {
	background: var(--mariadb-card-bg);
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: 8px;
	padding: 0.25rem 1rem;
	box-shadow: 0 4px 14px var(--mariadb-card-shadow-color);
}

.mariadb-home-updates {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"poll releases"
		"poll events";
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.mariadb-home-updates > * {
	margin: 0;
}

.mariadb-home-updates-poll {
	grid-area: poll;
	display: flex;
	flex-direction: column;
}

.mariadb-home-updates-releases {
	grid-area: releases;
}

.mariadb-home-updates-events {
	grid-area: events;
}

/* Grid mode: the tab nav and the per-tab "view all" links are off (the linked h3s cover those). */
.mariadb-home-updates-tabs > .mariadb-home-tabs-nav,
.mariadb-home-updates .mariadb-home-tab-viewall {
	display: none;
}

/* Below 1024px the three blocks become tabs: one at a time, each at a comfortable width. */
@media (max-width: 1023px) {
	.mariadb-home-updates-tabs > .mariadb-home-tabs-nav {
		display: flex;
	}

	.mariadb-home-updates {
		display: block;
	}

	.mariadb-home-updates > * {
		display: none;
		max-width: 720px;
		margin-inline: auto;
	}

	[data-active-tab="poll"] .mariadb-home-updates-poll {
		display: flex;
	}

	[data-active-tab="releases"] .mariadb-home-updates-releases,
	[data-active-tab="events"] .mariadb-home-updates-events {
		display: block;
	}

	.mariadb-home-updates > * > .wp-block-heading {
		display: none;
	}

	.mariadb-home-updates .mariadb-home-tab-viewall {
		display: block;
	}
}

@media (max-width: 600px) {
	.mariadb-home-tabs-nav {
		gap: 1.25rem;
	}

	.mariadb-home-tab {
		font-size: var(--wp--preset--font-size--large);
	}
}

.mariadb-poll {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: var(--mariadb-card-bg);
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: 8px;
	padding: 1rem;
	box-shadow: 0 4px 14px var(--mariadb-card-shadow-color);
	color: var(--wp--preset--color--primary);
}

/* Auto margins center short content but collapse to 0 when it overflows, so nothing gets clipped. */
.mariadb-poll > * {
	margin-block: auto;
}

.mariadb-poll > :not(:has(.wpforms-confirmation-container-full)) {
	margin-inline: auto;
}

/* WPForms ships fixed light-theme colors; vars cover modern markup, !important covers classic markup. */
.mariadb-poll .wpforms-container {
	--wpforms-label-color: var(--wp--preset--color--primary);
	--wpforms-label-sublabel-color: var(--wp--preset--color--primary);
	--wpforms-field-text-color: var(--wp--preset--color--primary);
	--wpforms-field-background-color: var(--wp--preset--color--background);
	--wpforms-field-border-color: var(--wp--preset--color--secondary);
	--wpforms-button-background-color: var(--wp--preset--color--accent);
	--wpforms-button-text-color: var(--wp--preset--color--background);
}

.mariadb-poll .wpforms-container :is(label, legend, .wpforms-field-label, .wpforms-field-sublabel, .wpforms-field-description, .wpforms-title, .wpforms-description) {
	color: var(--wp--preset--color--primary) !important;
}

.mariadb-poll .wpforms-confirmation-container-full {
	max-height: 25rem;
	overflow-y: auto;
	background: var(--mariadb-card-bg) !important;
	border-color: var(--wp--preset--color--secondary) !important;
	color: var(--wp--preset--color--primary) !important;
}

.mariadb-poll .wpforms-confirmation-container-full * {
	color: inherit !important;
}

.mariadb-poll .wpforms-poll-results {
	background: transparent !important;
}

.mariadb-poll :is(.wpforms-confirmation-container-full, .wpforms-entry-preview),
.mariadb-poll :is(.wpforms-confirmation-container-full, .wpforms-entry-preview) * {
	font-size: 0.95rem !important;
	line-height: 1.5 !important;
}

.mariadb-poll .wpforms-poll-label {
	font-weight: 600 !important;
}

.mariadb-poll :is(.wpforms-poll-answer-percent, .wpforms-poll-total) {
	font-size: 0.85rem !important;
}

.mariadb-poll .wpforms-poll-answer-count {
	display: none !important;
}

.mariadb-poll .wpforms-poll-answer-bar-wrap {
	height: 20px !important;
}

/* With results showing, the poll stops sizing the row and the whole card scrolls within the right column's height. */
@media (min-width: 1024px) {
	.mariadb-home-updates-poll:has(.wpforms-confirmation-container-full) {
		height: 0;
		min-height: 100%;
	}

	.mariadb-home-updates-poll:has(.wpforms-confirmation-container-full) .mariadb-poll {
		min-height: 0;
		overflow-y: auto;
	}

	.mariadb-poll .wpforms-confirmation-container-full {
		max-height: none;
		overflow-y: visible;
	}
}

.mariadb-poll .wpforms-submit-container {
	display: flex;
	justify-content: center;
}

.mariadb-poll .wpforms-container .wpforms-submit {
	background: var(--wp--preset--color--accent) !important;
	border: 1px solid var(--wp--preset--color--accent) !important;
	border-radius: 8px !important;
	color: var(--wp--preset--color--background) !important;
	font-family: inherit;
	font-weight: 600;
}

.mariadb-poll .wpforms-container .wpforms-submit:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 82%, black 18%) !important;
}

.mariadb-releases-table {
	width: 100%;
	border-collapse: collapse;
}

.mariadb-releases-table th,
.mariadb-releases-table td {
	padding: 0.75rem 0.5rem;
	border-bottom: 1px solid var(--wp--preset--color--secondary);
	text-align: left;
	font-size: 0.9rem;
}

.mariadb-releases-table th:last-child,
.mariadb-releases-table td:last-child {
	text-align: center;
}

.mariadb-releases-table tbody tr:last-child td {
	border-bottom: none;
}

/* Inside page/post content the generic table styles (blog.css, !important) would otherwise win. */
.wp-block-post-content .mariadb-releases-table {
	margin-block: 0;
}

.wp-block-post-content .mariadb-releases-table :is(th, td) {
	padding: 0.75rem 0.5rem;
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--secondary);
	background: transparent !important;
}

.wp-block-post-content .mariadb-releases-table tbody tr:last-child td {
	border-bottom: none;
}

.mariadb-release-version {
	display: inline-block;
	font-weight: 600;
	padding-block: 0.5rem;
	margin-block: -0.5rem;
	margin-inline-end: 0.4rem;
	color: inherit;
	text-decoration: none;
}

.mariadb-release-version:hover,
.mariadb-release-version:focus-visible {
	text-decoration: underline;
}

.mariadb-release-tag {
	display: inline-block;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	background: var(--wp--preset--color--tertiary);
}

.mariadb-releases-table a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-weight: 600;
}

.mariadb-releases-table a:hover {
	text-decoration: underline;
}

.mariadb-release-notes-link {
	display: inline-flex;
	padding-block: 0.75rem;
	padding-inline: 1.5rem;
	margin-block: -0.75rem;
	margin-inline: -1.5rem;
	border-radius: 4px;
}

.mariadb-release-notes-link svg {
	width: 18px;
	height: 18px;
}

.mariadb-releases-table a.mariadb-release-notes-link:hover {
	text-decoration: none;
}

.mariadb-sponsors-marquee {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.mariadb-sponsor-lane-title,
.wp-block-post-content .mariadb-sponsor-lane-title {
	margin-block: 1rem 0.5rem;
}

/* Tier titles are graduated by significance: Diamond largest/boldest down to Silver smallest. */
.mariadb-sponsor-lane--diamond .mariadb-sponsor-lane-title {
	font-size: 1.4rem;
	font-weight: 700;
}

.mariadb-sponsor-lane--platinum .mariadb-sponsor-lane-title {
	font-size: 1.3rem;
	font-weight: 700;
}

.mariadb-sponsor-lane--gold .mariadb-sponsor-lane-title {
	font-size: 1.2rem;
	font-weight: 600;
}

.mariadb-sponsor-lane--silver .mariadb-sponsor-lane-title {
	font-size: 1.1rem;
	font-weight: 500;
	opacity: 0.85;
}

.mariadb-sponsor-lane-scroller {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	/* Fixed white background regardless of light/dark mode — several sponsor
	   logos have white backgrounds baked in, so they need a consistently
	   white backdrop to actually look right rather than showing a visible
	   box around themselves. */
	background: #ffffff;
	border-radius: 12px;
	padding: 0.75rem;
	box-shadow: 0 4px 14px var(--mariadb-card-shadow-color);
}

.mariadb-sponsor-track {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Centers when the logos fit, starts from the left when they overflow — so the lane is already in place before the script runs. */
	justify-content: safe center;
	gap: 3rem;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Fills the space between the two arrows — without flex:1 + min-width:0
	   the track sized itself to its own content instead of the available
	   width, which also broke overflow detection for lanes with few sponsors. */
	flex: 1;
	min-width: 0;
}

/* Only lanes that actually scroll get left-alignment and the edge fade — a
   lane with too few sponsors to overflow stays centered with no fade, since
   there's nothing being cut off. */
.mariadb-sponsor-track--overflowing {
	justify-content: flex-start;
	-webkit-mask-image: linear-gradient(to right, transparent 0, black 32px, black calc(100% - 32px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, black 32px, black calc(100% - 32px), transparent 100%);
}

.mariadb-sponsor-track::-webkit-scrollbar {
	display: none;
}

/* Normalizes wildly different logo shapes (square marks vs. wide wordmarks) into
   the same visual footprint — each logo scales to fit within this box rather
   than being stretched to a fixed height, which made wide logos look far
   larger/more prominent than square ones. */
.mariadb-sponsor-logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 60px;
}

.mariadb-sponsor-logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
	pointer-events: none;
}

.mariadb-sponsor-arrow {
	flex-shrink: 0;
	width: 2rem;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	opacity: 0.6;
	transition: opacity 0.15s ease;
}

.mariadb-sponsor-arrow:hover,
.mariadb-sponsor-arrow:focus-visible {
	opacity: 1;
}

/* Arrows render hidden and the script reveals them on overflowing lanes; keeping their space avoids a layout shift when that happens. */
.mariadb-sponsor-arrow[hidden] {
	display: flex;
	visibility: hidden;
}

.mariadb-sponsor-arrow svg {
	height: 2.75rem;
	width: auto;
}