/**
 * Custom Component Styles — Atomicdust Base Theme
 *
 * Styles for base theme patterns and custom blocks.
 * All classes prefixed .ad- (kebab-case).
 *
 * BASE THEME PATTERNS (ship with every project):
 *   Hero Split, Logo Carousel, Text Ticker, Section Label,
 *   Card Row, Where It Fits, How It Works (Tabs), Testimonials Carousel,
 *   Case Studies, Video CTA, Hero Full Bleed, Grid Hover Cards,
 *   Card Links Image, Dual Panel Slider, Bento Grid
 *
 * PROJECT-SPECIFIC CSS:
 *   Add below the base theme patterns as new patterns are built.
 *   Never remove base theme pattern CSS — it supports the pattern library.
 */

/* Section spacing is set via block attributes (style.spacing.padding)
   on each pattern's outer group. No CSS fallbacks needed — inline
   styles from block attributes always apply. */

/* -----------------------------------------------
   Global Button Hover — Arrow Reveal
   ----------------------------------------------- */

.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	position: relative;
	transition: padding 0.3s ease;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link::after {
	content: "";
	position: absolute;
	right: 1.25rem;
	top: 50%;
	width: 1rem;
	height: 1rem;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") no-repeat center / contain;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") no-repeat center / contain;
	transform: translateY(-50%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	padding-right: 3rem;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover::after {
	opacity: 1;
}

/* -----------------------------------------------
   Hero Split Pattern
   ----------------------------------------------- */

/* Site padding on full-width hero — use root padding vars, not hardcoded clamp() */
.ad-hero-split {
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}

/* Pre-JS hidden state — prevents FOUC on back-navigation.
   Scoped to .js so content stays visible if JS fails to load.
   GSAP's autoAlpha animation overrides this once the timeline runs. */
.js .ad-hero-split > .wp-block-column {
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.js .ad-hero-split > .wp-block-column {
		visibility: visible;
	}
}

/* Content column — tall proportion via min-height */
.ad-hero-split__inner {
	min-height: clamp(28rem, 70vh, 48rem);
}

/* Media column — clip child cover image to rounded corners */
.ad-hero-split__media {
	overflow: hidden;
}

/* Cover inner container — absolute fill + flex bottom-right, overrides WP constrained layout */
.ad-hero-split__cover .wp-block-cover__inner-container {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 1.5rem;
}

/* Testimonial card — constrain width, override constrained layout auto margins */
.ad-hero-split__testimonial {
	max-width: 20rem;
	margin: 0;
}

/* Testimonial quote — reset default blockquote styles */
.ad-hero-split__testimonial .wp-block-quote {
	border: none;
	padding: 0;
	margin: 0;
}

.ad-hero-split__testimonial .wp-block-quote cite {
	display: block;
	margin-top: var(--ad-space-sm);
	font-style: normal;
	font-weight: 600;
}

/* Testimonial role text — uses body color slug (verify contrast on project bg) */
.ad-hero-split__testimonial-role {
	color: var(--wp--preset--color--body);
	font-weight: 400;
}

/* Pause/play toggle — positioning only (shape via .ad-pause-btn in global.css) */
.ad-hero-split__pause-btn {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	z-index: 2;
}

/* Cover needs relative positioning for the pause button */
.ad-hero-split__cover {
	position: relative;
	background-color: var(--wp--preset--color--primary); /* Loading placeholder — covered by video */
}

/* -----------------------------------------------
   Hero Split — Mobile
   ----------------------------------------------- */

@media (max-width: 781px) {
	.ad-hero-split__inner {
		min-height: auto;
	}

	/* Inline min-height:100% has no parent reference when stacked — override with explicit value */
	.ad-hero-split__cover {
		min-height: 20rem !important;
	}

	/* Keep testimonial from overlapping the pause button at bottom-left */
	.ad-hero-split__testimonial {
		max-width: calc(100% - 3.5rem);
	}
}

/* -----------------------------------------------
   Logo Carousel
   ----------------------------------------------- */

/* Outer container — clip overflow, fade edges via CSS mask */
.ad-logo-carousel {
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent,
		black clamp(2rem, 8vw, 8rem),
		black calc(100% - clamp(2rem, 8vw, 8rem)),
		transparent
	);
	mask-image: linear-gradient(
		to right,
		transparent,
		black clamp(2rem, 8vw, 8rem),
		black calc(100% - clamp(2rem, 8vw, 8rem)),
		transparent
	);
}

/* Track — flex row, no wrap, width determined by content */
.ad-logo-carousel__track {
	width: max-content;
	flex-wrap: nowrap !important;
}

/* Animated state — JS adds .is-animated after cloning children */
.ad-logo-carousel.is-animated .ad-logo-carousel__track {
	animation: ad-logo-scroll var(--ad-carousel-duration, 30s) linear infinite;
}

@keyframes ad-logo-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(var(--ad-carousel-width) * -1));
	}
}

/* Logo images — consistent height, grayscale treatment */
.ad-logo-carousel__logo {
	flex-shrink: 0;
	margin: 0;
}

.ad-logo-carousel__logo img {
	height: clamp(1.5rem, 2.5vw, 2.5rem);
	width: auto;
	object-fit: contain;
	filter: grayscale(1) opacity(0.4);
}

/* Carousel wrapper — flex row so carousel + pause button sit inline.
   Uses !important to override WP constrained layout's display:flex / flow-root. */
.ad-logo-carousel-wrapper {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 1.5rem;
}

/* Carousel fills available space */
.ad-logo-carousel-wrapper .ad-logo-carousel {
	flex: 1;
	min-width: 0;
}

/* Pause/play button — inline with carousel (shape via .ad-pause-btn in global.css) */
.ad-logo-carousel__pause-btn {
	flex-shrink: 0;
}

/* -----------------------------------------------
   Reduced Motion
   ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ad-logo-carousel.is-animated .ad-logo-carousel__track {
		animation: none;
	}
}

/* -----------------------------------------------
   Text Ticker — Vertical Infinite Scroll
   ----------------------------------------------- */

/* Ticker container — fixed height, vertical mask fade */
.ad-text-ticker {
	position: relative;
	height: 20rem;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent,
		black clamp(1.5rem, 4vw, 3rem),
		black calc(100% - clamp(1.5rem, 4vw, 3rem)),
		transparent
	);
	mask-image: linear-gradient(
		to bottom,
		transparent,
		black clamp(1.5rem, 4vw, 3rem),
		black calc(100% - clamp(1.5rem, 4vw, 3rem)),
		transparent
	);
}

/* Track — vertical flex column */
.ad-text-ticker__track {
	flex-direction: column !important;
	flex-wrap: nowrap !important;
}

/* Items — no margin (gap handles spacing) */
.ad-text-ticker__item {
	margin: 0 !important;
	line-height: 1.3;
}

/* Animated state — JS adds .is-animated after cloning children */
.ad-text-ticker.is-animated .ad-text-ticker__track {
	animation: ad-text-scroll var(--ad-ticker-duration, 20s) linear infinite;
}

