/* Single post formatting */

:root {
	--pq-fs: 1.6rem;
	--pq-ms: 6.4rem;
}

article.ast-article-single h1.entry-title,
.ast-archive-description h1.ast-archive-title {
	font-weight: var(--dso-heading-weight);
	font-size: var(--hs1);
	line-height: var(--ls1);
	
	text-align: left;
}

.ast-archive-description {
	margin: 0 0 1.6rem !important;
	padding: 0 0 1.6rem !important;
}

.content-area .ast-archive-description h1.page-title {
	font-weight: var(--dso-heading-weight) !important;
	font-size: var(--hs1);
	line-height: var(--ls1);
}

h2.entry-title a {
	display: inline-block !important;
}

/* ===============================
 * === IMAGES & INLINE-GALLERY === 
 * =============================== */

.entry-content img,
.ast-post-featured-img img,
.ast-article-single figure.wp-block-embed-youtube iframe {
	box-shadow: 0 0.6rem 0.4rem -0.4rem var(--dso-cool-gray-80-25p);
}

.ast-article-single figure.wp-block-embed {
	margin: 0 0 1.6rem;
}

.ast-article-single figure.wp-block-embed iframe {
	border-radius: var(--br1) !important;
}

.ast-article-single figure.wp-block-image img {
	border-radius: var(--br1) !important;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	width: 100%;
}

.ast-article-single figure.wp-block-image {
	display: flex;
	flex-direction: column;
	margin-bottom: 0 !important;
	box-shadow: none;
}

.wp-block-group.gallery-container {
	margin-bottom: 2.4rem;
}

.wp-block-group.inline-gallery {
	margin-bottom: 0;
}

.entry-content figcaption.wp-element-caption {
	margin: 0.8rem 0 1.6rem;
	padding-bottom: 0.8rem !important;
	font-size: 0.9rem !important;
	line-height: 1.2rem;
	font-style: italic;
	color: var(--dso-cool-gray-80-75p) !important;
	border-bottom: 1px dashed var(--dso-cool-gray-80-25p);
}

.entry-content .gallery-container figcaption.wp-element-caption {
	margin-bottom: 0;
	padding-bottom: 0 !important;
	border: none;
}

.wp-block-group.gallery-container {
	display: block;
	margin: 0 0 1.6rem;
	padding: 0 0 0.8rem;
	border-bottom: 1px dashed var(--dso-cool-gray-80-15p);
}

.inline-gallery figcaption.wp-element-caption {
	margin-bottom: 0;
}

.inline-gallery {
	margin-bottom: 2.4rem;
	padding: 0 !important;
	display: flex;
	gap: 0.8rem !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;  /* Firefox */
	scroll-behavior: smooth;
}

.inline-gallery::-webkit-scrollbar {
	display: none;  /* Chromium/Safari */
}

.inline-gallery figure {
	flex: 1 1 0;
	min-width: calc((100% - 1.6rem) / 3);
	margin-bottom: 0 !important;
	scroll-snap-align: start;
}

.inline-gallery figure.wp-block-image img {
	object-fit: cover;
	aspect-ratio: 4 /3 !important;
}

.inline-gallery figure:not(:first-child) {
	margin-top: 0 !important;
}

.entry-content figure.wp-block-image:has(+ .wp-block-heading) figcaption {
    margin-bottom: 0;
}

/* Apply only to linked images inside post content and galleries */

.ast-article-single .entry-content figure.wp-block-image a {
	position: relative;
	display: inline-block;
}

/* Add a subtle magnifying-glass overlay */

figure.wp-block-image a {
	position: relative;
	display: inline-block;
}

figure.wp-block-image a::after {
	content: '';
	position: absolute;
	bottom: 0.8em;
	right: 0.8em;
	width: 2.4em;
	height: 2.4em;
	background: url("https://www.dostuffoutdoors.com/wp-content/uploads/svg-icons/magnifier-plus.svg") no-repeat center / 60%;
	
	opacity: 0.6;
	transition: opacity 0.2s ease;
	pointer-events: none;
	z-index: 10;
}

/* Shadow layer behind the icon */

