// Component settings: News
// ------------------------------------------

//$o-news: (
//	'hover-bgcolor':  		palette(neutral, 100),
//	'text-color':			    palette(text-on-primary),
//);

// ------------------------------------------


.o-news {
	@include contain;
}

.o-news__heading {
	@include font-size(xl);
	color: palette(text);
}

.o-news__article {
	@include owl(space(4));
	position: relative;
}

.o-news__link {
	display: block;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 150ms linear;

	&::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		border: 1px solid palette(border, 100);
		transition: opacity 150ms linear;
	}

	&:hover,
	&:focus {
		background-color: palette(neutral, 100);

		&::before {
			opacity: 0;
		}
	}

	&:focus {
		outline-color: palette(feedback, action);
	}

	@include mq(m) {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
	}
}

.o-news__body {
	flex-grow: 1;
	padding: $site-gutter-width;

	@include mq(m) {
		order: 1;
		padding-top: space(6);
		padding-bottom: space(6);
		padding-left: column(1,8);
		padding-right: column(1,8);
	}

	@include mq(l) {
		padding-left: column(1,12);
	}
}

.o-news__image {
	position: relative;
	width: 100%;
	padding-bottom: 55%;

	@include mq(m) {
		flex: none;
		order: 2;
		width: column(2,8);
		padding-bottom: column(2,8);
	}
}

.o-news__bg-image {
	position: absolute;
	background-position: 50% 50%;
	background-size: cover;
	top: $site-gutter-width;
	right: $site-gutter-width;
	width: calc(100% - #{double($site-gutter-width)});
	height: calc(100% - #{$site-gutter-width});

	@include mq(m) {
		top: space(1);
		right: space(1);
		width: calc(100% - #{space(2)});
		height: calc(100% - #{space(2)});
	}
}


// Body content:
.o-news__intro {
	margin-top: space(3);
}

.o-news__timestamp {
	display: block;
	margin-top: space(2);
	color: palette(text, 300);
}

.o-news__action {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-top: space(1);
	color: palette(feedback, action);
}

.o-news__readmore {
	margin-right: space(1);
}

.o-news__footer {
	margin-top: space(4);
	text-align: center;
}