/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/section/problems-slider.css
   Run `make sync-assets` after editing the source. */

/**
 * Section: Problems Slider — [claude:opus-4.8-1m][client:2.1.168][hurc:v0.10.1]
 * Layout: marketing.section.problems-slider
 *
 * Used on: home, product (Power Claude page) — replaces the two legacy
 * hardcoded TESTIMONIAL cards (voice-1 / voice-2) with one data-driven slider.
 *
 * PURPOSE
 *   A horizontal, scroll-snap carousel of REAL community complaints about
 *   Claude Code / Claude (sourced from Reddit, GitHub, Hacker News), each card
 *   pairing the verbatim, attributed complaint with how Power Claude solves it.
 *   The complaint is framed as evidence the pain is real — never as a Power
 *   Claude testimonial. Every card carries a mandatory outbound source link.
 *
 * ARCHITECTURE / REVEAL MODEL
 *   The "Solved" content is progressively disclosed so it is reachable by every
 *   visitor regardless of input modality:
 *     • Baseline (no JS, touch, no-hover): the solve panel renders stacked
 *       below the problem and is ALWAYS visible. Nothing is hidden behind an
 *       interaction that a touch/no-JS user cannot perform.
 *     • Enhancement (hover-capable pointers): the solve panel becomes an
 *       absolutely-positioned overlay that slides up over the card on :hover,
 *       :focus-within (keyboard), or when JS adds .is-solved-open (click).
 *   A persistent green "✓ Solved" tag anchors the promise in both modes.
 *
 * DEPENDENCIES
 *   Design tokens from the nllm token layer (loaded by the page CSS):
 *     --nllm-surface, --nllm-surface-soft, --nllm-surface-deep,
 *     --nllm-surface-edge, --nllm-text, --nllm-text-muted, --nllm-text-subtle,
 *     --nllm-text-sm, --nllm-text-xs, --nllm-text-h2, --nllm-violet,
 *     --nllm-violet-soft, --nllm-violet-pale, --nllm-violet-bg,
 *     --nllm-radius-md, --nllm-radius-sm, --nllm-radius-full,
 *     --nllm-space-xs, --nllm-space-sm, --nllm-space-md, --nllm-space-lg,
 *     --nllm-space-xl, --nllm-transition-base, --nllm-transition-fast,
 *     --pc-bolt-amber, --pc-bolt-amber-pale, --pc-status-flowing.
 *   JS behaviour (nav buttons, solve toggle): problemsSlider.js.
 *
 * SHAPE
 *   .pc-section--problems-slider
 *   └── .pc-section__inner
 *       ├── .pc-problems__head           (heading + subheading)
 *       └── .pc-problems                 (carousel viewport; relative)
 *           ├── .pc-problems__nav--prev/next   (JS-revealed paging buttons)
 *           └── .pc-problems__track       (scroll-snap flex row)
 *               └── .pc-problem[data-slide]
 *                   └── .pc-problem__card
 *                       ├── .pc-problem__problem   (front: badge/theme/quote/source/reveal)
 *                       └── .pc-problem__solve     (overlay: headline/body/chips/CTA)
 */

/* ── Section shell ─────────────────────────────────────────────────────────
 * Full-bleed band on the base surface; the inner is width-constrained but
 * wider than the testimonial column it replaces, since a carousel wants room. */
.pc-section--problems-slider {
	background-color: var(--nllm-surface);
	padding-block: var(--nllm-space-xl);
}

.pc-section--problems-slider .pc-section__inner {
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: var(--nllm-space-lg);
}

/* ── Heading block ───────────────────────────────────────────────────────── */
.pc-problems__head {
	margin-bottom: var(--nllm-space-lg);
	text-align: center;
}

.pc-problems__heading {
	margin: 0 0 var(--nllm-space-xs);
	font-size: var(--nllm-text-h2);
	color: var(--nllm-text);
}

.pc-problems__subheading {
	margin: 0;
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-muted);
}

/* ── Carousel viewport ─────────────────────────────────────────────────────
 * Position context for the absolutely-placed prev/next controls. */
.pc-problems {
	position: relative;
}

/* The scroll-snap track. Horizontal overflow with mandatory snap so each card
 * settles cleanly. scrollbar hidden — paging is via buttons / swipe / keys. */
.pc-problems__track {
	display: flex;
	gap: var(--nllm-space-md);
	margin: 0;
	padding: var(--nllm-space-xs) var(--nllm-space-xs) var(--nllm-space-md);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;            /* Firefox */
}

