/* ==========================================================================
   Teako Minerals — Layout primitives: containers, grid, section spacing
   Mobile-first (breakpoints at 1180px, 1080px and 760px, matching the blocks).
   --------------------------------------------------------------------------
   THE PAGE GRID (2026-08-20, site-wide width pass)

   Every editorial section on every page sits on one measure. Before this
   pass the site carried five different ones — 1840 (news-insights),
   1552 (about / feature blocks / footer), 1512 (portfolio + news feed),
   1452 (investor hub) and 1440 — so no two sections shared a left edge.

   One rule now:
       outer box  = --teako-page-max  (1400px, GUTTERS INCLUDED)
       gutter     = --teako-page-gutter (56px, 40px @1180, 28px @1080)
       text measure = 1288px on wide screens

   Because css/base.css sets border-box globally, a container only has to
   say `max-width: var(--teako-page-max)` and the number on the page is the
   number in the CSS. Full-bleed bands (background edge-to-edge, content on
   the grid) use the --teako-page-inset formula below instead of a container.

   Deliberately OFF the grid (documented in reports/B-GLOBAL.md): the fixed
   nav and mega-menu, and the pinned full-bleed scroll experiences
   (.hero-scrolly, .thero, .nm, .is, .stack, .fs) — those are immersive
   surfaces with their own composition, not editorial sections.
   ========================================================================== */

:root {
	/* Outer width of a page container, gutters included. */
	--teako-page-max: 1400px;
	/* Left/right gutter inside that container. */
	--teako-page-gutter: 56px;
	/* Distance from the viewport edge to the first character of body copy.
	   Use on full-bleed bands that have no centred container of their own:
	   `padding-inline: var(--teako-page-inset);` keeps them on the same
	   left axis as every container above and below. */
	--teako-page-inset: max(
		var(--teako-page-gutter),
		calc((100% - var(--teako-page-max)) / 2 + var(--teako-page-gutter))
	);
}

@media (max-width: 1180px) {
	:root { --teako-page-gutter: 40px; }
}

@media (max-width: 1080px) {
	:root { --teako-page-gutter: 28px; }
}

/* Canonical container. New markup should use this rather than minting
   another `__inner`; the existing per-block containers are aligned to the
   same tokens so every left edge already matches. */
.teako-container {
	width: 100%;
	max-width: var(--teako-page-max);
	margin-inline: auto;
	padding-inline: var(--teako-page-gutter);
}

.teako-container--narrow { max-width: 1060px; }
.teako-container--wide   { max-width: 1600px; }