/*
 * Layout runtime stilleri.
 *
 * Kural: tek sınıf seçici, ağırlık artıran bildirim yok, property tanımı yok.
 * Custom property'ler yalnız var() ile okunur, böylece tema onları kendi katmanında
 * tanımlayıp her değeri ezebilir. Kolonlar grid akışıyla dizilir; hiçbir kural
 * içeriği yeniden sıralamaz, bu yüzden görsel sıra DOM sırasının aynısıdır ve
 * RTL yalnız yazma yönünden gelir.
 */

.mevvforms-layout {
	container-name: mevvforms-layout;
	container-type: inline-size;
	display: grid;
	gap: var(--mevvforms-field-gap, 1rem);
	max-width: var(--mevvforms-max-width, none);
}

.mevvforms-row {
	align-items: start;
	column-gap: var(--mevvforms-column-gap, 1.25rem);
	display: grid;
	row-gap: var(--mevvforms-row-gap, var(--mevvforms-field-gap, 1rem));
}

.mevvforms-row-1 {
	grid-template-columns: minmax(0, 1fr);
}

.mevvforms-row-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mevvforms-row-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mevvforms-row-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mevvforms-column {
	align-content: start;
	display: grid;
	gap: var(--mevvforms-field-gap, 1rem);
	min-width: 0;
}

.mevvforms-span-2 {
	grid-column: span 2;
}

.mevvforms-span-3 {
	grid-column: span 3;
}

.mevvforms-span-4 {
	grid-column: span 4;
}

.mevvforms-error-summary {
	border-inline-start: 0.25rem solid var(--mevvforms-error, currentColor);
	border-radius: var(--mevvforms-radius, 0);
	padding-block: 0.75rem;
	padding-inline: 1rem;
}

.mevvforms-error-summary ul {
	display: grid;
	gap: 0.25rem;
	margin-block: 0.5rem 0;
	padding-inline-start: 1.25rem;
}

.mevvforms-error-summary a {
	color: inherit;
}

.mevvforms-error-summary:focus-visible {
	outline: 3px solid var(--mevvforms-accent, currentColor);
	outline-offset: 2px;
}

.mevvforms-error-summary a:focus-visible {
	outline: 3px solid var(--mevvforms-accent, currentColor);
	outline-offset: 2px;
}

/*
 * Kırılım iki katmanlı: dar ekran için media query, geniş ekranda dar bir
 * sütuna yerleştirilmiş form için container query. İkisi de tek kolona iner,
 * ölçüm JS ile yapılmaz. Kurallar dosyanın sonunda çünkü satır sınıflarıyla
 * aynı specificity'ye sahipler ve kaynak sırası kazanır.
 */
@media (max-width: 40rem) {
	.mevvforms-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.mevvforms-column {
		grid-column: auto;
	}
}

@container mevvforms-layout (max-width: 30rem) {
	.mevvforms-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.mevvforms-column {
		grid-column: auto;
	}
}