@keyframes ad-text-scroll {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(calc(var(--ad-ticker-height) * -1));
	}
}

/* Pause/play button — bottom-right of ticker */
.ad-text-ticker__pause-btn {
	position: absolute;
	bottom: 0.5rem;
	right: 0.5rem;
	z-index: 1;
}

/* Reduced motion — no animation */
@media (prefers-reduced-motion: reduce) {
	.ad-text-ticker.is-animated .ad-text-ticker__track {
		animation: none;
	}
}

/* Mobile — shorter ticker */
@media (max-width: 781px) {
	.ad-text-ticker {
		height: 14rem;
	}
}

/* -----------------------------------------------
   Section Label
   ----------------------------------------------- */

/* Reusable section label — eyebrow text used site-wide.
   Bold, uppercase, 14px, with a decorative ::before indicator. */
.ad-section-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0;
}

.ad-section-label::before {
	content: "";
	display: block;
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 0.125rem;
	background-color: var(--wp--preset--color--accent);
	flex-shrink: 0;
}

.ad-section-label--center {
	justify-content: center;
}

.ad-section-label--line::before {
	width: 2.625rem;
	height: 1px;
	border-radius: 0;
	background-color: currentColor;
}

/* -----------------------------------------------
   Card Row
   ----------------------------------------------- */

/* Card — rounded corners, overflow clip. Background set natively via backgroundColor attribute. */
.ad-card {
	border-radius: 0.75rem;
	overflow: hidden;
}

/* Card image — flush to edges, consistent aspect ratio */
.ad-card__image {
	margin: 0;
}

.ad-card__image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* -----------------------------------------------
   Where It Fits — Image Stack
   ----------------------------------------------- */

/* Container — height stretches to match sibling column */
.ad-image-stack {
	position: relative;
	border-radius: 0.75rem;
	overflow: hidden;
	height: 100%;
	min-height: 20rem;
}

/* Each figure is absolutely positioned and fills the container */
.ad-image-stack .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.ad-image-stack .wp-block-image.is-active {
	opacity: 1;
}

.ad-image-stack .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* -----------------------------------------------
   Where It Fits — Industry List
   ----------------------------------------------- */

.ad-industry-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ad-industry-list li {
	/* Uses muted color slug for border — update if project muted color changes */
	border-bottom: 1px solid var(--wp--preset--color--muted);
	transition: border-color 0.25s ease;
}

.ad-industry-list li:hover {
	border-color: var(--wp--preset--color--primary);
}

.ad-industry-list a {
	display: block;
	padding: 1.25rem 0;
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 400;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	line-height: 1.2;
}

.ad-industry-list li:first-child a {
	padding-top: 0;
}

.ad-industry-list a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.ad-image-stack .wp-block-image,
	.ad-industry-list li {
		transition: none;
	}
}

/* -----------------------------------------------
   How It Works — Tabs
   ----------------------------------------------- */

/* Tab bar container — pill-shaped background wrapping all tab buttons.
   Width fits content via inline-flex; centered via margin auto. */
.ad-tabs__bar {
	background-color: rgba(255, 255, 255, 0.08);
	border-radius: 100px;
	padding: 0.375rem;
	display: inline-flex !important;
	justify-content: center !important;
}

/* Center the inline-flex bar within the flow parent.
   Reset text-align so panel content stays left-aligned. */
.ad-tabs {
	text-align: center;
}

.ad-tabs__panels {
	text-align: left;
}

/* Tab bar — pill-shaped buttons on dark background */
.ad-tabs__bar .wp-block-button .wp-block-button__link {
	background-color: transparent;
	color: rgba(255, 255, 255, 0.6);
	border: none;
	border-radius: 100px;
	padding: 0.625rem 1.5rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ad-tabs__bar .wp-block-button .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.06);
	color: var(--wp--preset--color--secondary);
}

.ad-tabs__bar .wp-block-button.is-active .wp-block-button__link {
	background-color: rgba(255, 255, 255, 0.12);
	color: var(--wp--preset--color--secondary);
}

.ad-tabs__bar .wp-block-button .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Panels — hidden by default, visible when active.
   Extra specificity beats WordPress generated layout classes. */
.ad-tabs .ad-tabs__panel {
	display: none;
}

.ad-tabs .ad-tabs__panel.is-active {
	display: block;
}

/* Panel — clip children to rounded corners */
.ad-tabs__panel {
	overflow: hidden;
}

/* Panel image — fill height, cover crop, round left corners */
.ad-tabs__panel-image {
	overflow: hidden;
	border-radius: 0.75rem 0 0 0.75rem;
}

.ad-tabs__panel-image .wp-block-image {
	margin: 0;
	height: 100%;
}

.ad-tabs__panel-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Panel video — cover block fills column like an image */
.ad-tabs__panel-image .wp-block-cover {
	min-height: 100% !important;
	background-color: var(--wp--preset--color--primary); /* Loading placeholder — covered by video */
}

/* Panel minimum height so video/image panels aren't collapsed */
.ad-tabs__panel .wp-block-columns {
	min-height: 24rem;
}

/* Pause button inside panel video — positioned bottom-left */
.ad-tabs__panel-image {
	position: relative;
}

.ad-tabs__panel-image .ad-pause-btn {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	z-index: 2;
}

/* Panel label — uppercase treatment. Color set natively via textColor attribute. */
.ad-tabs__panel-label {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
}

/* Tighten space between panel label and heading */
.ad-tabs__panel-content h3 {
	margin-top: 0.5rem !important;
}

/* Section label centered in dark section */
.ad-how-it-works .ad-section-label {
	justify-content: center;
}

/* Panel content column — stretch to fill image height */
.ad-tabs__panel-content {
	display: flex;
	align-items: stretch;
}

