/**
 * EquaShowcase — shared stylesheet.
 *
 * Unified appearance for cards, highlights and buttons. Colors inherit from
 * the theme through variables, with a sober fallback. Editing this file
 * changes the appearance everywhere (that is the point: centralized
 * consistency).
 */

.eqsc {
	--eqsc-accent: var(--global-palette1, var(--wp--preset--color--primary, #2c6dff));
	--eqsc-text: var(--global-palette4, #1f2933);
	--eqsc-muted: var(--global-palette5, #6b7280);
	--eqsc-bg: var(--global-palette9, #ffffff);
	--eqsc-bg-alt: var(--global-palette8, #f8f9fd);
	--eqsc-border: var(--global-palette7, #e6e9ef);
	--eqsc-radius: 12px;
	box-sizing: border-box;
}
.eqsc *, .eqsc *::before, .eqsc *::after { box-sizing: border-box; }

/* ---------- Cards ---------- */
.eqsc-cards-title {
	text-align: center;
	margin: 0 0 1.5rem;
	color: var(--eqsc-text);
}
.eqsc-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
}
.eqsc-card {
	background: var(--eqsc-bg);
	border: 1px solid var(--eqsc-border);
	border-radius: var(--eqsc-radius);
	padding: 1.5rem;
	text-align: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.eqsc-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.eqsc-card-icon {
	font-size: 2.5rem;
	line-height: 1;
	margin-bottom: 0.75rem;
}
/* Image icon (embedded SVG): occupies the same box as the emoji, centered. */
.eqsc-card-icon--image {
	/* Size driven by --eqsc-icon-size (setting), fallback to 2.5rem. */
	width: var(--eqsc-icon-size, 2.5rem);
	height: var(--eqsc-icon-size, 2.5rem);
	margin-left: auto;
	margin-right: auto;
}
.eqsc-card-icon--image svg {
	width: 100%;
	height: 100%;
	display: block;
}
.eqsc-card-title {
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
	color: var(--eqsc-text);
}
.eqsc-card-body {
	color: var(--eqsc-muted);
	font-size: 0.95rem;
	line-height: 1.6;
}
.eqsc-card-body p { margin: 0 0 0.5rem; }
.eqsc-card-body p:last-child { margin-bottom: 0; }

/* ---------- Highlight ---------- */
.eqsc-highlight {
	background: var(--eqsc-bg-alt);
	border: 1px solid var(--eqsc-border);
	border-left: 4px solid var(--eqsc-accent);
	border-radius: var(--eqsc-radius);
	padding: 1.5rem 1.75rem;
}
/* Variant with icon: two columns, icon on the left vertically centered. */
.eqsc-highlight--withicon {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}
.eqsc-highlight-icon {
	flex: 0 0 auto;
	width: var(--eqsc-icon-size, 3rem);
	height: var(--eqsc-icon-size, 3rem);
	display: flex;
	align-items: center;
	justify-content: center;
}
.eqsc-highlight-icon svg { width: 100%; height: 100%; display: block; }
.eqsc-highlight-main { flex: 1 1 auto; min-width: 0; }
.eqsc-highlight-title {
	margin: 0 0 0.75rem;
	color: var(--eqsc-text);
}
.eqsc-highlight-body {
	color: var(--eqsc-text);
	line-height: 1.7;
}
.eqsc-highlight-body p { margin: 0 0 0.75rem; }
.eqsc-highlight-body p:last-child { margin-bottom: 0; }
.eqsc-highlight-extra {
	color: var(--eqsc-muted);
	font-size: 0.9rem;
	line-height: 1.6;
	margin-top: 0.75rem;
}
.eqsc-highlight-extra p { margin: 0 0 0.4rem; }
.eqsc-highlight-extra p:last-child { margin-bottom: 0; }

/* Optional additional text for cards. */
.eqsc-card-extra {
	color: var(--eqsc-muted);
	font-size: 0.85rem;
	line-height: 1.5;
	margin-top: 0.5rem;
}
.eqsc-card-extra p { margin: 0 0 0.3rem; }
.eqsc-card-extra p:last-child { margin-bottom: 0; }

/* ---------- CTA button ---------- */
.eqsc-button-wrap { margin: 1rem 0; }
.eqsc-button {
	display: inline-block;
	background: var(--eqsc-accent);
	color: #fff;
	text-decoration: none;
	padding: 0.85rem 1.75rem;
	border-radius: 8px;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	transition: filter 0.15s ease, transform 0.15s ease;
}
.eqsc-button:hover {
	filter: brightness(0.92);
	transform: translateY(-1px);
	color: #fff;
}
.eqsc-button:focus-visible {
	outline: 2px solid var(--eqsc-accent);
	outline-offset: 3px;
}

/* ---------- Editor message (element not found) ---------- */
.eqsc-missing {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	background: #fff3cd;
	border: 1px solid #ffe69c;
	border-radius: 4px;
	color: #664d03;
	font-size: 0.85rem;
}

/* ---------- Smooth scrolling for CTA anchors ---------- */
html { scroll-behavior: smooth; }

/* =========================================================================
 * New blocks (v0.8.0): cascade-text, counters, marquee, testimonial, timeline, separator
 * ===================================================================== */

/* --- cascade-text --- */
/* ===== Cascading text ===== */
.eqsc-cascade-text {
	margin: 1rem 0;
}
.eqsc-cascade-text .eqsc-ct-line {
	margin: 0;
	font-size: clamp( 1.2rem, 4vw, 1.8rem );
	font-weight: 700;
	line-height: 1.35;
	color: var( --eqsc-text );
}

/* Alignment (Run 10 CH2.2 — supersedes Run 9): the fixed prefix, the rotating zone and the suffix
   stay INLINE on ONE line (Run 9 stacked them in a flex column, which was reported as "chaque élément
   passe à la ligne"). The whole inline group is positioned by text-align on the line (from the generic
   .eqsc-align-* rules). WITHIN the fixed-width rotating slot, the active variant is CENTRED BY DEFAULT
   so a short variant is not left-stranded with a large gap before the suffix ("Par défaut" décalage);
   an explicit Left/Right alignment overrides that to the matching edge, Centre keeps it centred. Anti-
   layout-shift is preserved: the rotator remains an inline-grid sized to the longest variant. Physical
   alignment (left/right), consistent with the rest of the plugin; no RTL support declared. */
.eqsc-cascade-text .eqsc-ct-item { text-align: center; }
.eqsc-cascade-text.eqsc-align-left .eqsc-ct-item { text-align: left; }
.eqsc-cascade-text.eqsc-align-right .eqsc-ct-item { text-align: right; }

/* Rotator: an inline stacked grid (variants share one grid cell for the cross-fade and so the box
   height stays on ONE line — vertical anti-layout-shift). Run 11: the WIDTH is now DYNAMIC — the JS
   sets an explicit width equal to the currently displayed variant and it ANIMATES via `transition:
   width` (the fixed max-width of Runs 9/10 is abandoned: it left a big gap for short variants). With
   no JS (or reduced motion) the grid falls back to its intrinsic width and the first variant shows.
   overflow:hidden clips the outgoing (wider) variant cleanly while the width shrinks. */
.eqsc-cascade-text .eqsc-ct-rotator {
	display: inline-grid;
	vertical-align: baseline;
	max-width: 100%;
	overflow: hidden;
	transition: width var( --eqsc-ct-transition, 400ms ) ease;
}
.eqsc-cascade-text .eqsc-ct-item {
	grid-area: 1 / 1;
	min-width: 0;
	/* One line so the height never jumps and the natural width is measurable; a variant wider than
	   the dynamic box overflows and is clipped (rather than wrapping and shifting the line height). */
	white-space: nowrap;
	/* Words default to the brand accent; textColor (via --eqsc-ct-color) overrides them. */
	color: var( --eqsc-ct-color, var( --eqsc-accent ) );
	opacity: 0;
	transition: opacity var( --eqsc-ct-transition, 400ms ) ease,
	            transform var( --eqsc-ct-transition, 400ms ) ease;
}
.eqsc-cascade-text .eqsc-ct-item.is-active {
	opacity: 1;
}
/* Narrow viewports (font at its clamp floor): a long variant can exceed the line. There, we DROP the
   JS-driven dynamic width (width:auto !important overrides the inline width) and fall back to the
   intrinsic grid box with wrapping — so the full text is always readable (no clipping) and the box
   sizes to the wrapped content rather than wrapping a long variant inside a narrow active-width box
   (which would make the line very tall). Content preservation wins over the dynamic width on phones
   (Run 11 review fix). The dynamic width remains the behaviour on wider screens. */
@media ( max-width: 480px ) {
	.eqsc-cascade-text .eqsc-ct-item {
		white-space: normal;
		overflow-wrap: anywhere;
	}
	.eqsc-cascade-text .eqsc-ct-rotator {
		width: auto !important;
	}
}

/* Effect: slide (variant slides up on the way out, up into place on the way in). */
.eqsc-cascade-text .eqsc-ct-rotator--slide .eqsc-ct-item {
	transform: translateY( 0.5em );
}
.eqsc-cascade-text .eqsc-ct-rotator--slide .eqsc-ct-item.is-active {
	transform: translateY( 0 );
}
.eqsc-cascade-text .eqsc-ct-rotator--slide .eqsc-ct-item.is-leaving {
	opacity: 0;
	transform: translateY( -0.5em );
}

/* Effect: cascade (letters reveal one by one). The item is only forced visible once
   JS has taken over (.eqsc-ct-ready); the per-letter spans then carry the reveal. */
.eqsc-cascade-text .eqsc-ct-rotator--cascade.eqsc-ct-ready .eqsc-ct-item {
	opacity: 1;
}
.eqsc-cascade-text .eqsc-ct-char {
	display: inline-block;
	white-space: pre;
	opacity: 0;
	transform: translateY( 0.4em );
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.eqsc-cascade-text .eqsc-ct-item.is-active .eqsc-ct-char {
	opacity: 1;
	transform: translateY( 0 );
}

/* Effect: typewriter (types/erases; a hidden tail reserves width; blinking caret). */
.eqsc-cascade-text .eqsc-ct-rotator--typewriter .eqsc-ct-item {
	transition: none;
}
.eqsc-cascade-text .eqsc-ct-rest {
	visibility: hidden;
}
.eqsc-cascade-text .eqsc-ct-typed::after {
	content: "";
	display: inline-block;
	width: 0.09em;
	height: 1.05em;
	margin-left: 0.06em;
	vertical-align: -0.16em;
	background: currentColor;
	animation: eqsc-ct-blink 1s steps( 1, end ) infinite;
}
@keyframes eqsc-ct-blink {
	0%, 49% { opacity: 1; }
	50%, 100% { opacity: 0; }
}

/* Screen-reader-only static reading of every variant. */
.eqsc-cascade-text .eqsc-ct-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* Respect users who prefer reduced motion: JS stays inert (first variant only);
   this also neutralises any CSS transition/animation defensively. */
@media ( prefers-reduced-motion: reduce ) {
	.eqsc-cascade-text .eqsc-ct-rotator,
	.eqsc-cascade-text .eqsc-ct-item,
	.eqsc-cascade-text .eqsc-ct-char,
	.eqsc-cascade-text .eqsc-ct-typed::after {
		transition: none !important;
		animation: none !important;
	}
}

/* --- counters --- */
.eqsc-counters {
	text-align: center;
	color: var(--eqsc-text);
}
.eqsc-counters-figure {
	margin: 0;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
}
.eqsc-counters-value {
	font-size: clamp(2.25rem, 6vw, 3.5rem);
	font-weight: 800;
	line-height: 1.05;
	color: var(--eqsc-accent);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}
/* Run 10 CH2.3: separate the suffix from the number ("+150 bla", not "+150bla"). The prefix stays
   attached to the number ("+150"). */
.eqsc-counters-suffix { margin-left: 0.2em; }
.eqsc-counters-label {
	color: var(--eqsc-muted);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}
/* Screen-reader-only final value: kept accurate while the display animates. */
.eqsc-counters-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
@media (prefers-reduced-motion: reduce) {
	/* The count-up is JS-driven and already skipped when reduced motion is set;
	   this is a defensive no-op so nothing tweens on the number. */
	.eqsc-counters-number { transition: none; }
}

/* --- marquee --- */
.eqsc-marquee {
	--eqsc-marquee-duration: 25s;
	position: relative;
	overflow: hidden;
	border-radius: var(--eqsc-radius);
	background: var(--eqsc-bg-alt);
	color: var(--eqsc-text);
}
.eqsc-marquee--slow   { --eqsc-marquee-duration: 40s; }
.eqsc-marquee--normal { --eqsc-marquee-duration: 25s; }
.eqsc-marquee--fast   { --eqsc-marquee-duration: 12s; }

.eqsc-marquee-viewport {
	width: 100%;
	overflow: hidden;
}

.eqsc-marquee-track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: eqsc-marquee-scroll var(--eqsc-marquee-duration) linear infinite;
}
.eqsc-marquee--right .eqsc-marquee-track {
	animation-direction: reverse;
}

.eqsc-marquee-group {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}

.eqsc-marquee-item {
	flex: 0 0 auto;
	padding: 0.6rem 0;
	white-space: nowrap;
	font-weight: 600;
	line-height: 1.4;
	color: inherit;
}
/* Decorative separator between messages (also bridges the loop seam). */
.eqsc-marquee-item::after {
	content: "•";
	display: inline-block;
	margin: 0 1.5rem;
	opacity: 0.45;
	font-weight: 400;
}

/* Pause on hover / keyboard focus (only when the option is enabled). */
.eqsc-marquee--pause:hover .eqsc-marquee-track,
.eqsc-marquee--pause:focus-within .eqsc-marquee-track {
	animation-play-state: paused;
}

@keyframes eqsc-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Accessibility: no motion for visitors who prefer reduced motion.
   The duplicate is hidden and the real messages are shown statically, wrapping
   onto multiple lines (with a horizontal-scroll fallback for very long items). */
@media (prefers-reduced-motion: reduce) {
	.eqsc-marquee-track {
		animation: none;
		width: 100%;
	}
	.eqsc-marquee-group[aria-hidden="true"] {
		display: none;
	}
	.eqsc-marquee-group {
		flex: 1 1 auto;
		flex-wrap: wrap;
	}
	.eqsc-marquee-viewport {
		overflow-x: auto;
	}
}

/* --- testimonial --- */
.eqsc-testimonial {
	position: relative;
	background: var(--eqsc-bg-alt);
	border: 1px solid var(--eqsc-border);
	border-radius: var(--eqsc-radius);
	padding: 1.75rem 2rem;
	margin: 0 0 1.5rem;
	color: var(--eqsc-text);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.eqsc-testimonial:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Star rating (decorative glyphs; the accessible name lives on the container) */
.eqsc-testimonial-rating {
	display: flex;
	gap: 0.15rem;
	margin: 0 0 0.9rem;
	font-size: 1.05rem;
	line-height: 1;
}
.eqsc-testimonial .eqsc-star {
	color: var(--eqsc-border);
}
.eqsc-testimonial .eqsc-star--on {
	color: var(--eqsc-accent);
}

/* Quote with a decorative opening mark in the accent color */
.eqsc-testimonial-quote {
	position: relative;
	margin: 0;
	padding: 1.6rem 0 0;
	border: 0;
	quotes: none;
}
.eqsc-testimonial-quote::before {
	content: "\201C";
	position: absolute;
	top: -0.4rem;
	left: -0.25rem;
	font-size: 3.25rem;
	line-height: 1;
	color: var(--eqsc-accent);
	opacity: 0.32;
	font-family: Georgia, "Times New Roman", serif;
	pointer-events: none;
}
.eqsc-testimonial-quote p {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.6;
	font-style: italic;
	color: var(--eqsc-text);
	overflow-wrap: break-word;
}

/* Attribution */
.eqsc-testimonial-cite {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	margin-top: 1.15rem;
}
.eqsc-testimonial-author {
	font-style: normal;
	font-weight: 700;
	color: var(--eqsc-text);
}
.eqsc-testimonial-role {
	font-size: 0.9rem;
	color: var(--eqsc-muted);
}

@media (prefers-reduced-motion: reduce) {
	.eqsc-testimonial {
		transition: none;
	}
	.eqsc-testimonial:hover {
		transform: none;
	}
}

/* --- timeline --- */
/* ---------- Timeline / steps ---------- */
.eqsc-timeline-title {
	text-align: center;
	margin: 0 0 1.75rem;
	color: var(--eqsc-text);
}
.eqsc-timeline-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.eqsc-timeline-step {
	position: relative;
	display: flex;
	gap: 1rem;
	padding-bottom: 1.75rem;
}
.eqsc-timeline-step:last-child {
	padding-bottom: 0;
}
/* Connector line: runs from just below one badge down to the next badge. */
.eqsc-timeline-step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 1.25rem; /* horizontal center of the 2.5rem badge */
	top: 2.5rem;   /* just below the badge */
	bottom: 0;     /* reaches the top edge of the next step (next badge) */
	width: 2px;
	transform: translateX(-1px);
	background: var(--eqsc-tl-accent, var(--eqsc-accent));
	opacity: 0.3;
}
.eqsc-timeline-badge {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--eqsc-tl-accent, var(--eqsc-accent));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1;
}
.eqsc-timeline-content {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 0.3rem;
}
.eqsc-timeline-step-title {
	margin: 0 0 0.35rem;
	font-size: 1.15rem;
	color: var(--eqsc-text);
}
.eqsc-timeline-step-text {
	color: var(--eqsc-muted);
	font-size: 0.95rem;
	line-height: 1.6;
}
.eqsc-timeline-step-text p { margin: 0 0 0.5rem; }
.eqsc-timeline-step-text p:last-child { margin-bottom: 0; }

@media (max-width: 480px) {
	.eqsc-timeline-badge { width: 2.1rem; height: 2.1rem; font-size: 1rem; }
	.eqsc-timeline-step:not(:last-child)::before { left: 1.05rem; top: 2.1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.eqsc-timeline-step,
	.eqsc-timeline-badge { transition: none; animation: none; }
}

/* --- separator --- */
.eqsc-separator {
	display: block;
	width: 100%;
	margin: 0;
	line-height: 0; /* Kill inline-SVG descender gap. */
	overflow: hidden;
}
.eqsc-separator .eqsc-separator-svg {
	display: block;
	width: 100%;
	height: var(--eqsc-sep-height, 60px);
}
/* Default fill = light theme token; overridden by an inline fill when a colour is set. */
.eqsc-separator .eqsc-separator-path {
	fill: var(--eqsc-bg-alt, #f8f9fd);
}
/* Flip the shape vertically (e.g. to cap the top of a section). */
.eqsc-separator--flip .eqsc-separator-svg {
	transform: scaleY(-1);
}
/* No motion in this block; guard against inherited transitions/animations for safety. */
@media (prefers-reduced-motion: reduce) {
	.eqsc-separator .eqsc-separator-svg,
	.eqsc-separator .eqsc-separator-path {
		transition: none;
		animation: none;
	}
}

/* ---------------------------------------------------------------------------
   Horizontal alignment (CH3) — opt-in per block, applied via an eqsc-align-*
   class on the block root. Each block's registered default equals its native
   alignment, so existing/unaligned content renders unchanged.
   Applies to: cascade text, counters, testimonial. (The CTA button keeps its
   own pre-existing inline text-align.)
   --------------------------------------------------------------------------- */
.eqsc-align-left { text-align: left; }
.eqsc-align-center { text-align: center; }
.eqsc-align-right { text-align: right; }
/* The testimonial star rating is a flex row, so text-align cannot move it —
   mirror the chosen alignment with justify-content. NOTE: like the rest of the plugin (and the CTA
   button), alignment here is PHYSICAL (left/right), not logical; the plugin declares no RTL support,
   so under an RTL container the rating follows flex start/end rather than the physical text side.
   Accepted, documented limitation until RTL is a declared target. */
.eqsc-testimonial.eqsc-align-left .eqsc-testimonial-rating { justify-content: flex-start; }
.eqsc-testimonial.eqsc-align-center .eqsc-testimonial-rating { justify-content: center; }
.eqsc-testimonial.eqsc-align-right .eqsc-testimonial-rating { justify-content: flex-end; }