/* eCom Agency – lohkotyylit ja pienet lisäykset. Värit, fontit ja koot ovat theme.jsonissa. */

.wp-site-blocks {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

/* ---------- Kortit ---------- */
.wp-block-group.is-style-kortti,
.wp-block-group.is-style-kortti-tumma,
.wp-block-group.is-style-kortti-huurre {
	border-radius: var(--wp--custom--radius--kortti);
	padding: clamp(1.5rem, 4vw, 3rem);
}
.wp-block-group.is-style-kortti {
	background-color: var(--wp--preset--color--valkoinen);
}
.wp-block-group.is-style-kortti-tumma {
	background-color: var(--wp--preset--color--muste);
	color: var(--wp--preset--color--valkoinen);
}
.wp-block-group.is-style-kortti-tumma :where(h1, h2, h3, h4, h5, h6, a:not(.wp-element-button)) {
	color: inherit;
}
.wp-block-group.is-style-kortti-huurre {
	background-color: var(--wp--preset--color--huurre);
	border-radius: var(--wp--custom--radius--nappi);
	padding: 1.5rem;
}
.wp-block-column > .wp-block-group:only-child,
.wp-block-column > .ec-tayta {
	height: 100%;
	box-sizing: border-box;
}
.ec-kortti-iso.wp-block-group {
	padding: clamp(1.75rem, 5.5vw, 5rem) clamp(1.5rem, 5vw, 4.5rem);
}

/* Kuvapaikka: korvaa Kuva-lohkolla, kun valokuva on valmis */
.ec-kuvapaikka.wp-block-group {
	min-height: 18rem;
	border-radius: var(--wp--custom--radius--kortti);
	color: var(--wp--preset--color--teksti);
	font-size: var(--wp--preset--font-size--small);
	flex-grow: 1;
}
.wp-block-image.ec-kuva img {
	border-radius: var(--wp--custom--radius--kortti);
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* ---------- Napit ---------- */
.wp-block-button.is-style-toissijainen .wp-block-button__link {
	background-color: var(--wp--preset--color--jaa);
	color: var(--wp--preset--color--muste);
	font-weight: 500;
}
.wp-block-button.is-style-toissijainen .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--jaa-tumma);
	color: var(--wp--preset--color--muste);
}
.wp-block-button.is-style-tumma .wp-block-button__link {
	background-color: var(--wp--preset--color--muste);
	color: var(--wp--preset--color--valkoinen);
	border-radius: var(--wp--custom--radius--pieni);
	padding: 0.75rem 1.25rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}
.wp-block-button.is-style-tumma .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--puolukka);
}
.wp-block-button.is-style-valkoinen .wp-block-button__link {
	background-color: var(--wp--preset--color--valkoinen);
	color: var(--wp--preset--color--muste);
}
.wp-block-button.is-style-valkoinen .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--jaa);
	color: var(--wp--preset--color--muste);
}
.wp-block-button.is-style-reunus .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--valkoinen);
	border: 1px solid var(--wp--preset--color--harmaa);
	font-weight: 500;
}
.wp-block-button.is-style-reunus .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--valkoinen);
	color: var(--wp--preset--color--valkoinen);
}
.ec-napit-pino.wp-block-buttons {
	flex-direction: column;
	align-items: stretch;
	min-width: min(100%, 21rem);
}
.ec-napit-pino .wp-block-button,
.ec-napit-pino .wp-block-button__link {
	width: 100%;
	text-align: center;
}

/* ---------- Tekstityylit ---------- */
p.is-style-pilleri {
	width: fit-content;
	background-color: var(--wp--preset--color--jaa);
	color: var(--wp--preset--color--harmaa);
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}
p.is-style-ylaotsikko {
	color: var(--wp--preset--color--puolukka);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.02em;
}
p.is-style-numero {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--muste);
	color: var(--wp--preset--color--valkoinen);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
}
p.is-style-numero.has-puolukka-background-color {
	background-color: var(--wp--preset--color--puolukka);
}
p.is-style-iso-luku {
	font-size: clamp(2rem, 3.2vw, 2.5rem);
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1.1;
}
.is-style-kortti-tumma .has-harmaa-vaalea-color {
	color: var(--wp--preset--color--harmaa-vaalea);
}
.ec-linkki a {
	font-weight: 600;
	text-decoration: none;
}
.ec-linkki a:hover {
	text-decoration: underline;
}
.ec-otsikkorivi.wp-block-group {
	align-items: baseline;
}

/* ---------- Ylätunniste ---------- */
.ec-header.wp-block-group {
	padding: 1rem 1.25rem 1rem 1.75rem;
	gap: 1rem;
}
.ec-header .wp-block-navigation__responsive-container-open {
	padding: 0.5rem;
}
@media (max-width: 781px) {
	.ec-header .ec-header-cta {
		display: none;
	}
}

/* ---------- Alatunniste ---------- */
.ec-footer.wp-block-group {
	padding: 1rem 1.75rem 0.5rem;
	color: var(--wp--preset--color--harmaa);
	font-size: var(--wp--preset--font-size--small);
}
.ec-footer a {
	color: var(--wp--preset--color--harmaa);
}

/* ---------- UKK ---------- */
.wp-block-details summary {
	font-weight: 600;
	cursor: pointer;
}
.wp-block-details > :not(summary) {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--teksti);
	margin-top: 0.75rem;
}

/* Ankkurilinkit eivät jää ylätunnisteen alle */
:where(section[id], div[id]) {
	scroll-margin-top: 1.5rem;
}

/* Numeropallo: ohitetaan WP:n taustallisen kappaleen oletustäyte */
p.is-style-numero.has-background {
	padding: 0;
}

/* Ruudunlukijateksti (block-teemoissa ei ole oletuksena) */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: var(--wp--preset--color--valkoinen);
	clip-path: none;
	color: var(--wp--preset--color--muste);
	display: block;
	font-size: 1rem;
	height: auto;
	left: 5px;
	padding: 15px 23px 14px;
	top: 5px;
	width: auto;
	z-index: 100000;
}
.ec-footer .ec-logo a {
	color: var(--wp--preset--color--muste);
}

/* Kuvitus: vaakaversio isoille näytöille, pystyversio mobiiliin */
.wp-block-image.ec-vain-isot img,
.wp-block-image.ec-vain-mobiili img {
	width: 100%;
	height: auto;
}
.wp-block-image.ec-vain-mobiili {
	display: none;
}
@media (max-width: 781px) {
	.wp-block-image.ec-vain-isot {
		display: none;
	}
	.wp-block-image.ec-vain-mobiili {
		display: block;
	}
}