/* Inner content group — flex column, body copy pushed to bottom */
.ad-tabs__panel-content > .wp-block-group {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ad-tabs__panel-content > .wp-block-group > p:last-child {
	margin-top: auto;
}

/* -----------------------------------------------
   How It Works — Mobile
   ----------------------------------------------- */

@media (max-width: 781px) {
	/* Tab bar wraps on small screens */
	.ad-tabs__bar {
		flex-wrap: wrap !important;
		justify-content: flex-start !important;
	}

	/* Stacked columns — image rounds top corners only, content below */
	.ad-tabs__panel-image {
		border-radius: 0.75rem 0.75rem 0 0;
	}

	.ad-tabs__panel-image img {
		aspect-ratio: 16 / 9;
	}

	/* Video cover block needs explicit min-height (percentage has no reference when columns stack) */
	.ad-tabs__panel-image .wp-block-cover {
		min-height: 280px !important;
	}
}

/* -----------------------------------------------
   How It Works — Reduced Motion
   ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ad-tabs__bar .wp-block-button .wp-block-button__link {
		transition: none;
	}
}

/* -----------------------------------------------
   Testimonials Carousel
   ----------------------------------------------- */

/* Section — full-width, clip overflow so cards bleed right without scrollbar.
   overflow:clip (not hidden) avoids creating a scroll container. */
.ad-testimonials-section {
	padding-top: clamp(3rem, 8vw, 8rem);
	padding-bottom: clamp(3rem, 8vw, 8rem);
	overflow: clip;
}

/* Nav arrow group — inline flex with gap */
.ad-testimonials__nav {
	display: flex;
	gap: 0.5rem;
	flex-shrink: 0;
}

/* Track — transform-based slider, overflow visible so cards bleed right.
   WP post-template renders as <ul>. Override grid/flex + reset list styles. */
.ad-testimonials__track {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 1.5rem;
	overflow: visible;
	margin: 0;
	padding-left: var(--wp--style--root--padding-left, clamp(1rem, 4vw, 4rem));
	transition: transform 0.4s ease;
	cursor: grab;
	touch-action: pan-y pinch-zoom;
}

/* Disable transition during drag so track follows pointer immediately */
.ad-testimonials__track.is-dragging {
	transition: none;
	cursor: grabbing;
}

/* Post-template list items — flex children with fixed width.
   WP renders <ul class="track"><li>...<div class="card">...</li></ul>. */
.ad-testimonials__track > li {
	flex-shrink: 0;
	width: calc((100vw - clamp(1rem, 4vw, 4rem) - 3rem) / 2.5);
	list-style: none;
}

/* Card — rounded corners, muted background, fill its <li> parent */
.ad-testimonials__card {
	border-radius: 0.75rem;
	overflow: hidden;
	background-color: var(--wp--preset--color--muted);
	height: 100%;
}

/* Card image — flush, consistent aspect ratio */
.ad-testimonials__card-image {
	margin: 0;
}

.ad-testimonials__card-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* Card content — flex column, push footer to bottom */
.ad-testimonials__card-content {
	display: flex;
	flex-direction: column;
	min-height: 14rem;
}

/* Blockquote wrapper — reset default browser/WP styles (added by render_block filter) */
.ad-testimonials__blockquote {
	margin: 0;
	padding: 0;
	border: none;
	flex: 1;
}

/* Quote text */
.ad-testimonials__quote {
	line-height: 1.5;
}

/* Card footer — name + role pushed to bottom */
.ad-testimonials__card-footer {
	margin-top: auto;
}

/* Name — bold, primary color */
.ad-testimonials__name {
	font-weight: 600;
	margin: 0;
}

/* Role */
.ad-testimonials__role {
	margin: 0;
}

/* Prevent text selection + image drag during carousel interaction */
.ad-testimonials__track.is-dragging * {
	user-select: none;
	-webkit-user-drag: none;
}

/* -----------------------------------------------
   Testimonials Carousel — Mobile
   ----------------------------------------------- */

@media (max-width: 781px) {
	.ad-testimonials__track > li {
		width: 80vw;
	}

	.ad-testimonials__card-content {
		min-height: auto;
	}
}

/* -----------------------------------------------
   Testimonials Carousel — Reduced Motion
   ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ad-testimonials__track {
		transition: none;
	}
}

/* -----------------------------------------------
   Case Studies — Expandable Cards
   ----------------------------------------------- */

.ad-case-studies {
	padding-top: clamp(3rem, 8vw, 8rem);
	padding-bottom: clamp(3rem, 8vw, 8rem);
}

/* Card container — flex row */
.ad-case-studies__cards {
	display: flex !important;
	flex-flow: row !important;
	gap: 1.5rem;
	margin-top: var(--ad-space-lg) !important;
}

/* Card (wp:column) — expand/shrink via width.
   Both items start at width:100% in a flex row.
   Hovered item goes to width:150% — flex distributes proportionally. */
.ad-case-studies__card {
	display: block !important;
	width: 100% !important;
	flex-basis: auto !important;
	flex-grow: 0 !important;
	flex-shrink: 1 !important;
	overflow: hidden;
	border-radius: 0.75rem;
	cursor: pointer;
	transition: width 0.45s ease;
}

.ad-case-studies__card:hover,
.ad-case-studies__card.is-focused {
	width: 150% !important;
}

.ad-case-studies__cover {
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	min-height: 28rem !important;
}

/* Override WP flow layout constraints on card children */
.ad-case-studies__card > * {
	max-width: none !important;
}

/* Replace the solid dim overlay with a bottom gradient */
.ad-case-studies__cover .wp-block-cover__background {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.25) 50%, transparent 100%) !important;
	opacity: 1 !important;
}

/* Image scale on hover */
.ad-case-studies__cover .wp-block-cover__image-background {
	transition: transform 0.5s ease;
}

.ad-case-studies__card:hover .wp-block-cover__image-background,
.ad-case-studies__card.is-focused .wp-block-cover__image-background {
	transform: scale(1.05);
}

/* Inner content — flex column, arrow absolutely positioned */
.ad-case-studies__cover .wp-block-cover__inner-container {
	display: flex !important;
	flex-direction: column;
	justify-content: flex-end;
	width: 100% !important;
	height: 100%;
	position: relative;
	padding-right: 4rem !important;
}

.ad-case-studies__title {
	font-weight: 600;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Reveal text — height-based reveal */
.ad-case-studies__reveal {
	height: 0 !important;
	overflow: hidden;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	line-height: 1.5;
	transition: height 0.4s ease;
}

.ad-case-studies__card:hover .ad-case-studies__reveal,
.ad-case-studies__card.is-focused .ad-case-studies__reveal {
	height: 3rem !important;
	padding-top: 0.5rem;
}

/* Arrow button — absolutely pinned to bottom-right */
.ad-case-studies__link {
	position: absolute !important;
	right: 0;
	bottom: 0;
	margin: 0 !important;
}

.ad-case-studies__btn .wp-block-button__link {
	width: 2.75rem !important;
	height: 2.75rem !important;
	min-width: 2.75rem;
	padding: 0 !important;
	border-radius: 50% !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	background: transparent !important;
	color: var(--wp--preset--color--secondary) !important;
	font-size: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease, border-color 0.3s ease;
}

.ad-case-studies__btn .wp-block-button__link::after {
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='10' x2='16' y2='10'/%3E%3Cpolyline points='11 5 16 10 11 15'/%3E%3C/svg%3E");
	mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='10' x2='16' y2='10'/%3E%3Cpolyline points='11 5 16 10 11 15'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
}

.ad-case-studies__card:hover .ad-case-studies__btn .wp-block-button__link,
.ad-case-studies__card.is-focused .ad-case-studies__btn .wp-block-button__link {
	transform: translateX(4px);
	border-color: rgba(255, 255, 255, 0.5) !important;
}

.ad-case-studies__btn .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

/* -----------------------------------------------
   Case Studies — Mobile
   ----------------------------------------------- */

@media (max-width: 781px) {
	.ad-case-studies__cards {
		flex-flow: column !important;
	}

	.ad-case-studies__cover {
		min-height: 22rem !important;
	}

	.ad-case-studies__card,
	.ad-case-studies__card:hover,
	.ad-case-studies__card.is-focused {
		width: 100% !important;
	}

	/* Reveal text always visible on mobile */
	.ad-case-studies__reveal {
		height: auto !important;
		overflow: visible;
		padding-top: 0.5rem;
		transition: none;
	}

	.ad-case-studies__card,
	.ad-case-studies__cover .wp-block-cover__image-background,
	.ad-case-studies__btn .wp-block-button__link {
		transition: none !important;
	}

	.ad-case-studies__card:hover .wp-block-cover__image-background {
		transform: none !important;
	}

	.ad-case-studies__card:hover .ad-case-studies__reveal {
		height: auto !important;
		padding-top: 0.5rem;
	}

	.ad-case-studies__card:hover .ad-case-studies__btn .wp-block-button__link {
		transform: none !important;
	}
}

/* -----------------------------------------------
   Case Studies — Reduced Motion
   ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ad-case-studies__card,
	.ad-case-studies__cover .wp-block-cover__image-background,
	.ad-case-studies__reveal,
	.ad-case-studies__btn .wp-block-button__link {
		transition: none;
	}
}

/* -----------------------------------------------
   Video CTA — Background Video Call-to-Action
   ----------------------------------------------- */

/* Site padding — use root padding vars, not hardcoded clamp() */
.ad-video-cta {
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}

/* Cover — relative for pause button, loading placeholder. */
.ad-video-cta__cover {
	position: relative;
	min-height: clamp(28rem, 80vh, 52rem) !important;
	background-color: var(--wp--preset--color--primary);
}

/* Filled button on dark overlay — reverse to light bg / dark text */
.ad-video-cta__cover .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
}

