/* =========================================================
   layout.css — container, grid, section spacing, dark/paper theming
   ========================================================= */

.as-container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter);
	width: 100%;
}

.as-section {
	padding-top: var(--space-section);
	padding-bottom: var(--space-section);
	position: relative;
}

.as-section--dark {
	background: var(--c-bg);
	color: var(--c-paper);
}
/* a inherits via reset — no explicit rule (aby nie nadpisywać .as-link--accent) */
.as-section--dark .as-muted { color: var(--c-paper-muted); }
.as-section--dark .as-hairline { border-top: 1px solid var(--c-line-dark); }

.as-section--paper {
	background: var(--c-paper);
	color: var(--c-ink);
}
.as-section--paper .as-muted { color: var(--c-ink-muted); }
.as-section--paper .as-hairline { border-top: 1px solid var(--c-line-paper); }

/* Asymmetric section header: 40/60 */
.as-sec-head {
	display: grid;
	grid-template-columns: 4fr 6fr;
	gap: 64px;
	align-items: start;
	margin-bottom: var(--space-block);
}
.as-sec-head__h {
	font-size: var(--f-display-l);
	letter-spacing: -0.015em;
}
.as-sec-head__intro {
	font-size: var(--f-body-l);
	line-height: 1.6;
	padding-top: 10px;
}

/* 12-col grid (used by hero) */
.as-grid-12 {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 32px;
}

/* Two-col asymmetric 30/70 */
.as-grid-3070 {
	display: grid;
	grid-template-columns: 3fr 7fr;
	gap: 48px;
}

/* Meta list block */
.as-meta-row {
	font-family: var(--f-body);
	font-size: var(--f-label);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

/* Hairline utility */
.as-hairline {
	display: block;
	width: 100%;
	height: 1px;
	margin: 0;
}

/* Small hairline — decorative 40px */
.as-hairline--40 {
	width: 40px;
	border: none;
	height: 1px;
	background: currentColor;
	opacity: 0.4;
	margin: 28px 0;
}

.as-muted { color: var(--c-ink-muted); }

/* Section counter — bottom right */
.as-counter {
	position: absolute;
	right: var(--gutter);
	bottom: 40px;
	font-family: var(--f-body);
	font-size: var(--f-label);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	opacity: 0.7;
}

/* Editorial narrow reader (legal pages) */
.as-reader {
	max-width: 720px;
	margin: 0 auto;
}
.as-reader h2 {
	font-size: var(--f-display-m);
	margin-top: 2em;
	margin-bottom: 0.6em;
}
.as-reader h3 {
	font-size: var(--f-display-s);
	margin-top: 1.6em;
	margin-bottom: 0.4em;
}
.as-reader p, .as-reader li {
	font-size: var(--f-body);
	line-height: 1.7;
}
.as-reader ul {
	padding-left: 1.2em;
	list-style: disc;
	margin: 0 0 1em 0;
}
.as-reader table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.2em 0;
	font-variant-numeric: tabular-nums;
}
.as-reader th, .as-reader td {
	border-bottom: 1px solid var(--c-line-paper);
	padding: 12px 8px;
	text-align: left;
	vertical-align: top;
}
.as-reader th {
	font-weight: 600;
	font-size: var(--f-body-s);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}