/*
Theme Name: Arizona Native Vote
Theme URI: https://azcia.gov/
Author: Anvepp
Description: Custom block theme for Arizona Native Vote — Inter Tribal Council of Arizona, Inc. Fully editable in the Site Editor.
Version: 1.4.1
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: anvepp
*/

/* Header, content, and footer sit flush — sections manage their own spacing. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Smooth-scroll to on-page #anchors (e.g. the Plan Your Vote card links). */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Any link that opens in a new tab gets a small external-link glyph. Uses a
   mask (not a background-image) so the icon always matches the surrounding
   text color, whether that's dark-on-yellow or white-on-photo. */
a[target="_blank"]::after {
	content: "";
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-left: 0.3em;
	margin-bottom: 0.1em;
	background-color: currentColor;
	vertical-align: middle;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* ...except where the link *is* an icon or a logo — a glyph tacked onto those
   just reads as a broken image. */
.wp-block-social-link a[target="_blank"]::after,
.wp-block-image a[target="_blank"]::after,
.wp-block-site-logo a[target="_blank"]::after,
.wp-block-post-featured-image a[target="_blank"]::after,
.wp-block-cover a[target="_blank"]:has(img)::after {
	content: none;
}

/* Header phone icon — sized to match the core Social Links icons next to it,
   with a mask so the glyph is a flat color rather than a raster image. */
.anvepp-header-phone {
	margin: 0;
}

.anvepp-header-phone a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 9999px;
	background-color: var(--wp--preset--color--contrast);
	transition: background-color 0.15s ease;
}

.anvepp-header-phone a:hover {
	background-color: var(--wp--preset--color--red);
}

.anvepp-header-phone a::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-color: var(--wp--preset--color--base);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Mobile menu — WordPress's overlay toggles below 600px. The header's own
   social/phone icons (.anvepp-header-icons) get cramped next to the
   hamburger at that width, so they're hidden there; a duplicate set of
   social links + a phone link live inside the nav menu itself (added on
   the wp_navigation post) purely so they surface inside the full-screen
   overlay — hidden again once the regular desktop nav takes over. */
@media (max-width: 599.98px) {
	.anvepp-header-icons {
		display: none !important;
	}
}

@media (min-width: 600px) {
	.anvepp-nav-mobile-social,
	.wp-block-navigation-item.anvepp-nav-mobile-phone {
		display: none !important;
	}
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: var(--wp--preset--spacing--30);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	margin: var(--wp--preset--spacing--20);
}

.anvepp-nav-mobile-social {
	margin-top: var(--wp--preset--spacing--30);
}

.wp-block-navigation-item.anvepp-nav-mobile-phone {
	margin-top: var(--wp--preset--spacing--20);
}

.wp-block-navigation-item.anvepp-nav-mobile-phone .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding: 0.75em 1.25em !important;
	border-radius: 9999px;
	font-size: 1rem;
	font-weight: 700;
}

.wp-block-navigation-item.anvepp-nav-mobile-phone .wp-block-navigation-item__content::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Primary nav: every item always carries its brand-stripe underline, drawn
   from the left edge to the middle of the label. Hovering the item — or
   landing on its page — grows that same bar out to the full label width. */
.anvepp-nav-primary .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 6px;
}

.anvepp-nav-primary .anvepp-nav-mobile-phone .wp-block-navigation-item__content::after {
	content: none;
}

.anvepp-nav-primary .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background-color: var(--nav-accent);
	transform: scaleX(0.5);
	transform-origin: left center;
	transition: transform 0.25s ease, height 0.15s ease;
}

.anvepp-nav-primary .wp-block-navigation-item:nth-of-type(1) .wp-block-navigation-item__content {
	--nav-accent: var(--wp--preset--color--blue);
}

.anvepp-nav-primary .wp-block-navigation-item:nth-of-type(2) .wp-block-navigation-item__content {
	--nav-accent: var(--wp--preset--color--yellow);
}

.anvepp-nav-primary .wp-block-navigation-item:nth-of-type(3) .wp-block-navigation-item__content {
	--nav-accent: var(--wp--preset--color--red);
}

.anvepp-nav-primary .wp-block-navigation-item:nth-of-type(4) .wp-block-navigation-item__content {
	--nav-accent: var(--wp--preset--color--contrast);
}

.anvepp-nav-primary .wp-block-navigation-item__content:hover::after,
.anvepp-nav-primary .wp-block-navigation-item__content[aria-current="page"]::after {
	transform: scaleX(1);
}

/* Episode Carousel pattern — Splide (vendored in assets/vendor/splide) drives
   the actual sliding; this just re-skins its default look with our brand.
   The arrows sit in side gutters on the carousel itself, outside the track,
   so they never cover a card. The gutter can't go on the track: Splide writes
   the track's left/right padding inline (from its own `padding` option). */
.docuseries-carousel.splide {
	--carousel-gutter: 3.75rem;
	--carousel-dots: 2.5rem;
	padding: 0 var(--carousel-gutter) var(--carousel-dots);
}

.docuseries-carousel .splide__track {
	/* Room for the cards' hover lift and shadow. */
	padding-block: 0.5rem;
}

.docuseries-carousel .splide__arrow {
	/* Centre on the cards, not on cards + dots row. */
	top: calc(50% - var(--carousel-dots) / 2);
}

.docuseries-carousel .splide__arrow--prev {
	left: 0;
}

.docuseries-carousel .splide__arrow--next {
	right: 0;
}

.docuseries-card {
	position: relative;
	height: 100%;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Make the whole card clickable by stretching the title's existing link
   over the card, rather than nesting a new <a> around content that
   already contains links (invalid HTML). */
.docuseries-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.docuseries-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}

.docuseries-card .wp-block-post-featured-image img {
	transition: transform 0.3s ease;
}

.docuseries-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

/* Episode thumbnail play-button overlay — the thumbnail itself is pulled
   live from the episode's embedded YouTube video (see
   inc/episode-thumbnail-block.php), this just marks it as playable. */
.anvepp-episode-thumbnail {
	position: relative;
}

.anvepp-episode-thumbnail img {
	border-radius: 10px;
}

.anvepp-episode-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 9999px;
	background: rgba(0, 0, 0, 0.65);
	color: var(--wp--preset--color--base);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	line-height: 1;
	padding-left: 4px;
	transition: background-color 0.15s ease;
}

.docuseries-card:hover .anvepp-episode-play {
	background-color: var(--wp--preset--color--red);
}

/* The slider's cards are small and already read as "click to watch" —
   the play-button overlay is redundant there, so it's hidden just in the
   carousel (still shown on the episode archive grid). */
.docuseries-carousel .anvepp-episode-play {
	display: none !important;
}

/* Single episode page — the actual video gets a bit of card-like polish
   (rounded corners, soft shadow) since it's the main event on that page. */
.anvepp-episode-video-wrap .wp-block-embed {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.docuseries-carousel .splide__arrow {
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--contrast);
	opacity: 1;
	width: 2.75rem;
	height: 2.75rem;
}

