/**
 * Aspect Ratio Utilities
 *
 * Schema-driven aspect ratios and object-fit/position.
 */

/* Aspect ratios */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-wide { aspect-ratio: 21 / 9; }
.aspect-portrait { aspect-ratio: 3 / 4; }
.aspect-photo { aspect-ratio: 4 / 3; }

/* The steps between them, added 2026-09-28 for the Open section layouts
 * (layouts/default/open-*.json). An image's height is set by its aspect and its
 * column's width, and the five ratios above left nothing between 16:9 and 4:3
 * (16:10, 3:2), nothing between 4:3 and 1:1 (5:4) and nothing flatter than 21:9
 * — so a photograph beside two lines of text had to be either too
 * short or too tall ("images are too tall", Rick, 2026-09-28). Named by their
 * ratio, the same way the page-header images are (page-header.css). */
.aspect-3-2 { aspect-ratio: 3 / 2; }
.aspect-5-4 { aspect-ratio: 5 / 4; }
.aspect-16-10 { aspect-ratio: 16 / 10; }

/* A banner under a text block, full container width: 3:1 from tablet up, where
 * the container is 700px and wider; 16:9 on a phone, where 3:1 of a 380px column
 * is a 127px strip that reads as a divider rather than a photograph. */
.aspect-banner { aspect-ratio: 16 / 9; }
@media (min-width: 768px) {
  .aspect-banner { aspect-ratio: 3 / 1; }
}

/* AN IMAGE GIVEN AN ASPECT FILLS ITS COLUMN (capture review, 2026-09-28). The
 * aspect fixes the frame's shape; its width is the column's. Without this an
 * Image_Component in a left-aligned column (a flex column set items-start)
 * shrank to its source file's width, so a 600px map in a 718px column drew at
 * 600, and object-fit: contain then letterboxed it to a 190px sliver. Scoped to
 * Image_Component's own wrappers, so an avatar or an inline aspect image
 * elsewhere keeps its size. */
.image-wrapper:has(> img[class*="aspect-"]),
.image-link:has(> img[class*="aspect-"]),
.image-figure:has(img[class*="aspect-"]) { width: 100%; align-self: stretch; }
.image-wrapper > img[class*="aspect-"],
.image-link > img[class*="aspect-"],
.image-figure img[class*="aspect-"] { width: 100%; height: auto; }

/* Object fit */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-fill { object-fit: fill; }

/* Object position */
.object-center { object-position: center; }
.object-top { object-position: top; }
.object-bottom { object-position: bottom; }