/**
 * AI Design Assistant -- generated page design layer.
 *
 * This stylesheet is deliberately colour-blind. Every colour on a generated
 * page is written into the block markup itself as a core block support, so the
 * page is already correct with this file absent. What lives here is the layer
 * core block supports cannot express: ornament, rhythm, asymmetry and motion.
 *
 * Because it never names a colour, it derives everything it needs from
 * `currentColor` and `color-mix()`. A card border on a white band and the same
 * card border on a deep indigo band both resolve from the text colour the block
 * already carries, so one rule works on every palette the model can invent, and
 * removing the plugin degrades the page to plain -- never to broken.
 *
 * Everything is scoped under .aida-band or .aida-page so it cannot leak into
 * the theme's own markup.
 */

/* ==========================================================================
   Foundations
   ========================================================================== */

.aida-band {
	position: relative;
	isolation: isolate;
}

.aida-band > * {
	position: relative;
	z-index: 1;
}

/* Wide content -- tables, logo rows -- scrolls inside its own box rather than
   pushing the page sideways on a phone. */
.aida-band .aida-scroll-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.aida-eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
}

/* ==========================================================================
   Ornament
   ========================================================================== */

/* A soft radial wash behind a dark band. Two off-centre lobes read as depth
   without ever becoming a "gradient background" cliche. */
.aida-band.aida-m-mesh::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(60% 80% at 15% 0%, color-mix(in srgb, currentColor 13%, transparent), transparent 70%),
		radial-gradient(50% 70% at 95% 100%, color-mix(in srgb, currentColor 10%, transparent), transparent 65%);
}

/* Fine paper grain. Kept as an inline SVG so it costs no request. */
.aida-band.aida-m-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.035;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* A hairline rule pinned to the top of a band, fading out to each side. */
.aida-band.aida-m-rule-top::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	z-index: 0;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, currentColor 22%, transparent) 20%, color-mix(in srgb, currentColor 22%, transparent) 80%, transparent);
}

/* Drifting ambient shapes, from the Kinetic direction. Purely decorative and
   entirely inert: no layout impact, no pointer events, no content. */
.aida-band.aida-m-ambient {
	overflow: hidden;
}

.aida-band.aida-m-ambient::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: -6vw;
	right: -6vw;
	width: 34vw;
	height: 34vw;
	max-width: 460px;
	max-height: 460px;
	pointer-events: none;
	border-radius: 58% 42% 47% 53% / 45% 53% 47% 55%;
	background: color-mix(in srgb, currentColor 5%, transparent);
	animation: aida-drift 26s ease-in-out infinite alternate;
}

@keyframes aida-drift {
	from { transform: translate3d(0, 0, 0) rotate(0deg); }
	to   { transform: translate3d(-3vw, 4vh, 0) rotate(24deg); }
}

/* ==========================================================================
   Typography motifs
   ========================================================================== */

/* The accent word in a headline is a <mark>, because that is how core's own
   inline text-colour format serialises. Its colour is carried by the block, but
   the browser's default yellow highlight has to be cancelled here as well as
   inline -- kses can strip an inline background on a filtered save, and a
   headline word in a yellow box is a very visible way to fail. */
.aida-band :is(h1, h2, h3, p, li) mark {
	background-color: transparent;
}

/* The single italic accent word in a Kinetic headline. The colour comes from
   the block itself; this only handles the shape of it. */
.aida-band.aida-m-italic-accent h1 em,
.aida-band.aida-m-italic-accent h2 em {
	font-style: italic;
	font-weight: inherit;
}

.aida-band.aida-m-oversize h1 {
	text-wrap: balance;
}

.aida-band.aida-m-oversize h2 {
	text-wrap: balance;
}

/* Signal's monospace eyebrow gets a leading rule. Its case and tracking are set
   by the block itself, not here: block supports write those inline, and an
   inline declaration wins over anything this file could say. */
.aida-band.aida-m-mono-eyebrow .aida-eyebrow {
	padding-left: 1.75rem;
}

.aida-band.aida-m-mono-eyebrow .aida-eyebrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 1.15rem;
	height: 1px;
	background: currentColor;
	opacity: 0.55;
}

.aida-band.aida-m-mono-eyebrow .aida-eyebrow {
	position: relative;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.aida-card {
	height: 100%;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.32, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Hairline: a flat card that reads as a drawn box, not an object. */
.aida-band.aida-m-hairline .aida-card {
	box-shadow: none;
}

.aida-band.aida-m-hairline .aida-card:hover {
	border-color: color-mix(in srgb, currentColor 30%, transparent);
}

/* Tint: the palest wash of the band's own text colour. */
.aida-band.aida-m-tint-cards .aida-card {
	background-color: color-mix(in srgb, currentColor 4%, transparent) !important;
}

/* Lift: the one direction where a shadow is allowed. */
.aida-band.aida-m-lift .aida-card {
	box-shadow: 0 1px 2px color-mix(in srgb, currentColor 7%, transparent),
	            0 8px 24px -12px color-mix(in srgb, currentColor 18%, transparent);
}

.aida-band.aida-m-lift .aida-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px color-mix(in srgb, currentColor 8%, transparent),
	            0 18px 40px -16px color-mix(in srgb, currentColor 26%, transparent);
}

/* The pill label above a badge card's name. */
.aida-badge {
	display: inline-block;
	padding: 0.28em 0.85em;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	line-height: 1.5;
	border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
	background: color-mix(in srgb, currentColor 7%, transparent);
}

/* Decorative category pills, used as a section eyebrow row. */
.aida-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}

