/* Etusivun Ajankohtaista-osio, ks. inc/ajankohtaista.php */

/* Ei näkyviä dioja → koko osio piiloon */
.brxe-section:has(.albina-news-empty) {
	display: none;
}

.brxe-shortcode:has(> .albina-news) {
	width: 100%;
}

.albina-news {
	display: grid;
	grid-template-columns: var(--grid-2-3);
	gap: var(--grid-gap);
	align-items: center;
	width: 100%;
	/* Sama leveysrajoitus kuin Bricks-containerilla (ACSS --content-width) */
	max-width: var(--content-width);
	margin-inline: auto;
}

.albina-news__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--content-gap);
	min-width: 0;
}

/* Vastaa vanhan Bricks-rakenteen väliä otsikon ja tekstilohkon välissä */
.albina-news__slides {
	margin-top: var(--content-gap);
}

.albina-news__slides,
.albina-news__media {
	display: grid;
	width: 100%;
	min-width: 0;
}

/* Kuvat pinotaan samaan soluun (aina samankokoisia). Tekstidioista vain aktiivinen
   vie tilaa, jolloin painike ja nuolet pysyvät tekstin perässä ilman tyhjää väliä. */
.albina-news__slides {
	position: relative;
}

.albina-news__slide:not(.is-active) {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.albina-news__figure {
	grid-area: 1 / 1;
}

.albina-news__slide,
.albina-news__figure {
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

/* Poistuva teksti piiloon heti: eripituiset diat menisivät muuten hetkeksi päällekkäin nuolten päälle */
.albina-news__slide:not(.is-active) {
	transition: none;
}

.albina-news__slide.is-active,
.albina-news__figure.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.6s ease, visibility 0s;
}

.albina-news__slide {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--content-gap);
}

.albina-news__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	row-gap: var(--space-xs);
	width: 100%;
	padding-left: var(--space-m);
	border-left: 2px solid var(--primary);
}

.albina-news__title {
	font-size: var(--h4);
}

.albina-news__text > * {
	margin: 0;
}

/* Kappaleväli = tyhjä rivi (vastaa aiempaa <br><br>-muotoilua) */
.albina-news__text > * + * {
	margin-top: 1.75em;
	margin-top: 1lh;
}

.albina-news__nav {
	display: flex;
	align-items: center;
	gap: var(--space-s);
	font-family: Monod, sans-serif;
	font-size: 13px;
	letter-spacing: 0.08em;
}

.albina-news__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--primary);
	background: transparent;
	color: var(--primary);
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.albina-news__arrow:hover,
.albina-news__arrow:focus-visible {
	background: var(--primary);
	color: #fff;
}

.albina-news__arrow svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.albina-news--slider .albina-news__media {
	touch-action: pan-y;
}

.albina-news__figure {
	margin: 0;
}

.albina-news__image {
	display: block;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding-top: 80px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: 20% 20%;
}

@media (max-width: 767px) {
	.albina-news {
		grid-template-columns: var(--grid-1);
	}

	.albina-news__media {
		order: -1;
	}
}

@media (max-width: 478px) {
	.albina-news__image {
		padding-top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.albina-news__slide,
	.albina-news__figure,
	.albina-news__slide.is-active,
	.albina-news__figure.is-active {
		transition: none;
	}
}