.docuseries-carousel .splide__arrow svg {
	fill: var(--wp--preset--color--contrast);
}

.docuseries-carousel .splide__arrow:hover:not(:disabled) {
	background: var(--wp--preset--color--contrast);
}

.docuseries-carousel .splide__arrow:hover:not(:disabled) svg {
	fill: var(--wp--preset--color--base);
}

.docuseries-carousel .splide__arrow:disabled {
	opacity: 0.3;
}

.docuseries-carousel .splide__pagination {
	bottom: 0.25rem;
	gap: 0.6rem;
}

.docuseries-carousel .splide__pagination__page {
	width: 14px;
	height: 14px;
	margin: 0;
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--contrast);
	opacity: 1;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.docuseries-carousel .splide__pagination__page:hover:not(.is-active) {
	background: var(--wp--preset--color--tan);
}

.docuseries-carousel .splide__pagination__page:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 2px;
}

.docuseries-carousel .splide__pagination__page.is-active {
	background: var(--wp--preset--color--red);
	border-color: var(--wp--preset--color--red);
	transform: none;
}

/* Phones: no arrows (swipe instead), so no gutters either. */
@media (max-width: 600px) {
	.docuseries-carousel.splide {
		--carousel-gutter: 0;
	}

	.docuseries-carousel .splide__arrow {
		display: none;
	}
}

/* Events Calendar block (anvepp/events-calendar). */
.anvepp-calendar {
	position: relative;
	max-width: 640px;
	margin: 0 auto;
	background: var(--wp--preset--color--base);
	border-radius: 14px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	padding: var(--wp--preset--spacing--40);
	overflow: hidden;
}

.anvepp-calendar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--blue) 0 25%,
		var(--wp--preset--color--yellow) 25% 50%,
		var(--wp--preset--color--red) 50% 75%,
		var(--wp--preset--color--contrast) 75% 100%
	);
}

.anvepp-calendar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--wp--preset--spacing--30);
}

.anvepp-calendar-head h3 {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.anvepp-calendar-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-size: 1.25rem;
	line-height: 1;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.anvepp-calendar-nav:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	transform: scale(1.08);
}

.anvepp-calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.anvepp-calendar-dow {
	text-align: center;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--contrast);
	opacity: 0.6;
	padding-bottom: var(--wp--preset--spacing--20);
	margin-bottom: 6px;
	border-bottom: 1px solid var(--wp--preset--color--tan);
}

.anvepp-calendar-cell {
	position: relative;
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
}

.anvepp-calendar-cell.is-empty {
	visibility: hidden;
}

.anvepp-calendar-daynum {
	font-size: 0.85rem;
	font-weight: 600;
}

.anvepp-calendar-cell.is-today .anvepp-calendar-daynum {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.anvepp-calendar-cell.has-events {
	background: var(--wp--preset--color--tan);
	font-weight: 700;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.anvepp-calendar-cell.has-events:hover {
	background: var(--wp--preset--color--yellow);
	transform: scale(1.08);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.anvepp-calendar-dots {
	display: flex;
	gap: 3px;
	margin-top: 2px;
}

.anvepp-calendar-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
}

.anvepp-calendar-list {
	max-width: 720px;
	margin: var(--wp--preset--spacing--45) auto 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.anvepp-event-day {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	scroll-margin-top: 2rem;
}

.anvepp-event-card {
	display: flex;
	align-items: stretch;
	gap: var(--wp--preset--spacing--30);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.anvepp-event-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.15);
}

.anvepp-event-date {
	flex: 0 0 5.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.1rem;
	text-align: center;
	padding: var(--wp--preset--spacing--20);
}

.anvepp-event-body {
	flex: 1;
	background: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--30);
}

.anvepp-event-cat {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--red);
	margin-bottom: 0.2rem;
}

.anvepp-event-body h4 {
	margin: 0 0 0.3rem;
	font-size: 1.1rem;
}

.anvepp-event-body h4 a {
	text-decoration: none;
	color: inherit;
}

.anvepp-event-meta {
	margin: 0;
	font-size: 0.9rem;
	opacity: 0.75;
}

@media (max-width: 480px) {
	.anvepp-calendar-dow {
		font-size: 0.65rem;
	}
	.anvepp-calendar-daynum {
		font-size: 0.7rem;
	}
}

/* Visual Site Map block (anvepp/sitemap). */
.anvepp-sitemap-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--wp--preset--spacing--45);
}

.anvepp-sitemap-col {
	background: var(--wp--preset--color--base);
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	padding: var(--wp--preset--spacing--30);
}

.anvepp-sitemap-heading {
	margin: 0 0 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 3px solid currentColor;
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.anvepp-sitemap-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.anvepp-sitemap-list a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.anvepp-sitemap-list a:hover {
	text-decoration: underline;
}

.anvepp-sitemap-xml {
	text-align: center;
	margin-top: var(--wp--preset--spacing--45);
	font-size: 0.9rem;
	opacity: 0.75;
}

/* Global button hover — a small, subtle lift on every core Button block
   site-wide, so links feel responsive without being flashy. */
.wp-block-button__link {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wp-block-button__link:hover {
	transform: scale(1.05);
}

/* Plan Your Vote's bento cards (any is-style-card-* variation) get the
   same subtle scale-up, plus a touch more shadow to sell the lift. */
[class*="is-style-card-"] {
	position: relative;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

[class*="is-style-card-"]:hover {
	transform: scale(1.03);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

/* Whole card clickable — handled by assets/js/card-links.js. (A pure-CSS
   stretched-link doesn't reach the full card here: Cover blocks give
   .wp-block-cover__inner-container its own position:relative so the text
   stacks above the background image, which becomes the *nearest*
   positioned ancestor for an inset:0 pseudo-element — shrinking the
   click target to that inner box instead of the whole card.) */
[class*="is-style-card-"] {
	cursor: pointer;
}

/* Scroll-reveal — sections fade and drift up into place as they enter the
   viewport (see assets/js/scroll-reveal.js). Starts visible by default so
   content is never hidden if JS fails to load; the JS adds .anvepp-reveal
   only once it's ready to animate. */
.anvepp-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.anvepp-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.anvepp-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Homepage action band (.anvepp-split)
   Two photos with a diagonal off-white wedge between them holding the three
   primary calls to action. The diagonal used to be baked into one 1920x500
   composite, which meant narrow screens `cover`-zoomed straight past both
   photos into the empty middle; it's a CSS clip-path now, so the band keeps
   its proportions at any width and restacks below the breakpoint.
   --------------------------------------------------------------------------- */

.anvepp-split {
	--split-slant: clamp(40px, 5.5vw, 110px);
	--split-gap: clamp(300px, 29vw, 440px);
	display: grid;
	grid-template-columns: 1fr var(--split-gap) 1fr;
	align-items: stretch;
	background-color: #eeede6;
	min-height: clamp(340px, 30vw, 440px);
	overflow: hidden;
}

/* The group's default layout puts blockGap margins between its children, which
   in a grid becomes stray space above the action stack. */
.anvepp-split > * {
	margin-block: 0;
}

/* The photos bleed into the middle column so the slanted edges cut across it;
   the wedge itself is just the background showing through between them. */
.anvepp-split .anvepp-split-photo {
	position: relative;
	margin: 0;
	grid-row: 1;
}

.anvepp-split .anvepp-split-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.anvepp-split .anvepp-split-photo--left {
	grid-column: 1 / 3;
	margin-right: calc(var(--split-gap) - var(--split-slant) / 2);
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--split-slant)) 100%, 0 100%);
}

.anvepp-split .anvepp-split-photo--right {
	grid-column: 2 / 4;
	margin-left: calc(var(--split-gap) - var(--split-slant) / 2);
	clip-path: polygon(var(--split-slant) 0, 100% 0, 100% 100%, 0 100%);
}

.anvepp-split .anvepp-split-actions {
	grid-column: 2;
	grid-row: 1;
	z-index: 1;
	align-self: center;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
	gap: var(--wp--preset--spacing--20);
}

/* Equal-width stacked buttons read as one decision list rather than three
   stray pills of different lengths. */
.anvepp-split .anvepp-split-actions .wp-block-button {
	width: 100%;
	max-width: 260px;
}

.anvepp-split .anvepp-split-actions .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
}

