/**
 * HBLAB Event Calendar — base design system.
 *
 * Design tokens + shared components (typography, buttons, section heading,
 * footer band), all scoped under `.hblab-ec` so nothing leaks into the host
 * theme. Tokens extracted from hblab.co.jp.
 */

/* ------------------------------------------------------------------ *
 * Design tokens (scoped to the plugin root container)
 * ------------------------------------------------------------------ */
.hblab-ec {
	--hbec-yellow: #FFC316;
	--hbec-yellow-hover: #f0b400;
	--hbec-yellow-text: #424244;
	--hbec-text: #4B5563;
	--hbec-heading: #1F2937;
	--hbec-muted: #9CA3AF;
	--hbec-border: #E5E7EB;
	--hbec-bg: #FFFFFF;
	--hbec-bg-soft: #FAF7F0;
	--hbec-navy: #141B2E;
	--hbec-navy-2: #1E2A47;
	--hbec-navy-text: #C7CEDB;
	--hbec-footer-bg: #2B2B2E;
	--hbec-footer-text: #D1D5DB;
	--hbec-green: #16A34A;
	--hbec-gray: #9CA3AF;
	--hbec-radius: 8px;
	--hbec-radius-lg: 16px;
	--hbec-font: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	--hbec-maxw: 1120px;
	--hbec-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
	--hbec-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08);

	/* -------------------------------------------------------------- *
	 * Redesign token layer (additive — do NOT rename tokens above).
	 * Brand gradients, mesh stops, motion scale, z-index scale, display type.
	 * -------------------------------------------------------------- */
	/* Brand-hue gradients */
	--hbec-grad-warm: linear-gradient(120deg, #FFD65A, #FFC316 55%, #F5A700);
	--hbec-grad-navy: linear-gradient(135deg, #1E2A47, #141B2E 70%, #0D1220);
	/* Gradient-mesh radial stops (amber glow, navy depth, soft warm-white) */
	--hbec-mesh-1: radial-gradient(60% 55% at 78% 18%, rgba(255, 195, 22, 0.32), rgba(255, 195, 22, 0) 60%);
	--hbec-mesh-2: radial-gradient(70% 60% at 12% 82%, rgba(30, 42, 71, 0.55), rgba(20, 27, 46, 0) 62%);
	--hbec-mesh-3: radial-gradient(80% 70% at 50% 40%, rgba(255, 246, 224, 0.6), rgba(255, 246, 224, 0) 70%);
	/* Motion scale */
	--hbec-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--hbec-dur-fast: 0.18s;
	--hbec-dur: 0.4s;
	--hbec-dur-slow: 0.8s;
	/* Z-index scale (documented; use only these) */
	--hbec-z-bg: 0;
	--hbec-z-content: 1;
	--hbec-z-sticky: 20;
	--hbec-z-overlay: 40;
	--hbec-z-grain: 60;
	/* Display type (hero) */
	--hbec-fs-display: clamp(2.25rem, 6vw, 4.25rem);
	--hbec-fw-display: 900;
}

/* ------------------------------------------------------------------ *
 * Scoped reset (limited to the plugin container — no bare global selectors)
 * ------------------------------------------------------------------ */
.hblab-ec,
.hblab-ec *,
.hblab-ec *::before,
.hblab-ec *::after {
	box-sizing: border-box;
}

.hblab-ec {
	color: var(--hbec-text);
	font-family: var(--hbec-font);
	font-size: 16px;
	line-height: 1.8;
	background: var(--hbec-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.hblab-ec img {
	max-width: 100%;
	height: auto;
	display: block;
}

.hblab-ec a {
	color: inherit;
	text-decoration: none;
}

.hblab-ec h1,
.hblab-ec h2,
.hblab-ec h3,
.hblab-ec h4 {
	margin: 0;
	color: var(--hbec-heading);
	font-weight: 700;
	line-height: 1.4;
}

.hblab-ec p {
	margin: 0 0 1em;
}

.hblab-ec ul,
.hblab-ec ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------------------------ *
 * Layout helpers
 * ------------------------------------------------------------------ */
.hbec-container {
	width: 100%;
	max-width: var(--hbec-maxw);
	margin: 0 auto;
	padding: 0 20px;
}

.hbec-section {
	padding: 48px 0;
}

/* ------------------------------------------------------------------ *
 * Section heading — left yellow bar (shared across list + detail)
 * ------------------------------------------------------------------ */
h2.hbec-heading {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--hbec-heading);
	margin: 0 0 32px;
	padding-left: 14px;
}

.hbec-heading::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 5px;
	height: 1.4em;
	background: var(--hbec-yellow);
	border-radius: 2px;
}

/* ------------------------------------------------------------------ *
 * Buttons
 * ------------------------------------------------------------------ */
.hbec-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 28px;
	border: 2px solid var(--hbec-yellow);
	border-radius: var(--hbec-radius);
	background: var(--hbec-yellow);
	color: var(--hbec-yellow-text);
	font-family: var(--hbec-font);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.hbec-btn:hover,
.hbec-btn:focus-visible {
	background: var(--hbec-yellow-hover);
	border-color: var(--hbec-yellow-hover);
	transform: translateY(-1px);
}

.hbec-btn--ghost {
	background: transparent;
	color: var(--hbec-heading);
	border-color: var(--hbec-border);
}

.hbec-btn--ghost:hover,
.hbec-btn--ghost:focus-visible {
	background: var(--hbec-bg-soft);
	border-color: var(--hbec-yellow);
	transform: translateY(-1px);
}

.hbec-btn--dark {
	background: var(--hbec-navy);
	border-color: var(--hbec-navy);
	color: #fff;
}

.hbec-btn--dark:hover,
.hbec-btn--dark:focus-visible {
	background: var(--hbec-navy-2);
	border-color: var(--hbec-navy-2);
}

.hbec-btn--block {
	width: 100%;
}

/* ------------------------------------------------------------------ *
 * Topic chips (shared: list cards, featured, detail)
 * ------------------------------------------------------------------ */
.hbec-chip {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--hbec-bg-soft);
	border: 1px solid var(--hbec-border);
	color: #6B5A1E;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.6;
	white-space: nowrap;
}