.ad-video-cta__cover .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	opacity: 0.85;
}

/* Outline buttons on dark overlay — invert to white for readability */
.ad-video-cta__cover .is-style-outline .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.3);
	color: var(--wp--preset--color--secondary);
}

.ad-video-cta__cover .is-style-outline .wp-block-button__link:hover {
	border-color: rgba(255, 255, 255, 0.6);
	background-color: rgba(255, 255, 255, 0.08);
}

/* Pause/play toggle — bottom-right (shape via .ad-pause-btn in global.css) */
.ad-video-cta__pause-btn {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	z-index: 2;
}

/* -----------------------------------------------
   Video CTA — Mobile
   ----------------------------------------------- */

@media (max-width: 781px) {
	.ad-video-cta__cover {
		min-height: 20rem !important;
	}
}

/* -----------------------------------------------
   Hero Full Bleed — Image Hero with Floating Card
   ----------------------------------------------- */

.ad-hero-card {
	max-width: 22rem;
	margin-left: auto;
	box-shadow: var(--ad-shadow-md);
}

.ad-hero-card__image {
	margin: 0;
}

.ad-hero-card__image img {
	display: block;
	object-fit: cover;
}

.ad-hero-card__label {
	margin: 0 !important;
}

.ad-hero-card__description {
	margin: 0 !important;
}

/* -----------------------------------------------
   Hero Full Bleed — Mobile
   ----------------------------------------------- */

@media (max-width: 781px) {
	.ad-hero-card {
		max-width: none;
		margin-left: 0;
	}
}

/* -----------------------------------------------
   Grid Hover Cards — Card Grid with Hover Tooltips
   ----------------------------------------------- */

.ad-hover-card {
	position: relative;
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.05);
	text-align: center;
	transition: background 0.2s ease;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.ad-hover-card:hover {
	background: rgba(255, 255, 255, 0.08);
}

.ad-hover-card__logo {
	margin: 0;
	max-width: 120px;
}

.ad-hover-card__logo img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.ad-hover-card__trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--xs);
	font-family: inherit;
	cursor: pointer;
	min-height: 44px;
	min-width: 44px;
}

.ad-hover-card__trigger svg {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.ad-hover-card__trigger:hover svg,
.ad-hover-card__trigger:focus-visible svg {
	transform: translateX(3px);
}

.ad-hover-card__trigger:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Tooltip */
.ad-hover-card__tooltip {
	position: absolute;
	bottom: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 280px;
	max-width: 320px;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
	border-radius: 0.75rem;
	box-shadow: var(--ad-shadow-md);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	z-index: 10;
	text-align: left;
}

/* Caret pointing down */
.ad-hover-card__tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 8px solid transparent;
	border-top-color: var(--wp--preset--color--secondary);
}

/* Active state */
.ad-hover-card.is-active .ad-hover-card__tooltip {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.ad-hover-card__quote { margin: 0; }
.ad-hover-card__name { margin: 0; }
.ad-hover-card__role { margin: 0; }

.ad-hover-card__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	margin: 0;
}

.ad-hover-card__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -----------------------------------------------
   Grid Hover Cards — Reduced Motion
   ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ad-hover-card,
	.ad-hover-card__tooltip,
	.ad-hover-card__trigger svg {
		transition: none;
	}
}

/* -----------------------------------------------
   Grid Hover Cards — Mobile
   ----------------------------------------------- */

@media (max-width: 781px) {
	.ad-hover-grid.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ad-hover-card__tooltip {
		min-width: 240px;
		max-width: 280px;
	}
}

/* -----------------------------------------------
   Card Links Image — Cards + Tall Image Section
   ----------------------------------------------- */

.ad-card-links__row {
	transition: background 0.2s ease;
}

.ad-card-links__row:hover {
	background: rgba(0, 0, 0, 0.03) !important;
}

.ad-card-links__row .wp-block-buttons {
	margin-top: 0 !important;
}

.ad-card-links__arrow .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	min-width: 44px;
	min-height: 44px;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1;
	border-radius: 50% !important;
	background: var(--wp--preset--color--primary) !important;
	color: transparent !important;
	font-size: 0;
	text-decoration: none;
	position: relative;
}

.ad-card-links__row .wp-block-heading {
	padding-top: 0.125rem;
}

