/*
Theme Name: Atomic WP Theme
Theme URI: https://atomic-design.be/
Author: Atomic Design
Description: Neutral standalone block-theme foundation for the Atomic WP ecosystem.
Version: 0.0.0-dev
Text Domain: atomic-wp
Requires at least: 6.6
*/

/* =========================================================
   Base layout
   ========================================================= */

:root {
	--awp-page-gutter: clamp(20px, 4vw, 64px);
	--awp-button-arrow-content: "→"; /* @deprecated: saved pre-ADR-030 button classes only. */
	--awp-separator-upper-color: var(--wp--preset--color--surface, #ffffff);
	--awp-separator-lower-color: var(--wp--preset--color--background, #ffffff);
	--awp-rail-track-color: var(--wp--preset--color--border, #d6d3d1);
	--awp-rail-track-width: 2px;
	--awp-rail-marker-size: 0.75rem;
	--awp-rail-marker-color: var(--wp--preset--color--surface, #ffffff);
	--awp-rail-marker-active-color: var(--awp-context-accent, var(--wp--preset--color--primary, #0f172a));
	--awp-rail-label-color: var(--wp--preset--color--text, currentColor);
	--awp-rail-gap: var(--wp--preset--spacing--50);
	--awp-rail-active-scale: 1.15;
}

.wp-site-blocks {
	min-height: 100vh;
}

/* Smooth same-document navigation is opt-in: the selector only activates
   when the reusable Back to Top pattern is present. */
html:has(.awp-back-to-top) {
	scroll-behavior: smooth;
}

/* =========================================================
   Shared header / footer — static presentation only.
   Nav V1 + Motion remain the ONLY owners of scroll / sticky
   / shrink / transparent-at-top runtime behavior.
   Theme CSS below only styles emitted classes or a static
   base state; no new scroll listener / rAF / class toggle.
   ========================================================= */

.awp-site-header,
.awp-site-footer {
	position: relative;
}

/* Static header refinements: generous vertical pad, inline
   width guard, soft background border via token. Flex alignment
   tuned for editorial logotype + nav. */
.awp-site-header {
	padding-block-start: var(--wp--preset--spacing--40);
	padding-block-end: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--background, #ffffff);
	border-bottom-color: var(--wp--preset--color--border, #d6d3d1);
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

/* Generic promoted header layout (NAV-03 / NAV-06):
   Parent provides canonical flex space-between + width modes.
   Child may only provide client-specific variant styles/branding,
   never re-declare these generic layout foundations. */
.awp-site-header > .wp-block-group__inner-container,
.awp-site-header > .wp-block-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	padding-inline: var(--awp-page-gutter);
	margin-inline: auto;
	width: 100%;
	box-sizing: border-box;
}

.awp-site-header__identity {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
}

.awp-site-header__identity .wp-block-site-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display-font);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1;
}

/* Three-region headers keep the Core navigation visually centered between
   the site identity and the action region. The flex fallback above remains
   the generic two-region header layout. */
.awp-site-header > .wp-block-group:has(> .wp-block-navigation):has(> .wp-block-buttons) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	justify-content: initial;
}
.awp-site-header > .wp-block-group:has(> .wp-block-navigation):has(> .wp-block-buttons) > :first-child {
	justify-self: start;
	min-width: 0;
}
.awp-site-header > .wp-block-group:has(> .wp-block-navigation):has(> .wp-block-buttons) > .wp-block-navigation {
	justify-self: center;
	min-width: 0;
}
.awp-site-header > .wp-block-group:has(> .wp-block-navigation):has(> .wp-block-buttons) > .wp-block-buttons {
	justify-self: end;
}
/* Canonical header width modes — single source of truth.
   Width tokens are Core's global contentSize / wideSize; "full" bypasses. */
.awp-site-header.awp-site-header--width-content > .wp-block-group__inner-container,
.awp-site-header.awp-site-header--width-content > .wp-block-group {
	max-width: var(--wp--style--global--content-size, 46rem);
}
.awp-site-header.awp-site-header--width-wide > .wp-block-group__inner-container,
.awp-site-header.awp-site-header--width-wide > .wp-block-group {
	max-width: var(--wp--style--global--wide-size, 80rem);
}
.awp-site-header.awp-site-header--width-full > .wp-block-group__inner-container,
.awp-site-header.awp-site-header--width-full > .wp-block-group {
	max-width: none;
}

/* CTA mobile visibility is a SETTING, not a universal rule.
   Only hide CTAs on mobile when header.cta.mobileVisible=false. */
@media (max-width: 782px) {
	.awp-site-header.awp-site-header--cta-mobile-hidden .wp-block-buttons {
		display: none;
	}
}

/* Branded logo widths (NAV-07 shared precedence): resolved sizes via CSS vars.
   Parent does not hard-code client-specific size literals. */
.awp-site-header .wp-block-site-logo { flex: 0 0 auto; }
.awp-site-header .wp-block-site-logo img {
	width: var(--awp-nav-logo-width-desktop, 240px);
	height: auto;
	max-height: none;
	object-fit: contain;
	object-position: left center;
}
@media (max-width: 782px) {
	.awp-site-header .wp-block-site-logo img {
		width: var(--awp-nav-logo-width-mobile, 200px);
		max-height: none;
	}
}

@media (max-width: 782px) {
	.awp-site-header > .wp-block-group:has(> .wp-block-navigation):has(> .wp-block-buttons) {
		display: flex;
		justify-content: space-between;
	}
}

/* Nav typography + spacing (NAV-05) — generic presentation.
   All values flow from shared-precedence CSS custom properties,
   never local literals in the child. */
.awp-site-header nav {
	font-size: var(--awp-nav-font-size, inherit);
	font-weight: var(--awp-nav-font-weight, inherit);
	letter-spacing: var(--awp-nav-letter-spacing, inherit);
}
.awp-site-header .wp-block-navigation__container,
.awp-site-header nav .wp-block-page-list {
	gap: var(--awp-nav-link-gap, var(--wp--preset--spacing--40));
}
.awp-site-header nav .wp-block-navigation-item__content,
.awp-site-header nav a {
	color: var(--awp-nav-link-color, inherit);
}
.awp-site-header nav a:hover {
	color: var(--awp-nav-link-hover-color, var(--awp-context-accent, inherit));
}
.awp-site-header nav .current-menu-item > a,
.awp-site-header nav .wp-block-navigation-item.is-active > a,
.awp-site-header nav a:active,
.awp-site-header nav a.current {
	color: var(--awp-nav-link-active-color, var(--awp-context-accent, inherit));
}

/* Link decoration modes (NAV-05).
   Explicitly named classes; child themes may add client accent overrides. */
.awp-nav.awp-nav--deco-none nav a,
.awp-nav.awp-nav--deco-none nav .wp-block-navigation-item__content {
	text-decoration: none;
}
.awp-nav.awp-nav--deco-underline nav a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.awp-nav.awp-nav--deco-underline-on-hover nav a {
	text-decoration: none;
}
.awp-nav.awp-nav--deco-underline-on-hover nav a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.awp-nav.awp-nav--deco-active-underline nav .current-menu-item > a,
.awp-nav.awp-nav--deco-active-underline nav .wp-block-navigation-item.is-active > a,
.awp-nav.awp-nav--deco-active-underline nav a.current {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Footer foundation: rhythm, top hairline via accent token,
   block spacing, muted sub-copy and copyright line sizing. */
.awp-site-footer {
	padding-block-start: var(--wp--preset--spacing--60);
	padding-block-end: var(--wp--preset--spacing--60);
	padding-inline: var(--awp-page-gutter);
	margin-block-start: var(--wp--preset--spacing--70);
	background-color: var(--wp--preset--color--surface, #f5f5f4);
	border-top-color: var(--wp--preset--color--accent, #111827);
	border-top-style: solid;
	border-top-width: 1px;
	box-sizing: border-box;
}

.awp-site-footer > .wp-block-group__inner-container,
.awp-site-footer > .wp-block-group,
.awp-site-footer .awp-site-footer__inner {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 80rem);
	margin-inline: auto;
}

.awp-site-footer .wp-block-site-logo,
.awp-site-footer .wp-block-image {
	flex: 0 0 auto;
	max-width: min(100%, var(--awp-footer-logo-width, 9rem));
	margin: 0;
}

.awp-site-footer .wp-block-site-logo img,
.awp-site-footer .wp-block-image img {
	width: auto;
	max-width: min(100%, var(--awp-footer-logo-width, 9rem));
	max-height: var(--awp-footer-logo-max-height, 6rem);
	height: auto;
	object-fit: contain;
	object-position: left center;
}

.awp-site-header .wp-block-navigation__container,
.awp-site-footer .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--30);
}

.awp-site-header .wp-block-site-tagline,
.awp-site-footer .wp-block-site-tagline,
.awp-site-footer .wp-block-paragraph {
	color: var(--wp--preset--color--muted, #6b7280);
}

/* =========================================================
   Main content column
   ========================================================= */

.awp-site-main {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--70);
}

.awp-site-main > .wp-block-query,
.awp-site-main > .wp-block-post-content,
.awp-site-main > .wp-block-post-featured-image,
.awp-site-main > .wp-block-post-terms,
.awp-site-main > .wp-block-comments,
.awp-site-main > .wp-block-post-title {
	margin-block-start: 0;
}

/* =========================================================
   Shared pattern panel
   ========================================================= */

.awp-pattern-panel {
	border: var(--wp--custom--border--width, 1px) solid var(--wp--preset--color--border, #d6d3d1);
	border-radius: var(--wp--custom--radius--lg, 1.25rem);
	background: var(--wp--preset--color--background, #ffffff);
}

/* =========================================================
   NEW semantic awp- classes introduced by Brand/Design V1.
   Count: 7 NEW .awp-* className introductions (≤12 cap).
   Pre-existing awp- classes: awp-site-header, awp-site-footer,
   awp-site-main, awp-pattern-panel.
   ========================================================= */

/* 1. Section vertical rhythm delimiter. Outer wrapper for
      home sections 2-5 and secondary page wrappers.
      Alternates background via descendant modifier later. */
.awp-section {
	padding-block-start: var(--wp--preset--spacing--70);
	padding-block-end: var(--wp--preset--spacing--70);
}

.awp-section:not([class*="awp-section--inner-width-"]) > .wp-block-group__inner-container,
.awp-section:not([class*="awp-section--inner-width-"]) > * {
	max-width: var(--wp--style--global--wide-size, 80rem);
	margin-inline: auto;
}

/* 2. Editorial intro wrapper — eyebrow + heading + lede. */
.awp-editorial-intro {
	max-width: var(--wp--style--global--content-size, 46rem);
	margin-inline: auto;
	text-align: center;
}

/* 3. Eyebrow variant — muted uppercase/small tracking. */
.awp-editorial-intro__eyebrow {
	color: var(--wp--preset--color--primary, #0f172a);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-block: 0 var(--wp--preset--spacing--30);
}

/* 4. Lede variant — slightly larger body, wider measure,
      looser line-height for an editorial opener. */
.awp-editorial-intro__lede {
	font-size: var(--wp--preset--font-size--large, 1.125rem);
	line-height: 1.7;
	color: var(--wp--preset--color--text, #1f2937);
	max-width: 48rem;
	margin-inline: auto;
}

/* 5. Hero editorial pattern — background/surface wash,
      generous spacing, subtle accent hairline below. */
.awp-pattern-hero {
	background-color: var(--wp--preset--color--surface, #f5f5f4);
	border-bottom: 1px solid var(--wp--preset--color--accent, #111827);
}

.awp-pattern-hero .wp-block-heading {
	color: var(--wp--preset--color--text, #1f2937);
}

.awp-pattern-hero .wp-block-paragraph.has-muted-color {
	color: var(--wp--preset--color--text, #1f2937);
	opacity: 0.8;
}

/* 6. Callout / conversion CTA block — surface accent, soft
      border-left primary accent. */
.awp-callout {
	background-color: var(--wp--preset--color--surface, #f5f5f4);
	border-left: 3px solid var(--wp--preset--color--primary, #0f172a);
	border-radius: var(--wp--custom--radius--md, 0.75rem);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

/* End of NEW awp- class introductions.
   Total NEW awp- className count = 7 (of 12 allowed). */

/* =========================================================
   Palette background alternations — reuses the delimiter
   class, does not introduce new awp- names.
   ========================================================= */

.awp-section.is-style-surface {
	background-color: var(--wp--preset--color--surface, #f5f5f4);
}

.awp-section.is-style-paper {
	background-color: var(--wp--preset--color--background, #ffffff);
}

/* =========================================================
   Focus & accessibility — visible focus rings via primary
   token for all interactive descendants of awp components.
   ========================================================= */

.awp-site-header a:focus-visible,
.awp-site-footer a:focus-visible,
.awp-section a:focus-visible,
.awp-pattern-hero a:focus-visible,
.awp-editorial-intro a:focus-visible,
.awp-callout a:focus-visible,
.awp-site-header button:focus-visible,
.awp-site-footer button:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation a:focus-visible,
.wp-block-navigation button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #0f172a);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm, 0.375rem);
}

/* =========================================================
   Button / link transitions — subtle, always guarded by
   prefers-reduced-motion reset below.
   ========================================================= */

.wp-element-button,
.wp-block-button__link,
.awp-site-header a,
.awp-site-footer a,
.awp-section a,
.awp-pattern-hero a {
	transition-duration: 150ms;
	transition-timing-function: ease;
	transition-property: color, background-color, border-color, text-decoration-color;
}

/* =========================================================
   Reduced motion — disable every non-essential transition /
   animation added by this stylesheet.
   Constitutional INV-08 / Constitution invariant 8.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	html:has(.awp-back-to-top) {
		scroll-behavior: auto;
	}
	.wp-element-button,
	.wp-block-button__link,
	.awp-site-header a,
	.awp-site-footer a,
	.awp-section a,
	.awp-pattern-hero a,
	.awp-callout a {
		transition: none !important;
		animation: none !important;
	}
}

/* =========================================================
   Image rendering guard — Core images inherit aspect,
   preserve intrinsic ratios, radius via token.
   ========================================================= */

.wp-block-image img {
	height: auto;
	max-width: 100%;
	object-fit: cover;
}

/* =========================================================
   Accessibility refinements.
   WCAG target size (Level AA, 2.5.5) minimum ~44px for
   primary button controls; Nav V1 owns its own toggles.
   200% zoom / reflow: prevent horizontal overflow on root
   containers so zoomed text never forces a side scrollbar.
   ========================================================= */

.wp-element-button,
.wp-block-button__link {
	min-height: 2.75rem;
	display: inline-flex;
	align-items: center;
}

html,
body {
	overflow-x: clip;
}

/* =========================================================
   Narrow-screen / mobile responsiveness.
   ========================================================= */

@media (max-width: 782px) {
	.awp-section {
		padding-block-start: var(--wp--preset--spacing--60);
		padding-block-end: var(--wp--preset--spacing--60);
	}

	.awp-site-header {
		padding-block-start: var(--wp--preset--spacing--30);
		padding-block-end: var(--wp--preset--spacing--30);
	}
}

/* =========================================================
   Contextual accent cascade
   ========================================================= */

:root {
	--awp-context-accent: var(--wp--preset--color--primary, #0f172a);
	--awp-context-on-accent: var(--wp--preset--color--background, #ffffff);
	/* Compatibility aliases for existing client content. New components use
	   the context names above. */
	--awp-accent: var(--awp-context-accent);
	--awp-on-accent: var(--awp-context-on-accent);
}

/* Semantic context utilities are palette-role based, never brand-color based.
   A child/site palette may add any other slug through the native block
   background setting or the render-time awp-context-{slug} bridge. */
.awp-context-primary,
.awp-context-secondary,
.awp-context-accent,
.awp-context-contrast {
	--awp-context-on-accent: var(--wp--preset--color--background, #ffffff);
}
.awp-context-primary { --awp-context-accent: var(--wp--preset--color--primary, #0f172a); }
.awp-context-secondary { --awp-context-accent: var(--wp--preset--color--secondary, #6b7280); }
.awp-context-accent { --awp-context-accent: var(--wp--preset--color--accent, #111827); }
.awp-context-contrast {
	--awp-context-accent: var(--wp--preset--color--contrast, #111111);
	--awp-context-on-accent: var(--wp--preset--color--background, #ffffff);
}

.awp-accent-surface,
.wp-block-group.awp-accent-surface,
.awp-section.awp-accent-surface {
	--awp-context-accent: var(--wp--preset--color--primary, #0f172a);
	--awp-context-on-accent: var(--wp--preset--color--background, #ffffff);
	background-color: var(--awp-context-accent);
	color: var(--awp-context-on-accent);
}

.awp-accent-surface .wp-block-heading,
.awp-accent-surface .wp-block-paragraph {
	color: inherit;
}

/* Accent position hooks (section → component → leaf).
   Consumer adds these classes on any Group ancestor.
   Parent defaults to generic palette tokens; child
   theme re-maps via its own theme.json palette. */
.awp-card {
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border: var(--wp--custom--border--width, 1px) solid var(--wp--preset--color--border, #d6d3d1);
	border-radius: var(--awp-card-radius, var(--wp--custom--radius--lg, 1.25rem));
	background-color: var(--wp--preset--color--background, #ffffff);
	box-shadow: var(--awp-card-shadow, 0 1px 2px rgb(0 0 0 / 3%));
}

.awp-card__title {
	box-sizing: border-box;
	max-width: 100%;
	margin: 0;
	overflow-wrap: anywhere;
}

.awp-card__copy {
	box-sizing: border-box;
	max-width: 100%;
	margin: 0;
	overflow-wrap: anywhere;
}

.awp-card-grid,
.wp-block-group.awp-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	align-items: stretch;
	gap: var(--wp--preset--spacing--40);
}

.awp-card-grid > * {
	min-width: 0;
	margin-block-start: 0;
}

.awp-card-grid > .awp-card {
	align-self: stretch;
	height: 100%;
}

.awp-card__orb {
	box-sizing: border-box;
	width: var(--awp-card-orb-size, 3.5rem);
	aspect-ratio: 1;
	flex: 0 0 var(--awp-card-orb-size, 3.5rem);
	max-width: 100%;
	border-radius: 9999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: var(--awp-context-accent, var(--wp--preset--color--primary, #0f172a));
	color: var(--awp-context-on-accent, var(--wp--preset--color--background, #ffffff));
	font-weight: 700;
}

.awp-card__orb--sm { --awp-card-orb-size: 2.5rem; }
.awp-card__orb img,
.awp-card__orb svg { width: var(--awp-card-orb-icon-size, 1.75rem); height: var(--awp-card-orb-icon-size, 1.75rem); display: block; }

.awp-card {
	border-color: color-mix(in srgb, var(--awp-context-accent) 20%, var(--wp--preset--color--border, #d6d3d1));
}

/* Thin accent hairline consumed by Hero / Split / Cards. */
.awp-accent-line {
	height: 3px;
	width: 3rem;
	background-color: var(--awp-context-accent, currentColor);
	border: 0;
	margin-inline: 0;
}
.awp-accent-line.is-style-centered {
	margin-inline: auto;
}

/* =========================================================
   Legacy Button optional-icon model for saved pre-ADR-030 content.
   3 states: NONE (native Core), BEFORE (pseudo ::before),
   AFTER (pseudo ::after). Arrow content via CSS only so
   labels remain real visible text.
   BEFORE state proven in focused fixture/unit test only;
   production sites never consume it visibly unless design explicitly calls for it.
   Always single focus surface; real text label kept.
   ========================================================= */

.wp-block-button.is-style-has-icon-before .wp-block-button__link::before,
.wp-element-button.is-style-has-icon-before::before,
.wp-block-button__link.has-icon-before::before {
	content: var(--awp-button-arrow-content, "→");
	margin-inline-end: 0.5rem;
	display: inline-block;
	line-height: 1;
	speak: never;
}

.wp-block-button.is-style-has-icon-after .wp-block-button__link::after,
.wp-element-button.is-style-has-icon-after::after,
.wp-block-button__link.has-icon-after::after {
	content: var(--awp-button-arrow-content, "→");
	margin-inline-start: 0.5rem;
	display: inline-block;
	line-height: 1;
	speak: never;
}

/* Core Button visual variants. The token guard keeps explicit Gutenberg
   background/text choices authoritative on the individual block. */
.wp-block-button:not(.is-style-outline):not(.is-style-ghost):not(.is-style-text) > .wp-block-button__link:not(.has-background),
.wp-block-button.is-style-primary > .wp-block-button__link:not(.has-background) {
	background-color: var(--awp-context-accent, var(--wp--preset--color--primary, #0f172a));
	border-color: var(--awp-context-accent, var(--wp--preset--color--primary, #0f172a));
	color: var(--awp-context-on-accent, var(--wp--preset--color--background, #ffffff));
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background-color: transparent;
	border-color: var(--awp-context-accent, var(--wp--preset--color--primary, #0f172a));
}
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--awp-context-accent, var(--wp--preset--color--primary, #0f172a));
}

.wp-block-button.is-style-ghost > .wp-block-button__link:not(.has-background) {
	background-color: transparent;
	border-color: transparent;
}
.wp-block-button.is-style-ghost > .wp-block-button__link:not(.has-text-color) {
	color: var(--awp-context-accent, var(--wp--preset--color--primary, #0f172a));
}

/* On-accent button / surface contrast helpers.
   Solid filled surfaces that are NOT on accent-background
   themselves use their text as primary. On-accent guarantees:
   blue/red/black → white text; yellow/muted/light → dark text. */
.awp-on-accent {
	color: var(--awp-context-on-accent, var(--wp--preset--color--background, #ffffff));
}
.wp-block-button.awp-on-accent .wp-block-button__link {
	background-color: var(--awp-context-accent);
	color: var(--awp-context-on-accent);
	border-color: var(--awp-context-accent);
}

/* =========================================================
   TASK 2. Media treatment vocabulary (Core Block Styles).
   Default: Core. Editorial: softer contrast + serif crop.
   Accent Corner: 3px accent border bottom-right.
   Hover Tint: subtle accent overlay on hover/keyfocus.
   Corner+Tint combination is additive by applying both.
   Motion transitions always reduced-motion guarded.
   ========================================================= */

.wp-block-image.is-style-editorial img,
.wp-block-video.is-style-editorial video,
.wp-block-image.is-style-editorial figure {
	filter: contrast(0.97) saturate(0.95);
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.wp-block-image.is-style-accent-corner figure,
.wp-block-video.is-style-accent-corner figure {
	position: relative;
	overflow: hidden;
}
.wp-block-image.is-style-accent-corner figure::after,
.wp-block-video.is-style-accent-corner figure::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 1.5rem;
	height: 1.5rem;
	border-right: 3px solid var(--awp-context-accent, currentColor);
	border-bottom: 3px solid var(--awp-context-accent, currentColor);
	border-bottom-right-radius: var(--wp--custom--radius--md, 0.75rem);
	pointer-events: none;
}

.wp-block-image.is-style-hover-tint figure,
.wp-block-video.is-style-hover-tint figure {
	position: relative;
	overflow: hidden;
}
.wp-block-image.is-style-hover-tint figure::before,
.wp-block-video.is-style-hover-tint figure::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--awp-context-accent, #0f172a);
	opacity: 0;
	transition: opacity 200ms ease;
	z-index: 2;
	pointer-events: none;
}
.wp-block-image.is-style-hover-tint:hover figure::before,
.wp-block-video.is-style-hover-tint:hover figure::before,
.wp-block-image.is-style-hover-tint figure:focus-within::before,
.wp-block-video.is-style-hover-tint figure:focus-within::before {
	opacity: 0.18;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-image.is-style-hover-tint figure::before,
	.wp-block-video.is-style-hover-tint figure::before {
		transition: none;
	}
}