/* ═══════════════════════════════════════════
   HOME — landing-page-only sections
   ═══════════════════════════════════════════

   Sections that exist only on /: about, events, news, board, contact.
   Loaded LAST, after tokens.css, base.css, and components.css. */

/* ═══════════════════════════════════════════
   ABOUT
   ═══════════════════════════════════════════ */

#about-us {
	background: var(--bg-page);
}
.about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-16);
	align-items: center;
}
.about-text p {
	margin-bottom: 1.2rem;
	color: var(--text-secondary);
	font-size: var(--text-md);
}
.about-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
}
/* Grid items default to `min-width: auto`, which refuses to shrink below
   their content's min-content width — so on a 320px phone the two stat
   cards ("85+ Medlemmar", "20+ Event per år") held the grid 18px wider
   than the viewport and gave the home page a horizontal scrollbar. The
   labels wrap perfectly well once the cards are allowed to narrow. */
.about-stats > * {
	min-width: 0;
}
/* .stat-card and friends moved into @sms/design-components → StatCard.svelte */

/* ═══════════════════════════════════════════
   EVENTS
   ═══════════════════════════════════════════ */

#events {
	background: var(--bg-page);
}
.events-list {
	display: grid;
	gap: var(--space-6);
}
/* `.event-card` and friends moved to @sms/design-components → EventCard.svelte. */

/* ═══════════════════════════════════════════
   NEWS
   ═══════════════════════════════════════════ */

#news {
	background: var(--bg-page);
}
.posts-list {
	display: grid;
	gap: var(--space-6);
}
/* `.post-card` and friends moved to @sms/design-components → PostCard.svelte. */

/* ═══════════════════════════════════════════
   BOARD
   ═══════════════════════════════════════════ */

#board {
	background: var(--bg-page);
}
.board-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-6);
}
/* `.board-card` and friends moved to @sms/design-components → BoardCard.svelte. */

/* ═══════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════ */

#contact-us {
	background: linear-gradient(160deg, var(--burgundy-deep) 0%, var(--burgundy) 100%);
	color: white;
	text-align: center;
}
#contact-us .section-label {
	color: var(--gold-light);
}
#contact-us .section-title {
	color: white;
}
#contact-us .section-desc {
	color: var(--pink-light);
	margin: 0 auto var(--space-10);
	text-align: center;
}
.contact-info {
	display: flex;
	gap: var(--space-12);
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: var(--space-10);
}
.contact-item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}
.contact-icon {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-circle);
	background: rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-lg);
	color: white;
}
.contact-text {
	text-align: left;
}
.contact-text .label {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--pink-light);
	font-weight: var(--weight-medium);
}
.contact-text .value {
	font-size: var(--text-md);
	color: white;
	font-weight: var(--weight-medium);
}
.contact-text .value a {
	color: inherit;
	text-decoration: none;
	transition: color var(--duration-base, 200ms) ease;
}
.contact-text .value a:hover {
	color: var(--pink-light);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
	.about-grid {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
	/* event-card mobile layout moved to EventCard.svelte. */
	.contact-info {
		flex-direction: column;
		align-items: center;
	}
}

/* ═══════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
	.about-text p {
		color: var(--text-on-dark-muted);
	}

	/* stat-card dark-mode rules moved to StatCard.svelte */

	/* event-card dark-mode rules moved to EventCard.svelte. */

	/* post-card dark-mode rules moved to PostCard.svelte. */

	/* board-card dark-mode rules moved to BoardCard.svelte. */
}