/**
 * Pinterest First Editorial - Layout primitives.
 *
 * Content container and reusable ratio-frame utilities only. Component
 * grids, header, homepage sections and article layout belong to later
 * phases (Docs/DESIGN_SYSTEM.md #3 Grid Behavior; Docs/ARCHITECTURE.md).
 *
 * All values come from tokens.css (Docs/ARCHITECTURE.md, CSS Rules).
 *
 * @package Pinterest_First_Editorial
 */

/* -------------------------------------------------------------------------
 * Content container - default content width with responsive outer gutters.
 * border-box keeps padding inside the reserved width: no horizontal
 * scrolling at any breakpoint.
 * ---------------------------------------------------------------------- */

.pfe-container {
	width: 100%;
	max-width: var(--pfe-content-width);
	margin-inline: auto;
	padding-inline: var(--pfe-gutter);
}

/* -------------------------------------------------------------------------
 * Reading measure - long-form text stays within a comfortable line length
 * (60-80 characters per line, Docs/DESIGN_SYSTEM.md #9).
 * ---------------------------------------------------------------------- */

.pfe-measure {
	max-width: var(--pfe-reading-measure);
}

/* -------------------------------------------------------------------------
 * Image ratio frames - locked ratio registry only (Docs/DECISIONS.md #9):
 * 3:2 (hero / feature / compact), 4:5 (card / thumbnail), 1:1 (square /
 * avatar). Frames crop overflow so media never changes reserved layout
 * dimensions. WordPress size registration happens in inc/image-sizes.php.
 * ---------------------------------------------------------------------- */

.pfe-ratio-3-2 {
	aspect-ratio: var(--pfe-ratio-3-2);
	overflow: hidden;
}

.pfe-ratio-4-5 {
	aspect-ratio: var(--pfe-ratio-4-5);
	overflow: hidden;
}

.pfe-ratio-1-1 {
	aspect-ratio: var(--pfe-ratio-1-1);
	overflow: hidden;
}