Featured Article

@import "../../resources/scss/util/colours";
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-featured-article {
	background-color: $navy;
	color: $white;
	padding-top: rem-calc(30);
	padding-bottom: rem-calc(30);
	position: relative;

	@include bp($lg) {
		padding-left: rem-calc(80);
		padding-right: rem-calc(80);
		padding-top: rem-calc(80);
		padding-bottom: rem-calc(80);
	}

	&__wrapper {
		.category & {
			padding-top: rem-calc(32);
		}
	}

	.block-featured-article__wrapper & {
		padding-left: rem-calc(20);
		padding-right: rem-calc(20);

		@include bp($lg) {
			padding-left: rem-calc(48);
			padding-right: rem-calc(48);
		}
	}

	.heading {
		color: $white;
		@include fluid-type(22, 48);

		.block-featured-article__wrapper & {
			@include fluid-type(22, 32);
		}
	}

	&__wrapper {
		padding-top: rem-calc(80);
		padding-bottom: 0;

		@include bp($lg) {
			padding-bottom: rem-calc(80);
		}
	}

	&__background {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		&:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba($darkBlue, 0.8);
		}
	}

	&__links {
		margin-top: rem-calc(32);
	}

	&__copy {
		line-height: 1.5;
		margin-top: rem-calc(40);

		@include bp($lg) {
			margin-top: 0;
		}
	}

	&__details {
		font-size: rem-calc(14);
		margin-top: rem-calc(24);
	}

	&__date {
		display: inline-block;
	}

	&__author {
		color: $white;
		display: inline-block;
		margin-right: rem-calc(24);

		a {
			color: $white;
			transition: all 0.2s ease-in-out;
			font-style: italic;

			&:hover {
				color: $orange;
			}
		}
	}
}

class FeaturedArticle {
	/**
	 * Create and initialise objects of this class
	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
	 * @param {object} block
	 */
	constructor() {
		this.blocks = document.querySelectorAll('.block-example');
		this.init();
	}

	/**
	 * Example function to run class logic
	 * Can access `this.block`
	 */
	init() {
		this.blocks.forEach((block) => {
			console.log("🚀 ~ file: Example.js ~ line 20 ~ Example ~ init ~ this.block", block);
		});
	}
}

new FeaturedArticle();