/*
======================================================================
Much Ado
Layout
======================================================================
*/

.container,
.container--small{
	margin-inline:auto;
}

.container{
	width:min(92%,var(--container-width));
}

.container--small{
	width:min(92%,var(--container-small));
}

/* =====================================================
   Sections
===================================================== */

.section{
	padding-block:var(--space-128);
}

.section--small{
	padding-block:var(--space-64);
}

.section--large{
	padding-block:calc(var(--space-128) * 1.5);
}

/* =====================================================
   Flex
===================================================== */

.flex{
	display:flex;
}

.flex-center{
	display:flex;
	align-items:center;
	justify-content:center;
}

.flex-between{
	display:flex;
	align-items:center;
	justify-content:space-between;
}

.flex-column{
	display:flex;
	flex-direction:column;
}

.flex-wrap{
	flex-wrap:wrap;
}

.align-start{
	align-items:flex-start;
}

.align-center{
	align-items:center;
}

.align-end{
	align-items:flex-end;
}

.justify-start{
	justify-content:flex-start;
}

.justify-center{
	justify-content:center;
}

.justify-end{
	justify-content:flex-end;
}

.justify-between{
	justify-content:space-between;
}

/* =====================================================
   Grid
===================================================== */

.grid,
.grid-2,
.grid-3,
.grid-4{
	display:grid;
	gap:var(--space-32);
}

.grid-2{
	grid-template-columns:repeat(2,minmax(0,1fr));
}

.grid-3{
	grid-template-columns:repeat(3,minmax(0,1fr));
}

.grid-4{
	grid-template-columns:repeat(4,minmax(0,1fr));
}

/* =====================================================
   Widths
===================================================== */

.w-100{
	width:100%;
}

.h-100{
	height:100%;
}

/* =====================================================
   Spacing helpers
===================================================== */

.mt-0{margin-top:0;}
.mt-1{margin-top:var(--space-3);}
.mt-2{margin-top:var(--space-6);}
.mt-3{margin-top:var(--space-12);}
.mt-4{margin-top:var(--space-16);}
.mt-5{margin-top:var(--space-24);}
.mt-6{margin-top:var(--space-32);}
.mt-7{margin-top:var(--space-48);}
.mt-8{margin-top:var(--space-64);}

.mb-0{margin-bottom:0;}
.mb-1{margin-bottom:var(--space-3);}
.mb-2{margin-bottom:var(--space-6);}
.mb-3{margin-bottom:var(--space-12);}
.mb-4{margin-bottom:var(--space-16);}
.mb-5{margin-bottom:var(--space-24);}
.mb-6{margin-bottom:var(--space-32);}
.mb-7{margin-bottom:var(--space-48);}
.mb-8{margin-bottom:var(--space-64);}

.pt-0{padding-top:0;}
.pt-1{padding-top:var(--space-3);}
.pt-2{padding-top:var(--space-6);}
.pt-3{padding-top:var(--space-12);}
.pt-4{padding-top:var(--space-16);}
.pt-5{padding-top:var(--space-24);}
.pt-6{padding-top:var(--space-32);}
.pt-7{padding-top:var(--space-48);}
.pt-8{padding-top:var(--space-64);}

.pb-0{padding-bottom:0;}
.pb-1{padding-bottom:var(--space-3);}
.pb-2{padding-bottom:var(--space-6);}
.pb-3{padding-bottom:var(--space-12);}
.pb-4{padding-bottom:var(--space-16);}
.pb-5{padding-bottom:var(--space-24);}
.pb-6{padding-bottom:var(--space-32);}
.pb-7{padding-bottom:var(--space-48);}
.pb-8{padding-bottom:var(--space-64);}

/* =====================================================
   Home
===================================================== */

.home-content{
	max-width:var(--container-small);
	margin:0 auto;
	padding-top:var(--space-32);
}

.home-content > .container > *:last-child{
	margin-bottom:0;
}

/* =====================================================
   Pages
===================================================== */

.page__thumbnail{
	position:relative;
	margin-bottom:var(--space-96);
	overflow:hidden;
	border-radius:var(--radius-none);
}

.page__thumbnail img{
	width:100%;
	height:clamp(260px,35vw,420px);
	object-fit:cover;
	object-position:center;
}

.page__thumbnail > .container{
	position:absolute;
	inset:0;

	display:flex;
	justify-content:flex-end;
	align-items:flex-end;

	padding-bottom:3rem;

	z-index:2;
}

.page__thumbnail-content,
.play-header-content,
.program-header-content{
	width:85%;
	max-width:900px;
}

.page__thumbnail-content{
	text-align:right;
	margin-left:auto;
}

.program-header-content{
	margin-right:auto;
}

.play-header-content{
	margin-left:auto;
	margin-right:auto;
}

.page__thumbnail-content h1{
	margin:0;
	text-wrap:balance;
}

.page__header{
	margin-bottom:var(--space-64);
}

.page__content{
	padding-bottom:var(--space-6);
}

/* ======================================================
   BLOG LAYOUT
====================================================== */

.blog-layout{
	display:grid;
	grid-template-columns:300px minmax(0,1fr);
	gap:4rem;
	align-items:start;
}

.blog-sidebar{
	position:sticky;
	top:8rem;
	align-self:start;
}

/* ======================================================
   BLOG FEATURED POST
====================================================== */

.featured-post{
	position:relative;
	margin-bottom:4rem;
	overflow:hidden;
}

.featured-post__image{
	display:block;
	position:relative;
	aspect-ratio:16/7;
}

.featured-post__image img{
	width:100%;
	height:100%;
	object-fit:cover;
}

