/* MU.lv responsive layer — same primitives, different composition */
/* Breakpoints match --mu-bp-* documentation in mu-theme.css: 768 / 1024 */

/* Desktop: centered shell, 3-column portal. Priority classes do not reorder. */
@media (min-width: 1024px) {
	.mu-ui-grid--portal {
		display: grid;
		grid-template-columns: minmax(var(--mu-col-side-min), 0.22fr) minmax(0, 1fr) minmax(var(--mu-col-side-min), 0.24fr);
		gap: var(--mu-space-md);
	}

	.mu-ui-grid--portal > * {
		min-width: 0;
	}

	.mu-ui-grid--content {
		grid-template-columns: minmax(0, 1fr) minmax(var(--mu-col-side-min), 15rem);
	}
}

/* Below desktop: unwrap column wrappers so modules participate in portal layout.
   Order follows .mu-ui-priority-* (not left/main/right identity). */
@media (max-width: 1023px) {
	.mu-ui-grid--portal > * {
		display: contents;
	}

	.mu-ui-grid--portal > * > * {
		order: 5;
	}

	.mu-ui-grid--portal .mu-ui-priority-1 {
		order: 1;
	}

	.mu-ui-grid--portal .mu-ui-priority-2 {
		order: 2;
	}

	.mu-ui-grid--portal .mu-ui-priority-3 {
		order: 3;
	}

	.mu-ui-grid--portal .mu-ui-priority-4 {
		order: 4;
	}
}

/* Tablet: two columns; priority-2 (main content) spans full width */
@media (min-width: 768px) and (max-width: 1023px) {
	.mu-ui-grid--portal {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-auto-flow: row dense;
		gap: var(--mu-space-md);
	}

	.mu-ui-grid--portal .mu-ui-priority-2 {
		grid-column: 1 / -1;
	}

	.mu-ui-nav-item > a {
		padding-left: var(--mu-space-sm);
		padding-right: var(--mu-space-sm);
	}
}

/* Mobile: one-column stack by semantic priority */
@media (max-width: 767px) {
	.mu-ui-container,
	.mu-ui-main {
		padding-left: var(--mu-space-sm);
		padding-right: var(--mu-space-sm);
	}

	.mu-ui-header .mu-ui-container {
		flex-wrap: wrap;
	}

	.mu-ui-header-tools {
		width: 100%;
		justify-content: flex-start;
	}

	.mu-ui-nav-toggle {
		display: inline-flex;
		margin: var(--mu-space-xs) var(--mu-space-sm) var(--mu-space-sm);
	}

	.mu-ui-nav > .mu-ui-container {
		display: block;
		padding-left: 0;
		padding-right: 0;
	}

	.mu-ui-nav > .mu-ui-container > ul {
		display: none;
		flex-direction: column;
		flex-wrap: nowrap;
		border-top: var(--mu-border-width) solid var(--mu-border-strong);
	}

	.mu-ui-nav-state:checked ~ .mu-ui-nav > .mu-ui-container > ul {
		display: flex;
	}

	.mu-ui-nav-item {
		width: 100%;
		border-bottom: var(--mu-border-width) solid var(--mu-header-line);
	}

	.mu-ui-nav-item + .mu-ui-nav-item {
		border-left: 0;
	}

	.mu-ui-nav-item > a:hover,
	.mu-ui-nav-item > a:focus,
	.mu-ui-nav-item:focus-within > a,
	.mu-ui-nav-item > a[aria-current="page"] {
		border-bottom-color: transparent;
		box-shadow: inset 2px 0 0 var(--mu-accent);
	}

	.mu-ui-nav-dropdown,
	.mu-ui-nav-item:hover > .mu-ui-nav-dropdown,
	.mu-ui-nav-item:focus-within > .mu-ui-nav-dropdown {
		display: block;
		position: static;
		min-width: 0;
		border: 0;
		border-radius: 0;
		box-shadow: var(--mu-shadow-none);
		background: var(--mu-header-hover);
	}

	.mu-ui-nav-dropdown a {
		color: var(--mu-header-text);
		padding-left: var(--mu-space-lg);
	}

	.mu-ui-nav-dropdown .mu-ui-nav-dropdown a {
		padding-left: var(--mu-space-xl);
	}

	.mu-ui-grid--portal {
		display: flex;
		flex-direction: column;
		padding: var(--mu-space-sm);
		gap: var(--mu-space-sm);
	}

	.mu-ui-panel,
	.mu-ui-panel--compact,
	.mu-ui-panel--highlight {
		width: 100%;
	}

	.mu-ui-footer .mu-ui-container {
		flex-direction: column;
		align-items: flex-start;
	}

	.mu-ui-panel-footer .mu-ui-form,
	.mu-ui-panel-footer .mu-ui-field {
		flex: 1 1 100%;
		max-width: none;
	}

	.mu-ui-action-row .mu-ui-button {
		flex: 1 1 100%;
	}

	.mu-ui-form--stack > .mu-ui-button {
		align-self: stretch;
	}

	.mu-ui-dialog {
		padding: var(--mu-space-sm);
		align-items: stretch;
	}

	.mu-ui-dialog-panel {
		max-height: calc(100vh - (2 * var(--mu-space-sm)));
	}
}

@media (max-width: 479px) {
	.mu-ui-header-brand {
		font-size: var(--mu-font-size-sm);
		letter-spacing: var(--mu-letter-spacing-ui);
	}

	.mu-ui-stat-value {
		font-size: var(--mu-font-size-lg);
	}
}

/* Standard reCAPTCHA checkbox is 304px. Scale only when the content well is narrower. */
@media (max-width: 359px) {
	.mu-ui-field .g-recaptcha {
		transform-origin: top left;
		transform: scale(0.9);
		width: 304px;
		height: calc(78px * 0.9);
	}
}