/* =======
   ARTICLE
   ======= */	
   
   
/* Structure */
.article {
	width: 100%;
	max-width: var(--layout__width);
	margin: 0 auto;
	padding: 0 var(--spacing__sm) var(--spacing__lg);
	position: relative;
	z-index: 8;
	display: grid;
	grid-template-columns: 3fr 7fr;
	grid-template-areas: "article__sidebar article__main";
	gap: var(--spacing__sm); }

.article__main {
	grid-area: article__main; }

.article__sidebar__container {
	grid-area: article__sidebar; }
	
.article__sidebar__container {
	max-width: 330px; }

/* Spacing */
.toc + .share,
.toc + .sidebar-cta,
.sidebar-cta + .share {
	margin-top: var(--spacing__sm); }



	
	
/* Reverse order at ≤ 1000px */
@media (max-width: 1000px) {

	.article {
		grid-template-columns: 1fr;
		grid-template-areas:
		  "article__main"
		  "article__sidebar"; }

	.article .article__sidebar {
		display: none; }
		
	.article__sidebar__container {
		max-width: 100%; }	
		
		
}


.article__sidebar h2 {
  font-weight: 300;
  color: var(--color__navy__3); }
  
  


/* ======
   HEADER
   ====== */
.article__header {
	border-bottom: 1px solid var(--color__gray__10);
	padding-bottom: var(--spacing__md);
   	margin-bottom: 2rem; }
	

/* Meta */
.article__header__meta {
	margin-top: var(--spacing__md); }

.article__header__meta ul {
	display: flex; }

.article__header__meta ul li {
	padding-left: 1em;
	color: var(--color__gray__60);
	position: relative;}
		  
.article__header__meta ul li::after {
	content: '';
	position: relative;
	display: inline-block;
	margin-left: 1em;
	top: .1em;
	width: 1px;
	background: var(--color__gray__10); 
	height: 1em;
	z-index: 1; }

.article__header__meta ul li:first-of-type {
	padding-left: 0; }

.article__header__meta ul li:last-of-type::after {
	content: none; }

@media (max-width:600px) {
	
	.article__header__meta ul li {
		color: var(--color__gray__20); }
		
	.article__header__meta ul li::after {
		background: var(--color__gray__80); }
		
}



/* CTA */
.article__header__cta {
	display: flex;
	gap: var(--spacing__sm);
	margin-top: var(--spacing__md); }


/* Socials - Only used on mobile */
.article__header__socials {
	display: none;
	margin-top: var(--spacing__md);}

@media (max-width:1000px) {
	
	
	.article__header__socials {
		display: flex; }
	
}
	
			
@media (max-width:600px) {
	
	.article__header {
		text-align: center; }
		
	.article__header__meta ul,
	.article__header__cta {
		justify-content: center; }
		
	.article__header__meta ul,
	.article__header__cta {
		flex-wrap: wrap; }
		
	.article__header__socials {
		justify-content: center; }
	
	/* Left align on mobile */
	.single__event .article__header,
	.single__customersuccess .article__header {
		text-align: left; }
		
		
}

/* Snapshots */
.article__header__snapshots {
	margin-top: var(--spacing__md); }

.snapshots {
	display: flex;
   	gap: 8rem; }

.snapshots .snapshot {
	display: flex;
	position: relative;
	gap: var(--spacing__xs); 
	width: calc((100% - (var(--spacing__sm) * 2)) / 3); }
	
.snapshots .snapshot .snapshot__icon {
	flex-shrink: 0; }

.snapshots .snapshot:not(:first-child)::before {
	content: "";
	position: absolute;
	display: block;
	width: 1px;
	height: 100%;
	z-index: 9;
	background: var(--color__gray__10);
	left: -4rem; }
	
.snapshot p.title {
	font-size: 2.1rem;
   	font-weight: 400;
    text-transform: uppercase; }
	  
.article__event .snapshot p.title {
	font-weight: 300; }

/* Icon switch colours */
.snapshot__icon img.light {
	display: none; }

	
	
@media (max-width:600px) {
			
	.snapshots {
		text-align: left;
		gap: var(--spacing__sm);
		flex-wrap: wrap; }
		
	.snapshots .snapshot {
		justify-content: center;
		width: 100%; }
		
	.snapshot__icon img.light {
		display: block; }
	
	.snapshot__icon img.dark {
		display: none; }
		
	/* Left align on mobile */
	.single__event .snapshots .snapshot,
	.single__customersuccess .snapshots .snapshot {
		justify-content: left; }
		
}
		
		
		
				  
	  	
/* ======
   BLOCKS
   ====== */
article .image-block {
	border-radius: var(--border-radius);
	overflow: hidden;
	line-height: 0;
	background: red; }

article .image-block img {
	width: 100%; }






 /* ===============
	IMAGE ALIGNMENT
	===============  */   

article img.alignnone {
	display: block;
	margin: var(--spacing__sm) auto;
	height: auto;
	max-width: 100%; }


article img.alignright {
	height: auto;
	max-width: 50%; 
	float: right;
   	margin: 0 0 var(--spacing__sm) var(--spacing__sm); }
	   
@media (max-width: 600px) {
	
	article img.alignright {
		float: none;
		display: block;
		margin: var(--spacing__sm) auto;
		max-width: 100%; }
	
}	   
	   html {
		 scroll-behavior: smooth;
	   }
	   
/* ==========
   FORMATTING
    =========  */   	   

/* ARTICLE .F */
.article__section {
	scroll-margin: calc(var(--header-height) + var(--spacing__sm));
	margin-top: var(--spacing__sm);
	padding-top: var(--spacing__sm);
	border-top: 1px solid var(--color__gray__10); }

.article__body .article__section:nth-of-type(1) {
	border-top: none; }

.article__section img {
	border-radius: var(--border-radius); }	   
	   
.article__section img.square {
	border-radius: 0; }	   
	
.article__section .leadin {
	margin-bottom: var(--spacing__sm); }

.article__section .full-width-image {
	margin: var(--spacing__sm) auto; }
	
/* Fix for floating images */
.article__section::after {
	content: "";
	display: table;
	clear: both; }
	

/* Quotes */
.quote-wrapper {
	margin: 5rem auto;
	display: flex;
   	gap: var(--spacing__md); }

.quote-wrapper blockquote {
	margin: 0 auto; }
	
.quote-wrapper__image {
	width: 33%;
   	flex-shrink: 0;
    padding-top: .6em; }
	   
@media (max-width: 600px) {
	
	.quote-wrapper {
		flex-direction: column-reverse;
		flex-wrap: wrap; }
	
	.quote-wrapper__image {
		width: 100%;
		text-align: center;
		padding-top: 0; }
	
	.quote-wrapper__image img {
		margin: 0 auto;
		max-width: 300px; }
}	


   
	   	

/* ===============
   REVERSE HEADER 
    ============  */   	
	
@media (max-width:600px) {
	
	.single-article #header {
	  background: var(--color__navy__1); }
	  
	.single-article .article__header {
		color: var(--color__white);
		background: var(--color__navy__1); }
		
	.single-article .article {
		padding: 0; }
			
	.single-article .article__header {
		padding: var(--spacing__sm);
	   	padding-bottom: var(--spacing__md); }
		
	.single-article .article__body {
		padding: 0 var(--spacing__sm); }
	

	.single-article .m__breadcrumb {
	   color: var(--color__white);
	   background: var(--color__navy__1); }
			  
	.single-article .single-article .breadcrumb a {
		  color: var(--color__white); }
			  
}