/* patterns/blog-carousel.php — vaakasuunnassa skrollattava rivi uusimmista
   blogikirjoituksista. Sama CSS-scroll-resepti kuin cosmetsky-blocks-
   pluginin tuotekarusellissa (assets/carousel.css: scroll-snap, ei
   JS-riippuvuuksia) ja sama korttityyli kuin product-card-native.css:ssä. */

/* Karusellirivin negatiivinen marginaali (alla) venyttää sen kosketusalueen
   hieman omien reunojensa yli — turvallista normaalisti, mutta jos rivin oma
   leveys jostain syystä lasketaan "100%" eikä "auto" (esim. WP:n omat
   layout-tyylit), marginaali voi työntää rivin sivun reunan yli ja koko sivu
   alkaa skrollaamaan vaakasuunnassa mobiilissa. overflow-x: hidden tässä
   kääreessä varmistaa ettei se koskaan pääse vuotamaan ulos asti. */
.blog-carousel-section {
	overflow-x: hidden;
}

.blog-carousel .wp-block-post-template {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 8px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	gap: 15px;
	padding: 8px 8px 4px;
	margin: -8px -8px 0;
	list-style: none;
}

.blog-carousel .wp-block-post-template::-webkit-scrollbar {
	display: none;
}

@media (min-width: 1024px) {
	.blog-carousel .wp-block-post-template {
		scrollbar-width: thin;
		scrollbar-color: #ccc transparent;
		padding-bottom: 10px;
	}

	.blog-carousel .wp-block-post-template::-webkit-scrollbar {
		display: block;
		height: 4px;
	}

	.blog-carousel .wp-block-post-template::-webkit-scrollbar-thumb {
		background-color: #ccc;
		border-radius: 4px;
	}
}

.blog-carousel .wp-block-post {
	flex: 0 0 calc(100% / 1.3);
	scroll-snap-align: start;
	min-width: 0;
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	margin-block-start: 0;
}

@media (min-width: 480px) {
	.blog-carousel .wp-block-post {
		flex-basis: calc(100% / 2.2);
	}
}

@media (min-width: 768px) {
	.blog-carousel .wp-block-post {
		flex-basis: calc(100% / 3.2);
	}
}

@media (min-width: 1024px) {
	.blog-carousel .wp-block-post {
		flex-basis: calc(100% / 4.2);
	}
}

/* min-height varaa aina 2 rivin tilan (ks. sama resepti product-card-native.css:ssä)
   jotta footerin "Lue lisää" ei hyppele kortista toiseen otsikon/kuvauksen
   pituuden mukaan. */
.blog-carousel .wp-block-post-title {
	margin: 14px 14px 4px;
	font-weight: 600;
	line-height: 1.35;
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-carousel .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.blog-carousel .wp-block-post-excerpt {
	margin: 0 14px 10px;
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast);
	opacity: 0.8;
	line-height: 1.4;
	min-height: 2.8em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-carousel .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.blog-carousel .wp-block-read-more {
	margin: auto 14px 14px;
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
}