/**
 * BWOD Post Carousel
 *
 * Visuelt design: mørk bakgrunn, gul tittel og "Les mer"-knapp.
 * Basert på helnor.no referansedesign.
 */

.bwod-post-carousel-wrap {
	background: #111;
	padding: 2.5rem 1rem;
	box-sizing: border-box;
}

.bwod-post-carousel,
.bwod-post-carousel * {
	box-sizing: border-box;
}

/* Kort */
.bwod-post-carousel__slide {
	display: flex;
	height: auto;
}

.bwod-post-carousel__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	text-decoration: none;
	color: inherit;
	background: transparent;
	transition: transform 0.25s ease;
}

.bwod-post-carousel__card:hover,
.bwod-post-carousel__card:focus {
	text-decoration: none;
	transform: translateY( -4px );
}

.bwod-post-carousel__card:focus-visible {
	outline: 2px solid #ffed00;
	outline-offset: 4px;
}

/* Bilde med 16:9 aspect ratio og object-fit cover */
.bwod-post-carousel__image {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 6px;
	background: #222;
}

/* Fallback for eldre nettlesere uten aspect-ratio-støtte */
@supports not ( aspect-ratio: 16 / 9 ) {
	.bwod-post-carousel__image::before {
		content: "";
		display: block;
		padding-top: 56.25%;
	}
	.bwod-post-carousel__image > * {
		position: absolute;
		inset: 0;
	}
}

.bwod-post-carousel__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bwod-post-carousel__img--placeholder {
	background: linear-gradient( 135deg, #222 0%, #333 100% );
}

/* Tittel */
.bwod-post-carousel__title {
	color: #ffed00;
	font-weight: 700;
	text-align: center;
	margin: 1rem 0 0.75rem;
	font-size: 1.1rem;
	line-height: 1.3;
}

/* Les mer-knapp */
.bwod-post-carousel__button {
	display: inline-block;
	align-self: center;
	background: #ffed00;
	color: #111;
	padding: 0.55rem 1.5rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.95rem;
	text-transform: none;
	margin-bottom: 0.5rem;
	transition: background 0.2s ease;
}

.bwod-post-carousel__card:hover .bwod-post-carousel__button,
.bwod-post-carousel__card:focus .bwod-post-carousel__button {
	background: #fff44d;
}

/* Splide-overstyringer — piler */
.bwod-post-carousel .splide__arrow {
	background: rgba( 255, 255, 255, 0.1 );
	opacity: 1;
	width: 2.5rem;
	height: 2.5rem;
}

.bwod-post-carousel .splide__arrow:hover:not(:disabled) {
	background: rgba( 255, 237, 0, 0.9 );
}

.bwod-post-carousel .splide__arrow svg {
	fill: #ffed00;
	width: 1.2rem;
	height: 1.2rem;
}

.bwod-post-carousel .splide__arrow:hover:not(:disabled) svg {
	fill: #111;
}

.bwod-post-carousel .splide__arrow--prev {
	left: 0.25rem;
}

.bwod-post-carousel .splide__arrow--next {
	right: 0.25rem;
}

/* Splide-overstyringer — prikker */
.bwod-post-carousel .splide__pagination__page {
	background: rgba( 255, 255, 255, 0.3 );
}

.bwod-post-carousel .splide__pagination__page.is-active {
	background: #ffed00;
	transform: scale( 1.3 );
}