/*
 * Newsletter ("La IA al dIA") archive - page-templates/archive-newsletter.php.
 *
 * Ported verbatim (design tokens/classes, not layout) from the old hand-built
 * /arxiu_newsletter/index.html, which lived outside the theme (site root, not
 * in git) and loaded Tailwind's Play CDN at runtime - see the QA finding this
 * replaces. This newsletter has always had its own visual identity (teal/
 * yellow glassmorphism) distinct from the rest of the site, kept deliberately
 * here rather than folded into the main design system.
 *
 * Layout utility classes (grid, flex, gap, p-8...) still used in the markup
 * come from the compiled/purged css/newsletter-tailwind.css (see
 * tools/newsletter/README.md for how to rebuild it), not this file.
 *
 * Scoped under .newsletter-archive (not :root) so these tokens/classes never
 * leak into the rest of the site.
 */
.newsletter-archive {
	--bg-base: #F6F4EC;
	--bg-secondary: #F0EFE2;
	--primary-dark: #262842;
	--core-green: #46C193;
	--deep-teal: #099C94;
	--accent-yellow: #DEF361;
	--blue-grey: #34474D;
	--soft-green-acc: #16A172;
	--soft-teal-acc: #099C94;

	--font-heading: 'Raleway', sans-serif;
	--font-body: 'Montserrat', sans-serif;

	background-color: var(--bg-secondary);
	font-family: var(--font-body);
	color: var(--primary-dark);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100vh;
}

.newsletter-archive .bg-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(150px);
	opacity: 0.8;
	z-index: -1;
}
.newsletter-archive .bg-blob-1 { background-color: var(--soft-green-acc); width: 400px; height: 400px; top: 50px; left: -100px; }
.newsletter-archive .bg-blob-2 { background-color: var(--accent-yellow); width: 500px; height: 500px; top: 300px; right: -200px; }
.newsletter-archive .bg-blob-3 { background-color: var(--soft-teal-acc); width: 500px; height: 500px; bottom: 100px; left: 30%; }

.newsletter-archive .glass-panel-light {
	background-color: rgba(246, 244, 236, 0.7);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.5);
	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease-in-out;
	border-radius: 1.5rem;
	position: relative;
}
.newsletter-archive .glass-panel-light:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.12);
}

.newsletter-archive .h-raleway { font-family: var(--font-heading); }
.newsletter-archive .t-dark { color: var(--primary-dark); }
.newsletter-archive .t-teal { color: var(--deep-teal); }
.newsletter-archive .t-grey { color: var(--blue-grey); }

.newsletter-archive .chip-green {
	background-color: rgba(70, 193, 147, 0.16);
	color: var(--primary-dark);
	padding: 2px 8px;
	font-size: 12px;
	text-transform: uppercase;
	border-radius: 6px;
	font-weight: 600;
}

.newsletter-archive .link-style {
	color: var(--deep-teal);
	text-decoration: none;
	transition: color 0.1s;
	font-weight: 600;
}
.newsletter-archive .link-style:hover { text-decoration: underline; }

.newsletter-archive .btn-cta {
	background-color: var(--deep-teal);
	color: #ffffff;
	border-radius: 50px;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(9, 156, 148, 0.3);
	border: 2px solid transparent;
	display: inline-block;
}
.newsletter-archive .btn-cta:hover {
	background-color: var(--primary-dark);
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 10px 25px rgba(38, 40, 66, 0.2);
}

.newsletter-archive .card-image-placeholder {
	background-color: var(--bg-secondary);
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	background-size: cover;
	background-position: center;
}

.newsletter-archive .floating-btn {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background-color: var(--primary-dark);
	color: #ffffff;
	z-index: 100;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.5rem 0.5rem;
	border-top-left-radius: 1rem;
	border-bottom-left-radius: 1rem;
	transition: all 0.3s ease;
	box-shadow: -4px 0 15px rgba(0, 0, 0, 0.15);
	text-decoration: none;
}
.newsletter-archive .floating-btn:hover {
	transform: translateY(-50%) translateX(-8px);
	background-color: var(--deep-teal);
	color: #ffffff;
}

.newsletter-archive .vertical-text {
	writing-mode: vertical-rl;
	margin-top: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	font-size: 0.85rem;
}