/* ============================================================================
   EUX Blocks — FAQs (themed section + animated accordion)
   ----------------------------------------------------------------------------
   Themed two-column FAQ section. Inherits the brand tokens from tokens.css
   and the entrance-reveal system from shared.css. The accordion expand /
   collapse animation uses a `max-height` pattern driven by JS measurement
   (see initFaqs() in frontend.js) — see motion-and-reveal.md "What NOT to
   do" for why we never animate `height` directly. v0.35.0/v0.35.1 used
   `grid-template-rows: 0fr -> 1fr` but that property has a browser bug
   where the first transition after page load fails to animate; v0.35.2
   switched to JS-measured max-height which is reliable across browsers.

   Three theme variants — cream (default), light, dark. The theme modifier
   class lives on the outer .eux-block--faqs--<theme> wrapper and cascades
   into the cards via descendant selectors.

   Motion follows the ux-motion principles for SaaS/productivity products:
   "efficient, minimal, informative · standard ease-out · 150-250ms ·
   clarity". The accordion expand sits at 340ms with an easeOutCubic curve
   (immediate response on click, gentle settle), the chevron rotates at the
   same timing for visual unity, hover state at 200ms. All within the
   project's motion-token set so the FAQ feels consistent with the rest
   of the service page.
   ============================================================================ */

/* ==========================================================================
   1. Section shell — outer wrapper + themed backgrounds
   ========================================================================== */
.eux-block--faqs {
	/* Use the standard section padding shared across themed sections. */
	padding-block: 96px;
	position: relative;
}
@media (max-width: 720px) {
	.eux-block--faqs { padding-block: 64px; }
}

