@import "modules/design_system.css";
@import "modules/wedge_bg.css";

:root {
	--gallery-gutter-l: 36px;
	--gallery-gutter-m: 26px;
	--gallery-gutter-s: 15px;
	
	--featured-border: 8px;
}

header {
	position: relative;
	color: var(--text-color-on-dark);
	padding: 0 0 3em;
	
	h1{
		text-align: center;
		padding-top: 3.5em;
	}

	@media screen and (max-width: 750px){
		color: var(--text-color-on-light);
	}
}

.blog_index {
	padding: 5rem 0;
	min-height: 65vh;
	text-align: left;
	
	.content {
		display: flex;
	}
	
	.article_link {
		text-decoration: none;
		display: block;
		color: var(--text-color-on-light);
		
		&:hover .title{
			text-decoration: underline;
		}
	}
	
	time { 
		display: block;
		font-size: .75em;
		margin-top: .25em;
	}
	
	.featured_articles {
		width: calc(66.66% - (var(--gallery-gutter-l) / 2));
		margin-right: var(--gallery-gutter-l);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		
		.article_link {
			width: calc(50% - (var(--gallery-gutter-m) / 2));
			display: block;
		}
		
		figure {
			display: block;
			width: 100%;
			padding-bottom: 50%;
			background-size: cover;
			margin-bottom: .5em;
			border: solid var(--featured-border) #fff;
			box-shadow: 0 10px 25px rgba(0,0,0,.15);
			cursor: pointer;
		}
	}
	
	.remaining_articles {
		.article_link {
			border-bottom: solid 1px #ddd;
			margin-bottom: 1em;
			padding-bottom: 1em;
		}
	}
	
	@media screen and (max-width: 1150px){
		.content {
			flex-direction: column;
		}
		
		.featured_articles {
			width: 100%;
			margin: 0 0 4rem;
		}
		
		.remaining_articles .article_link:first-of-type {
			border-top: solid 1px #ddd;
			padding-top: 1em;
		}
	}
	
	@media screen and (max-width: 750px){
		.featured_articles .article_link {
			width: 100%;
			margin-bottom: 1.5em;
			
			&:last-of-type {
				margin-bottom: 0;
			}
		}
	}
	
	@media screen and (min-width: 750px) {
		.featured_articles .article_link:first-of-type{
			position: relative;
			width: 100%;
			margin-bottom: var(--gallery-gutter-m);
			
			figure {
				margin-bottom: 0;
			}
			.title {
				position: absolute;
				bottom: var(--featured-border);
				left: var(--featured-border);
				right: var(--featured-border);
				font-size: 1.5em;
				padding: 3em 4em .5rem .5rem;
				color: var(--text-color-on-dark);
				text-shadow: 2px 2px 8px rgba(0,0,0,.3);
				background-image: linear-gradient(
					to bottom,
					rgba(0, 0, 0, 0) 0%,
					rgba(0, 0, 0, .6) 100%
				);
			}
			time {
				color: var(--text-color-on-dark);
				position: absolute;
				bottom: calc(8px + .5rem);
				right:  calc(8px + .5rem);
			}
		}
	}
}