/* POST */

.POST {
	max-width: var(--col-9);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.POST .head {width: 100%; order: 1;}
.POST .body {width: calc(66.666666% - 10.66rem); order: 3;}
.POST .side {width: calc(33.333333% - 21.33rem); order: 2}

.POST .categories {
	display: inline-block;
	vertical-align: top;
	background: var(--purple-100);
	border-radius: 999rem;
	font-size: 14rem;
	font-weight: 500;
	line-height: var(--s5);
	padding: 0 var(--s3);
	margin-right: var(--s3);
}

.POST .press-type {
	display: inline-block;
	vertical-align: top;
	text-transform: uppercase;
	font-size: 14rem;
	line-height: var(--s5);
}

.POST .time-to-read {
	display: inline-block;
	vertical-align: top;
	text-transform: uppercase;
	font-size: 14rem;
	line-height: var(--s5);
}

.POST .head .title {
	margin: var(--s4) 0 var(--s7);
}

.POST .head .image {
	margin-bottom: var(--s7);
}

.POST .head .image .b-img {
	overflow: hidden;
	border-radius: var(--s4);
}

.POST .author {
	line-height: var(--s5);
	font-size: 16rem;
	font-weight: 500;
	margin-bottom: var(--s3);
}

.POST .author span:not(:last-child) {
	padding-right: var(--s3);
	margin-right: var(--s3);
	border-right: 1px solid var(--blue-500);
}

.POST .author a {
	display: inline-block;
	vertical-align: top;
	width: var(--s5);
	height: var(--s5);
	border-radius: 999rem;
	background: var(--grey-100);
	margin-left: var(--s1);
	color: var(--blue-500);
}

.POST .author a svg {
	padding: 4rem;
}

.POST .author a:hover {
	color: var(--blue-900);
}

.POST .sticky {
	top: var(--s7);
	position: sticky;
}

.POST .table-of-contents {
	border: 1px solid var(--black);
	padding: var(--s5) 0 var(--s4);
	border-radius: var(--s4);
	margin-bottom: var(--s6);
	font-size: 16rem;
}

.POST .table-of-contents h4 {
	margin: 0 var(--s5);
}

.POST .table-of-contents ul {
	list-style: none;
	padding: 0;
}

.POST .table-of-contents li {
	margin: 0;
}

.POST .table-of-contents li a {
	color: var(--black);
	text-decoration: none;
	display: block;
	padding: var(--s1) var(--s5);
	transition: color 0.25s, background-color 0.25s;
}

.POST .table-of-contents li a:not(.alt-active):hover {
	color: var(--blue-700);
}

.POST .table-of-contents li a.alt-active {
	background: var(--blue-50);
}

.POST .table-of-contents .button {
	margin: 0 var(--s5);
}

.POST .share .label {
	font-size: 24rem;
	font-weight: 500;
	margin-bottom: var(--s3);
}

.POST .share a,
.POST .share button {
	display: inline-block;
	vertical-align: top;
	width: var(--s5);
	height: var(--s5);
	border-radius: 999rem;
	background: var(--grey-100);
	margin: 0 var(--s5) 0 0;
	padding: 0;
	color: var(--blue-500);

	cursor: pointer;
	box-sizing: border-box;
	border: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.POST .share a svg,
.POST .share button svg {
	padding: 4rem;
}

.POST .share a:hover,
.POST .share button:hover {
	color: var(--blue-900);
}

.POST .share button.alt-copied {position: relative;}
.POST .share button.alt-copied::after {
	content: 'Copied';
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translate(4rem, -50%);
	background: var(--grey-100);
	padding: 4rem var(--s1);
	border-radius: 4rem;
	color: var(--black);
	font-size: 14rem;
}

.POST .content hr {border-color: var(--grey-200);}
.POST .content iframe {aspect-ratio: 16/9;}
.POST .content p > iframe:first-child {margin-top: calc(var(--s5) - var(--ps)) !important;}
.POST .content p > iframe:last-child {margin-bottom: calc(var(--s5) - var(--ps)) !important;}

.POST .profiles > h5 {margin-bottom: var(--s5);}

.POST:not([data-form]) .head .title:last-child {margin-bottom: var(--s7) !important;}
.wp-block .POST .table-of-contents {display: none;}

@media screen and (max-width: 1440px) {
	.POST .share .label {font-size: 20rem;}
	.POST .share a {margin-right: var(--s3);}
}

@media screen and (max-width: 960px) {
	.POST .side {width: 100%;}
	.POST .body {width: 100%;}
	.POST .head .title {margin: var(--s3) 0 var(--s5);}
	.POST .head .image {margin-bottom: var(--s5);}
	.POST .author {margin-bottom: var(--s1); font-size: 14rem;}
	.POST .sticky {position: static; margin-bottom: var(--s5);}
	.POST .share .label {font-size: 18rem;}
	.POST .table-of-contents {margin-bottom: var(--s5); font-size: 14rem;}
	.POST .table-of-contents li a.alt-active {background: none;}

	.POST .profiles > h5 {margin-bottom: var(--s3);}
	.POST:not([data-form]) .head .title:last-child {margin-bottom: var(--s5) !important;}
}



/* form */

.b-page .POST[data-form]::before {
	pointer-events: none;
	content: '';
	position: absolute;
	top: -160rem;
	bottom: var(--ns9);
	left: 50%;
	width: calc(var(--page-width) - var(--s7));
	max-width: 2496rem;
	transform: translate(-50%, 0);
	background: var(--light-blue-gradient);
	border-radius: var(--s4);
}

.POST[data-form] {
	margin-top: var(--ns5);
	position: relative;
	max-width: 100%;
	display: grid;
	grid-template-columns: auto calc(41.666666% - 18.66rem);
	grid-template-rows: auto 1fr;
	grid-column-gap: var(--s5);
}

.POST[data-form] .head {
	width: auto;
	position: relative;
	grid-area: 1 / 1 / 2 / 2;
	margin-bottom: var(--s4);
}

.POST[data-form] .body {
	width: auto;
	position: relative;
	grid-area: 2 / 1 / 3 / 2;
}

.POST[data-form] .side {
	width: auto;
	position: relative;
	grid-area: 1 / 2 / 3 / 3;
}

.POST[data-form] .author {display: none;}
.POST[data-form] blockquote {background: var(--white);}


.b-page .b-section:last-child .POST[data-form]:last-child::before {bottom: var(--ns8);}

@media screen and (max-width: 1440px) {
	.b-page .POST[data-form]::before {width: calc(var(--page-width) - var(--s3)); top: -184rem;}
	.b-page .b-section:last-child .POST[data-form]:last-child::before {bottom: -120rem;}
}

@media screen and (max-width: 960px) {
	.b-page .POST[data-form]::before {top: var(--ns9); bottom: var(--ns7); width: var(--page-width); border-radius: 0;}
	.POST[data-form] {display: block; margin-top: var(--ns3);}
	.POST[data-form] .head {margin-bottom: var(--s2);}
	.POST[data-form] .side {margin-top: var(--s5);}
}