/**
 * Resources Cards widget CSS (widget id: claude-dedicated-resources; BEM: claude-res-).
 * Full demo-skin #resources hover parity (see analysis notes inline).
 * Last modified: 2026-04-17 — Elementor title “Resources Cards”; grid column overrides; intro uses cw-section-intro shell.
 *
 * BEM prefix: claude-res-
 * Z-index map (from .claude-res-tile__card perspective):
 *   .claude-res-tile__layers (abs, z:0) → own stacking context
 *     .claude-res-tile__fill     z:0
 *     .claude-res-tile__bg-icon  z:1
 *     .claude-res-tile__gradient z:2
 *     .claude-res-tile__wash     z:10  ← must be above gradient (demo: z-10 on wash overlay)
 *   .parallax-bg                 z:2   ← above layers (z:0), below content (z:4)
 *   .claude-res-tile__content    z:4   ← parallax-content; translateZ(0) for GPU layer
 *
 * Hover effects replicated from demo-skin #resources:
 *  A  .parallax-bg fade     (opacity 0→1, 0.3s) — gradient halo behind tile
 *  B  .parallax-card glow   (box-shadow upgrade on :hover)
 *  C  .wash overlay         (opacity 0→1, 0.7s, mix-blend-mode:overlay) — accent tint
 *  D  .bg-icon              (color 25%→45% + scale 1.1, BOTH at 1.5s — transition-all 1.5s)
 *  E  .content slide-up     (translateY(-1rem) translateZ(0), 0.5s ease-out)
 *  F  .icon chip            (bg white/10 → nova-gradient, border transparent, 0.5s)
 *  G  .title color          (white → cool/warm accent, 0.5s)
 *  H  .excerpt fade in      (opacity 0→1, 0.5s)
 *  I  .link-row fade in     (opacity 0→1, 0.5s)
 *  J  .arrow translate      (translateX(4px), 0.5s)
 *  K  Mobile IO             (.is-content-revealed — JS adds class in cw-widgets-scroll-reveal.js)
 *
 * @package CW_Elementor_Widgets
 */

/* ─────────────────────────────────────────────────────────────────────────────
   Section shell
   ───────────────────────────────────────────────────────────────────────────── */

.claude-res-section {
	position: relative;
	width: 100%;
	padding-top: 8rem;
	padding-bottom: 8rem;
	box-sizing: border-box;
	z-index: 10;
	overflow: hidden;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	/* Dark background required so backdrop-filter on cards blurs the section surface,
	   not whatever page section sits behind this one. Matches demo-skin bg-novaDark. */
	background: var(--cw-surface-2, #1c1c1c);
}

/* Transparent variant — lets parent container's cw-bg-preset--* bleed through
   so this widget can blend with an adjacent widget sharing the same preset.
   Drops the opaque surface + gradient tint overlay; cards still have their own
   backdrop-filter blur backdrop. */
.claude-res-section--reserve-header {
	padding-top: calc(var(--cw-site-header-height, 0px) + 8rem);
}

.claude-res-section--transparent {
	background: transparent;
	border-top: 0;
}
.claude-res-section--transparent::before {
	display: none;
}

/* demo-skin .section-premium-depth::before */
.claude-res-section::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 2%, transparent) 0%,
		transparent 45%,
		transparent 55%,
		color-mix(in srgb, var(--cw-accent-primary, #dc2626) 2%, transparent) 100%
	);
}

.claude-res-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: min(1400px, var(--cw-content-max-width, 1280px));
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

@media (max-width: 1366px) {
	.claude-res-inner {
		padding-inline-start: max(var(--cw-gutter-inline), env(safe-area-inset-left, 0px));
		padding-inline-end: max(var(--cw-gutter-inline), env(safe-area-inset-right, 0px));
	}
}

