/**
 * Narrow content layout (HS Narrow Content pages + single blog posts).
 * Content and breadcrumbs share a 990px column.
 * Header, navigation, and footer keep the site-wide container.
 *
 * Author: Hesham Saad
 * Author URI: https://heshamsaad.com
 */

body.hs-narrow-page {
	--hs-narrow-max: 990px;
	--hs-narrow-gutter: var(--sal-gutter, clamp(1.25rem, 4vw, 3rem));
}

body.hs-narrow-page #secondary,
body.hs-narrow-page .mobile-filter {
	display: none;
}

body.hs-narrow-page #primary,
body.hs-narrow-page .content-area {
	float: none;
	width: 100%;
	max-width: none;
	clear: both;
}

body.hs-narrow-page .shoptimizer-archive,
body.hs-narrow-page .archive-header {
	width: 100%;
}

/*
 * Only the page column inside #content. Header .col-full and footer
 * .col-full sit outside .site-content and stay at the 1600px site width.
 */
body.hs-narrow-page .site-content .col-full {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--hs-narrow-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--hs-narrow-gutter);
	padding-right: var(--hs-narrow-gutter);
}

body.hs-narrow-page .woocommerce-breadcrumb {
	margin-bottom: 0;
}

@media (min-width: 993px) {
	body.hs-narrow-page .site-content {
		padding-bottom: 3rem;
	}
}

@media (max-width: 992px) {
	body.hs-narrow-page .site-content {
		padding-bottom: 1.5rem;
	}
}

/*
 * Shared reading column for breadcrumb, title, content, and meta.
 * Use rem (not ch) so smaller breadcrumb type does not shrink the measure.
 * 42rem ≈ 70ch of body copy inside the 990px post column.
 */
body.single-post.hs-narrow-page {
	--hs-blog-measure: min(42rem, 100%);
}

body.single-post.hs-narrow-page .woocommerce-breadcrumb,
body.single-post.hs-narrow-page .post .entry-header,
body.single-post.hs-narrow-page .entry-content,
body.single-post.hs-narrow-page .entry-meta {
	box-sizing: border-box;
	max-width: var(--hs-blog-measure);
	margin-left: auto;
	margin-right: auto;
}

/* Title sits above the featured image (hook order in hs-site-pages.php). */
body.single-post.hs-narrow-page .post .entry-header {
	margin-bottom: 1.25rem;
}

/*
 * Single blog featured image: 16:9 desktop, 4:3 mobile, 4px radius.
 * Shoptimizer prints img.wp-post-image as a direct child of .post.
 */
body.single-post.hs-narrow-page .post > img.wp-post-image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	border-radius: 4px;
	margin-top: 0;
	margin-bottom: 1.618em;
}

@media (max-width: 768px) {
	body.single-post.hs-narrow-page .post > img.wp-post-image {
		aspect-ratio: 4 / 3;
	}
}