.ad-card-links__arrow .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 20px;
	background: var(--wp--preset--color--secondary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ad-card-links__arrow .wp-block-button__link:hover {
	opacity: 0.85;
}

.ad-card-links__arrow .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.ad-card-links__image {
	height: 100%;
	margin: 0;
}

.ad-card-links__image img {
	height: 100%;
	object-fit: cover;
	display: block;
}

/* -----------------------------------------------
   Card Links Image — Reduced Motion
   ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ad-card-links__row {
		transition: none;
	}
}

/* -----------------------------------------------
   Card Links Image — Mobile
   ----------------------------------------------- */

@media (max-width: 781px) {
	.ad-card-links__image {
		min-height: 20rem;
	}
}

/* -----------------------------------------------
   Dual Panel Slider
   ----------------------------------------------- */

/* Track — stack slides for fade transition */
.ad-dual-slider__track {
	display: grid;
}

.ad-dual-slider__track > li {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Before JS initialises, show the first slide to prevent layout shift */
.ad-dual-slider__track:not(.is-initialised) > li:first-child {
	opacity: 1;
	visibility: visible;
}

/* Once JS adds .is-initialised, only .is-active slide is visible */
.ad-dual-slider__track.is-initialised > li.is-active {
	opacity: 1;
	visibility: visible;
}

.ad-dual-slider__avatar {
	flex-shrink: 0;
}

.ad-dual-slider__avatar img {
	object-fit: cover;
}

.ad-dual-slider__logo {
	margin: auto 0;
	text-align: center;
}

.ad-dual-slider__logo img {
	max-width: 280px;
	height: auto;
}

/* Wrapper — position context for nav overlay */
.ad-dual-slider__wrapper {
	position: relative;
}

/* Navigation arrows — positioned over bottom-center of right panel */
.ad-dual-slider__nav {
	position: absolute;
	bottom: 3.5rem;
	right: 0;
	width: 50%;
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	z-index: 2;
	pointer-events: none;
}

.ad-dual-slider__nav button {
	pointer-events: auto;
}

/* -----------------------------------------------
   Dual Panel Slider — Reduced Motion
   ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ad-dual-slider__track > li {
		transition: none;
	}
}

/* -----------------------------------------------
   Dual Panel Slider — Mobile
   ----------------------------------------------- */

@media (max-width: 781px) {
	.ad-dual-slider__quote-panel {
		min-height: auto;
	}

	.ad-dual-slider__company-panel {
		min-height: 300px !important;
	}

	.ad-dual-slider__nav {
		position: relative;
		width: auto;
		margin-top: -4.5rem;
		margin-bottom: 1.5rem;
		z-index: 2;
	}
}

/* -----------------------------------------------
   Bento Grid
   ----------------------------------------------- */

.ad-bento .is-layout-flex.is-nowrap > .is-vertical {
	min-width: 0;
	overflow: hidden;
}

.ad-bento .is-layout-flex.is-nowrap > .is-vertical > * {
	width: 100%;
	max-width: 100%;
}

@media (max-width: 781px) {
	.ad-bento .is-layout-flex.is-nowrap > .is-vertical {
		flex-basis: 100% !important;
	}

	.ad-bento-card--calm,
	.ad-bento-card--chart,
	.ad-bento-card--tags {
		min-height: auto;
	}

	.ad-bento-card--image {
		min-height: 20rem;
	}
}

.ad-bento-card--tags,
.ad-bento-card--chart {
	overflow: hidden;
}

.ad-bento-card--calm {
	min-height: 20rem;
}

.ad-bento-card--chart {
	flex-grow: 1;
	min-height: 24rem;
}

.ad-bento-card--chart > .wp-block-group {
	align-self: stretch !important;
}

.ad-bento-card--image {
	position: relative;
	min-height: 560px;
}

.ad-bento-card--image .wp-block-cover__inner-container > * + * {
	margin-top: var(--wp--preset--spacing--20);
}

/* Bento dark-background text colors.
   These hex values are contrast-verified against the primary dark bg.
   Re-verify with WAVE if the primary color changes significantly.
   #a0a0a0 on #0a0a0a = 5.1:1 — AA normal text
   #999999 on #0a0a0a = 4.7:1 — AA normal text
   #b3b3b3 on #0a0a0a = 6.3:1 — AA normal text */
.ad-bento .has-sm-font-size:not(h3):not([style*="font-weight"]) {
	color: #a0a0a0 !important;
}

.ad-bento .has-xs-font-size:not([style*="font-weight"]) {
	color: #999999 !important;
}

.ad-bento-quote {
	border-left-width: 0;
	margin: 0;
	padding: 0;
}

.ad-bento-quote p {
	color: #a0a0a0 !important;
}

.ad-bento .ad-bento-testimonial .has-xs-font-size {
	color: inherit !important;
}

.ad-bento-cta .has-xs-font-size {
	color: #999999 !important;
}

.ad-bento .ad-section-label {
	justify-content: center;
}

.ad-bento .is-style-outline .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.3);
	color: var(--wp--preset--color--secondary);
}

.ad-bento .is-style-outline .wp-block-button__link:hover {
	border-color: rgba(255, 255, 255, 0.6);
	background-color: rgba(255, 255, 255, 0.08);
}

/* -----------------------------------------------
   Bento — Chart Card
   ----------------------------------------------- */

.ad-bento-chart {
	margin-bottom: 0 !important;
	margin-left: -2rem !important;
	margin-right: -2rem !important;
	width: calc(100% + 4rem) !important;
	max-width: calc(100% + 4rem) !important;
}

.ad-bento-chart img {
	width: 100%;
	height: auto;
	display: block;
}

/* Chart line-draw animation — hidden until triggered by JS */
.ad-chart-line {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.ad-bento-card--chart.is-chart-visible .ad-chart-line--grey {
	animation: ad-chart-draw 1.2s ease-out forwards;
}

.ad-bento-card--chart.is-chart-visible .ad-chart-line--blue {
	animation: ad-chart-draw 1.4s ease-out 0.2s forwards;
}

@keyframes ad-chart-draw {
	to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.ad-chart-line {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
	}
}

/* Legend dots — colored bullet before each item */
.ad-bento-legend__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ad-bento-legend__item::before {
	content: "";
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Project-specific chart colors — update per project if chart design changes */
.ad-bento-legend__item--accent::before {
	background-color: #4A7AFF;
}

.ad-bento-legend__item--muted::before {
	background-color: rgba(255, 255, 255, 0.3);
}

/* -----------------------------------------------
   Bento — Testimonial Row (calm card)
   ----------------------------------------------- */

.ad-bento-testimonial-wrap {
	position: relative;
	align-self: center !important;
	margin-top: auto;
	margin-bottom: auto;
}

/* Fallback — catches "reset" in editor */
.ad-bento-testimonial {
	position: relative;
	z-index: 2;
	background-color: var(--wp--preset--color--secondary);
	padding: 0.75rem 1rem;
}

/* Layered card effect — stacked cards behind testimonial */
.ad-bento-testimonial-wrap::before,
.ad-bento-testimonial-wrap::after {
	content: "";
	position: absolute;
	left: 50%;
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.12);
}

.ad-bento-testimonial-wrap::before {
	bottom: -6px;
	width: 85%;
	height: 100%;
	transform: translateX(-50%);
	z-index: 1;
}

.ad-bento-testimonial-wrap::after {
	bottom: -12px;
	width: 70%;
	height: 100%;
	transform: translateX(-50%);
	z-index: 0;
}

/* -----------------------------------------------
   Bento — Tag Pill Ticker
   ----------------------------------------------- */

.ad-bento-tags {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	overflow: hidden;
	padding-bottom: 1.5rem;
}

.ad-bento-ticker {
	overflow: hidden;
}

.ad-bento-ticker__track {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
	width: max-content;
}

.ad-bento-ticker.is-animated .ad-bento-ticker__track {
	animation: ad-pill-scroll var(--ad-pill-duration, 25s) linear infinite;
}

.ad-bento-ticker--right.is-animated .ad-bento-ticker__track {
	animation-name: ad-pill-scroll-reverse;
}

@keyframes ad-pill-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(calc(var(--ad-pill-width) * -1)); }
}