/* Below this the wedge can no longer hold a readable button without squeezing
   the photos to slivers, so the band becomes a photo strip with the actions
   underneath it. */
@media (max-width: 900px) {
	.anvepp-split {
		--split-slant: clamp(36px, 10vw, 64px);
		grid-template-columns: 1fr 1fr;
		min-height: 0;
	}

	.anvepp-split .anvepp-split-photo {
		height: clamp(170px, 42vw, 240px);
	}

	.anvepp-split .anvepp-split-photo--left {
		grid-column: 1;
		margin-right: calc(var(--split-slant) / -2);
		clip-path: polygon(0 0, 100% 0, calc(100% - var(--split-slant)) 100%, 0 100%);
	}

	.anvepp-split .anvepp-split-photo--right {
		grid-column: 2;
		margin-left: calc(var(--split-slant) / -2);
		clip-path: polygon(var(--split-slant) 0, 100% 0, 100% 100%, 0 100%);
	}

	.anvepp-split .anvepp-split-actions {
		grid-column: 1 / -1;
		grid-row: 2;
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}

	.anvepp-split .anvepp-split-actions .wp-block-button {
		max-width: 420px;
	}
}

/* ---------------------------------------------------------------------------
   Docuseries hero (.anvepp-ds-hero)
   Wide screens get the intended composition: copy on the tan left, the photo
   filling the right. Narrow ones can't — `cover` on a tall, narrow box zooms
   into the middle of the photo and drops dark headline type straight onto it.
   Below the breakpoint the band becomes photo-on-top / copy-on-tan instead,
   using a gradient scrim so there's still no hard seam between them.
   --------------------------------------------------------------------------- */

@media (max-width: 781px) {
	.anvepp-ds-hero {
		/* Inline styles come from the block's own background supports. */
		min-height: 0 !important;
		background-position: 80% top !important;
		padding-top: clamp(330px, 88vw, 420px) !important;
		padding-left: var(--wp--preset--spacing--30) !important;
		padding-bottom: var(--wp--preset--spacing--60) !important;
		position: relative;
		isolation: isolate;
	}

	.anvepp-ds-hero::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(
			to bottom,
			rgba(211, 208, 193, 0) 0%,
			rgba(211, 208, 193, 0.7) clamp(250px, 66vw, 325px),
			var(--wp--preset--color--tan) clamp(320px, 85vw, 408px)
		);
	}
}

/* ---------------------------------------------------------------------------
   Plan Your Vote roadmap (.anvepp-roadmap)
   The resource cards are filed under the stage of voting they belong to —
   before, while, after — strung along a dashed rail with a numbered milestone
   at each stop, so the page reads as a route rather than a wall of tiles.
   --------------------------------------------------------------------------- */

.anvepp-roadmap__intro {
	max-width: 46rem;
	margin-bottom: var(--wp--preset--spacing--60);
}

.anvepp-roadmap__steps {
	--step-badge: 68px;
	--step-rail: calc(var(--step-badge) + var(--wp--preset--spacing--30));
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--70);
}

/* The gap between steps is the flex gap alone — the group's default layout
   would otherwise stack its own blockGap margin on top, and the rail's reach
   below each step is measured against that exact gap. */
.anvepp-roadmap__steps > * {
	margin-block: 0;
}

.anvepp-step {
	position: relative;
}

/* The rail: a dashed line down the centre of the badge column, running from
   this milestone into the next one. The last step stops at its own cards. */
.anvepp-step::before {
	content: "";
	position: absolute;
	top: var(--step-badge);
	bottom: calc(var(--wp--preset--spacing--70) * -1);
	left: calc(var(--step-badge) / 2 - 1px);
	width: 2px;
	background-image: linear-gradient(
		to bottom,
		var(--wp--preset--color--tan) 0 10px,
		transparent 10px 20px
	);
	background-size: 2px 20px;
}

.anvepp-step:last-child::before {
	bottom: var(--wp--preset--spacing--40);
}

.anvepp-step__header {
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--40);
}

.anvepp-step__num {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--step-badge);
	height: var(--step-badge);
	margin: 0;
	border-radius: 9999px;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
	background-color: var(--step-accent);
	position: relative;
	z-index: 1;
}

.anvepp-step__intro > * {
	margin-block: 0;
}