.featured-post__overlay{
	position:absolute;
	inset:0;

	background:linear-gradient(
		to top,
		rgba(0,0,0,.85) 5%,
		rgba(0,0,0,.55) 40%,
		rgba(0,0,0,.15) 75%,
		rgba(0,0,0,0) 100%
	);
}

.featured-post__content{
	position:absolute;

	inset:auto 3rem 3rem;

	z-index:5;

	max-width:60%;
}

.featured-post__content h2{
	margin:.5rem 0 1rem;

	font-size:var(--fs-4xl);

	font-family:var(--font-heading);
}

.featured-post__content h2 a{
	color:var(--color-crown);
}

.featured-post__excerpt{
	color:rgba(255,255,255,.92);
	max-width:40rem;
}

.featured-post .post__meta{
	color:rgba(255,255,255,.75);
	font-size:.9rem;
}

.featured-post .post__meta span{
	margin:0 .5rem;
}


/* ======================================================
   POSTS GRID
====================================================== */

.posts-grid{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:3rem;
}

.posts-grid .post{
	display:block;
}

.posts-grid .post__thumbnail{
	display:block;
	margin-bottom:1rem;
}

.posts-grid .post__thumbnail img{
	width:100%;
	aspect-ratio:16/10;
	object-fit:cover;

	transition:.35s;
}

.posts-grid .post:hover .post__thumbnail img{
	transform:scale(1.03);
}

.posts-grid .post__title{
	margin:.75rem 0;
}

.posts-grid .post__title a{
	color:var(--color-crown);
}

.posts-grid .post__meta{
	margin-bottom:.75rem;
	font-size:.9rem;
	color:var(--color-textdarker);
}

.posts-grid .post__excerpt{
	margin-bottom:1rem;
}

article .hero__eyebrow{
	font-weight:600;
	letter-spacing:normal;
}

article .hero__eyebrow a,
a.underlined{
	text-decoration:underline !important;
}

article .hero__eyebrow a:hover,
a.underlined:hover{
	text-decoration:none;
	color:var(--color-redlogo);
}


/* ======================================================
   BLOG/ARCHIVE PAGINATION
====================================================== */

.pagination,
.nav-links{
	text-align:center;
}

.nav-links{
	display:flex;
	justify-content:center;
	align-items:center;
	margin:2rem 0 0;
}

.page-numbers{
	display:flex;
	align-items:center;
	justify-content:center;

	width:2.75rem;
	height:2.75rem;

	border:1px solid var(--color-hr);
	border-radius:50%;

	text-decoration:none;

	color:var(--color-textdarker);

	transition:var(--transition);
	box-sizing:border-box;
}

.page-numbers:hover{
	border-color:var(--color-redlogo);
	color:var(--color-redlogo);
}

.page-numbers.current{
	background:var(--color-redlogo);
	border:1px solid var(--color-redlogo);
	color:var(--color-white);
}

.page-numbers.dots{
	border:none;
	width:auto;
	height:auto;
	padding:0 .5rem;
}

.page-numbers.prev,
.page-numbers.next{
	border:0;
}

/*======================================================
   BLOG POST NAVIGATION
======================================================*/

.post-navigation{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:4rem;
	margin-top:4rem;
}

.post-navigation__prev,
.post-navigation__next{
	display:block;
	width:280px;
}

.post-navigation__next{
	margin-left:auto;
	text-align:right;
}

.post-navigation__next img{
	margin-left:auto;
}

.post-navigation__prev{
	margin-right:auto;
	text-align:left;
}

.post-navigation a img{
	width:100%;
	height:auto;
	margin-bottom:1rem;
}

.post-navigation__next img{
	margin-left:auto;
}

/* =====================================================
   Responsive
===================================================== */

@media (max-width:1024px){

	.container{
		width:min(90%,var(--container-width));
	}

	.section{
		padding-block:var(--space-96);
	}

	.section--large{
		padding-block:var(--space-128);
	}

	.blog-layout{
		grid-template-columns:260px minmax(0,1fr);
		gap:3rem;
	}

	.posts-grid{
		gap:2rem;
	}

	.featured-post__content{
		max-width:75%;
	}

	.featured-post__content h2{
		font-size:var(--fs-xxl);
	}
}


/* =====================================================
   Mobile
===================================================== */

@media (max-width:768px){

	.container,
	.container--small{
		width:min(90%,100%);
	}

	.section,
	.section--small,
	.section--large{
		padding-block:var(--space-64);
	}

	.grid-2,
	.grid-3,
	.grid-4{
		grid-template-columns:1fr;
	}

	.blog-layout{
		grid-template-columns:1fr;
		gap:0.1rem;
	}

	.blog-sidebar{
		position:static;
		order:2;
	}

	.posts-grid{
		grid-template-columns:1fr;
		gap:3rem;
	}

	.featured-post__image{
		aspect-ratio:16/10;
	}

	.featured-post__content{
		position:absolute;
		inset:auto 1.5rem 1.5rem;
		max-width:100%;
	}

	.featured-post__content h2{
		font-size:2rem;
	}

	.page__thumbnail{
		margin-bottom:var(--space-48);
		border-radius:var(--radius);
	}

	.page__thumbnail img{
		height:220px;
	}

	.page__thumbnail>.container{
		padding-bottom:1.5rem;
	}

	.page__thumbnail-content{
		width:100%;
		text-align:left;
	}

	.post-navigation{
		flex-direction:column;
		gap:2rem;
	}

	.post-navigation__prev,
	.post-navigation__next{
		width:100%;
		text-align:left;
	}

	.post-navigation__next img{
		margin-left:0;
	}
}