.aida-pills li {
	padding: 0.45em 1.05em;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

/* The leading pill reads as the selected one. It cannot invert to the band
   colour: this file never learns what the background is, so an inverted text
   colour would be a guess, and the wrong guess is invisible text. A heavier
   fill and a stronger edge say "selected" without needing to know. */
.aida-pills li:first-child {
	background: color-mix(in srgb, currentColor 10%, transparent);
	border-color: color-mix(in srgb, currentColor 45%, transparent);
	font-weight: 600;
}

/* ==========================================================================
   Bento grid
   ========================================================================== */

.aida-bento {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

.aida-bento > * {
	grid-column: span 2;
	margin: 0;
}

.aida-bento > .aida-bento--wide {
	grid-column: span 4;
}

.aida-bento > .aida-bento--full {
	grid-column: span 6;
}

.aida-bento > .aida-bento--half {
	grid-column: span 3;
}

@media (max-width: 900px) {
	.aida-bento {
		grid-template-columns: repeat(2, 1fr);
	}
	.aida-bento > *,
	.aida-bento > .aida-bento--half {
		grid-column: span 1;
	}
	.aida-bento > .aida-bento--wide,
	.aida-bento > .aida-bento--full {
		grid-column: span 2;
	}
}

@media (max-width: 560px) {
	.aida-bento {
		grid-template-columns: 1fr;
	}
	.aida-bento > *,
	.aida-bento > .aida-bento--half,
	.aida-bento > .aida-bento--wide,
	.aida-bento > .aida-bento--full {
		grid-column: span 1;
	}
}

/* ==========================================================================
   Comparison
   ========================================================================== */

.aida-compare {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	font-size: 1rem;
}

.aida-compare th,
.aida-compare td {
	padding: 1rem 1.15rem;
	border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
	vertical-align: top;
}

.aida-compare thead th {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.7;
	border-bottom-width: 2px;
}

.aida-compare tbody th {
	font-weight: 600;
	width: 34%;
}

/* Column two is the status quo, column three is this business. They are
   addressed by position because core/table sources its cells from the DOM and
   would drop any class we put on a <td>. */
.aida-compare tbody td:last-child,
.aida-compare thead th:last-child {
	background: color-mix(in srgb, currentColor 4%, transparent);
	font-weight: 500;
}

.aida-compare tbody td:first-of-type {
	opacity: 0.62;
}

.aida-compare tr:last-child th,
.aida-compare tr:last-child td {
	border-bottom: 0;
}

@media (max-width: 700px) {
	.aida-compare {
		min-width: 34rem;
	}
}

/* ==========================================================================
   Timeline
   ========================================================================== */

.aida-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.aida-timeline::before {
	content: "";
	position: absolute;
	left: 1.05rem;
	top: 0.9rem;
	bottom: 0.9rem;
	width: 1px;
	background: color-mix(in srgb, currentColor 18%, transparent);
}

.aida-timeline > li {
	position: relative;
	padding: 0 0 2.25rem 3.5rem;
	margin: 0;
}

.aida-timeline > li:last-child {
	padding-bottom: 0;
}

.aida-timeline > li::before {
	content: counter(list-item);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.1rem;
	height: 2.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
	background: color-mix(in srgb, currentColor 6%, transparent);
}

.aida-timeline > li > strong {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

/* ==========================================================================
   Logo wall / marquee
   ========================================================================== */

.aida-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.aida-logos li {
	font-size: clamp(1rem, 1.6vw, 1.35rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	opacity: 0.55;
	transition: opacity 0.2s ease;
	margin: 0;
}

.aida-logos li:hover {
	opacity: 0.9;
}

.aida-marquee {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.aida-marquee .aida-logos {
	flex-wrap: nowrap;
	justify-content: flex-start;
	width: max-content;
	animation: aida-marquee 38s linear infinite;
}

.aida-marquee:hover .aida-logos {
	animation-play-state: paused;
}

@keyframes aida-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
   Statistics
   ========================================================================== */

.aida-stat {
	display: block;
	font-variant-numeric: tabular-nums;
	line-height: 0.95;
	letter-spacing: -0.03em;
}

.aida-stat__label {
	display: block;
	opacity: 0.72;
	line-height: 1.35;
}

/* A dense grid of six or more numbers, from the Signal direction. */
/* Wide enough that six statistics land as two rows of three rather than five
   across with a single orphan underneath, and that a specific label -- which is
   the kind worth writing -- gets two or three lines instead of five. */
.aida-stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
	gap: clamp(1.5rem, 3vw, 2.75rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.aida-stat-grid > li {
	margin: 0;
	padding-top: 1.15rem;
	line-height: 1.35;
	border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

/* The number is the first <strong> in the item; the label is the text after
   the <br>. Styled by position for the same reason the comparison table is:
   classes inside a list item's rich text are not guaranteed to survive an edit. */
.aida-stat-grid > li > strong {
	display: block;
	font-size: clamp(2rem, 3.4vw, 2.9rem);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	margin-bottom: 0.5rem;
}

.aida-stat-grid > li > br {
	display: none;
}

/* ==========================================================================
   Accordion
   ========================================================================== */

.aida-band details.aida-faq {
	padding: 0.35rem 0;
	border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

/* The vertical padding is load-bearing, not decoration: a bare <summary> line
   is about 26px tall, and WCAG 2.5.8 wants a 44px target. */
.aida-band details.aida-faq > summary {
	cursor: pointer;
	list-style: none;
	position: relative;
	padding: 0.6rem 2.5rem 0.6rem 0;
	min-height: 44px;
	display: flex;
	align-items: center;
}

.aida-band details.aida-faq > summary::-webkit-details-marker {
	display: none;
}

.aida-band details.aida-faq > summary::after {
	content: "";
	position: absolute;
	right: 0.5rem;
	top: 50%;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	opacity: 0.5;
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.2s ease;
}

.aida-band details.aida-faq[open] > summary::after {
	transform: translateY(-30%) rotate(-135deg);
}

/* ==========================================================================
   Media
   ========================================================================== */

.aida-band .aida-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aida-band .aida-shot--tall img {
	aspect-ratio: 3 / 4;
}

.aida-band .aida-shot--wide img {
	aspect-ratio: 16 / 9;
}

.aida-band .aida-shot--square img {
	aspect-ratio: 1 / 1;
}

/* ==========================================================================
   Motion
   ========================================================================== */

/* Scroll reveal. The `is-ready` class is added by JavaScript, so a page with
   JS disabled or blocked shows everything immediately rather than showing
   nothing -- the failure mode has to be visible content. */
.aida-page.is-ready .aida-reveal {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition: opacity 0.6s cubic-bezier(0.16, 1, 0.32, 1), transform 0.6s cubic-bezier(0.16, 1, 0.32, 1);
	will-change: opacity, transform;
}

.aida-page.is-ready .aida-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* A reveal inside a reveal is redundant: the outer card already animates, and
   animating its contents on their own timers reads as jitter. */
.aida-page.is-ready .aida-reveal .aida-reveal {
	opacity: 1;
	transform: none;
	transition: none;
}

/* Content inside a closed <details> is display:none, so an observer watching it
   never fires and it would stay at opacity 0 after the reader opened it. This
   is the one place the reveal must be switched off outright. */
.aida-page.is-ready details .aida-reveal {
	opacity: 1;
	transform: none;
	transition: none;
}

/* Stagger across a row so a grid does not arrive as one slab. The delay sits on
   the column, because each card is an only child of its own column. */
.aida-page.is-ready .wp-block-column:nth-child(2) .aida-reveal { transition-delay: 0.07s; }
.aida-page.is-ready .wp-block-column:nth-child(3) .aida-reveal { transition-delay: 0.14s; }
.aida-page.is-ready .wp-block-column:nth-child(4) .aida-reveal { transition-delay: 0.21s; }

.aida-page.is-ready .aida-bento > *:nth-child(2) { transition-delay: 0.07s; }
.aida-page.is-ready .aida-bento > *:nth-child(3) { transition-delay: 0.14s; }
.aida-page.is-ready .aida-bento > *:nth-child(4) { transition-delay: 0.21s; }
.aida-page.is-ready .aida-bento > *:nth-child(5) { transition-delay: 0.28s; }

@media (prefers-reduced-motion: reduce) {
	.aida-page.is-ready .aida-reveal,
	.aida-page.is-ready .aida-reveal.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.aida-band.aida-m-ambient::after,
	.aida-marquee .aida-logos {
		animation: none;
	}

	.aida-card,
	.aida-band.aida-m-lift .aida-card:hover {
		transition: none;
		transform: none;
	}
}

/* ==========================================================================
   Progressive enhancement guard
   ========================================================================== */

/* Everything above leans on color-mix(). Browsers without it (pre-2023) simply
   skip those declarations, which leaves the block-support colours in place --
   the page stays correct, just plainer. The two rules below make sure the
   fallback is never a *worse* result than no stylesheet at all. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.aida-badge,
	.aida-pills li,
	.aida-timeline > li::before {
		border-color: currentColor;
		opacity: 0.85;
	}

	.aida-compare th,
	.aida-compare td,
	.aida-stat-grid > li,
	.aida-band details.aida-faq {
		border-color: currentColor;
	}
}