.anvepp-step__intro p {
	margin-top: 0.35em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.anvepp-step__intro {
	flex: 1 1 auto;
}

.anvepp-step__intro > * {
	max-width: none;
}

.anvepp-step--1 {
	--step-accent: var(--wp--preset--color--blue);
}

.anvepp-step--2 {
	--step-accent: var(--wp--preset--color--yellow);
}

.anvepp-step--3 {
	--step-accent: var(--wp--preset--color--red);
}

.anvepp-step--3 .anvepp-step__num {
	color: var(--wp--preset--color--base);
}

/* Rows line up under the step title rather than the badge, so the rail stays
   a clean uninterrupted column down the left. */
.anvepp-step__rows {
	margin-left: var(--step-rail);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.anvepp-step__rows > * {
	margin-block: 0;
}

/* Legacy: the earlier card-grid version of the roadmap (.anvepp-step__cards).
   Kept so a page still built from it keeps its layout after a theme update,
   until its content is replaced with the current Plan Your Vote Roadmap
   pattern. Safe to delete once no page uses it. */
.anvepp-step__cards {
	margin-left: var(--step-rail);
	gap: var(--wp--preset--spacing--30);
	align-items: stretch;
}

.anvepp-step__cards > * {
	height: 100%;
}

/* ---- Roadmap rows (.anvepp-acc) ----
   Two kinds, drawn identically: a paragraph wrapping one link (--link, with a
   trailing link icon) and a core Details block (chevron, expands in place).
   Both take the step's accent for the border; an open Details fills its
   summary bar with it. */
.anvepp-acc {
	border: 2px solid var(--step-accent);
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
}

.anvepp-acc--link a,
.anvepp-acc > summary {
	display: block;
	position: relative;
	padding: 0.45rem 2.5rem 0.45rem 0.75rem;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.anvepp-acc--link a:hover,
.anvepp-acc--link a:focus-visible,
.anvepp-acc > summary:hover,
.anvepp-acc > summary:focus-visible {
	background-color: color-mix(in srgb, var(--step-accent) 18%, transparent);
}

.anvepp-acc[open] > summary {
	background-color: var(--step-accent);
}

.anvepp-step--3 .anvepp-acc[open] > summary {
	color: var(--wp--preset--color--base);
}

/* Trailing icon: link-out box for link rows, chevron for Details, pinned to
   the right edge. The global a[target=_blank] glyph is replaced by this one
   so internal links (Report an Incident) match. */
.anvepp-acc--link a::after,
.anvepp-acc > summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.75rem;
	width: 1.15em;
	height: 1.15em;
	margin: 0;
	transform: translateY(-50%);
	background-color: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.anvepp-acc--link a::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
}

.anvepp-acc > summary {
	list-style: none;
}

.anvepp-acc > summary::-webkit-details-marker {
	display: none;
}

.anvepp-acc > summary::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 7 12 17 22 7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 7 12 17 22 7'/%3E%3C/svg%3E");
	transition: transform 0.2s ease;
}

.anvepp-acc[open] > summary::after {
	transform: translateY(-50%) rotate(180deg);
}

/* Expanded content */
details.anvepp-acc > :not(summary) {
	margin-inline: var(--wp--preset--spacing--30);
}

details.anvepp-acc > p {
	margin-block: 0.15rem;
}

details.anvepp-acc > summary + * {
	margin-top: var(--wp--preset--spacing--30);
}

details.anvepp-acc > :last-child:not(summary) {
	margin-bottom: var(--wp--preset--spacing--30);
}

.anvepp-acc ul {
	margin-block: 0;
	padding-left: 1.4em;
}

.anvepp-acc li + li {
	margin-top: 0.25em;
}

.anvepp-acc .wp-block-group.has-border-color {
	margin-top: var(--wp--preset--spacing--30);
}

.anvepp-acc h3 {
	margin-top: 0;
}

/* ---- County links ---- */
.anvepp-counties__cols {
	margin-top: var(--wp--preset--spacing--40);
}

.anvepp-counties__list {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--large);
}

.anvepp-counties__list li + li {
	margin-top: 0.4em;
}

.anvepp-counties__list a {
	color: inherit;
	text-decoration: none;
}

.anvepp-counties__list a:hover,
.anvepp-counties__list a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--blue);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

/* The design shows the counties as plain names — no per-link glyph. */
.anvepp-counties__list a[target="_blank"]::after {
	content: none;
}

@media (max-width: 781px) {
	.anvepp-counties__cols {
		gap: 0.4em;
	}
}

@media (max-width: 781px) {
	.anvepp-roadmap__steps {
		--step-badge: 48px;
	}

	.anvepp-step::before {
		display: none;
	}

	.anvepp-step__num {
		font-size: 1.25rem;
	}

	.anvepp-step__rows,
	.anvepp-step__cards {
		margin-left: 0;
	}
}

/* ---------------------------------------------------------------------------
   Card text colour — pinned to the stable style class
   WordPress 6.6+ compiles a theme's block style variations (styles/blocks/*.json)
   into *per-instance* classes: `.is-style-card-photo--3`, `--6`, and so on. The
   generated CSS only ever targets those suffixed classes, and the suffix is
   added server-side while the block renders. The stored markup — which is what
   the editor canvas draws from — carries only the plain `.is-style-card-photo`
   class, so the colour reaches the front end but not the editor; and if that
   server-side pass is ever skipped (cached HTML, a CSS optimiser stripping the
   generated <style>, a stale global-styles cache) the front end loses it too.
   Either way the white-on-dark cards fall back to dark-on-dark and go unreadable.

   Only card-photo and card-red set a non-default colour, so only they can break;
   blue/tan/yellow use `contrast`, which is already the body default. Pinning the
   two here makes both contexts agree regardless of how the variation compiles.
   This file is loaded in the editor too (see add_editor_style in functions.php).
   --------------------------------------------------------------------------- */

.wp-block-cover.is-style-card-photo,
.wp-block-cover.is-style-card-photo :where(h1, h2, h3, h4, h5, h6, p, li),
.wp-block-group.is-style-card-red,
.wp-block-group.is-style-card-red :where(h1, h2, h3, h4, h5, h6, p, li) {
	color: var(--wp--preset--color--base);
}

.wp-block-cover.is-style-card-photo a:not(.wp-element-button),
.wp-block-group.is-style-card-red a:not(.wp-element-button) {
	color: var(--wp--preset--color--base);
}

/* ---------------------------------------------------------------------------
   Cover photo scrims (.is-style-scrim-*)
   A dark fade painted over the photo so headline text stays readable no matter
   which image is in the block — the old Plan Your Vote hero had this baked into
   the image file, which meant swapping the photo lost it.

   Layering: the Cover sets no z-index anywhere, so its children stack purely by
   DOM order — background span, then image, then inner container. A pseudo
   element is the Cover's last child and would therefore paint *over* the text,
   so the scrim is pinned to z-index 0 and the content lifted to 1.

   Tune per block from the editor's Advanced → Additional CSS class, or globally
   here: --scrim-strength is the peak opacity, --scrim-reach how far across the
   block the fade travels.
   --------------------------------------------------------------------------- */

.wp-block-cover[class*="is-style-scrim-"] {
	--scrim-rgb: 36, 49, 63; /* Night Navy #24313F */
	--scrim-strength: 0.85;
	--scrim-reach: 62%;
}

.wp-block-cover[class*="is-style-scrim-"]::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* Keep the block's own content above the scrim. */
.wp-block-cover[class*="is-style-scrim-"] > .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

/* Fading to a matching zero-alpha stop rather than `transparent` avoids the
   grey cast browsers produce when interpolating through transparent black. */
.wp-block-cover.is-style-scrim-right::after {
	background: linear-gradient(
		to left,
		rgba(var(--scrim-rgb), var(--scrim-strength)) 0%,
		rgba(var(--scrim-rgb), 0) var(--scrim-reach)
	);
}

.wp-block-cover.is-style-scrim-left::after {
	background: linear-gradient(
		to right,
		rgba(var(--scrim-rgb), var(--scrim-strength)) 0%,
		rgba(var(--scrim-rgb), 0) var(--scrim-reach)
	);
}

