/* =====================================================================
   Argen Verlag — layout.css
   Container, section spacing, header/footer layout, grid, responsive.
   ===================================================================== */

/* ---------- Container ---------- */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--space-3);
}

/* ---------- Sections ---------- */
.section {
	padding-block: var(--space-6);
}

.section__inner {
	max-width: var(--container);
	margin-inline: auto;
}

.site-main {
	display: block;
}

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--color-paper);
	border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-height: 72px;
}

.site-logo {
	display: inline-flex;
	align-items: center;
	color: var(--color-ink);
	text-decoration: none;
}

.site-logo:hover,
.site-logo:focus {
	text-decoration: none;
}

.site-logo__img {
	max-height: 52px;
	width: auto;
}

/* Show compact logo on small screens, full logo from tablet up. */
.site-logo__img--full {
	display: none;
}

.site-logo__img--compact {
	display: block;
}

/* ---------- Footer ---------- */
.site-footer {
	background-color: var(--color-ink);
	color: var(--color-paper);
	padding-block: var(--space-6) var(--space-4);
	margin-top: var(--space-8);
}

.site-footer a {
	color: var(--color-paper);
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--color-white);
	text-decoration: underline;
	text-underline-offset: .15em;
}

.site-footer__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

.site-footer__col h2,
.site-footer__col h3 {
	color: var(--color-white);
	font-size: 1.05rem;
	margin-bottom: var(--space-2);
}

.site-footer__col ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.site-footer__bottom {
	margin-top: var(--space-4);
	padding-top: var(--space-3);
	border-top: 1px solid rgba(248, 246, 241, .15);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	align-items: center;
	justify-content: space-between;
	font-size: .8125rem;
	color: rgba(248, 246, 241, .7);
}

.site-footer__fineprint {
	color: rgba(248, 246, 241, .55);
}

/* ---------- Book grid (shared layout primitive) ---------- */
.book-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

/* =====================================================================
   Responsive — mobile first
   ===================================================================== */

/* >= 600px : tablet portrait */
@media (min-width: 600px) {
	.book-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.site-footer__columns {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Swap to full logo. */
	.site-logo__img--full {
		display: block;
	}

	.site-logo__img--compact {
		display: none;
	}
}

/* >= 900px : tablet landscape / small desktop */
@media (min-width: 900px) {
	.section {
		padding-block: var(--space-8);
	}

	.container {
		padding-inline: var(--space-4);
	}

	.book-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.site-footer__columns {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* >= 1200px : large desktop */
@media (min-width: 1200px) {
	.book-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}