/*
 * AA Universal block styles (Content_Blocks). Loaded on the front end only where
 * a block uses one of them, and in the editor. Colors come from the site tokens.
 */

/* Group "Hero band": a surface band with generous padding that keeps the page gutter.
   Its content starts at the left edge of the page's content frame (the reading
   frame in the reading layout); WordPress centers constrained children with
   important auto margins, so the start margin is set the same way. */
.wp-block-group.is-style-aau-hero { --aau-hero-frame: var(--wp--style--global--content-size, 1360px); margin-block-end: clamp(2rem, 5vw, 3.5rem); padding-block: clamp(2.5rem, 6vw, 4.5rem); padding-inline: var(--aau-page-gutter, clamp(1rem, 2.5vw, 2rem)); border-block-end: 1px solid var(--aau-color-border, #e1e8ed); background-color: var(--aau-color-surface, #fafbfc); }
.aau-article-layout-reading .wp-block-group.is-style-aau-hero { --aau-hero-frame: var(--aau-measure-wide, 65rem); }
.wp-block-group.is-style-aau-hero.is-layout-constrained > :not(.alignfull) { margin-right: auto !important; margin-left: max(0px, (100% - var(--aau-hero-frame)) / 2) !important; }
.wp-block-group.is-style-aau-hero > :first-child { margin-block-start: 0; }
.wp-block-group.is-style-aau-hero > :last-child { margin-block-end: 0; }
/* Title on the display scale (56px desktop, 36px phones), lead on a capped scale
   with a comfortable measure, also when the editor's font-size presets (which are
   !important) are applied to them. */
.wp-block-group.is-style-aau-hero > :is(h1, h2):first-child { margin-block-end: 1rem; font-size: clamp(2.25rem, 1.65rem + 2.4vw, 3.5rem); letter-spacing: -.015em; line-height: 1.1; }
.wp-block-group.is-style-aau-hero > :is(h1, h2):first-child:is([class*="-font-size"]) { font-size: clamp(2.25rem, 1.65rem + 2.4vw, 3.5rem) !important; }
.wp-block-group.is-style-aau-hero > p { max-width: 38rem; font-size: clamp(1.125rem, .95rem + .55vw, 1.375rem); line-height: 1.5; }
.wp-block-group.is-style-aau-hero > p:is([class*="-font-size"]) { font-size: clamp(1.125rem, .95rem + .55vw, 1.375rem) !important; }
/* As the first block of a page it sits flush under the header. */
.site-main > .aau-page-content:first-child > .wp-block-post-content > .wp-block-group.is-style-aau-hero.alignfull:first-child { margin-block-start: calc(-1 * clamp(2rem, 5vw, 4rem)); }

/* List "Link tiles": each item is a tile (equal heights per grid row); its first
   link is the bold tile title, stretched over the tile, and the item's remaining
   text continues in the same normal flow as its description ("<a>Title</a>:
   description" or "<a>Title</a> — description"). The class works on list blocks
   and on plain <ol>/<ul> lists in classic content; tiles carry no list numbers
   or bullets. At most three columns: tracks are at least 16rem and at least a
   third of the row, so the grid has 3, 2 or 1 columns by the space it gets (in
   the reading layout 3 in the 1040px frame, 2 on tablets, 1 on phones). */
.is-style-aau-link-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 16rem), (100% - 2rem) / 3), 1fr)); gap: 1rem; padding: 0; list-style: none; }
.is-style-aau-link-tiles > li { position: relative; display: block; min-width: 0; margin: 0; padding: 1.125rem 1.25rem; border: 1px solid var(--aau-color-border, #e1e8ed); border-radius: 8px; background: var(--aau-color-base, #fff); color: var(--aau-color-muted, #667085); font-size: .9375rem; line-height: 1.5; overflow-wrap: break-word; transition: border-color 160ms ease; }
/* The first link is the tile title: inline, so a following ": description" stays in the same sentence. */
.is-style-aau-link-tiles > li > a:first-of-type,
.is-style-aau-link-tiles > li > :first-child:not(a) > a:first-of-type { color: var(--aau-color-contrast, #192a3d); font-weight: 600; text-decoration: none; }
.is-style-aau-link-tiles > li > a:first-of-type::after,
.is-style-aau-link-tiles > li > :first-child:not(a) > a:first-of-type::after { position: absolute; inset: 0; border-radius: inherit; content: ""; }
/* Further links in a description stay clickable above the stretched link. */
.is-style-aau-link-tiles > li a:not(:first-of-type), .is-style-aau-link-tiles > li > :not(:first-child) a { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
	.is-style-aau-link-tiles > li:hover { border-color: var(--aau-color-control-border, #667085); }
	.is-style-aau-link-tiles > li:hover > a:first-of-type, .is-style-aau-link-tiles > li:hover > :first-child:not(a) > a:first-of-type { text-decoration: underline; text-underline-offset: .16em; }
}

/* Gallery "Showcase": equal square tiles; a horizontal scroll-snap row on phones.
   The gallery's own caption spans the row below the images (and stays in view
   below the scroll row on phones). The repeated class outranks core's per-column
   widths (which use an id selector). */
.wp-block-gallery.has-nested-images.is-style-aau-showcase { --aau-showcase-columns: 3; display: grid; grid-template-columns: repeat(var(--aau-showcase-columns), minmax(0, 1fr)); gap: var(--wp--style--gallery-gap-default, 1rem); }
/* The gallery's column setting (WordPress's default is three). */
.wp-block-gallery.is-style-aau-showcase.columns-1 { --aau-showcase-columns: 1; }
.wp-block-gallery.is-style-aau-showcase.columns-2 { --aau-showcase-columns: 2; }
.wp-block-gallery.is-style-aau-showcase.columns-4 { --aau-showcase-columns: 4; }
.wp-block-gallery.is-style-aau-showcase.columns-5 { --aau-showcase-columns: 5; }
.wp-block-gallery.is-style-aau-showcase.columns-6 { --aau-showcase-columns: 6; }
.wp-block-gallery.is-style-aau-showcase.columns-7 { --aau-showcase-columns: 7; }
.wp-block-gallery.is-style-aau-showcase.columns-8 { --aau-showcase-columns: 8; }
@media (max-width: 781px) {
	.wp-block-gallery.is-style-aau-showcase:not(.columns-1) { --aau-showcase-columns: 2; }
}
.wp-block-gallery.has-nested-images.is-style-aau-showcase.is-style-aau-showcase figure.wp-block-image:not(#individual-image) { width: auto; margin: 0; aspect-ratio: 1; }
.wp-block-gallery.has-nested-images.is-style-aau-showcase figure.wp-block-image > a { display: block; height: 100%; }
.wp-block-gallery.has-nested-images.is-style-aau-showcase figure.wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.wp-block-gallery.has-nested-images.is-style-aau-showcase > .blocks-gallery-caption { grid-column: 1 / -1; margin: 0; }
@media (max-width: 600px) {
	/* The gallery is the size container, so the caption matches its visible width in any frame. */
	.wp-block-gallery.has-nested-images.is-style-aau-showcase { container-type: inline-size; grid-template-columns: none; grid-auto-columns: 80%; grid-auto-flow: column; overflow-x: auto; padding-block-end: .5rem; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; }
	.wp-block-gallery.has-nested-images.is-style-aau-showcase.is-style-aau-showcase figure.wp-block-image:not(#individual-image) { grid-row: 1; scroll-snap-align: start; }
	.wp-block-gallery.has-nested-images.is-style-aau-showcase > .blocks-gallery-caption { position: sticky; inset-inline-start: 0; grid-row: 2; grid-column: 1; width: 100cqi; }
}

/* Paragraph class "Jump links" (a class only, not in the Styles panel): a line of
   in-page links such as
   <p><strong>On this page:</strong> <a href="#a">A</a> · <a href="#b">B</a></p>
   (classic HTML; the " · " separators are text). It is meant for link lines whose
   only plain text is separators: the label becomes a small muted caption above a
   wrapping row of pill chips, and ALL other direct text of the paragraph is hidden.
   The paragraph has no font size (its text takes no space) and is hidden, and only
   its child elements are shown again, so the separators leave the layout and the
   accessibility tree while the label and the links stay. Spacing uses margins, as
   the separators remain (empty) flex items. */
.is-style-aau-jump-links { --aau-jump-links-font-size: .875rem; display: flex; flex-wrap: wrap; align-items: center; font-size: 0; line-height: 0; visibility: hidden; }
/* Editor font-size presets and inline font sizes must not give the separators a
   size (gaps between chips); the chips keep their own size. */
.is-style-aau-jump-links:is([class*="-font-size"], [style*="font-size"]) { font-size: 0 !important; }
.is-style-aau-jump-links > * { font-size: var(--aau-jump-links-font-size); line-height: 1.3; visibility: visible; }
.is-style-aau-jump-links > :first-child:not(a) { flex: 0 0 100%; margin: 0 0 .625rem; color: var(--aau-color-muted, #667085); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.is-style-aau-jump-links > a { display: inline-flex; min-height: 2.25rem; align-items: center; margin: 0 0 .5rem; margin-inline-end: .5rem; padding: .25rem .875rem; border: 1px solid var(--aau-color-control-border, #667085); border-radius: 999px; background: var(--aau-color-base, #fff); color: var(--aau-color-contrast, #192a3d); text-decoration: none; overflow-wrap: anywhere; transition: background-color 160ms ease, border-color 160ms ease; }
.is-style-aau-jump-links > a:hover { background: var(--aau-color-surface, #fafbfc); text-decoration: underline; text-underline-offset: .16em; }
.is-style-aau-jump-links > a:focus-visible { outline: 3px solid var(--aau-color-focus-ring, #192a3d); outline-offset: 2px; }