/**
 * Shared band-alignment row for a breadcrumb/utility row sitting between
 * the header and page content (CAP-2, spec-sitewide-alignment-band).
 *
 * Generic layout ONLY -- max-width, centering, padding, and left/right
 * flex-anchoring -- never presentation (a consumer's own colours, shapes
 * or component selectors). A template adds this class
 * ALONGSIDE its own wrapper class (e.g. `.portfolio-archive__toolbar`)
 * and supplies its own content/children; this file never targets a
 * template-specific selector. Same "shared class, template supplies its
 * own content" pattern as theme/site-nav.css's relationship to Neve's own
 * nav markup -- see that file's header comment.
 *
 * `max-width: var(--container)` reads off Neve's own global Customizer
 * dial (Global > Container > Container width, `neve_container_width`) --
 * the same custom property Neve's own `.container`/`.layout-contained`
 * classes consume, confirmed live 2026-09-16 (SPEC.md Constraint) --
 * rather than a separately typed px value, so this row always tracks the
 * header's band automatically when that dial changes, with nothing here
 * to edit.
 *
 * `--band-gutter` is the sitewide horizontal inset, declared once in this
 * theme's style.css and consumed here. It ramps -- 20px below a 500px
 * viewport, `4vw` from there to 1400, 56px above -- so one declaration
 * still covers every viewport and no small-breakpoint override is needed
 * for max-width or padding. The mobile tier of `--container` (748px) never
 * caps below any real small viewport anyway, so the gutter is what
 * actually positions both anchors at small, exactly as it does at wide.
 *
 * IT WAS A FLAT 15px UNTIL v1.14.0, hand-copied from Neve's own
 * `.container`, and THE PARAGRAPH THAT USED TO BE HERE IS WORTH KNOWING
 * ABOUT BECAUSE IT WAS TRUE WHEN WRITTEN AND IS THE SHAPE OF THING THAT
 * GOES FALSE QUIETLY. It recorded that the value was "identical at every
 * breakpoint tier (desktop/tablet/mobile all measured a fixed 15px, not a
 * vw-driven value)" -- confirmed live via Chrome DOM-rect against
 * dev.joetennis.com, alignment-band-audit.md, Header section. That was a
 * measurement of Neve's stock value, correctly taken and correctly
 * recorded; it stopped describing this site the moment the gutter became
 * this theme's own decision rather than a copy of Neve's. The measurement
 * is still in the audit doc and is still true OF NEVE.
 *
 * Neve's `.container` now takes the same ramping gutter, via a deliberate
 * `body .container` override in style.css -- without which the header
 * would hold a flat 15px while this row ramped past it, which is the
 * misalignment this whole spec exists to prevent. The hand-copy is gone in
 * both directions: one token, two consumers.
 *
 * `justify-content: space-between` left-anchors this row's first visible
 * flex child and right-anchors its last -- matching the header's own
 * logo-left/nav-right split -- at every breakpoint, with no separate
 * small-breakpoint override needed for that either. It also left-anchors
 * a LONE child unaided, which is what Portfolio relies on since its
 * discipline chips were retired (v1.11.16) -- that row is now a single
 * <h1> and needs no `order` override of its own.
 *
 * Any per-child wrap/pack behaviour is the consumer's presentation, not
 * generic band alignment, so it belongs in the consuming template's own
 * sheet. Likewise a template whose DOM order doesn't already put its
 * "utility" child last is responsible for reordering that child itself
 * via `order` on its own selector -- this file has no template-specific
 * selectors to do that with, by design. (Portfolio's funnel button was
 * the worked example here until v1.11.16 deleted it; no consumer needs
 * the pattern today, but the contract stands for the next one.)
 */

.joetennis-breadcrumb-utility-row {
	display: flex;
	justify-content: space-between;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--band-gutter, 15px);
}