@keyframes ad-pill-scroll-reverse {
	from { transform: translateX(calc(var(--ad-pill-width) * -1)); }
	to { transform: translateX(0); }
}

.ad-bento-pill {
	padding: 0.4rem 0.85rem;
	border-radius: 2rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--wp--preset--font-size--xs);
	flex-shrink: 0;
}

.ad-bento-pill__icon {
	margin: 0 !important;
	line-height: 0;
}

.ad-bento-pill__icon img {
	width: 14px;
	height: 14px;
	opacity: 0.7;
	filter: brightness(0) invert(1);
	display: block;
}

.ad-bento-pill__text {
	margin: 0;
	white-space: nowrap;
	/* #b3b3b3 on #0a0a0a = 6.3:1 — AA */
	color: #b3b3b3 !important;
}

/* Pause/play button — bottom-right of tags card */
.ad-bento-tags__pause-btn {
	position: absolute;
	bottom: 0.75rem;
	right: 0.75rem;
	z-index: 2;
}

.ad-bento-card--tags {
	position: relative;
}

@media (prefers-reduced-motion: reduce) {
	.ad-bento-ticker.is-animated .ad-bento-ticker__track {
		animation: none;
	}
}

/* -----------------------------------------------
   Bento — CTA Bar
   ----------------------------------------------- */

/* Uses primary color as dark background — update if project primary is light */
.ad-bento-cta {
	background-color: var(--wp--preset--color--primary);
}

.ad-bento-cta__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.08);
	color: var(--wp--preset--color--secondary);
	flex-shrink: 0;
}

/* -----------------------------------------------
   Bento — Mobile
   ----------------------------------------------- */

.ad-bento-card--image .ad-pause-btn {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	z-index: 2;
}

/* -----------------------------------------------
   Project-Specific Styles
   Add below this line. Do not modify base theme patterns above.
   ----------------------------------------------- */

/* Shared rainbow gradient bar — used by hero info bar + footer */
.ad-rainbow-bar {
	position: relative;
}
.ad-rainbow-bar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 10px;
	background: linear-gradient(
		to right,
		#e40303 0%,
		#e40303 16.66%,
		#ff8c00 16.66%,
		#ff8c00 33.33%,
		#ffed00 33.33%,
		#ffed00 50%,
		#008026 50%,
		#008026 66.66%,
		#004dff 66.66%,
		#004dff 83.33%,
		#750787 83.33%,
		#750787 100%
	);
	z-index: 1;
}

/* -----------------------------------------------
   Ivy Home Hero
   ----------------------------------------------- */

/* WAVE contrast fallback — WAVE can't read customGradient (background-image).
   This gives it a solid background-color to measure white text against. */
.ad-home-hero__cover {
	background-color: rgba(10, 10, 10, 0.8);
}

.ad-hero-full-bleed__cover {
	background-color: rgb(10, 10, 10);
}

/* Hero eyebrow — inherits global .ad-section-label styles,
   line color overridden to white for dark background. */
.ad-home-hero__kicker.ad-section-label--line::before {
	background-color: var(--wp--preset--color--base);
}

/* Outline button — white border/text on dark cover background */
.ad-home-hero .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--wp--preset--color--base);
}

/* Override WP's !important on .has-base-color for hover state */
.ad-home-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
	color: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--muted);
}

/* Info bar — overlap hero */
.ad-home-hero__info {
	position: relative;
	z-index: 1;
	margin-top: -3.5rem;
}

/* Info bar — icon accent color (SVGs use currentColor, renders black in <img>) */
.ad-home-hero__info .wp-block-image img {
	filter: brightness(0) saturate(100%) invert(22%) sepia(95%) saturate(2878%) hue-rotate(349deg) brightness(82%) contrast(96%);
}

/* Info bar — link styles */
.ad-home-hero__info-value a {
	color: var(--wp--preset--color--body);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}

.ad-home-hero__info-value a:hover {
	color: var(--wp--preset--color--accent);
}

.ad-home-hero__info-value a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* -----------------------------------------------
   Ivy Home Hero — Desktop info bar dividers
   ----------------------------------------------- */

@media (min-width: 782px) {
	.ad-home-hero__info-col + .ad-home-hero__info-col {
		border-left: 1px solid var(--wp--preset--color--gray-light);
		padding-left: var(--wp--preset--spacing--50);
	}
}

/* -----------------------------------------------
   Ivy Home Hero — Mobile
   ----------------------------------------------- */

@media (max-width: 781px) {
	.ad-home-hero__info-col + .ad-home-hero__info-col {
		padding-top: var(--wp--preset--spacing--40);
		border-top: 1px solid var(--wp--preset--color--gray-light);
	}

	/* UCC badge — left-align on mobile when columns stack */
	.ad-home-hero__cover .wp-block-columns > .wp-block-column:last-child {
		align-items: flex-start;
	}
}


/* -----------------------------------------------
   News & Events
   ----------------------------------------------- */

/* Event date with calendar icon */
.ad-event-date {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.75rem !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-top: 1.5rem;
	margin-bottom: 0;
}

.ad-event-date svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

/* Taxonomy badge — bordered pill */
.ad-news-card__badge {
	margin-top: 0.5rem;
}

.ad-news-card__badge span {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	background-color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--wp--preset--color--primary);
}

/* Card image */
.ad-news-card__image {
	margin-bottom: 0;
	overflow: hidden;
}

.ad-news-card__image img {
	aspect-ratio: 16/9;
	object-fit: cover;
	width: 100%;
	transition: transform 0.4s ease;
}

.ad-news-events__grid > li:hover .ad-news-card__image img {
	transform: scale(1.05);
}

/* Card title */
.ad-news-card__title {
	margin-top: 0.75rem !important;
}

.ad-news-card__title a {
	text-decoration: none;
	color: inherit;
	position: static;
	display: inline;
	background-image: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent));
	background-size: 0% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.3s ease;
}

.ad-news-events__grid > li:hover .ad-news-card__title a {
	background-size: 100% 2px;
}

/* When no event date is shown, give the title the same top space */
.ad-news-card__image + .ad-news-card__title {
	margin-top: 1.5rem !important;
}

/* Responsive grid gap — clamp scales between breakpoints */
.ad-news-events__grid {
	gap: clamp(1.5rem, 3vw, 3rem) !important;
}

/* Stretched card link — title link covers entire card */
.ad-news-events__grid > li {
	position: relative;
	cursor: pointer;
}