.wp-block-cover.is-style-scrim-edges::after {
	background:
		linear-gradient(to left,  rgba(var(--scrim-rgb), var(--scrim-strength)) 0%, rgba(var(--scrim-rgb), 0) var(--scrim-reach)),
		linear-gradient(to right, rgba(var(--scrim-rgb), var(--scrim-strength)) 0%, rgba(var(--scrim-rgb), 0) var(--scrim-reach));
}

.wp-block-cover.is-style-scrim-base::after {
	background: linear-gradient(
		to top,
		rgba(var(--scrim-rgb), var(--scrim-strength)) 0%,
		rgba(var(--scrim-rgb), 0) var(--scrim-reach)
	);
}

/* On narrow screens a side fade covers most of the photo, so soften it. */
@media (max-width: 781px) {
	.wp-block-cover[class*="is-style-scrim-"] {
		--scrim-strength: 0.7;
		--scrim-reach: 85%;
	}
}

/* ---------------------------------------------------------------------------
   Fade to tan (.is-style-fade-tan-*)
   The Docuseries hero's photo used to have its tan fade painted into the JPEG —
   solid #D3D0C1 across the left third, dissolving into the photo by about 70%
   — so the dark headline had somewhere to sit. Swapping the image lost it.
   This reproduces the same ramp in CSS, over whatever image the block holds.

   Works on Group blocks (background-image) and Cover blocks alike. The stops
   match the original artwork; override --fade-solid / --fade-end per block if
   a photo needs the handover earlier or later.
   --------------------------------------------------------------------------- */

.wp-block-group[class*="is-style-fade-tan-"],
.wp-block-cover[class*="is-style-fade-tan-"] {
	/* Night-tan #D3D0C1 — the same value as the tan preset. */
	--fade-rgb: 211, 208, 193;
	--fade-solid: 30%;
	--fade-end: 68%;
	position: relative;
}

.wp-block-group[class*="is-style-fade-tan-"]::after,
.wp-block-cover[class*="is-style-fade-tan-"]::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* Lift the block's own content above the fade. Cover keeps its content in a
   dedicated wrapper; a Group's children sit directly inside it. */
.wp-block-group[class*="is-style-fade-tan-"] > *,
.wp-block-cover[class*="is-style-fade-tan-"] > .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

.is-style-fade-tan-left::after {
	background: linear-gradient(
		to right,
		rgba(var(--fade-rgb), 1) 0%,
		rgba(var(--fade-rgb), 1) var(--fade-solid),
		rgba(var(--fade-rgb), 0) var(--fade-end)
	);
}

.is-style-fade-tan-right::after {
	background: linear-gradient(
		to left,
		rgba(var(--fade-rgb), 1) 0%,
		rgba(var(--fade-rgb), 1) var(--fade-solid),
		rgba(var(--fade-rgb), 0) var(--fade-end)
	);
}

/* The Docuseries hero already restacks to photo-over-tan on narrow screens
   (see .anvepp-ds-hero above), so a sideways fade there would fight it. */
@media (max-width: 781px) {
	.anvepp-ds-hero[class*="is-style-fade-tan-"]::after {
		content: none;
	}
}

/* ---------------------------------------------------------------------------
   Photo Gallery — Bento mosaic (.is-style-anvepp-bento on core/gallery)
   The "Photo Gallery" block (assets/js/photo-gallery.js) is a core Gallery
   with this style, so photos, order, captions and alt text are all managed
   with the normal Gallery tools and the core lightbox handles click-to-
   enlarge. This only replaces core's flex rows with a mosaic grid.

   Selectors repeat core's `:not(#individual-image)` (an ID-weight trick it
   uses on its own width rules) plus one extra element/class, so they win
   regardless of which stylesheet loads first.
   --------------------------------------------------------------------------- */

/* The grid. Column count and tile shape come from custom properties set by
   the gallery's own settings further down: Columns → --bento-cols, Aspect
   ratio → --bento-ratio (width ÷ height of a single tile). The gallery is a
   size container so each tile can work out its exact height from the
   gallery's real width (cqw), whatever container it sits in. */
figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento {
	--bento-gap: var(--wp--style--unstable-gallery-gap, 0.75rem);
	--bento-tile-ratio: var(--bento-ratio, 1.25);
	--bento-radius: 12px;
	container-type: inline-size;
	display: grid;
	grid-template-columns: repeat(var(--bento-cols, 4), minmax(0, 1fr));
	grid-auto-flow: dense;
	gap: var(--bento-gap);
}

/* Each tile is placed by three variables the layout rules set: --cs / --rs
   (columns / rows spanned) and --start (a fixed start column, for mirrored
   bands). Height = rows spanned × one row (a column's width ÷ the tile ratio)
   plus the gaps between them, so every row comes out exactly equal.
   width needs !important: core's own "2 or 3 photos" width rules
   (:first-child:nth-last-child(2) and friends) outweigh any normal selector. */
figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento > figure.wp-block-image:not(#individual-image) {
	--bento-row: calc((100cqw - (var(--bento-cols, 4) - 1) * var(--bento-gap)) / var(--bento-cols, 4) / var(--bento-tile-ratio));
	grid-column: var(--start, auto) / span var(--cs, 1);
	grid-row: span var(--rs, 1);
	width: auto !important;
	height: calc(var(--rs, 1) * var(--bento-row) + (var(--rs, 1) - 1) * var(--bento-gap));
	margin: 0;
	position: relative;
	overflow: hidden;
	border-radius: var(--bento-radius);
	background-color: var(--wp--preset--color--navy);
	isolation: isolate;
}

/* Whatever wraps the <img> (a link, or the editor's own wrapper) fills the tile. */
figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento > figure.wp-block-image:not(#individual-image) > :is(a, div:not(.components-drop-zone)) {
	display: flex;
	width: 100%;
	height: 100%;
}

figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento > figure.wp-block-image:not(#individual-image) img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Crop toward the upper third, where faces usually are. */
	object-position: 50% 30%;
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento > figure.wp-block-image:not(#individual-image):hover img {
	transform: scale(1.06);
}

/* Brand accent bar that sweeps in along the bottom on hover/focus, cycling
   blue → yellow → red like the nav underlines. */
figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento > figure.wp-block-image:not(#individual-image)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	background-color: var(--bento-accent, var(--wp--preset--color--blue));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
	pointer-events: none;
	z-index: 2;
}

figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento > figure.wp-block-image:not(#individual-image):hover::after,
figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento > figure.wp-block-image:not(#individual-image):focus-within::after {
	transform: scaleX(1);
}

figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento > figure.wp-block-image:nth-of-type(3n+2) {
	--bento-accent: var(--wp--preset--color--yellow);
}

figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento > figure.wp-block-image:nth-of-type(3n+3) {
	--bento-accent: var(--wp--preset--color--red);
}

/* Captions: a navy gradient instead of core's blurred strip. On devices that
   can hover they rise in with the accent bar; on touch they stay visible. */
figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento > figure.wp-block-image:not(#individual-image):has(figcaption)::before {
	content: none;
}

figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento > figure.wp-block-image:not(#individual-image) figcaption {
	padding: 2.5rem 1rem 0.9rem;
	background: linear-gradient(to top, rgb(36 49 63 / 0.88), rgb(36 49 63 / 0));
	color: var(--wp--preset--color--base);
	text-shadow: none;
	text-align: left;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
	z-index: 1;
}

@media (hover: hover) {
	figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento > figure.wp-block-image:not(#individual-image) figcaption {
		opacity: 0;
		transform: translateY(0.5rem);
		transition: opacity 0.3s ease, transform 0.3s ease;
	}

	figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento > figure.wp-block-image:not(#individual-image):hover figcaption,
	figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento > figure.wp-block-image:not(#individual-image):focus-within figcaption {
		opacity: 1;
		transform: none;
	}
}

/* "Crop images to fit" off: show each whole photo inside its tile instead. */
figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento:not(.is-cropped) > figure.wp-block-image:not(#individual-image) {
	background-color: color-mix(in srgb, currentColor 8%, transparent);
}

/* The editor writes an inline `height: auto` on uncropped gallery images,
   which would let tall photos overflow the tile; hence !important. */
figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento:not(.is-cropped) > figure.wp-block-image:not(#individual-image) img {
	height: 100% !important;
	object-fit: contain;
	object-position: center;
}

/* "Aspect ratio" setting → the shape of a single tile. Core writes the choice
   onto every image as an inline style; the saved markup has it as
   `aspect-ratio:4/3`, the editor's live DOM as `aspect-ratio: 4 / 3`. */
figure.wp-block-gallery.is-style-anvepp-bento:has(> figure img:is([style*="aspect-ratio:1;"], [style*="aspect-ratio: 1 / 1"], [style*="aspect-ratio: 1;"])) { --bento-ratio: 1; }
figure.wp-block-gallery.is-style-anvepp-bento:has(> figure img:is([style*="aspect-ratio:4/3"], [style*="aspect-ratio: 4 / 3"])) { --bento-ratio: calc(4 / 3); }
figure.wp-block-gallery.is-style-anvepp-bento:has(> figure img:is([style*="aspect-ratio:3/4"], [style*="aspect-ratio: 3 / 4"])) { --bento-ratio: calc(3 / 4); }
figure.wp-block-gallery.is-style-anvepp-bento:has(> figure img:is([style*="aspect-ratio:3/2"], [style*="aspect-ratio: 3 / 2"])) { --bento-ratio: calc(3 / 2); }
figure.wp-block-gallery.is-style-anvepp-bento:has(> figure img:is([style*="aspect-ratio:2/3"], [style*="aspect-ratio: 2 / 3"])) { --bento-ratio: calc(2 / 3); }
figure.wp-block-gallery.is-style-anvepp-bento:has(> figure img:is([style*="aspect-ratio:16/9"], [style*="aspect-ratio: 16 / 9"])) { --bento-ratio: calc(16 / 9); }
figure.wp-block-gallery.is-style-anvepp-bento:has(> figure img:is([style*="aspect-ratio:9/16"], [style*="aspect-ratio: 9 / 16"])) { --bento-ratio: calc(9 / 16); }

/* Desktop layouts, one per "Columns" value (columns-default = 4). Photos fill
   2-row bands: one feature photo plus small ones, every other band mirrored.
   Whatever is left after the last full band (the :nth-last-of-type rules) is
   laid out as closing row(s) whose spans add up to the column count, so the
   grid always ends flush whatever the photo count. figure and figcaption are
   different element types, so a gallery caption never throws the count off.
   Generated per column count — keep the pattern if editing by hand: band size
   = 2 × columns − 3 (3 for 2 columns), and a closing row of s photos gives the
   first one (columns − s + 1) columns, two rows tall when s ≤ columns ÷ 2. */
@media (min-width: 782px) {
	/* 1 column: a single stack of 16:9 photos. */
	figure.wp-block-gallery.is-style-anvepp-bento.columns-1 { --bento-cols: 1; --bento-ratio: 1.7778; }

	/* 2 columns: 3-photo bands — one tall 1×2 photo + a pair; every other band mirrored. */
	figure.wp-block-gallery.is-style-anvepp-bento.columns-2 { --bento-cols: 2; --bento-ratio: 1.5; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-2 > figure:nth-of-type(3n+1) { --cs: 1; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-2 > figure:nth-of-type(6n+4) { --start: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-2 > figure:nth-of-type(3n+1):nth-last-of-type(1) { --start: auto; --cs: 2; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-2 > figure:nth-of-type(3n+1):nth-last-of-type(2) { --start: auto; --cs: 1; --rs: 1; }

	/* 3 columns: 3-photo bands — one big 2×2 photo + 2 small; every other band mirrored. */
	figure.wp-block-gallery.is-style-anvepp-bento.columns-3 { --bento-cols: 3; --bento-ratio: 1.25; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-3 > figure:nth-of-type(3n+1) { --cs: 2; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-3 > figure:nth-of-type(6n+4) { --start: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-3 > figure:nth-of-type(3n+1):nth-last-of-type(1) { --start: auto; --cs: 3; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-3 > figure:nth-of-type(3n+1):nth-last-of-type(2) { --start: auto; --cs: 2; --rs: 1; }

	/* 4 columns: 5-photo bands — one big 2×2 photo + 4 small; every other band mirrored. */
	figure.wp-block-gallery.is-style-anvepp-bento:is(.columns-default, .columns-4) { --bento-cols: 4; --bento-ratio: 1.25; }
	figure.wp-block-gallery.is-style-anvepp-bento:is(.columns-default, .columns-4) > figure:nth-of-type(5n+1) { --cs: 2; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento:is(.columns-default, .columns-4) > figure:nth-of-type(10n+6) { --start: 3; }
	figure.wp-block-gallery.is-style-anvepp-bento:is(.columns-default, .columns-4) > figure:nth-of-type(5n+1):nth-last-of-type(1) { --start: auto; --cs: 4; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento:is(.columns-default, .columns-4) > figure:nth-of-type(5n+1):nth-last-of-type(2) { --start: auto; --cs: 3; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento:is(.columns-default, .columns-4) > figure:nth-of-type(5n+1):nth-last-of-type(2) ~ figure:nth-last-of-type(-n+1) { --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento:is(.columns-default, .columns-4) > figure:nth-of-type(5n+1):nth-last-of-type(3) { --start: auto; --cs: 2; --rs: 1; }
	figure.wp-block-gallery.is-style-anvepp-bento:is(.columns-default, .columns-4) > figure:nth-of-type(5n+1):nth-last-of-type(4) { --start: auto; --cs: 1; --rs: 1; }

	/* 5 columns: 7-photo bands — one big 2×2 photo + 6 small; every other band mirrored. */
	figure.wp-block-gallery.is-style-anvepp-bento.columns-5 { --bento-cols: 5; --bento-ratio: 1.25; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-5 > figure:nth-of-type(7n+1) { --cs: 2; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-5 > figure:nth-of-type(14n+8) { --start: 4; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-5 > figure:nth-of-type(7n+1):nth-last-of-type(1) { --start: auto; --cs: 5; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-5 > figure:nth-of-type(7n+1):nth-last-of-type(2) { --start: auto; --cs: 4; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-5 > figure:nth-of-type(7n+1):nth-last-of-type(2) ~ figure:nth-last-of-type(-n+1) { --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-5 > figure:nth-of-type(7n+1):nth-last-of-type(3) { --start: auto; --cs: 3; --rs: 1; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-5 > figure:nth-of-type(7n+1):nth-last-of-type(4) { --start: auto; --cs: 2; --rs: 1; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-5 > figure:nth-of-type(7n+1):nth-last-of-type(5) { --start: auto; --cs: 1; --rs: 1; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-5 > figure:nth-of-type(7n+1):nth-last-of-type(6) { --start: auto; --cs: 1; --rs: 1; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-5 > figure:nth-of-type(7n+1):nth-last-of-type(6) ~ figure:nth-last-of-type(1) { --cs: 5; --rs: 2; }

	/* 6 columns: 9-photo bands — one big 2×2 photo + 8 small; every other band mirrored. */
	figure.wp-block-gallery.is-style-anvepp-bento.columns-6 { --bento-cols: 6; --bento-ratio: 1.25; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-6 > figure:nth-of-type(9n+1) { --cs: 2; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-6 > figure:nth-of-type(18n+10) { --start: 5; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-6 > figure:nth-of-type(9n+1):nth-last-of-type(1) { --start: auto; --cs: 6; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-6 > figure:nth-of-type(9n+1):nth-last-of-type(2) { --start: auto; --cs: 5; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-6 > figure:nth-of-type(9n+1):nth-last-of-type(2) ~ figure:nth-last-of-type(-n+1) { --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-6 > figure:nth-of-type(9n+1):nth-last-of-type(3) { --start: auto; --cs: 4; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-6 > figure:nth-of-type(9n+1):nth-last-of-type(3) ~ figure:nth-last-of-type(-n+2) { --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-6 > figure:nth-of-type(9n+1):nth-last-of-type(4) { --start: auto; --cs: 3; --rs: 1; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-6 > figure:nth-of-type(9n+1):nth-last-of-type(5) { --start: auto; --cs: 2; --rs: 1; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-6 > figure:nth-of-type(9n+1):nth-last-of-type(6) { --start: auto; --cs: 1; --rs: 1; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-6 > figure:nth-of-type(9n+1):nth-last-of-type(7) { --start: auto; --cs: 1; --rs: 1; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-6 > figure:nth-of-type(9n+1):nth-last-of-type(7) ~ figure:nth-last-of-type(1) { --cs: 6; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-6 > figure:nth-of-type(9n+1):nth-last-of-type(8) { --start: auto; --cs: 1; --rs: 1; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-6 > figure:nth-of-type(9n+1):nth-last-of-type(8) ~ figure:nth-last-of-type(2) { --cs: 5; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-6 > figure:nth-of-type(9n+1):nth-last-of-type(8) ~ figure:nth-last-of-type(-n+1) { --rs: 2; }

	/* 7 columns: 11-photo bands — one big 2×2 photo + 10 small; every other band mirrored. */
	figure.wp-block-gallery.is-style-anvepp-bento.columns-7 { --bento-cols: 7; --bento-ratio: 1.25; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-7 > figure:nth-of-type(11n+1) { --cs: 2; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-7 > figure:nth-of-type(22n+12) { --start: 6; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-7 > figure:nth-of-type(11n+1):nth-last-of-type(1) { --start: auto; --cs: 7; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-7 > figure:nth-of-type(11n+1):nth-last-of-type(2) { --start: auto; --cs: 6; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-7 > figure:nth-of-type(11n+1):nth-last-of-type(2) ~ figure:nth-last-of-type(-n+1) { --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-7 > figure:nth-of-type(11n+1):nth-last-of-type(3) { --start: auto; --cs: 5; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-7 > figure:nth-of-type(11n+1):nth-last-of-type(3) ~ figure:nth-last-of-type(-n+2) { --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-7 > figure:nth-of-type(11n+1):nth-last-of-type(4) { --start: auto; --cs: 4; --rs: 1; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-7 > figure:nth-of-type(11n+1):nth-last-of-type(5) { --start: auto; --cs: 3; --rs: 1; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-7 > figure:nth-of-type(11n+1):nth-last-of-type(6) { --start: auto; --cs: 2; --rs: 1; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-7 > figure:nth-of-type(11n+1):nth-last-of-type(7) { --start: auto; --cs: 1; --rs: 1; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-7 > figure:nth-of-type(11n+1):nth-last-of-type(8) { --start: auto; --cs: 1; --rs: 1; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-7 > figure:nth-of-type(11n+1):nth-last-of-type(8) ~ figure:nth-last-of-type(1) { --cs: 7; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-7 > figure:nth-of-type(11n+1):nth-last-of-type(9) { --start: auto; --cs: 1; --rs: 1; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-7 > figure:nth-of-type(11n+1):nth-last-of-type(9) ~ figure:nth-last-of-type(2) { --cs: 6; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-7 > figure:nth-of-type(11n+1):nth-last-of-type(9) ~ figure:nth-last-of-type(-n+1) { --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-7 > figure:nth-of-type(11n+1):nth-last-of-type(10) { --start: auto; --cs: 1; --rs: 1; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-7 > figure:nth-of-type(11n+1):nth-last-of-type(10) ~ figure:nth-last-of-type(3) { --cs: 5; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-7 > figure:nth-of-type(11n+1):nth-last-of-type(10) ~ figure:nth-last-of-type(-n+2) { --rs: 2; }

	/* 8 columns: 13-photo bands — one big 2×2 photo + 12 small; every other band mirrored. */
	figure.wp-block-gallery.is-style-anvepp-bento.columns-8 { --bento-cols: 8; --bento-ratio: 1.25; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-8 > figure:nth-of-type(13n+1) { --cs: 2; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-8 > figure:nth-of-type(26n+14) { --start: 7; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-8 > figure:nth-of-type(13n+1):nth-last-of-type(1) { --start: auto; --cs: 8; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-8 > figure:nth-of-type(13n+1):nth-last-of-type(2) { --start: auto; --cs: 7; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-8 > figure:nth-of-type(13n+1):nth-last-of-type(2) ~ figure:nth-last-of-type(-n+1) { --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-8 > figure:nth-of-type(13n+1):nth-last-of-type(3) { --start: auto; --cs: 6; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-8 > figure:nth-of-type(13n+1):nth-last-of-type(3) ~ figure:nth-last-of-type(-n+2) { --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-8 > figure:nth-of-type(13n+1):nth-last-of-type(4) { --start: auto; --cs: 5; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-8 > figure:nth-of-type(13n+1):nth-last-of-type(4) ~ figure:nth-last-of-type(-n+3) { --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-8 > figure:nth-of-type(13n+1):nth-last-of-type(5) { --start: auto; --cs: 4; --rs: 1; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-8 > figure:nth-of-type(13n+1):nth-last-of-type(6) { --start: auto; --cs: 3; --rs: 1; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-8 > figure:nth-of-type(13n+1):nth-last-of-type(7) { --start: auto; --cs: 2; --rs: 1; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-8 > figure:nth-of-type(13n+1):nth-last-of-type(8) { --start: auto; --cs: 1; --rs: 1; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-8 > figure:nth-of-type(13n+1):nth-last-of-type(9) { --start: auto; --cs: 1; --rs: 1; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-8 > figure:nth-of-type(13n+1):nth-last-of-type(9) ~ figure:nth-last-of-type(1) { --cs: 8; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-8 > figure:nth-of-type(13n+1):nth-last-of-type(10) { --start: auto; --cs: 1; --rs: 1; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-8 > figure:nth-of-type(13n+1):nth-last-of-type(10) ~ figure:nth-last-of-type(2) { --cs: 7; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-8 > figure:nth-of-type(13n+1):nth-last-of-type(10) ~ figure:nth-last-of-type(-n+1) { --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-8 > figure:nth-of-type(13n+1):nth-last-of-type(11) { --start: auto; --cs: 1; --rs: 1; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-8 > figure:nth-of-type(13n+1):nth-last-of-type(11) ~ figure:nth-last-of-type(3) { --cs: 6; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-8 > figure:nth-of-type(13n+1):nth-last-of-type(11) ~ figure:nth-last-of-type(-n+2) { --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-8 > figure:nth-of-type(13n+1):nth-last-of-type(12) { --start: auto; --cs: 1; --rs: 1; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-8 > figure:nth-of-type(13n+1):nth-last-of-type(12) ~ figure:nth-last-of-type(4) { --cs: 5; --rs: 2; }
	figure.wp-block-gallery.is-style-anvepp-bento.columns-8 > figure:nth-of-type(13n+1):nth-last-of-type(12) ~ figure:nth-last-of-type(-n+3) { --rs: 2; }
}

/* Phones/tablets: 2 columns (1 if the gallery is set to 1), 3-photo cycles —
   one full-width photo, then a pair; a single leftover goes full width. Tiles
   are never wider than square here, whatever the aspect ratio setting. */
@media (max-width: 781px) {
	figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento {
		--bento-cols: 2;
		--bento-tile-ratio: min(var(--bento-ratio, 1.25), 1);
		--bento-radius: 10px;
		--bento-gap: min(var(--wp--style--unstable-gallery-gap, 0.5rem), 0.5rem);
	}

	figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento.columns-1 {
		--bento-cols: 1;
		--bento-tile-ratio: var(--bento-ratio, 1.5);
	}

	figure.wp-block-gallery.is-style-anvepp-bento:not(.columns-1) > figure:nth-of-type(3n+1),
	figure.wp-block-gallery.is-style-anvepp-bento:not(.columns-1) > figure:nth-of-type(3n+2):nth-last-of-type(1) {
		--cs: 2;
	}
}

/* Editor only: label a gallery whose "Randomize order" is on (class added by
   assets/js/photo-gallery.js), since the editor always shows the saved order.
   Absolutely positioned, so it never takes a grid cell. */
.wp-block-gallery.anvepp-gallery-is-random {
	position: relative;
}

.wp-block-gallery.anvepp-gallery-is-random::before {
	content: "Random order — photos shuffle on each visit";
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 3;
	padding: 0.3em 0.75em;
	border-radius: 999px;
	background-color: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--contrast);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	pointer-events: none;
}

/* Gallery caption (under the whole gallery) spans the grid. */
figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento > figcaption {
	grid-column: 1 / -1;
}

/* When the gallery's section scrolls into view (scroll-reveal.js), the tiles
   follow in a quick left-to-right stagger. Skipped under reduced motion,
   where the script never adds .anvepp-reveal. */
.anvepp-reveal figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento > figure.wp-block-image:not(#individual-image) {
	opacity: 0;
	transform: translateY(1.25rem) scale(0.97);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(var(--bento-i, 10) * 70ms + 150ms);
}

.anvepp-reveal.is-visible figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento > figure.wp-block-image:not(#individual-image) {
	opacity: 1;
	transform: none;
}

figure.wp-block-gallery.is-style-anvepp-bento > figure:nth-of-type(1) { --bento-i: 0; }
figure.wp-block-gallery.is-style-anvepp-bento > figure:nth-of-type(2) { --bento-i: 1; }
figure.wp-block-gallery.is-style-anvepp-bento > figure:nth-of-type(3) { --bento-i: 2; }
figure.wp-block-gallery.is-style-anvepp-bento > figure:nth-of-type(4) { --bento-i: 3; }
figure.wp-block-gallery.is-style-anvepp-bento > figure:nth-of-type(5) { --bento-i: 4; }
figure.wp-block-gallery.is-style-anvepp-bento > figure:nth-of-type(6) { --bento-i: 5; }
figure.wp-block-gallery.is-style-anvepp-bento > figure:nth-of-type(7) { --bento-i: 6; }
figure.wp-block-gallery.is-style-anvepp-bento > figure:nth-of-type(8) { --bento-i: 7; }
figure.wp-block-gallery.is-style-anvepp-bento > figure:nth-of-type(9) { --bento-i: 8; }

@media (prefers-reduced-motion: reduce) {
	figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento > figure.wp-block-image:not(#individual-image) img,
	figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento > figure.wp-block-image:not(#individual-image)::after,
	figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento > figure.wp-block-image:not(#individual-image) figcaption {
		transition: none;
	}

	figure.wp-block-gallery.has-nested-images.is-style-anvepp-bento > figure.wp-block-image:not(#individual-image):hover img {
		transform: none;
	}
}

/* Lightbox (click-to-enlarge, from core): a dark navy backdrop with light
   controls instead of core's near-white one, so photos read like a slideshow.
   Core writes the colours as inline styles from the theme palette, hence
   !important. The overlay is shared by every lightbox image on the site. */
.wp-lightbox-overlay .scrim {
	background-color: var(--wp--preset--color--navy) !important;
}

.wp-lightbox-overlay.active .scrim {
	opacity: 0.96;
}

.wp-lightbox-overlay button {
	fill: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--base);
}

.wp-lightbox-overlay button:focus-visible {
	outline: 2px solid var(--wp--preset--color--yellow);
	outline-offset: 2px;
}