@media (min-width: 1367px) {
	.claude-res-inner {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   Intro (markup matches Operational — cw-section-intro.css owns heading + pill)
   ───────────────────────────────────────────────────────────────────────────── */

/* Intro uses the same shell + heading class as Operational Environments (cw-section-intro.css). */
.claude-res-intro {
	width: 100%;
	margin-bottom: clamp(3rem, 6vw, 4rem);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Grid
   ───────────────────────────────────────────────────────────────────────────── */

/*
 * Grid columns are authoritatively set per widget instance by inline <style> emitted in render()
 * (see class-cw-widget-claude-dedicated-resources.php — "Columns per breakpoint" controls).
 * This baseline is only used if the inline style fails to load (very unlikely).
 */
.claude-res-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 768px) and (max-width: 1023px) {
	/* Specificity chain beats Elementor `tile_height` control injection: `{{WRAPPER}} .claude-res-tile { height: … }`. */
	.elementor-widget-claude-dedicated-resources .claude-res-section .claude-res-inner .claude-res-tile {
		height: 380px;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   Tile container  (.parallax-container equivalent)
   Needs perspective + preserve-3d so theme cw-motion.js 3D tilt works.
   Theme binds mousemove/mouseleave on ANY .parallax-container automatically.
   ───────────────────────────────────────────────────────────────────────────── */

.claude-res-tile {
	position: relative;
	display: block;
	height: 450px; /* overridden by Elementor style control */
	border-radius: 24px;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	box-sizing: border-box;
	/* Required for 3D tilt (theme cw-motion.js rotates .parallax-card within this perspective) */
	perspective: 1000px;
	transform-style: preserve-3d;
}

/* Focus ring for keyboard navigation */
a.claude-res-tile:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 70%, #fff);
	outline-offset: 4px;
	border-radius: 26px;
}

/* Scroll-reveal hidden start state — GSAP animates to opacity:1, y:0 */
.claude-res-section .claude-res-tile {
	opacity: 0;
	transform: translate3d(0, 40px, 0);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Tile card  (.parallax-card equivalent)
   Glass surface matches demo-skin .parallax-card definition exactly.
   NOTE: NO transform transition — GSAP (cw-motion.js) controls rotationX/Y.
   ───────────────────────────────────────────────────────────────────────────── */

.claude-res-tile__card {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 2rem;
	border-radius: 24px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	/* NOTE: transform-style:preserve-3d intentionally omitted — backdrop-filter flattens 3D context anyway.
	   GSAP (cw-motion.js) handles 3D tilt via rotationX/Y; CSS transitions on children are unaffected. */
	/* Glass surface — demo-skin: background: rgb(var(--bg2) / 0.4); backdrop-filter: blur(24px) */
	background: color-mix(in srgb, var(--cw-surface-2, #1c1c1c) 40%, transparent);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	/* Effect B: base shadow; transitions to hover glow */
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
	transition: box-shadow 0.4s ease;
}

/* Effect B: card glow on hover — demo-skin: .parallax-container:hover .parallax-card */
.claude-res-tile:hover .claude-res-tile__card,
.claude-res-tile:focus-within .claude-res-tile__card {
	box-shadow:
		0 8px 40px rgba(0, 0, 0, 0.3),
		inset 0 0 60px color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 6%, transparent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Effect A: .parallax-bg — gradient halo behind tile content
   demo-skin: .parallax-bg { z-index: -1; opacity: 0; transition: opacity 0.3s; }
             .parallax-container:hover .parallax-bg { opacity: 1; }
   In widget context: z:2 sits above the layers container (z:0) but below content (z:4).
   ───────────────────────────────────────────────────────────────────────────── */

.claude-res-tile .parallax-bg {
	position: absolute;
	inset: 0;
	border-radius: 24px;
	z-index: 2;
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--cw-accent-primary, #dc2626) 12%, transparent),
		color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 12%, transparent)
	);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.claude-res-tile:hover .parallax-bg,
.claude-res-tile:focus-within .parallax-bg {
	opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Background layers container
   All background visual layers live here in their own stacking context.
   ───────────────────────────────────────────────────────────────────────────── */

.claude-res-tile__layers {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	border-radius: 24px;
	pointer-events: none;
}

/* Base gradient fill — resource-bg-cool / resource-bg-warm */
.claude-res-tile__fill {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.claude-res-tile__fill--cool {
	background:
		radial-gradient(ellipse 80% 50% at 70% 20%, rgba(255, 255, 255, 0.04), transparent 50%),
		linear-gradient(
			135deg,
			color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 22%, transparent) 0%,
			color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 8%, transparent) 42%,
			color-mix(in srgb, var(--cw-bg, #0c0c0c) 98%, transparent) 100%
		);
}

.claude-res-tile__fill--warm {
	background:
		radial-gradient(ellipse 80% 50% at 70% 20%, rgba(255, 255, 255, 0.04), transparent 50%),
		linear-gradient(
			135deg,
			color-mix(in srgb, var(--cw-accent-primary, #dc2626) 22%, transparent) 0%,
			color-mix(in srgb, var(--cw-accent-primary, #dc2626) 8%, transparent) 42%,
			color-mix(in srgb, var(--cw-bg, #0c0c0c) 98%, transparent) 100%
		);
}

/* Effect D: large background icon — centered, 140px, scales + color-shift on hover.
   demo-skin: group-hover:scale-110 group-hover:text-novaPurple/45 transition-all duration-[1.5s]
   Both transform AND color transition at 1.5s (transition-all). */
.claude-res-tile__bg-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	pointer-events: none;
}

.claude-res-tile__bg-icon .material-symbols-outlined {
	font-size: 8.75rem;
	line-height: 1;
	/* BOTH transform and color at 1.5s — matches demo transition-all duration-[1.5s] */
	transition: transform 1.5s ease, color 1.5s ease;
}

.claude-res-tile__bg-icon svg,
.claude-res-tile__bg-icon i {
	width: 140px;
	height: 140px;
	font-size: 8.75rem;
	transition: transform 1.5s ease, color 1.5s ease;
}

/* Default tinted colors (25% opacity — demo: text-novaPurple/25, text-novaRed/25) */
.claude-res-tile__bg-icon--cool .material-symbols-outlined,
.claude-res-tile__bg-icon--cool svg,
.claude-res-tile__bg-icon--cool i {
	color: color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 25%, transparent);
}

.claude-res-tile__bg-icon--warm .material-symbols-outlined,
.claude-res-tile__bg-icon--warm svg,
.claude-res-tile__bg-icon--warm i {
	color: color-mix(in srgb, var(--cw-accent-primary, #dc2626) 25%, transparent);
}

/* Hover: scale-110 (on any tile) */
.claude-res-tile:hover .claude-res-tile__bg-icon .material-symbols-outlined,
.claude-res-tile:hover .claude-res-tile__bg-icon svg,
.claude-res-tile:hover .claude-res-tile__bg-icon i,
.claude-res-tile:focus-within .claude-res-tile__bg-icon .material-symbols-outlined,
.claude-res-tile:focus-within .claude-res-tile__bg-icon svg,
.claude-res-tile:focus-within .claude-res-tile__bg-icon i {
	transform: scale(1.1);
}

/* Hover: color 45% — cool tiles (demo: group-hover:text-novaPurple/45) */
.claude-res-tile--cool:hover .claude-res-tile__bg-icon--cool .material-symbols-outlined,
.claude-res-tile--cool:hover .claude-res-tile__bg-icon--cool svg,
.claude-res-tile--cool:focus-within .claude-res-tile__bg-icon--cool .material-symbols-outlined,
.claude-res-tile--cool:focus-within .claude-res-tile__bg-icon--cool svg {
	color: color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 45%, transparent);
}

/* Hover: color 45% — warm tiles (demo: group-hover:text-novaRed/45) */
.claude-res-tile--warm:hover .claude-res-tile__bg-icon--warm .material-symbols-outlined,
.claude-res-tile--warm:hover .claude-res-tile__bg-icon--warm svg,
.claude-res-tile--warm:focus-within .claude-res-tile__bg-icon--warm .material-symbols-outlined,
.claude-res-tile--warm:focus-within .claude-res-tile__bg-icon--warm svg {
	color: color-mix(in srgb, var(--cw-accent-primary, #dc2626) 45%, transparent);
}

/* Top-to-bottom gradient scrim — readability over fill */
.claude-res-tile__gradient {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(to top, var(--cw-surface-2, #1c1c1c), rgba(28, 28, 28, 0.6), transparent);
	pointer-events: none;
}

/* Effect C: hover wash — accent color tint overlay.
   demo-skin: z-10 within layers, mix-blend-mode:overlay, opacity 0→1 at 0.7s.
   z:10 here is within the layers stacking context — safely above gradient (z:2). */
.claude-res-tile__wash {
	position: absolute;
	inset: 0;
	z-index: 10;
	opacity: 0;
	mix-blend-mode: overlay;
	transition: opacity 0.7s ease;
}

.claude-res-tile__wash--cool {
	background: color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 20%, transparent);
}

.claude-res-tile__wash--warm {
	background: color-mix(in srgb, var(--cw-accent-primary, #dc2626) 20%, transparent);
}

.claude-res-tile:hover .claude-res-tile__wash,
.claude-res-tile:focus-within .claude-res-tile__wash {
	opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Effect E: foreground content  (.parallax-content equivalent)
   translateZ(0): GPU compositing layer — preserves depth under 3D tilt rotation.
   Hover: -translate-y-4 (1rem) + keeps translateZ(0) to maintain 3D context.
   ───────────────────────────────────────────────────────────────────────────── */

.claude-res-tile__content {
	position: relative;
	z-index: 4;
	/* translateZ(0) = demo-skin .parallax-content { transform: translateZ(0) } */
	transform: translateZ(0);
	transition: transform 0.5s ease-out;
}

/* Effect E hover: -translate-y-4 + preserve GPU layer (keep translateZ) */
.claude-res-tile:hover .claude-res-tile__content,
.claude-res-tile:focus-within .claude-res-tile__content {
	transform: translateY(-1rem) translateZ(0);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Effect F: icon chip  (small rounded square above title)
   demo-skin: bg-white/10 border-white/5 → group-hover:bg-nova-gradient border-transparent
   nova-gradient = linear-gradient(135deg, rgb(a1) 0%, rgb(a2) 100%) = primary→secondary
   ───────────────────────────────────────────────────────────────────────────── */

.claude-res-tile__chip {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.05);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: background 0.5s ease, border-color 0.5s ease;
}

.claude-res-tile__chip .material-symbols-outlined {
	font-size: 1.5rem;
	color: #fff;
	line-height: 1;
}

.claude-res-tile__chip svg,
.claude-res-tile__chip i {
	width: 1.5rem;
	height: 1.5rem;
	font-size: 1.5rem;
	color: #fff;
}

/* Effect F hover: nova-gradient background, transparent border */
.claude-res-tile:hover .claude-res-tile__chip,
.claude-res-tile:focus-within .claude-res-tile__chip {
	background: linear-gradient(
		135deg,
		var(--cw-accent-primary, #dc2626) 0%,
		var(--cw-accent-secondary, #00b7fa) 100%
	);
	border-color: transparent;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Effect G: title
   demo-skin: group-hover:text-novaPurple (cool) / group-hover:text-novaRed (warm)
   ───────────────────────────────────────────────────────────────────────────── */

.claude-res-tile__title {
	margin: 0 0 0.5rem;
	font-family: var(--cw-font-heading, "Barlow", system-ui, sans-serif);
	font-weight: 700;
	font-size: 1.875rem;
	line-height: 1.15;
	letter-spacing: 0;
	color: #fff;
	transition: color 0.5s ease;
	/* Keep the icon/title anchor consistent across tiles when one title uses fewer lines. */
	min-height: calc(1.15em * 2);
	display: flex;
	align-items: flex-end;
}

.claude-res-tile--cool:hover .claude-res-tile__title--cool,
.claude-res-tile--cool:focus-within .claude-res-tile__title--cool {
	color: var(--cw-accent-secondary, #00b7fa);
}

.claude-res-tile--warm:hover .claude-res-tile__title--warm,
.claude-res-tile--warm:focus-within .claude-res-tile__title--warm {
	color: var(--cw-accent-primary, #dc2626);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Effect H: excerpt — hidden by default, fades in on hover
   demo-skin: opacity-0 group-hover:opacity-100 transition-opacity duration-500
   ───────────────────────────────────────────────────────────────────────────── */

.claude-res-tile__excerpt {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--cw-text-muted, #94a3b8);
	opacity: 0;
	transition: opacity 0.5s ease;
	/* Reserve the same visual block height on all cards to prevent vertical drift. */
	min-height: calc(1.6em * 3);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.claude-res-tile:hover .claude-res-tile__excerpt,
.claude-res-tile:focus-within .claude-res-tile__excerpt {
	opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Effects I + J: link row + arrow
   demo-skin: opacity-0 group-hover:opacity-100 duration-500
             arrow: group-hover:translate-x-1 (0.25rem = 4px) duration-500
   ───────────────────────────────────────────────────────────────────────────── */

.claude-res-tile__link-row {
	display: flex;
	align-items: center;
	margin-top: 1rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: #fff;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.claude-res-tile:hover .claude-res-tile__link-row,
.claude-res-tile:focus-within .claude-res-tile__link-row {
	opacity: 1;
}

.claude-res-tile__link-text {
	line-height: 1;
}

.claude-res-tile__link-arrow {
	margin-left: 0.5rem;
	transition: transform 0.5s ease;
}

/* Material Symbols arrow sizing */
.claude-res-tile__link-arrow.material-symbols-outlined {
	font-size: 1.125rem;
	line-height: 1;
}

/* Effect J hover: arrow nudges right (translate-x-1 = 4px) */
.claude-res-tile:hover .claude-res-tile__link-arrow,
.claude-res-tile:focus-within .claude-res-tile__link-arrow {
	transform: translateX(4px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Effect K: Mobile is-content-revealed
   JS (cw-widgets-scroll-reveal.js initClaudeResourcesSection) adds this class
   when tile reaches 40% viewport on mobile. Replicates demo-skin mobile behavior:
   content slides up, excerpt/link-row fade in, parallax-bg shows, card glows.
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	/* Specificity chain beats Elementor `tile_height` control (0,3,0). Columns are handled
	   by inline <style> in render() — do NOT add grid-template-columns here (would override user's
	   per-breakpoint column settings). */
	.elementor-widget-claude-dedicated-resources .claude-res-section .claude-res-inner .claude-res-tile {
		height: 300px;
	}

	.claude-res-tile.is-content-revealed .claude-res-tile__content {
		transform: translateY(-1rem) translateZ(0);
	}

	.claude-res-tile.is-content-revealed .claude-res-tile__excerpt,
	.claude-res-tile.is-content-revealed .claude-res-tile__link-row {
		opacity: 1;
	}

	.claude-res-tile.is-content-revealed .parallax-bg {
		opacity: 1;
	}

	.claude-res-tile.is-content-revealed .claude-res-tile__wash {
		opacity: 1;
	}

	.claude-res-tile.is-content-revealed .claude-res-tile__card {
		box-shadow:
			0 8px 40px rgba(0, 0, 0, 0.3),
			inset 0 0 60px color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 6%, transparent);
	}

	/* Active tile: reveal chip gradient */
	.claude-res-tile.is-content-revealed .claude-res-tile__chip {
		background: linear-gradient(
			135deg,
			var(--cw-accent-primary, #dc2626) 0%,
			var(--cw-accent-secondary, #00b7fa) 100%
		);
		border-color: transparent;
	}

	/* Cool tile title tint on reveal */
	.claude-res-tile--cool.is-content-revealed .claude-res-tile__title--cool {
		color: var(--cw-accent-secondary, #00b7fa);
	}

	/* Warm tile title tint on reveal */
	.claude-res-tile--warm.is-content-revealed .claude-res-tile__title--warm {
		color: var(--cw-accent-primary, #dc2626);
	}

	/* Bg-icon reveals at higher opacity */
	.claude-res-tile--cool.is-content-revealed .claude-res-tile__bg-icon--cool .material-symbols-outlined,
	.claude-res-tile--cool.is-content-revealed .claude-res-tile__bg-icon--cool svg {
		color: color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 45%, transparent);
		transform: scale(1.1);
	}

	.claude-res-tile--warm.is-content-revealed .claude-res-tile__bg-icon--warm .material-symbols-outlined,
	.claude-res-tile--warm.is-content-revealed .claude-res-tile__bg-icon--warm svg {
		color: color-mix(in srgb, var(--cw-accent-primary, #dc2626) 45%, transparent);
		transform: scale(1.1);
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   Actions row — CTA buttons between intro and grid (or after grid)
   ───────────────────────────────────────────────────────────────────────────── */

.claude-res-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	max-width: 100%;
	position: relative;
	z-index: 2;
}

.claude-res-actions--above {
	margin-bottom: 2.5rem;
}

.claude-res-actions--below {
	margin-top: 2.5rem;
}

.claude-res-actions__item {
	flex: 0 0 auto;
}

@media (max-width: 540px) {
	.claude-res-actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.claude-res-actions__item,
	.claude-res-actions__item > .cw-hero__btn {
		width: 100%;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   Accessibility: prefers-reduced-motion
   ───────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.claude-res-tile__card,
	.claude-res-tile .parallax-bg,
	.claude-res-tile__wash,
	.claude-res-tile__bg-icon .material-symbols-outlined,
	.claude-res-tile__bg-icon svg,
	.claude-res-tile__bg-icon i,
	.claude-res-tile__content,
	.claude-res-tile__chip,
	.claude-res-tile__title,
	.claude-res-tile__excerpt,
	.claude-res-tile__link-row,
	.claude-res-tile__link-arrow {
		transition-duration: 0.01ms !important;
	}

	.claude-res-intro .split-reveal-heading .split-word,
	.claude-res-section .claude-res-tile {
		opacity: 1;
		transform: none;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   Elementor editor: disable hidden start states so content is always visible
   ───────────────────────────────────────────────────────────────────────────── */

.elementor-editor-active .claude-res-intro .split-reveal-heading .split-word,
.elementor-editor-active .claude-res-section .claude-res-tile {
	opacity: 1;
	transform: none;
}