figure.wp-block-image a::before {
	content: '';
	position: absolute;
	bottom: 0.8em;
	right: 0.8em;
	width: 2.4em;
	height: 2.4em;
	background: var(--dso-cool-gray-80);
	z-index: 1;
	border-radius: var(--br1);  /* Not sure what this should be */
	
	opacity: 0.2;
	mix-blend-mode: multiply;
	
	pointer-events: none;
}

figure.wp-block-image a:hover::after {
	opacity: 1;
}

figure.wp-block-image a:hover::before {
 	opacity: 0.8;
}

figure.wp-block-image a::after,
figure.wp-block-image a::before {
	transition: transform 0.3s ease, opacity 0.3s ease;
}

figure.wp-block-image a:hover::after,
figure.wp-block-image a:hover::before {
	/* Offset by half of scale change to keep anchored */
	transform: translate(-0.125rem, -0.125rem) scale(1.25);
}

/* ===================== 
 * === DSO PULLQUOTE ===
 * ===================== */

.entry-content figure.dso-pullquote-01,
.entry-content figure.dso-pullquote-01.centered {
	position: relative;
	overflow: visible;
	
	box-sizing: border-box;
	margin: 3.2rem 0;
	padding: 0;
	
	border-radius: 0.8rem;
	
	width: 100%;
	
	z-index: 0;
	
	& .dso-pullquote-container {
		background-color: var(--dso-cool-gray-80-10p);
		
		border-width: 3px 0;
		border-style: solid;
		border-color: var(--dso-cool-gray-80-50p);
				
		padding: 3.2rem;
	
		& blockquote {
			margin: 0;
			padding: 0;

			border: none;

			color: var(--dso-cool-gray-80-75p);

			z-index: 2;

			&::before {
				all: unset;
			}

			& p {
				font-size: var(--pq-fs);
				font-style: initial;

				line-height: calc(var(--pq-fs) * 1.25);
				margin-bottom: 1.6rem;
			}
		}

		& cite {
			color: var(--dso-cool-gray-80-75p);
		}
	}
}

.entry-content figure.dso-pullquote-01.centered {
	text-align: center;
}

.entry-content figure.dso-pullquote-01 .dso-pullquote-container::before,
.entry-content figure.dso-pullquote-01 .dso-pullquote-container::after {
	position: absolute;
	inset: 0;
	
	width: 100%;
	height: 100%;
	
	background-color: var(--dso-cool-gray-80-10p);
}

.entry-content figure.dso-pullquote-01 .dso-pullquote-container::before {
	content: '';
	
	margin: 1.6rem;

	mask-image: url('https://www.dostuffoutdoors.com/wp-content/uploads/svg-icons/ldquo.svg');
	mask-repeat: no-repeat;
	mask-size: var(--pq-ms);
	mask-position: left top;

	z-index: 1;
}

.entry-content figure.dso-pullquote-01 .dso-pullquote-container::after {
	content: '';
	
	margin: -1.6rem;
	
	mask-image: url('https://www.dostuffoutdoors.com/wp-content/uploads/svg-icons/rdquo.svg');
	mask-repeat: no-repeat;
	mask-size: var(--pq-ms);
	mask-position: right bottom;

	z-index: 1;
}

/* === I don't know what these style! === */

.pswp .pswp__caption__text {
	font-style: italic;
	color: var(--dso-warm-gray-10);
}

.pswp button.pswp__button {
	color: var(--dso-warm-gray-10);  /* Probably can't work since it's SVG */
}

/* ============================
 * === PINGBACKS FORMATTING ===
 * ============================ */

.comments-area .ast-comment-list .pingback {
	margin-bottom: 0.8rem;
}

.pingback-pill {
	font-weight: var(--dso-meta-weight);
	color: var(--dso-cool-gray-80);
}

.pingback-pill::after {
	content: '\00BB';  /* \00A0\1F81A doesn't work on my phone */
	padding-left: 0.2rem;
	padding-right: 0.2rem;
}

.comments-area .ast-comment-list .pingback:last-child {
	margin-bottom: 1.6rem;
}