/**
 * STTM Theme Plain — Layout
 */

.sttm-container {
	width: 100%;
	max-width: var(--sttm-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (min-width: 640px) {
	.sttm-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (min-width: 1024px) {
	.sttm-container { padding-left: 2rem; padding-right: 2rem; }
}

.sttm-container-narrow {
	width: 100%;
	max-width: var(--sttm-container-narrow);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (min-width: 640px) {
	.sttm-container-narrow { padding-left: 1.5rem; padding-right: 1.5rem; }
}

.sttm-container-6xl {
	width: 100%;
	max-width: var(--sttm-container-6xl);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

.sttm-section {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

@media (min-width: 768px) {
	.sttm-section { padding-top: 4rem; padding-bottom: 4rem; }
}

@media (min-width: 1024px) {
	.sttm-section { padding-top: 5rem; padding-bottom: 5rem; }
}

#sttm-main-content {
	flex: 1;
}

.sttm-stack {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.sttm-stack-sm { gap: 0.75rem; }
.sttm-stack-lg { gap: 2rem; }

.sttm-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.sttm-row-center {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.sttm-grid-2,
.sttm-grid-3,
.sttm-grid-4 {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.sttm-grid-2 { grid-template-columns: repeat(2, 1fr); }
	.sttm-grid-3 { grid-template-columns: repeat(2, 1fr); }
	.sttm-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.sttm-grid-3 { grid-template-columns: repeat(3, 1fr); }
	.sttm-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.sttm-media-cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sttm-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.55));
}

.sttm-relative { position: relative; }
.sttm-z-10 { position: relative; z-index: 10; }

.sttm-text-center { text-align: center; }
.sttm-text-left { text-align: left; }
.sttm-mx-auto { margin-left: auto; margin-right: auto; }

.sttm-hidden { display: none !important; }

@media (max-width: 1023px) {
	.sttm-desktop-only { display: none !important; }
}

@media (min-width: 1024px) {
	.sttm-mobile-only { display: none !important; }
}

@media (max-width: 639px) {
	.sttm-sm-up { display: none !important; }
}

@media (min-width: 640px) {
	.sttm-sm-down { display: none !important; }
}