/**
 * Home Page — Newsletter & Social Media Section
 *
 * Two-card layout: newsletter form (left) + social links (right).
 *
 * Dependencies: home-base.css, child theme design tokens
 *
 * @package BlockskyChild
 */

/* ============================================
   SECTION BACKGROUND
   ============================================ */

.home-newsletter {
	--section-bg: var(--color-bg-primary);
}

/* ============================================
   GRID — Two cards side by side
   ============================================ */

.home-newsletter__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.home-newsletter__grid {
		grid-template-columns: 1.1fr 1fr;
	}
}

/* ============================================
   CARD — Shared
   ============================================ */

.home-newsletter__card {
	padding: 2.5rem 2rem;
	border-radius: var(--radius-xl);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* --- Newsletter (left) card --- */

.home-newsletter__card--form {
	background: var(--color-bg-secondary);
	border: 1px solid var(--color-border);
}

[data-theme="light"] .home-newsletter__card--form {
	background: var(--color-bg-surface);
	border-color: var(--color-border);
}

/* --- Social (right) card — always dark --- */

.home-newsletter__card--social {
	background: #0f172a;
	border: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .home-newsletter__card--social {
	background: #0f172a;
}

/* ============================================
   HEADINGS & TEXT
   ============================================ */

.home-newsletter__heading {
	font-size: clamp(1.3rem, 3vw, 1.6rem);
	font-weight: 800;
	line-height: 1.2;
	color: var(--color-text-primary);
	margin: 0 0 0.75rem;
}

.home-newsletter__heading--light {
	color: #ffffff;
}

.home-newsletter__desc {
	font-size: var(--font-size-sm);
	line-height: 1.6;
	color: var(--color-text-secondary);
	margin: 0 0 1.5rem;
}

.home-newsletter__desc--light {
	color: rgba(255, 255, 255, 0.7);
}

/* ============================================
   NEWSLETTER FORM — Home section overrides
   Base styles live in footer.css (shared component).
   The pill-shaped look is now handled by the base row styles.
   ============================================ */

/* ============================================
   SOCIAL LINKS
   ============================================ */

.home-newsletter__socials {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.home-newsletter__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.8);
	font-size: 1.1rem;
	text-decoration: none;
	transition: background var(--transition-base),
	            color var(--transition-base),
	            transform var(--transition-base);
}

.home-newsletter__social-link:hover {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	transform: translateY(-2px);
}

.home-newsletter__social-link:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* ============================================
   SCROLL REVEAL
   ============================================ */

.home-newsletter .home-reveal {
	opacity: 0;
	transform: translateY(2rem);
	filter: blur(4px);
}

.home-newsletter .home-reveal.home-reveal--visible {
	animation: nlReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.home-newsletter__card--form.home-reveal--visible  { animation-delay: 0s; }
.home-newsletter__card--social.home-reveal--visible { animation-delay: 0.12s; }

@keyframes nlReveal {
	from {
		opacity: 0;
		transform: translateY(2rem);
		filter: blur(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 767px) {
	.home-newsletter__card {
		padding: 2rem 1.5rem;
	}

	.home-newsletter__card--form .pfp-newsletter-form__row {
		flex-direction: column;
		border-radius: var(--radius-xl);
		padding: 4px;
	}

	.home-newsletter__card--form .pfp-newsletter-form__submit {
		width: 100%;
		justify-content: center;
	}
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
	.home-newsletter .home-reveal {
		opacity: 1;
		transform: none;
		filter: none;
	}

	.home-newsletter .home-reveal.home-reveal--visible {
		animation: none;
	}
}