/**
 * Layout — containers, ενότητες, grid, media (mobile-first).
 */

/* Containers (§6) */
.of-container {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--container-main) + (2 * var(--container-padding)));
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.of-container--wide {
	max-width: calc(var(--container-wide) + (2 * var(--container-padding)));
}

.of-container--text {
	max-width: calc(var(--container-text) + (2 * var(--container-padding)));
}

/* Αρχική: οι ενότητες πιάνουν όλο το πλάτος (έχουν δικό τους container) */
.of-home {
	width: 100%;
}

/* Ενότητες (§7): η απόσταση αλλάζει μόνη της ανά συσκευή */
.of-section {
	padding-block: var(--section-space);
}

.of-section--surface {
	background-color: var(--color-surface);
}

.of-section--soft {
	background-color: var(--color-purple-soft);
}

.of-section--dark {
	background-color: var(--color-primary-dark);
	color: var(--color-on-primary);
}

.of-section--dark :where(h1, h2, h3, h4, h5, h6) {
	color: var(--color-on-primary);
}

/*
 * Grid: οι στήλες ορίζονται ανά συσκευή με --cols-mobile / --cols-tablet / --cols-desktop.
 * Χρήση: class="of-grid of-grid--4"
 */
.of-grid {
	display: grid;
	gap: var(--grid-gap);
	grid-template-columns: repeat(var(--cols-mobile, 1), minmax(0, 1fr));
}

@media (min-width: 768px) {
	.of-grid {
		grid-template-columns: repeat(var(--cols-tablet, 2), minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.of-grid {
		grid-template-columns: repeat(var(--cols-desktop, 3), minmax(0, 1fr));
	}
}

.of-grid--2 {
	--cols-mobile: 1;
	--cols-tablet: 2;
	--cols-desktop: 2;
}

.of-grid--3 {
	--cols-mobile: 1;
	--cols-tablet: 2;
	--cols-desktop: 3;
}

.of-grid--4 {
	--cols-mobile: 2;
	--cols-tablet: 3;
	--cols-desktop: 4;
}

/* Κάθετη ροή: σταθερή απόσταση ανάμεσα σε διαδοχικά στοιχεία */
.of-stack > * + * {
	margin-block-start: var(--stack-space, var(--space-4));
}

/* Media με σταθερή αναλογία (§12) */
.of-media {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--media-ratio, auto);
}

.of-media > img {
	width: 100%;
	height: 100%;
	object-fit: var(--media-fit, cover);
}

.of-media--product {
	--media-ratio: var(--ratio-product);
	--media-fit: contain;
}

.of-media--category {
	--media-ratio: var(--ratio-category);
}

.of-media--hero {
	--media-ratio: var(--ratio-hero);
}

.of-media--blog {
	--media-ratio: var(--ratio-blog);
}