.eux-block--faqs.eux-block--faqs--cream { background: var(--eux-cream-50); }
.eux-block--faqs.eux-block--faqs--light { background: var(--eux-white); }
.eux-block--faqs.eux-block--faqs--dark  { background: #0a0a0a; color: #FFFFFF; }

/* ==========================================================================
   2. Section header (eyebrow + title + sub)
   --------------------------------------------------------------------------
   Header sits at max-width 64ch on the LEFT (not centered) — matches the
   left-aligned scan pattern used elsewhere on the page (problem-trio,
   daas-themed, etc).
   ========================================================================== */
.eux-block--faqs .eux-faqs__hdr {
	margin-bottom: 56px;
	max-width: 64ch;
}

.eux-block--faqs .eux-faqs__title {
	font-family: var(--eux-font-display);
	font-weight: 400;
	font-size: clamp(36px, 4.5vw, 52px);
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0 0 14px;
	color: var(--eux-ink-900);
	text-wrap: balance;
	max-width: 24ch;
}
.eux-block--faqs .eux-faqs__title em {
	font-style: italic;
	font-weight: 300;
	color: var(--eux-woo-500);
}
.eux-block--faqs--dark .eux-faqs__title { color: #FFFFFF; }
.eux-block--faqs--dark .eux-faqs__title em { color: var(--eux-woo-300); }

.eux-block--faqs .eux-faqs__sub {
	font-family: var(--eux-font-body);
	font-size: 16px;
	line-height: 1.55;
	color: var(--eux-ink-700);
	margin: 0;
	max-width: 60ch;
}
.eux-block--faqs--dark .eux-faqs__sub { color: rgba(255, 255, 255, 0.72); }

/* Eyebrow follows the shared .eux-eyebrow definition in shared.css.
   Dark theme override — eyebrow color shifts to woo-200 for contrast. */
.eux-block--faqs--dark .eux-eyebrow { color: var(--eux-woo-200); }
.eux-block--faqs--dark .eux-eyebrow::before { background: var(--eux-woo-200); }

/* ==========================================================================
   3. Grid — 2 columns desktop, 1 column mobile
   --------------------------------------------------------------------------
   Counter-reset on the grid container; counter-increment per child. CSS
   computes "01", "02"... so editors can add/remove/reorder items without
   ever touching numbers.

   `align-items: start` is critical here — without it, grid defaults to
   `stretch` and items in the same row equalize heights. When you open
   item 03 (left) it makes that row tall, and item 04 (right, closed)
   stretches to match, which visually reads as "the closed one also
   opened". v0.35.2 fix: each cell sizes to its content; the row height
   adapts to whichever item is tallest, and closed items stay compact
   at the top of their row.
   ========================================================================== */
.eux-block--faqs .eux-faqs__grid {
	display: grid;
	gap: 12px 32px;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	counter-reset: eux-faq;
}
@media (max-width: 820px) {
	.eux-block--faqs .eux-faqs__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   4. Accordion item — closed state
   --------------------------------------------------------------------------
   Each item is a <details> element. Border + radius live on the item;
   the chevron rotation, hover state, and expand transition are all
   defined here. Animation uses ONLY transform and opacity (the
   grid-template-rows trick for height) — no layout-triggering properties.
   ========================================================================== */
.eux-block--faqs .eux-faq-item {
	counter-increment: eux-faq;
	background: var(--eux-white);
	border: 1px solid var(--eux-ink-100);
	border-radius: 12px;
	padding: 0;
	/* Hover transition — 200ms is the sweet spot for SaaS micro-interactions
	   (per ux-motion). Border-color and box-shadow are both GPU-friendly. */
	transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
	/* Hide the details summary triangle in Firefox. */
	overflow: hidden;
}

/* Dark theme card chrome */
.eux-block--faqs--dark .eux-faq-item {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.08);
}

/* Hover state — subtle elevation cue. Not too aggressive: this is reading
   content, not a CTA. Border tint + tiny shadow = "interactive, here". */
.eux-block--faqs .eux-faq-item:hover {
	border-color: var(--eux-ink-300);
}
.eux-block--faqs--dark .eux-faq-item:hover {
	border-color: rgba(255, 255, 255, 0.18);
}

/* Open state — strong purple cue + soft glow shadow. */
.eux-block--faqs .eux-faq-item[open] {
	border-color: var(--eux-woo-500);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 12px 32px rgba(114, 14, 236, 0.08);
}
.eux-block--faqs--dark .eux-faq-item[open] {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(166, 89, 248, 0.5);
	box-shadow: 0 12px 32px rgba(166, 89, 248, 0.10);
}

/* Strip default <details> markers across browsers. */
.eux-block--faqs .eux-faq-item > summary { list-style: none; cursor: pointer; }
.eux-block--faqs .eux-faq-item > summary::-webkit-details-marker { display: none; }
.eux-block--faqs .eux-faq-item > summary::marker { display: none; }

/* ==========================================================================
   5. Accordion summary — number + question + chevron
   ========================================================================== */
.eux-block--faqs .eux-faq-item summary {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px 24px;
	font-family: var(--eux-font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: var(--eux-ink-900);
	/* Focus-visible ring on the summary for keyboard users. */
	outline: none;
}
.eux-block--faqs .eux-faq-item summary:focus-visible {
	outline: 2px solid var(--eux-woo-500);
	outline-offset: 2px;
	border-radius: 12px;
}
.eux-block--faqs--dark .eux-faq-item summary { color: #FFFFFF; }

/* Auto-numbering via CSS counter. Editors never touch numbers. */
.eux-block--faqs .eux-faq-item__num {
	font-family: var(--eux-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--eux-woo-500);
	flex-shrink: 0;
	margin-top: 3px;
	min-width: 22px;
}
.eux-block--faqs .eux-faq-item__num::before {
	content: counter(eux-faq, decimal-leading-zero);
}
.eux-block--faqs--dark .eux-faq-item__num { color: var(--eux-woo-200); }

.eux-block--faqs .eux-faq-item__q {
	flex: 1;
	/* Match Salient defence — these list under .wp-block-group could
	   pick up break-word otherwise. */
	word-break: normal;
	overflow-wrap: normal;
}

/* Chevron — rotation duration and curve match the accordion expand
   exactly, so the icon and body grow in unison rather than the icon
   finishing first and feeling disconnected from the content reveal. */
.eux-block--faqs .eux-faq-item__chev {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--eux-ink-500);
	transition: transform 340ms cubic-bezier(0.33, 1, 0.68, 1), color 240ms ease;
}
.eux-block--faqs .eux-faq-item[open] .eux-faq-item__chev {
	transform: rotate(180deg);
	color: var(--eux-woo-500);
}
.eux-block--faqs--dark .eux-faq-item__chev { color: rgba(255, 255, 255, 0.55); }
.eux-block--faqs--dark .eux-faq-item[open] .eux-faq-item__chev { color: var(--eux-woo-200); }

/* ==========================================================================
   6. Accordion expand animation
   --------------------------------------------------------------------------
   This is the only place in the block that needs careful motion work.
   <details> elements natively show/hide their content instantly when
   toggled — there's no built-in animation. Native height transitions
   would force layout on every frame (the cardinal sin per ux-motion +
   the project's motion-and-reveal doc).

   v0.35.2 tuning — third revision, getting it right.

   Two earlier attempts had problems:

   1. v0.35.0 used `grid-template-rows: 0fr -> 1fr` at 280ms with the
      project's --eux-ease-out (an aggressive expo curve). Snappy but
      "clipped" at the end, and had the well-known browser bug where
      the first transition on grid-template-rows fails to animate
      (Chrome/Safari don't always commit the 0fr starting value before
      the [open] state flips to 1fr — first click "snaps" instantly,
      subsequent clicks animate fine).

   2. v0.35.1 kept grid-template-rows but went to 380ms with Material's
      cubic-bezier(0.4, 0, 0.2, 1). The first-click snap remained. AND
      Material's curve has a noticeably slow start — the first ~100ms
      of the animation barely moves, which reads as "lag" between
      click and motion.

   v0.35.2 fixes both:
   - Property: `grid-template-rows` -> `max-height`. Reliably animatable
     in every browser; no first-click bug. The frontend.js initFaqs()
     enhancement measures each item's content height and drives the
     transition with exact px values via inline `style.maxHeight`. CSS
     here just provides the transition and a fallback for the no-JS
     case (a big-enough max-height: 9999px so opening still works,
     just without the precise duration tuning).
   - Easing: cubic-bezier(0.33, 1, 0.68, 1) — easeOutCubic. Fast initial
     response (the user sees motion immediately when they click) with
     a gentle settle. Smoother than the project's expo --eux-ease-out
     (which whips out of the gate too hard) but without Material's
     slow start. Per ux-motion: ease-out is the right family for any
     reveal where the destination is the user's goal (vs. ease-in-out
     which is for moving between two equally-important positions).
   - Duration: 340ms — middle ground between v0.35.0's 280ms (clipped)
     and v0.35.1's 380ms (laggy). Within ux-motion's 200-300ms panel-
     slide bucket when stretched slightly for a reading context.

   Note on closing: native <details> with `open` removed instantly hides
   contents. The frontend.js shim now intercepts BOTH directions (open
   and close), measures, then drives the animation with inline px
   values for buttery-smooth motion. The `.is-closing` class is added
   during close so the answer body opacity can fade out in lock-step.
   ========================================================================== */
.eux-block--faqs .eux-faq-item__ans-wrap {
	overflow: hidden;
	max-height: 0;
	transition: max-height 340ms cubic-bezier(0.33, 1, 0.68, 1);
}
/* No-JS fallback: when JS hasn't run (or fails), the [open] attribute
   bumps max-height to a value large enough for any reasonable FAQ
   answer. The transition still plays, just with a fixed-duration feel
   regardless of content size. With initFaqs() running, inline styles
   from JS override this with the actual measured height. */
.eux-block--faqs .eux-faq-item[open] .eux-faq-item__ans-wrap {
	max-height: 9999px;
}

.eux-block--faqs .eux-faq-item__ans {
	padding: 0 24px 22px 60px;
	font-family: var(--eux-font-body);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--eux-ink-700);
	/* Answer body fades in slightly after the height starts expanding,
	   so the content "blooms" out of the growing card rather than
	   appearing instantly. 100ms delay = ~30% overlap with the 340ms
	   expand (ux-motion's choreography overlap principle). */
	opacity: 0;
	transition: opacity 240ms cubic-bezier(0.33, 1, 0.68, 1) 100ms;
}
.eux-block--faqs .eux-faq-item[open] .eux-faq-item__ans {
	opacity: 1;
}
/* During the JS-driven close, opacity fades out in sync with the
   height collapse. No delay this time — we want the body to start
   dimming the moment the user commits to closing. */
.eux-block--faqs .eux-faq-item.is-closing .eux-faq-item__ans {
	opacity: 0;
	transition: opacity 200ms cubic-bezier(0.33, 1, 0.68, 1);
}
.eux-block--faqs--dark .eux-faq-item__ans { color: rgba(255, 255, 255, 0.82); }

/* Answer text can contain links — match the brand color. */
.eux-block--faqs .eux-faq-item__ans a {
	color: var(--eux-woo-500);
	border-bottom: 1px solid currentColor;
}
.eux-block--faqs--dark .eux-faq-item__ans a {
	color: var(--eux-woo-200);
}

/* ==========================================================================
   7. Scroll-reveal entrance
   --------------------------------------------------------------------------
   The header (.eux-faqs__hdr) is registered in frontend.js's reveal
   allowlist — gets the standard fade + 24px lift.

   Each .eux-faq-item is registered as a CARD in frontend.js, so items
   share the 180ms JS-driven batch-stagger with .eux-cap-card and
   .eux-example-card. When several items cross the viewport in the
   same observer cycle, they fade up one after another rather than all
   at once. This matches ux-motion's "Staggering: delay child animations
   30-50ms each. Creates rhythm and directs the eye." — and reuses the
   project's existing card-stagger machinery for consistency.
   ========================================================================== */

/* ==========================================================================
   8. Editor canvas — show items always-expanded so editors can edit
   --------------------------------------------------------------------------
   In the Gutenberg editor we render the item with a div instead of a
   <details>, so RichText placeholders work normally. The visible state
   is "open" so both question and answer fields are editable without the
   editor having to click each item.
   ========================================================================== */
.eux-block--faqs .eux-faq-item--editor {
	/* Match the [open] visual treatment so editors get accurate preview. */
	border-color: var(--eux-woo-500);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 12px 32px rgba(114, 14, 236, 0.08);
}
.eux-block--faqs .eux-faq-item--editor .eux-faq-item__head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px 24px;
	font-family: var(--eux-font-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: var(--eux-ink-900);
}
.eux-block--faqs .eux-faq-item--editor .eux-faq-item__chev {
	/* Show the chevron in its open state in the editor for visual parity. */
	transform: rotate(180deg);
	color: var(--eux-woo-500);
}
.eux-block--faqs .eux-faq-item--editor .eux-faq-item__ans {
	opacity: 1;
	padding: 0 24px 22px 60px;
	font-family: var(--eux-font-body);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--eux-ink-700);
}
/* Editor canvas inside the Gutenberg iframe needs the same counter-reset
   on the grid wrapper. The wrapper has className 'eux-faqs__grid' so
   the cascade rule above does the right thing — no extra work needed. */

/* ==========================================================================
   9. Reduced motion
   --------------------------------------------------------------------------
   ux-motion principle: "instead of killing all animation globally,
   provide thoughtful alternatives per component". Here that means:
   - Chevron jumps to the rotated position (state cue preserved)
   - Accordion opens instantly (still uses [open] selector)
   - Reveal stagger collapses to all-at-once (handled in shared.css)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.eux-block--faqs .eux-faq-item,
	.eux-block--faqs .eux-faq-item__chev,
	.eux-block--faqs .eux-faq-item__ans-wrap,
	.eux-block--faqs .eux-faq-item__ans {
		transition: none !important;
	}
}