/**
 * Single Post Page Width Expansion & Responsive Layout Override
 * Scoped strictly to body.single-post / body.single
 */

/* ============================================================
   1. BASE STYLES (COMMON TO ALL SIZES)
   ============================================================ */
body.single-post article.single-content.card-layout-w {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 40px !important;
	border-radius: 20px !important;
}

body.single-post .single-hero-1 .image-container,
body.single-post .single-hero-inside .image-container,
body.single-post .single-hero .image-container {
	position: relative !important;
	width: 100% !important;
	overflow: hidden !important;
	border-radius: 14px !important;
	margin-bottom: 24px !important;
}

body.single-post .single-hero-1 .image-container::after,
body.single-post .single-hero-inside .image-container::after {
	display: none !important;
}

body.single-post .single-hero-1 .image-container img,
body.single-post .single-hero-inside .image-container img,
body.single-post .single-hero-inside .image-container .wp-post-image,
body.single-post .single-hero .image-container img,
body.single-post .single-featured-image img,
body.single-post .post-thumbnail img {
	width: 100% !important;
	height: auto !important;
	display: block !important;
	object-fit: cover !important;
	border-radius: 14px !important;
}

/* Post title & meta */
body.single-post .single-hero-inside .single-hero-title,
body.single-post .single-hero-title,
body.single-post .single-hero-title .title {
	width: 100% !important;
	max-width: 100% !important;
	word-break: break-word !important;
}

/* Article body text & typography */
body.single-post .single-content-inner {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

body.single-post .single-content-inner p,
body.single-post .entry-content p {
	font-size: 19px !important;
	line-height: 1.85 !important;
	letter-spacing: 0.01em !important;
	margin-bottom: 1.6em !important;
	word-break: break-word !important;
}

/* Author box, pagination & comments full width */
body.single-post .single-author-box-container,
body.single-post .single-next-prev-posts-container,
body.single-post #comments {
	width: 100% !important;
	max-width: 100% !important;
}

/* ============================================================
   2. DESKTOP LAYOUT (min-width: 1025px)
   ============================================================ */
@media screen and (min-width: 1025px) {
	/* Main site/content container: max-width 1560px, ~50px blue margins on left & right */
	body.single-post .single-post-wrapper .content-wrapper > .pt-container,
	body.single-post .content-wrapper > .pt-container,
	body.single-post .single-post-wrapper > .pt-container,
	body.single-post main .pt-container,
	body.single-post .pt-container {
		width: calc(100% - 100px) !important;
		max-width: 1560px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box !important;
	}

	/* Two-column flex container: card (72-74%) + sidebar (360px) + 36px gap */
	body.single-post .page-content-wrapper {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		gap: 36px !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* White post card container: takes ~72-74% of the container width */
	body.single-post .page-content-wrapper > .content-container {
		flex: 1 1 0% !important;
		min-width: 0 !important;
		width: auto !important;
		max-width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Sidebar: kept at clean width 360px (within 340px - 380px range) */
	body.single-post .page-content-wrapper > .sidebar-container {
		flex: 0 0 360px !important;
		width: 360px !important;
		min-width: 340px !important;
		max-width: 380px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-bottom: 40px !important;
	}

	/* Reduced featured image size on PC so it is balanced and doesn't overwhelm the viewport */
	body.single-post .single-hero-1 .image-container,
	body.single-post .single-hero-inside .image-container,
	body.single-post .single-hero .image-container {
		max-width: 780px !important;
		max-height: 420px !important;
		margin: 0 auto 28px auto !important;
		border-radius: 14px !important;
		overflow: hidden !important;
		display: block !important;
	}

	body.single-post .single-hero-1 .image-container img,
	body.single-post .single-hero-inside .image-container img,
	body.single-post .single-hero-inside .image-container .wp-post-image,
	body.single-post .single-hero .image-container img,
	body.single-post .single-featured-image img,
	body.single-post .post-thumbnail img {
		width: 100% !important;
		max-width: 100% !important;
		max-height: 420px !important;
		height: 380px !important;
		object-fit: cover !important;
		object-position: center 35% !important;
		border-radius: 14px !important;
		margin: 0 auto !important;
		display: block !important;
	}
}

/* ============================================================
   3. TABLET BREAKPOINT (<= 1024px)
   Stack sidebar below post card, 16-20px side margins
   ============================================================ */
@media screen and (max-width: 1024px) {
	body.single-post .single-post-wrapper .content-wrapper > .pt-container,
	body.single-post .content-wrapper > .pt-container,
	body.single-post .single-post-wrapper > .pt-container,
	body.single-post main .pt-container,
	body.single-post .pt-container {
		width: calc(100% - 36px) !important; /* ~18px margin each side */
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.single-post .page-content-wrapper {
		display: flex !important;
		flex-direction: column !important;
		gap: 32px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
	}

	body.single-post .page-content-wrapper > .content-container,
	body.single-post .page-content-wrapper > .sidebar-container {
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.single-post article.single-content.card-layout-w {
		padding: 28px !important;
	}

	body.single-post .single-content-inner p,
	body.single-post .entry-content p {
		font-size: 17.5px !important;
		line-height: 1.75 !important;
	}
}

/* ============================================================
   4. MOBILE BREAKPOINT (<= 640px)
   Nearly edge-to-edge card & reduced text size for more words/line
   ============================================================ */
@media screen and (max-width: 640px) {
	body.single-post .single-post-wrapper .content-wrapper > .pt-container,
	body.single-post .content-wrapper > .pt-container,
	body.single-post .single-post-wrapper > .pt-container,
	body.single-post main .pt-container,
	body.single-post .pt-container {
		width: calc(100% - 14px) !important; /* 7px margin each side */
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.single-post .page-content-wrapper {
		gap: 20px !important;
	}

	body.single-post article.single-content.card-layout-w {
		padding: 16px 14px !important;
		border-radius: 14px !important;
	}

	/* Reduced text size so significantly more words fit in each line */
	body.single-post .single-content-inner p,
	body.single-post .entry-content p,
	body.single-post .single-content-inner,
	body.single-post .single-content-inner li {
		font-size: 14.5px !important;
		line-height: 1.65 !important;
		letter-spacing: 0 !important;
		margin-bottom: 1.2em !important;
	}

	body.single-post .single-hero-inside .single-hero-title .title,
	body.single-post .single-hero-title .title {
		font-size: 1.3rem !important;
		line-height: 1.38 !important;
		margin-bottom: 0.9rem !important;
		padding-bottom: 0.75rem !important;
	}

	body.single-post .single-hero-1 .image-container,
	body.single-post .single-hero-inside .image-container,
	body.single-post .single-hero .image-container {
		max-height: 230px !important;
		margin-bottom: 16px !important;
	}

	body.single-post .single-hero-1 .image-container img,
	body.single-post .single-hero-inside .image-container img {
		max-height: 230px !important;
		object-fit: cover !important;
	}
}