.pc-problems__track::-webkit-scrollbar {
	display: none;                    /* WebKit */
}

/* ── Slide ─────────────────────────────────────────────────────────────────
 * Responsive fixed width so several peek into view on desktop and one fills a
 * phone. min() caps the width on narrow viewports. */
.pc-problem {
	flex: 0 0 auto;
	width: min(360px, 85vw);
	scroll-snap-align: start;
}

/* ── Card ──────────────────────────────────────────────────────────────────
 * The card is the positioning context for the overlay reveal. Min-height keeps
 * the row even while different quotes vary in length, and is sized generously so
 * the hover "Solved" overlay (taller than the bare complaint) fits inside the
 * card without scrolling. `overflow: hidden` is load-bearing: it CLIPS the
 * absolutely-positioned solve overlay to the card bounds, so the panel can never
 * spill out into the carousel / page (the overflow the modal used to work around). */
.pc-problem__card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 400px;
	height: 100%;
	overflow: hidden;
	background-color: var(--nllm-surface-soft);
	border: 1px solid var(--nllm-surface-edge);
	border-left: 4px solid var(--pc-bolt-amber);
	border-radius: var(--nllm-radius-md);
}

/* ── Problem face ──────────────────────────────────────────────────────────
 * The always-visible front: source badge, theme, the verbatim quote, the
 * attributed source link, and (on hover devices) the reveal affordance. */
.pc-problem__problem {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--nllm-space-sm);
	padding: var(--nllm-space-lg);
}

/* Source platform chip — distinct accents per platform for quick scanning. */
.pc-problem__badge {
	align-self: flex-start;
	padding: 2px var(--nllm-space-xs);
	font-size: var(--nllm-text-xs);
	font-weight: var(--nllm-font-weight-semibold);
	letter-spacing: 0.02em;
	color: var(--nllm-text-subtle);
	background-color: var(--nllm-surface-deep);
	border: 1px solid var(--nllm-surface-edge);
	border-radius: var(--nllm-radius-full);
}

.pc-problem__theme {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--nllm-text);
}

/* The complaint itself. A left rule + muted italic signals "their words". */
.pc-problem__quote {
	margin: 0;
	padding-left: var(--nllm-space-sm);
	border-left: 2px solid var(--nllm-surface-edge);
}

.pc-problem__quote p {
	margin: 0;
	font-size: var(--nllm-text-sm);
	font-style: italic;
	color: var(--nllm-text-muted);
}

/* Mandatory attribution link — kept visually quiet but always present. */
.pc-problem__source {
	margin-top: auto;
	font-size: var(--nllm-text-xs);
	color: var(--nllm-text-subtle);
	text-decoration: none;
}

.pc-problem__source:hover {
	color: var(--nllm-text);
	text-decoration: underline;
}

/* ── Solve panel ───────────────────────────────────────────────────────────
 * Baseline: stacked below the problem, always visible (no-JS / touch safe). */
.pc-problem__solve {
	display: flex;
	flex-direction: column;
	gap: var(--nllm-space-sm);
	padding: var(--nllm-space-lg);
	background-color: var(--nllm-violet-bg);
	border-top: 1px solid var(--nllm-surface-edge);
}

/* Persistent "Solved" promise — green status accent. */
.pc-problem__solved-tag {
	align-self: flex-start;
	padding: 2px var(--nllm-space-sm);
	font-size: var(--nllm-text-xs);
	font-weight: var(--nllm-font-weight-bold);
	color: var(--pc-status-flowing);
	background-color: var(--nllm-surface-deep);
	border: 1px solid var(--pc-status-flowing);
	border-radius: var(--nllm-radius-full);
}

.pc-problem__solve-headline {
	margin: 0;
	font-size: 0.98rem;
	font-weight: var(--nllm-font-weight-semibold);
	color: var(--nllm-text);
}

.pc-problem__solve-body p {
	margin: 0 0 var(--nllm-space-xs);
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-muted);
}

/* Feature chips — the shipped Power Claude features that address this pain. */
.pc-problem__features {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nllm-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-problem__feature-chip {
	padding: 2px var(--nllm-space-xs);
	font-size: var(--nllm-text-xs);
	color: var(--nllm-violet);
	background-color: var(--nllm-violet-pale);
	border-radius: var(--nllm-radius-sm);
}

/* Card actions — primary trial CTA + a quiet link to the full breakdown. */
.pc-problem__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nllm-space-sm);
	align-items: center;
	margin-top: var(--nllm-space-xs);
}

