/*
 * assets/css/front-page.css
 * Template-specific styles for front-page.php only. Enqueued
 * conditionally via idia_enqueue_front_page_assets() (is_front_page())
 * in functions.php, so no other template pays the byte cost of hero,
 * category grid, or article grid rules it doesn't use.
 *
 * Pure CSS3 only. Consumes global.css variables exclusively — no new
 * color, spacing, or typography values are introduced here.
 */

/* ==========================================================================
   Hero section
   ========================================================================== */

.idia-hero {
	padding: var(--space-xl) 0;
	background-color: var(--idia-color-white);
}

.idia-hero-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	align-items: center;
}

.idia-hero-copy {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.idia-hero-headline {
	font-size: 2.5rem;
	margin-bottom: 0;
}

.idia-hero-subheading {
	font-size: 1.125rem;
	color: var(--idia-color-text);
	max-width: 40ch;
}

.idia-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-sm);
}

.idia-hero-figure {
	max-height: 480px;
}

/* ==========================================================================
   Section dividers
   ========================================================================== */

.idia-section-divider {
	max-width: var(--idia-max-width);
	margin: var(--space-lg) auto;
	padding: 0 var(--space-sm);
}

.idia-section-divider img {
	width: 100%;
	max-height: 60px;
	object-fit: contain;
}

/* ==========================================================================
   Generic sections
   ========================================================================== */

.idia-section {
	padding: var(--space-lg) 0;
}

.idia-section-heading {
	text-align: center;
	margin-bottom: var(--space-lg);
}

.idia-no-results {
	text-align: center;
	color: var(--idia-color-text-muted);
}

/* ==========================================================================
   Category grid — 3 desktop / 2 tablet / 1 mobile
   ========================================================================== */

.idia-category-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}

.idia-category-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding: var(--space-lg) var(--space-md);
	border-radius: 8px;
	text-align: center;
	box-shadow: var(--shadow-card);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.idia-category-card:hover,
.idia-category-card:focus-visible {
	box-shadow: var(--shadow-elevated);
	transform: translateY(-2px);
}

.idia-category-card:focus-visible {
	outline: 2px solid var(--idia-color-focus-ring);
	outline-offset: 2px;
}

.idia-category-icon {
	display: inline-flex;
}

.idia-category-name {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-medium);
	text-transform: none;
}

/* ==========================================================================
   Article grid
   ========================================================================== */

.idia-article-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}

.idia-article-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.idia-article-card-media {
	display: block;
}

.idia-article-card-body {
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.idia-article-card-title {
	margin-bottom: 0;
	font-size: 1.25rem;
	text-transform: none;
}

.idia-article-card-title a {
	text-decoration: none;
}

.idia-article-card-title a:hover {
	text-decoration: underline;
}

.idia-article-card-excerpt {
	color: var(--idia-color-text);
	margin-bottom: var(--space-sm);
	flex-grow: 1;
}

.idia-button--small {
	padding: var(--space-xxs) var(--space-sm);
	font-size: 0.875rem;
	align-self: flex-start;
}

/* ==========================================================================
   Responsive breakpoints
   ========================================================================== */

@media (min-width: 769px) {
	.idia-hero-inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 1024px) {
	.idia-category-grid,
	.idia-article-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.idia-category-grid,
	.idia-article-grid {
		grid-template-columns: 1fr;
	}

	.idia-hero-headline {
		font-size: 1.75rem;
	}
}