.ad-news-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Mobile: horizontal card layout */
@media (max-width: 781px) {
	.ad-news-events__grid {
		grid-template-columns: 1fr !important;
		gap: 1.5rem !important;
	}

	.ad-news-events__grid > li {
		position: relative;
		padding-left: 8.5rem;
		min-height: 7.5rem;
	}

	.ad-news-events__grid > li .ad-news-card__image {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 7.5rem;
	}

	.ad-news-events__grid > li .ad-news-card__image img {
		aspect-ratio: 1/1;
		height: auto;
	}

	.ad-news-events__grid > li .ad-event-date {
		margin-top: 0;
	}

	.ad-news-events__grid > li .ad-news-card__title {
		margin-top: 0.5rem !important;
		margin-bottom: 0.625rem !important;
	}

	.ad-news-events__grid > li .ad-news-card__badge {
		margin-top: 0;
	}

	.ad-news-events__grid > li .ad-news-card__image + .ad-news-card__title {
		margin-top: 0 !important;
	}
}


/* -----------------------------------------------
   Post Filters — News & Events taxonomy toggles
   ----------------------------------------------- */

.ad-post-filters {
	gap: 0.5rem;
}

.ad-post-filters__btn {
	display: inline-block;
	padding: 0.5rem 1.25rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	text-decoration: none;
	color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: 2rem;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.ad-post-filters__btn:hover {
	background-color: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--gray-light);
}

.ad-post-filters__btn--active {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.ad-post-filters__btn--active:hover {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* AJAX filter transitions */
.ad-news-events {
	transition: opacity 0.25s ease;
}

.ad-news-events.is-loading {
	opacity: 0;
}

/* Staggered fade-up entrance for each card */
.ad-card-enter {
	opacity: 0;
	transform: translateY(1rem);
}

.ad-card-enter--active {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
	.ad-card-enter {
		transform: none;
	}
	.ad-card-enter--active {
		transition: none;
	}
}


/* -----------------------------------------------
   Featured Card — News & Events page hero card
   ----------------------------------------------- */

.ad-featured-card {
	display: flex;
	gap: clamp(1.5rem, 4vw, 3rem);
	position: relative;
}

.ad-featured-card__image {
	flex: 0 0 55%;
	min-width: 0;
	overflow: hidden;
}

.ad-featured-card__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.ad-featured-card:hover .ad-featured-card__image img {
	transform: scale(1.05);
}

.ad-featured-card__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.75rem;
}

.ad-featured-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xxxl);
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--primary);
	margin: 0;
}

.ad-featured-card__title a {
	text-decoration: none;
	color: inherit;
	display: inline;
	background-image: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent));
	background-size: 0% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.3s ease;
}

.ad-featured-card:hover .ad-featured-card__title a {
	background-size: 100% 2px;
}

.ad-featured-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ad-featured-card__excerpt {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.6;
	margin: 0;
}

.ad-featured-card .ad-event-date {
	margin-top: 0;
}

.ad-featured-card .ad-news-card__badge {
	margin-top: 0;
}

@media (max-width: 781px) {
	.ad-featured-card {
		flex-direction: column;
	}

	.ad-featured-card__image {
		flex: none;
	}

	.ad-featured-post {
		margin-bottom: var(--wp--preset--spacing--50) !important;
	}

	.ad-news-events-page .ad-featured-post {
		margin-top: calc(-1 * var(--wp--preset--spacing--50));
	}
}


/* -----------------------------------------------
   Pagination — News & Events page
   ----------------------------------------------- */

.ad-pagination {
	gap: 0.5rem;
}

.ad-pagination .wp-block-query-pagination-numbers {
	display: flex;
	gap: 0.25rem;
}

.ad-pagination a,
.ad-pagination span.current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	text-decoration: none;
	color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--muted);
	transition: background-color 0.2s, border-color 0.2s;
}

.ad-pagination a:hover {
	background-color: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--gray-light);
}

.ad-pagination span.current {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}


/* -----------------------------------------------
   See All Link — refined bottom-border button
   ----------------------------------------------- */

.ad-see-all a {
	display: inline-block;
	padding: 0.25rem 0;
	border-bottom: 1.5px solid var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	text-decoration: none;
	color: var(--wp--preset--color--primary);
}


/* -----------------------------------------------
   Photo Gallery
   ----------------------------------------------- */

/* Fixed-height grid so flex items fill rather than grow to natural size */
.ad-photo-gallery__grid {
	height: 40rem;
}

/* Both columns stretch to full grid height, items fill width */
.ad-photo-gallery__grid > .wp-block-group {
	height: 100%;
	align-items: stretch !important;
}

/* Left column: both images share height equally */
.ad-photo-gallery__grid > .wp-block-group:first-child .ad-photo-gallery__item {
	flex: 1 1 0;
	min-height: 0;
}

/* Right column: single image fills full height */
.ad-photo-gallery__grid > .wp-block-group:last-child .ad-photo-gallery__item {
	flex: 1 1 0;
	min-height: 0;
}

.ad-photo-gallery__item {
	position: relative;
	overflow: hidden;
	border-radius: 0.5rem;
}

.ad-photo-gallery__item img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.ad-photo-gallery__item:hover img {
	transform: scale(1.03);
}

@media (max-width: 781px) {
	.ad-photo-gallery__grid {
		height: auto;
		flex-wrap: wrap !important;
	}
	.ad-photo-gallery__grid > .wp-block-group {
		height: auto;
		flex-basis: 100% !important;
	}
	.ad-photo-gallery__grid > .wp-block-group .ad-photo-gallery__item {
		flex: 0 0 auto !important;
		width: 100%;
		aspect-ratio: 16 / 9;
	}
}


/* -----------------------------------------------
   Lightbox (reusable — .ad-has-lightbox)
   ----------------------------------------------- */

.ad-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(0, 0, 0, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}

.ad-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.ad-lightbox__img {
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
	border-radius: 0.5rem;
}

.ad-lightbox__close {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ad-lightbox__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.ad-photo-gallery__item img {
		transition: none;
	}
	.ad-lightbox {
		transition: none;
	}
}

/* -----------------------------------------------
   Explore More Section
   ----------------------------------------------- */

/* Link items — border dividers */
.ad-explore__link {
	border-bottom: 1px solid var(--wp--preset--color--muted);
	position: relative;
}

.ad-explore__link::before {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.ad-explore__link:hover::before,
.ad-explore__link:focus-within::before {
	transform: scaleX(1);
}

.ad-explore__link:last-child {
	border-bottom: none;
}

.ad-explore__link:last-child::before {
	display: none;
}

.ad-explore__link a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 0;
	font-weight: 400;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	transition: color 0.2s ease;
}

.ad-explore__link a::after {
	content: "\203A";
	font-size: 0.75em;
	color: var(--wp--preset--color--gray-mid);
	flex-shrink: 0;
	margin-left: 1rem;
	transition: transform 0.2s ease, color 0.2s ease;
}

.ad-explore__link a:hover,
.ad-explore__link a:focus-visible {
	color: var(--wp--preset--color--accent);
}

