@charset "utf-8";

@layer sections {
	.layout-interior{
		padding-block: var(--spacing-section);
	}

	.section-home-hero { --swiper-theme-color: var(--color-primary); position: relative; z-index: 0;
		.card { display: block; width: 100%; outline-offset: -2px; }
		.card-media { display: flex; justify-content: center; }
		.card-image { display: block; width: 100%; height: auto; }
	}

	.section-home-layout { padding-block: var(--spacing-section);
		& + & { border-top: var(--spacing-05) solid var(--color-neutral-100); }
		.section-home-layout-header { display: flex; justify-content: space-between; margin-bottom: var(--spacing-10);
			.section-home-layout-heading { margin-bottom: 0; }
		}
		.section-home-layout-heading { margin-bottom: var(--spacing-10); font: var(--font-heading-2); color: var(--color-black); }
		.section-home-layout-sub-heading { margin-bottom: var(--spacing-09); font: var(--font-heading-4); }
		.section-home-layout-more { display: inline-flex; align-items: center; gap: var(--spacing-02); font: var(--font-body-4); color: var(--color-neutral-500); transition: color 0.15s;
			&:hover { color: var(--color-black); }
		}
	}

	.section-home-category {
		.list { display: grid; grid-template-columns: repeat(auto-fit, minmax(70rem, 1fr)); gap: var(--grid-gutter); }
		.link { display: grid; justify-items: center; gap: var(--spacing-05); padding: var(--spacing-08) var(--spacing-05); font: var(--font-body-4); text-align: center; color: var(--color-neutral-600); border-radius: var(--radius-4);
			&:hover { background: var(--color-neutral-100); }
			@media (prefers-reduced-motion: no-preference) { transition: background 0.15s; }
		}
		.icon { display: grid; place-items: center; width: 2em; aspect-ratio: 1; font: var(--font-heading-3); font-size: 24px; border-radius: var(--radius-circle); user-select: none;

			&.icon--bg-1 { background: oklch(from var(--color-tertiary) var(--lightness-100) c h); }
			&.icon--bg-2 { background: oklch(from var(--color-secondary) var(--lightness-100) c h); }
			&.icon--bg-3 { background: oklch(from var(--color-primary) var(--lightness-100) c h); }
			&.icon--bg-4 { background: oklch(var(--lightness-100) 0.05 240); }
		}
	}

	.section-home-community {
		.board-layout { display: grid; gap: var(--grid-gutter);
			@media (width >= 768px) { grid-template-columns: repeat(2, 1fr); }
		}
		.header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-07); padding-bottom: var(--spacing-07); border-bottom: var(--border-width-2) solid var(--color-black); }
		.heading { font: var(--font-heading-3); }
		.more { font: var(--font-body-2); color: var(--color-neutral-500); }
		.empty, .link { padding-block: var(--spacing-05); }
		.item { border-bottom: var(--border-width-1) solid var(--color-neutral-100);
			&:last-child { border-bottom: 0; }
		}
		.link { display: grid; grid-template-columns: 1fr auto; align-items: center; }
		.subject { overflow: hidden; font: var(--font-body-3); color: var(--color-neutral-600); }
		.date { font: var(--font-body-4); color: var(--color-neutral-500); }
	}
}