/**
 * Hinnasto-osio: mobiiliystävällinen oletustyyli hinnasto.php-sivupohjalle.
 * Ei pyri vastaamaan vanhaa käsin ladottua ulkoasua pikselilleen -
 * viilataan tarpeen mukaan myöhemmin. Ladataan vain hinnasto.php-pohjalla,
 * ks. elsalonki_enqueue_hinnasto_assets() (hinnasto-render.php).
 *
 * Lisätty 18.8.2026. Päivitetty samana päivänä: teeman muu CSS
 * (style2022.css/elsalonki2022.css) keskittää tekstin sisältöalueella
 * oletuksena, joten pakotetaan vasen tasaus tässä nimenomaisesti sen
 * sijaan että luotettaisiin perittyyn arvoon.
 */

.hinnasto,
.hinnasto h1,
.hinnasto h2,
.hinnasto h3,
.hinnasto p,
.hinnasto div,
.hinnasto span {
	text-align: left;
}

.hinnasto-paivitetty {
	font-size: 0.85em;
	color: #8a8a8a;
	margin: 0 0 1.5em;
}

.hinnasto-osio {
	margin-bottom: 2.5em;
}

.hinnasto-osio h2 {
	margin-top: 1.6em;
	margin-bottom: 0.6em;
}

.hinnasto-osio h2:first-child {
	margin-top: 0;
}

.hinnasto-osio h3 {
	margin-top: 1.3em;
	margin-bottom: 0.4em;
	font-size: 1.05em;
}

/* Osion/alaotsikon Kuvaus-kentästä tuleva lisätieto (esim. "Hoito edellyttää
   maksuttoman konsultaation..."). Otsikon ja rivien välissä, hillitympi kuin
   itse hinnastorivit jotta ero on selkeä. */
.hinnasto-osio-huomio {
	font-size: 0.9em;
	color: #6b6b6b;
	margin-bottom: 0.8em;
}

.hinnasto-osio-huomio p {
	margin: 0 0 0.5em;
}

.hinnasto-osio-huomio p:last-child {
	margin-bottom: 0;
}

.hinnasto-rivit {
	border-top: 1px solid #e5e0da;
}

.hinnasto-rivi {
	padding: 0.65em 0;
	border-bottom: 1px solid #e5e0da;
}

.hinnasto-rivi-paa {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.25em 1.5em;
}

.hinnasto-rivi-nimi {
	flex: 1 1 auto;
}

.hinnasto-rivi-nimi a {
	color: inherit;
	text-decoration: underline;
}

.hinnasto-rivi-kesto {
	display: block;
	font-size: 0.85em;
	color: #8a8a8a;
}

/* Oma elementti hinnalle: pakotettu oikealle reunalle sekä
   justify-content:space-betweenillä (yläsäätönä) että margin-left:autolla
   (varasäätönä, jos flex-rivin tila ei jostain syystä riitä/toimi). */
.hinnasto-rivi-hinta {
	flex: 0 0 auto;
	margin-left: auto;
	text-align: right;
	font-weight: 600;
	white-space: nowrap;
}

.hinnasto-rivi-kuvaus {
	margin: 0.3em 0 0;
	font-size: 0.9em;
	color: #6b6b6b;
}

/* Kapea näyttö (esim. 360-480px): hinta omalle rivilleen ei-vaakavieritettävästi. */
@media (max-width: 480px) {
	.hinnasto-rivi-paa {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.15em;
	}

	.hinnasto-rivi-hinta {
		margin-left: 0;
		text-align: left;
		font-size: 1.05em;
	}
}