.ad-explore__link a:hover::after,
.ad-explore__link a:focus-visible::after {
	transform: translateX(4px);
	color: var(--wp--preset--color--accent);
}

.ad-explore__link a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
	border-radius: 2px;
}

/* Mobile — reorder and tighten */
@media (max-width: 781px) {
	.ad-explore__grid {
		flex-direction: column-reverse;
	}
	.ad-explore__link a {
		padding: 1rem 0;
	}
}

/* -----------------------------------------------
   About Hero — breakout image
   ----------------------------------------------- */
.ad-about-hero {
	--_content-width: var(--wp--style--global--content-size, 1440px);
	--_root-pad: var(--wp--style--root--padding-left);
	padding-left: max(var(--_root-pad), calc((100% - var(--_content-width)) / 2 + var(--_root-pad)));
}

.ad-about-hero__content-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media (min-width: 782px) {
	.ad-about-hero__image-col {
		margin-right: calc(-1 * max(var(--_root-pad), calc((100% - var(--_content-width)) / 2 + var(--_root-pad))));
	}
}

@media (max-width: 781px) {
	.ad-about-hero {
		padding-left: var(--wp--style--root--padding-left);
		padding-right: var(--wp--style--root--padding-right);
	}
	.ad-about-hero__image-col {
		margin-right: 0;
	}
	.ad-about-hero__cover {
		min-height: 20rem !important;
	}
}

/* UCC badge in hero */
.ad-about-hero__badge {
	max-width: 240px;
}
.ad-about-hero__badge-label {
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* -----------------------------------------------
   About — Content Sections (History, More About)
   ----------------------------------------------- */
.ad-about-content__text-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* -----------------------------------------------
   Open and Affirming Section
   — Uses shared .ad-rainbow-bar for the stripe
   ----------------------------------------------- */


/* ==============================================
   SINGLE POST
   ============================================== */

/* --- Header --- */
.ad-single__header .wp-block-post-title {
	line-height: 1.1;
}

/* --- Meta row --- */
.ad-single__meta {
	color: var(--wp--preset--color--body);
}

.ad-single__meta .wp-block-post-date,
.ad-single__meta .wp-block-post-author-name {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--body);
}

/* Hide first dot when event date is empty (News posts) */
.ad-single__meta .ad-event-date:empty {
	display: none;
}

.ad-single__meta .ad-event-date:empty + .ad-single__meta-dot {
	display: none;
}

/* Hide publish date + its dot when event date IS present (avoid confusion) */
.ad-single__meta--has-event-date .ad-single__date {
	display: none;
}

.ad-single__meta--has-event-date .ad-single__meta-dot--date {
	display: none;
}

/* Hide author dot when no author exists */
.ad-single__meta--no-author .ad-single__meta-dot--author {
	display: none;
}

/* --- Featured image --- */
.ad-single__image-section .wp-block-post-featured-image {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.ad-single__image-section .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* --- Content area --- */

/* Restore natural block spacing inside post content.
   theme.json blockGap:0 strips margins globally for pattern control,
   but post content needs vertical rhythm between paragraphs/headings/lists. */
.single-post .entry-content > * + * {
	margin-block-start: var(--wp--preset--spacing--40, 1.5rem);
}

.single-post .entry-content > * + h2 {
	margin-block-start: var(--wp--preset--spacing--60, 2.5rem);
}

.single-post .entry-content > * + h3 {
	margin-block-start: var(--wp--preset--spacing--50, 2rem);
}

/* --- Blockquote --- */
.entry-content .wp-block-quote {
	border-left: 3px solid var(--wp--preset--color--accent);
	margin-inline: 0;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--lg);
	font-style: italic;
	color: var(--wp--preset--color--primary);
}

.entry-content .wp-block-quote p:last-of-type {
	margin-bottom: 0;
}

.entry-content .wp-block-quote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--sm);
	font-style: normal;
	color: var(--wp--preset--color--body);
}

/* --- Mobile --- */
@media (max-width: 781px) {
	.ad-single__header .wp-block-post-title {
		font-size: var(--wp--preset--font-size--xxxl);
	}

	.ad-single__meta {
		justify-content: center;
	}

}

/* -----------------------------------------------
   Archive & Search Header
   ----------------------------------------------- */

/* Overlap bottom edge into the grid section below */
.ad-archive-header {
	margin-bottom: -2rem;
}

/* -----------------------------------------------
   404 Page
   ----------------------------------------------- */

.ad-404 .wp-block-search {
	max-width: 500px;
	margin-inline: auto;
}

/* -----------------------------------------------
   Search Form (shared across 404 & search no-results)
   ----------------------------------------------- */

.ad-search-form .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 0;
	overflow: hidden;
}

.ad-search-form .wp-block-search__input {
	border: none;
	padding: 1rem 1.25rem;
	font-size: var(--wp--preset--font-size--sm);
	font-family: var(--wp--preset--font-family--body);
}

.ad-search-form .wp-block-search__input:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
}

.ad-search-form .wp-block-search__button {
	border: none;
	border-radius: 0;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 1rem 2rem;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.ad-search-form .wp-block-search__button:hover {
	background-color: var(--wp--preset--color--accent);
}

.ad-search-form .wp-block-search__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
}

/* ──────────────────────────────────────────────
   About — Mission icons
   ────────────────────────────────────────────── */

.ad-about-mission__icon {
	margin-bottom: 0.5rem;
}

.ad-about-mission__icon img {
	width: 40px;
	height: 40px;
}

/* ──────────────────────────────────────────────
   Content/image columns — mobile image below
   ────────────────────────────────────────────── */

@media (max-width: 781px) {
	.ad-image-first-col > .wp-block-columns {
		flex-direction: column-reverse;
	}
}

/* ──────────────────────────────────────────────
   Calendar embed — responsive iframe
   ────────────────────────────────────────────── */

.ad-calendar-embed iframe {
	width: 100%;
	min-height: 600px;
	border: 0;
}

@media (max-width: 781px) {
	.ad-calendar-embed iframe {
		min-height: 400px;
	}
}

/* ──────────────────────────────────────────────
   FAQ — core/details accordion
   ────────────────────────────────────────────── */

.ad-faq__item {
	border-bottom: 1px solid var(--wp--preset--color--muted);
	padding: 1.25rem 0;
}


.ad-faq__item summary {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.25rem 0;
	transition: color 0.2s ease;
}

.ad-faq__item summary::-webkit-details-marker {
	display: none;
}

.ad-faq__item summary::after {
	content: "+";
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1;
	flex-shrink: 0;
	color: var(--wp--preset--color--body);
	transition: transform 0.2s ease;
}

.ad-faq__item[open] summary::after {
	content: "\2212";
}

.ad-faq__item summary:hover {
	color: var(--wp--preset--color--accent);
}

.ad-faq__item summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.ad-faq__item > .wp-block-details__content,
.ad-faq__item > p,
.ad-faq__item > .wp-block-paragraph {
	padding-top: 0.75rem;
	color: var(--wp--preset--color--body);
}