/*
 * Shared list-width rule — every vertical content list on the site caps
 * at the same measure the timeline uses on /sisters/connee/ (li.timeline__entry).
 *
 * Measured on /sisters/connee/ @1440 viewport:
 *   .timeline            max-width = var(--measure-wide) = 60rem
 *   computed             1080px (because global.css sets html font-size to
 *                        112.5%, so 1rem = 18px → 60rem = 1080px).
 *   li.timeline__entry   stretches full width (border-box, 0 padding, 0
 *                        margin), so entry width == parent width == 1080px.
 *
 * This file applies the same cap + centering to the vertical lists on
 * /press/, /media/, every press subhub archive, every media sub-page that
 * holds a listing, and any owner-added core/list (`.wp-block-list`) in page
 * content. Nav + footer `<ul>`s are untouched — they don't use any of
 * these class names.
 */

/* --- Lists ----------------------------------------------------------
 * Vertical content listings — article lists on the press subhubs and
 * media hub, the lesson cards (`<ol class="lessons-cards">` is a flex
 * column of card-shaped items, so semantically a list), discography
 * sessions, and any owner-added core/list in page content. */
.article-list,
.bozzies-article-list,
.lessons-cards,
.disc-sessions,
.wp-site-blocks main .wp-block-list {
	max-width: var(--measure-wide);
	margin-inline: auto;
}

/* --- Card grids -----------------------------------------------------
 * Multi-column tile grids. Width target is the sisters cards on the Astro
 * site (https://boswell-poc.vercel.app/sisters/), measured at:
 *   @1440  .sisters-cards  w=1324.81  L=57.59  R=57.59
 *   @390   .sisters-cards  w=336      L=27     R=27
 * The grid fills `.container`'s inner area — `.container` has
 * `max-width: var(--measure-max)` (84rem = 1512px) and
 * `padding-inline: clamp(var(--space-5), 4vw, var(--space-8))`, which at
 * 1440 clamps to the 4vw preferred value (= 57.6px), at 390 clamps to the
 * minimum (= 27px). So card grids need the same max-width — nothing
 * tighter — and when the grid is its own `.container` (music-teasers,
 * sisters-subpages, see-also) the padding already comes from the shared
 * `.container` rule; when the grid is inside a separate `.container`
 * wrapper (release cards, sister cards) the grid just fills.
 * margin-inline: auto centers in the (also auto-centered) container. */
.releases-grid,
.music-teasers__grid,
.sisters-cards,
.sisters-subpages__grid,
.see-also__grid {
	max-width: var(--measure-max);
	margin-inline: auto;
}

/*
 * Any paragraph in page content that opts into text-align:center also gets
 * its box centered. Without this the paragraph box still sits left-aligned
 * (constrained to --measure or --wp--custom--measure--prose), so the
 * short centered text visually hangs left — not what owners want when they
 * tick "Align text center" on a paragraph. Scoped to .wp-site-blocks main
 * so nav + footer paragraphs (if any grow a center alignment later) are
 * untouched.
 */
.wp-site-blocks main p.has-text-align-center,
.wp-site-blocks main .wp-block-paragraph.has-text-align-center {
	margin-inline: auto;
}

/* --- Tables -----------------------------------------------------------
 * Every table in page content — core/table blocks the owner adds, and the
 * chart tables already baked into /media/charts/ — matches the 60rem
 * (1080 px) list cap, centered. Below 1080 viewport the table would be
 * wider than the screen, so we leave it at parent width in that case.
 * Above, we honour the parent width when it already allows 60rem, or
 * break out of a `.container-narrow` reading column via a negative
 * inline margin ("negative-margin breakout") so the chart ledger reads
 * at the shared cap even though the surrounding prose stays at 42rem. */
.wp-site-blocks main .wp-block-table,
.wp-site-blocks main > table,
.wp-site-blocks main figure.wp-block-table {
	max-width: var(--measure-wide);
	margin-inline: auto;
}

@media (min-width: 1080px) {
	/* Table sits inside .container-narrow (42rem = 756px). Give it the
	 * 60rem = 1080px width, then use a negative inline margin equal to half
	 * the width difference so the table extends past the narrow column
	 * symmetrically on each side. */
	.wp-site-blocks main .container-narrow > figure.wp-block-table,
	.wp-site-blocks main .container-narrow > .wp-block-table {
		width: var(--measure-wide);
		max-width: none;
		margin-inline: calc((100% - var(--measure-wide)) / 2);
	}
}