/* hero.css — Figma node 10:2 "Hero Section" (1440 × 657). */

.hero {
	background: var(--c-white);
	padding-block: var(--sp-10);
}

.hero__inner {
	display: flex;
	align-items: flex-start;
}

/* --- Pääjuttu --- */

.hero-main { flex: 1 1 0; min-width: 0; }

.hero-main__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: #40404d;
	aspect-ratio: 820 / 360;
}
.hero-main__image { width: 100%; height: 100%; object-fit: cover; }
.hero-main__media .badge { position: absolute; top: var(--sp-4); left: var(--sp-4); }

.hero-main__text {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding-top: var(--sp-4);
}
.hero-main__title {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	text-wrap: balance;
}
.hero-main__lead {
	max-width: 66ch;
	color: var(--c-muted);
	font-size: 16px;
	line-height: 24px;
}

/* --- Sivupalsta --- */

.hero-side {
	display: flex;
	flex: 0 0 380px;
	width: 380px;
	flex-direction: column;
	gap: var(--sp-4);
	padding-left: var(--sp-8);
}
.hero-side__title {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.hero-side__list { display: flex; flex-direction: column; gap: var(--sp-4); }

.side-story { display: flex; gap: var(--sp-4); align-items: flex-start; }
.side-story__thumb {
	flex: 0 0 120px;
	width: 120px;
	height: 90px;
	overflow: hidden;
	background: var(--c-thumb);
}
.side-story__thumb img { width: 120px; height: 90px; object-fit: cover; }
.side-story__text {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	flex-direction: column;
	gap: var(--sp-1);
}
.side-story__title { font-size: 15px; font-weight: 600; line-height: 22px; }

@media (max-width: 900px) {
	.hero__inner { flex-direction: column; }
	.hero-side {
		flex-basis: auto;
		width: 100%;
		padding-left: 0;
		padding-top: var(--sp-8);
	}
}
@media (max-width: 600px) {
	.hero-main__title { font-size: 22px; }
}