.hbec-chip--light {
	background: rgba(255, 195, 22, 0.14);
	border-color: rgba(255, 195, 22, 0.4);
	color: #8A6D12;
}

/* ------------------------------------------------------------------ *
 * Footer band (dark navy — shared by detail self-contained rendering)
 * ------------------------------------------------------------------ */
.hbec-footer {
	background: var(--hbec-footer-bg);
	color: var(--hbec-footer-text);
	padding: 40px 0;
	margin-top: 64px;
	font-size: 0.875rem;
	text-align: center;
}

.hbec-footer a {
	color: var(--hbec-footer-text);
}

.hbec-footer a:hover {
	color: var(--hbec-yellow);
}

/* Minimal self-contained header band used on detail pages (theme-wrap off). */
.hbec-band {
	background: var(--hbec-bg);
	border-bottom: 1px solid var(--hbec-border);
	padding: 18px 0;
}

.hbec-band__logo {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--hbec-heading);
}

.hbec-band__logo span {
	color: var(--hbec-yellow);
}

/* Screen-reader-only utility. */
.hbec-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ================================================================== *
 * REDESIGN PRIMITIVES (Phase 1)
 * Gradient-mesh + drifting-blob background system, grain overlay, and
 * scroll-reveal utilities. All scoped under `.hblab-ec`; all motion
 * collapses under `prefers-reduced-motion: reduce`.
 * ================================================================== */

/* ------------------------------------------------------------------ *
 * Gradient-mesh background layer
 * Put `.hbec-mesh` as an absolutely-positioned child of a
 * `position:relative` section; it paints layered radial gradients and
 * hosts `.hbec-blob` drifting shapes. Non-interactive.
 * ------------------------------------------------------------------ */
.hblab-ec .hbec-mesh {
	position: absolute;
	inset: 0;
	z-index: var(--hbec-z-bg);
	overflow: hidden;
	pointer-events: none;
	background-image: var(--hbec-mesh-1), var(--hbec-mesh-2), var(--hbec-mesh-3);
	background-repeat: no-repeat;
}

/* Drifting organic blobs — large blurred brand-hue discs on a
 * non-interactive layer. Position each with inline style or a modifier. */
.hblab-ec .hbec-blob {
	position: absolute;
	width: 42vmax;
	height: 42vmax;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.55;
	pointer-events: none;
	will-change: transform;
}

.hblab-ec .hbec-blob--warm {
	background: radial-gradient(circle at 35% 35%, #FFD65A, #FFC316 55%, rgba(245, 167, 0, 0));
}

.hblab-ec .hbec-blob--navy {
	background: radial-gradient(circle at 40% 40%, #1E2A47, #141B2E 60%, rgba(13, 18, 32, 0));
}

.hblab-ec .hbec-blob--1 {
	top: -12%;
	right: -8%;
}

.hblab-ec .hbec-blob--2 {
	bottom: -18%;
	left: -10%;
}

.hblab-ec .hbec-blob--3 {
	top: 30%;
	left: 55%;
	width: 28vmax;
	height: 28vmax;
}

@media (prefers-reduced-motion: no-preference) {
	.hblab-ec .hbec-blob--1 {
		animation: hbec-drift 22s var(--hbec-ease) infinite alternate;
	}
	.hblab-ec .hbec-blob--2 {
		animation: hbec-drift 28s var(--hbec-ease) infinite alternate-reverse;
	}
	.hblab-ec .hbec-blob--3 {
		animation: hbec-drift 34s var(--hbec-ease) infinite alternate;
	}
}

@keyframes hbec-drift {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}
	to {
		transform: translate3d(6%, -5%, 0) scale(1.12);
	}
}

/* ------------------------------------------------------------------ *
 * Fixed grain / noise overlay — non-interactive top layer.
 * SVG fractal-noise data URI keeps it network-free.
 * ------------------------------------------------------------------ */
.hblab-ec .hbec-grain {
	position: fixed;
	inset: 0;
	z-index: var(--hbec-z-grain);
	pointer-events: none;
	opacity: 0.04;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	mix-blend-mode: multiply;
}

/* ------------------------------------------------------------------ *
 * Scroll-reveal utilities — DISABLED.
 * The fade/slide-in "fog" (content dimmed until scrolled into view) was removed
 * by request: `[data-hbec-reveal]` elements are always fully visible. The
 * attributes remain in the markup as harmless no-ops. motion.js no longer adds
 * the `.hbec-js-reveal` flag, so no initial-hidden state is ever applied.
 * ------------------------------------------------------------------ */

/* Reduced motion: neutralize the drifting blobs (the only remaining primitive
 * above MOTION 3). Reveal is already always-visible. */
@media (prefers-reduced-motion: reduce) {
	.hblab-ec .hbec-blob {
		animation: none !important;
	}
}