/* ==========================================================================
	SECTION: INDEX LOOP STYLES
========================================================================== */

/* -- File notes ---------------------------------------------------------- */
/*
	File: loops.css
	Purpose: Post loop layouts (index, featured, popular, archive)
	Dependencies: colors.css
*/

/* -- Base index loop ----------------------------------------------------- */
.index-loop .entry-featured-image {
	display: inline-block;
}

.index-loop .entry-featured-image a {
	text-decoration: none;
	display: inline-block;
}

.index-loop .entry-featured-image a img {
	vertical-align: middle;
}

.index-loop .entry-header {
	margin-top: 1.25rem;
}

/* -- Entry meta ---------------------------------------------------------- */
.index-loop .entry-header .entry-category {
	display: inline-block;
	margin-bottom: 0.5rem;
	font-size: 0.75rem;
	background: var(--ink-100);
	padding: 0.25rem 0.5rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--white);
}

.index-loop .entry-header .entry-category a {
	display: inline-block;
	color: var(--white);
	line-height: 1;
	text-decoration: none;
}

/* -- Entry title --------------------------------------------------------- */
.index-loop .entry-header .entry-title {
	margin: 0;
	font-size: 1.5rem;
}

.index-loop .entry-header .entry-title a {
	line-height: 1.125;
	display: block;
	color: var(--text-primary);
	text-decoration: none;
}

.index-loop .entry-header .entry-title a:hover,
.index-loop .entry-header .entry-title a:focus-visible {
	color: var(--link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* -- Entry author -------------------------------------------------------- */
.index-loop .entry-header .entry-author {
	display: inline-block;
	font-style: italic;
	font-size: 0.875rem;
	color: var(--text-secondary);
	margin-top: 0.5rem;
}

/* -- Entry content ------------------------------------------------------- */
.index-loop .entry-content {
	margin: 0;
}

.index-loop .entry-content p {
	margin: 0;
}

.index-loop .entry-content p:first-of-type {
	padding-top: 0.5rem;
}

/* -- Entry footer -------------------------------------------------------- */
.index-loop .entry-footer .button {}

/* ==========================================================================
	SECTION: FEATURED POST LOOP STYLES
========================================================================== */

.feat-post-loop {
	margin-bottom: 2rem;
}

.feat-post-loop .entry-featured-image {}

.feat-post-loop .entry-header {}

.feat-post-loop .entry-content {}

.feat-post-loop .entry-footer {}

/* ==========================================================================
	SECTION: POPULAR POSTS LOOP STYLES
========================================================================== */

.popular-posts-loop {
	margin-top: 1.5rem;
}

.popular-posts-loop:first-of-type {
	margin-top: 0;
}

.popular-posts-loop .entry-featured-image {}

.popular-posts-loop .entry-header {}

.popular-posts-loop .entry-content {}

.popular-posts-loop .entry-footer {}

/* ==========================================================================
	SECTION: RECENT POSTS LOOP STYLES
========================================================================== */

.recent-posts-loop {}

.recent-posts-loop .entry-featured-image {}

.recent-posts-loop .entry-header {}

.recent-posts-loop .entry-content {}

.recent-posts-loop .entry-footer {}

/* ==========================================================================
	SECTION: ARCHIVE POSTS LOOP STYLES
========================================================================== */

.archive-posts-loop {}

.archive-posts-loop .entry-featured-image {}

.archive-posts-loop .entry-header {}

.archive-posts-loop .entry-content {}

.archive-posts-loop .entry-footer {}

/* ==========================================================================
	SECTION: BREAKPOINTS
========================================================================== */

/* -- 600 up -------------------------------------------------------------- */
@media only screen and (min-width: 600px) {

	/* -- Featured post loop styles --------------------------------------- */
	.feat-post-loop .entry-header .entry-category {
		font-size: 0.875rem;
	}

	.feat-post-loop .entry-header .entry-title {
		font-size: 2.5rem;
	}

	/* -- Popular & archive posts loop styles ----------------------------- */
	.popular-posts-loop,
	.archive-posts-loop {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: max-content max-content 0;
		grid-column-gap: 32px;
		grid-row-gap: 0;
		justify-items: start;
		align-items: center;
	}

	.popular-posts-loop .entry-featured-image,
	.archive-posts-loop .entry-featured-image {
		grid-area: 1 / 1 / 4 / 2;
		max-width: 300px;
	}

	.popular-posts-loop .entry-header,
	.archive-posts-loop .entry-header {
		margin-top: 0;
		grid-area: 1 / 2 / 2 / 3;
		align-self: flex-end;
	}

	.popular-posts-loop .entry-content,
	.archive-posts-loop .entry-content {
		grid-area: 2 / 2 / 3 / 3;
		align-self: flex-start;
	}

	.popular-posts-loop .entry-footer,
	.archive-posts-loop .entry-footer {
		grid-area: 3 / 2 / 4 / 3;
	}
}

/* -- 690 up -------------------------------------------------------------- */
@media only screen and (min-width: 690px) {

	/* -- Popular & archive posts loop styles ----------------------------- */
	.popular-posts-loop,
	.archive-posts-loop {
		grid-template-columns: max-content 1fr;
	}
}

/* -- 960 up -------------------------------------------------------------- */
@media only screen and (min-width: 960px) {

	/* -- Featured post loop styles --------------------------------------- */
	.feat-post-loop {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: max-content max-content 0;
		grid-column-gap: 32px;
		grid-row-gap: 0;
		justify-items: start;
		align-items: center;
	}

	.feat-post-loop .entry-featured-image {
		grid-area: 1 / 1 / 4 / 2;
		max-width: 642px;
	}

	.feat-post-loop .entry-header {
		margin-top: 0;
		grid-area: 1 / 2 / 2 / 3;
		align-self: flex-end;
	}

	.feat-post-loop .entry-content {
		grid-area: 2 / 2 / 3 / 3;
		align-self: flex-start;
	}

	.feat-post-loop .entry-footer {
		grid-area: 3 / 2 / 4 / 3;
	}
}

/* -- 1240 up ------------------------------------------------------------- */
@media only screen and (min-width: 1240px) {

	/* -- Featured post loop styles --------------------------------------- */
	.feat-post-loop {
		grid-template-columns: max-content 1fr;
	}

	.feat-post-loop .entry-header .entry-title {
		font-size: 3rem;
	}
}