/*
 * Woobox Archive (Wayback) styling — locally scoped via .wb-archive.
 *
 * Loaded from views/layouts/website/archive.php. Kept in its own file
 * (not Tailwind utility soup) because all the visual identity here lives
 * in this one component — extracting to utilities would just spray
 * archive-specific concerns across the whole atomic class system.
 *
 * Dynamic value: --wb-rep-blur (set inline by the view based on whether
 * the source image was pre-blurred server-side or needs heavy CSS blur).
 */

/* Match the hub-page final-CTA section's background — subtle indigo→white→
   pink gradient — so Wayback hero reads as part of the same visual family.
   Same recipe as views/website/elements-tailwind/category_hub.php's
   .<css>-final block. */
.wb-archive {
	position: relative;
	min-height: 70vh;
	overflow: hidden;
	background:
		linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(255, 255, 255, 1) 50%, rgba(244, 114, 182, 0.05) 100%);
}

/* Soft fade-to-white at the bottom so the gradient + flourish vectors
   blend smoothly into the next (white-bg) section instead of cutting off
   at a hard edge. Sits above the decoration (z:2) but below hero content
   (z:3 on the container) so the H1 + image card stay fully opaque. */
.wb-archive::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 140px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
	pointer-events: none;
	z-index: 2;
}

/* Decoration wrapper — pure positional shim. The inner cta_flourish SVG
   already carries `absolute inset-0 w-full h-full pointer-events-none`
   classes, so we don't need flex/mask gymnastics here. The earlier
   `mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent
   100%)` was hiding the bottom 40% of the decoration — exactly where the
   type-specific vector (raffle tickets, gift boxes, etc.) lives. */
.wb-archive__decoration {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Hero content sits above the decoration AND the fade overlay. */
.wb-archive > .container-custom { position: relative; z-index: 3; }

/* Blurred representation screenshot with ENDED stamp */
.wb-archive__rep {
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 12px 40px -12px rgba(15, 15, 30, 0.18), 0 1px 0 rgba(0,0,0,0.04);
	background: #f5f5f4; /* stone-100 fallback */
}
.wb-archive__rep-img {
	position: absolute; inset: -10%;
	background-size: cover; background-position: center;
	filter: blur(var(--wb-rep-blur, 4px)) saturate(1.1) brightness(0.92);
	transform: scale(1.15);
}
.wb-archive__rep-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20,20,32,0.18) 0%, rgba(20,20,32,0.42) 100%);
}
.wb-archive__rep-stamp {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%) rotate(-6deg);
	padding: 12px 38px;
	border: 4px solid rgba(255,255,255,0.85);
	border-radius: 8px;
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-weight: 800;
	font-size: clamp(2rem, 5vw, 3.5rem);
	letter-spacing: 0.18em;
	color: rgba(255,255,255,0.95);
	text-transform: uppercase;
	text-shadow: 0 2px 8px rgba(0,0,0,0.25);
	background: rgba(0,0,0,0.10);
	backdrop-filter: blur(2px);
	white-space: nowrap;
}
.wb-archive__rep-stamp::before, .wb-archive__rep-stamp::after {
	content: '';
	position: absolute;
	left: 8px; right: 8px;
	height: 1.5px;
	background: rgba(255,255,255,0.55);
}
.wb-archive__rep-stamp::before { top: 4px; }
.wb-archive__rep-stamp::after  { bottom: 4px; }
.wb-archive__rep-caption {
	position: absolute;
	bottom: 10px; right: 14px;
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.6);
	font-weight: 600;
}

/* Inline hub anchors in the "Created with Woobox" block. Look like body
   text by default; reveal as primary-colored underlined links on hover. */
.wb-hub-link {
	color: rgb(68, 64, 60); /* stone-700 */
	text-decoration: underline;
	text-decoration-color: rgb(231, 229, 228); /* stone-200 */
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.wb-hub-link:hover {
	color: rgb(37, 99, 235); /* primary-600 */
	text-decoration-color: rgb(37, 99, 235);
}