/* ==============================================================
 * Stilographa — home.css
 * Front page: hero slider mechanics + featured visual.
 * The static sections themselves are already styled in site.css.
 * Loaded on the front page only.
 * ============================================================== */

/* ——— Hero slider ——— */
.hero-slider{position:relative}
.hero-viewport{position:static}

.hero-slides{display:grid}
.hero-slide{
	grid-area:1 / 1;
	opacity:0;visibility:hidden;pointer-events:none;
	transition:opacity .7s cubic-bezier(.16,1,.3,1), visibility .7s;
}
.hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto}

.hero-slider .hero-grid{align-items:center}
.hero-copy{min-width:0}

/* Illustration (replaces the original signed aside) */
.hero-illus{border-radius:8px;overflow:hidden;background:var(--paper-2)}
.hero-illus img,
.hero-illus svg{display:block;width:100%;height:auto}

/* Controls (bottom bar): dots left, arrows right */
.hero-controls{
	display:flex;align-items:center;justify-content:space-between;
	gap:20px;flex-wrap:wrap;margin-top:44px;
}
.hero-arrows{display:flex;gap:12px}
.hero-arrow{
	width:50px;height:50px;border-radius:50%;
	border:1px solid var(--line);background:transparent;
	display:flex;align-items:center;justify-content:center;
	cursor:pointer;color:var(--ink);transition:.25s ease;
}
.hero-arrow:hover{border-color:var(--ink);background:var(--paper-2)}
.hero-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}

/* Dots */
.hero-dots{display:flex;gap:10px}
.hero-dot{
	width:9px;height:9px;border-radius:50%;padding:0;cursor:pointer;
	border:1px solid var(--ink-soft);background:transparent;transition:.25s ease;
}
.hero-dot:hover{border-color:var(--accent)}
.hero-dot.is-active{background:var(--accent);border-color:var(--accent)}

/* ——— Featured section visual (replaces the book cover) ——— */
.featured-visual{display:flex;align-items:center;justify-content:center;width:100%}
.featured-visual img,
.featured-visual svg{
	width:100%;border-radius:6px;display:block;
	box-shadow:0 30px 55px -24px rgba(26,23,18,.45),0 8px 18px -10px rgba(26,23,18,.28);
}

/* ——— Stats: adapt column count to the number of active items ——— */
.stats-grid.cols-1{grid-template-columns:1fr}
.stats-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.stats-grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:880px){
	.stats-grid.cols-1,
	.stats-grid.cols-2,
	.stats-grid.cols-3{grid-template-columns:1fr 1fr}
}

@media(max-width:880px){
	.hero-controls{margin-top:32px}
	.hero-arrow{width:44px;height:44px}
}

@media(prefers-reduced-motion:reduce){
	.hero-slide{transition:none}
}