.pc-problem__cta {
	padding: var(--nllm-space-xs) var(--nllm-space-md);
	font-size: var(--nllm-text-sm);
	font-weight: var(--nllm-font-weight-semibold);
	color: var(--nllm-surface-deep);
	background-color: var(--pc-bolt-amber);
	border-radius: var(--nllm-radius-sm);
	text-decoration: none;
}

.pc-problem__cta:hover {
	background-color: var(--pc-bolt-amber-pale);
}

.pc-problem__readmore {
	font-size: var(--nllm-text-xs);
	color: var(--nllm-violet);
	text-decoration: none;
}

.pc-problem__readmore:hover {
	text-decoration: underline;
}

/* ── Nav controls ──────────────────────────────────────────────────────────
 * Revealed by JS (hidden attribute removed). Centered vertically, overlapping
 * the track edges. Disabled state fades at the scroll extremes. */
.pc-problems__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: var(--nllm-text);
	background-color: var(--nllm-surface-deep);
	border: 1px solid var(--nllm-surface-edge);
	border-radius: var(--nllm-radius-full);
	transform: translateY(-50%);
	cursor: pointer;
}

.pc-problems__nav--prev { left: calc(-1 * var(--nllm-space-sm)); }
.pc-problems__nav--next { right: calc(-1 * var(--nllm-space-sm)); }

.pc-problems__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

/* ── Hover-capable enhancement (JS present) ────────────────────────────────
 * [claude:opus-4.8-1m][client:2.1.168][hurc:v0.10.1] Where a fine, hover-capable pointer exists AND problemsSlider.js has
 * marked the carousel `.is-enhanced`, the "Solved" panel becomes an absolutely-
 * positioned overlay that fills the card and is UNVEILED ON HOVER (or keyboard
 * :focus-within) — restoring the original hover reveal in place of the click
 * modal. Two things keep it inside the card and never clipped:
 *   • the card's `overflow: hidden` clips the overlay to the card bounds, so it
 *     cannot spill past the card into the carousel/section (no overflow), and
 *   • the overlay's `overflow-y: auto` + the card's generous min-height let even
 *     the tallest "Solved" body sit fully inside, scrolling internally only in
 *     the rare case it still exceeds the card (so no headline/CTA is ever cut).
 *
 * Touch / coarse-pointer / no-JS devices never match this query (or never get
 * `.is-enhanced`), so the panel stays stacked and fully visible — the accessible
 * baseline is unchanged. */
@media (hover: hover) and (pointer: fine) {
	/* The solve panel: an overlay that fills the card, hidden until hover/focus. */
	.is-enhanced .pc-problem__solve {
		position: absolute;
		inset: 0;
		z-index: 1;
		overflow-y: auto;                 /* internal scroll = the no-clip guarantee */
		border-top: 0;                    /* full overlay, not a stacked section */
		opacity: 0;
		visibility: hidden;
		transform: translateY(0.75rem);
		transition:
			opacity var(--nllm-transition-fast, 0.15s ease),
			transform var(--nllm-transition-fast, 0.15s ease),
			visibility var(--nllm-transition-fast, 0.15s ease);
	}

	/* Unveil on pointer hover or when keyboard focus enters the card. */
	.is-enhanced .pc-problem__card:hover .pc-problem__solve,
	.is-enhanced .pc-problem__card:focus-within .pc-problem__solve {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	/* The card lifts + its amber rule brightens on hover/focus so it still reads
	 * as interactive (the hover IS the affordance now — no button, no modal). */
	.is-enhanced .pc-problem__card {
		transition: border-color var(--nllm-transition-fast, 0.15s ease),
			transform var(--nllm-transition-fast, 0.15s ease);
	}

	.is-enhanced .pc-problem__card:hover,
	.is-enhanced .pc-problem__card:focus-within {
		border-color: var(--pc-bolt-amber);
		transform: translateY(-2px);
	}
}

/* ── Reduced motion ────────────────────────────────────────────────────────
 * Honour the user preference: no scroll easing, no card lift, instant reveal. */
@media (prefers-reduced-motion: reduce) {
	.pc-problems__track { scroll-behavior: auto; }

	.is-enhanced .pc-problem__card {
		transition: none;
	}

	.is-enhanced .pc-problem__card:hover,
	.is-enhanced .pc-problem__card:focus-within {
		transform: none;
	}

	/* Instant reveal — no fade/slide for the solve overlay. */
	.is-enhanced .pc-problem__solve {
		transition: none;
		transform: none;
	}
}