/**
 * Full Width Images in Content
 * Images span full width of content block with vertical spacing only
 * 
 * @package Blog Content
 */

/* ========================================
   Full Width Images in Entry Content
   ======================================== */

/* Remove padding from entry-content for images */
.entry-content {
	overflow-x: clip;
}

.site-main article {
	overflow-x: clip;
	position: relative;
}

/* Images - compensate for article padding (25px) to reach full width */
.entry-content img:not(.emoji),
.entry-content figure,
.entry-content .wp-block-image,
.page .entry-content img:not(.emoji),
.page .entry-content figure,
.page .entry-content .wp-block-image,
.single .entry-content img:not(.emoji),
.single .entry-content figure,
.single .entry-content .wp-block-image {
	width: calc(100% + 50px) !important;
	max-width: calc(100% + 50px) !important;
	height: auto !important;
	margin-left: -25px !important;
	margin-right: -25px !important;
	margin-top: 25px !important;
	margin-bottom: 25px !important;
	border-radius: 0 !important;
	display: block !important;
	box-sizing: border-box !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Author page images */
.author-page-content {
	overflow-x: clip;
	padding: 18px 0;
}

.author-page-content > *:not(img):not(figure) {
	padding-left: 25px;
	padding-right: 25px;
}

.author-page-content img,
.author-page-content figure {
	width: calc(100% + 50px) !important;
	max-width: calc(100% + 50px) !important;
	margin-left: -25px !important;
	margin-right: -25px !important;
	margin-top: 25px !important;
	margin-bottom: 25px !important;
	border-radius: 0 !important;
	display: block;
	box-sizing: border-box !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Figure captions stay within bounds */
.entry-content figure figcaption,
.entry-content .wp-block-image figcaption {
	margin-left: 25px !important;
	margin-right: 25px !important;
	padding: 10px 0;
	text-align: center;
	font-size: 0.9em;
	color: #666;
	font-style: italic;
}

.page .entry-content figure figcaption,
.page .entry-content .wp-block-image figcaption,
.single .entry-content figure figcaption,
.single .entry-content .wp-block-image figcaption,
.author-page-content figure figcaption {
	margin-left: 25px !important;
	margin-right: 25px !important;
	padding: 10px 0;
}

/* Images inside figures */
.entry-content figure img,
.entry-content .wp-block-image img,
.author-page-content figure img {
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* ========================================
   WordPress Block Images
   ======================================== */

/* Full width block images */
.entry-content .wp-block-image.alignfull img,
.entry-content .wp-block-image.alignwide img {
	width: 100% !important;
	margin: 0 !important;
}

/* Regular block images */
.entry-content .wp-block-image.aligncenter,
.entry-content .wp-block-image.alignnone,
.page .entry-content .wp-block-image.aligncenter,
.page .entry-content .wp-block-image.alignnone,
.single .entry-content .wp-block-image.aligncenter,
.single .entry-content .wp-block-image.alignnone {
	width: calc(100% + 50px) !important;
	max-width: calc(100% + 50px) !important;
	margin-left: -25px !important;
	margin-right: -25px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ========================================
   Gallery Images
   ======================================== */

.entry-content .gallery,
.entry-content .wp-block-gallery,
.page .entry-content .gallery,
.page .entry-content .wp-block-gallery,
.single .entry-content .gallery,
.single .entry-content .wp-block-gallery {
	width: calc(100% + 50px) !important;
	max-width: calc(100% + 50px) !important;
	margin-left: -25px !important;
	margin-right: -25px !important;
	margin-top: 25px !important;
	margin-bottom: 25px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.entry-content .gallery img,
.entry-content .wp-block-gallery img {
	width: 100% !important;
	margin: 0 !important;
}

/* ========================================
   Exceptions - Keep Original Width
   ======================================== */

/* Small inline images (like icons) - keep original size */
.entry-content p img {
	width: auto;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	display: inline-block;
	vertical-align: middle;
}

/* Emoji and small images */
.entry-content img.emoji,
.entry-content img[width],
.entry-content img[style*="width"] {
	width: auto !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	display: inline !important;
}

/* ========================================
   Post Thumbnail / Featured Image
   ======================================== */

.post-thumbnail,
.post-thumbnail img,
.wp-post-image {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	border-radius: 6px !important;
}

/* ========================================
   Responsive Adjustments
   ======================================== */

/* Tablets */
@media (max-width: 1024px) {
	/* entry-content padding (20px) + article padding (22px) = 42px each side = 84px total */
	.entry-content img,
	.entry-content figure,
	.entry-content .wp-block-image {
		width: calc(100% + 84px) !important;
		max-width: calc(100% + 84px) !important;
		margin-left: -42px !important;
		margin-right: -42px !important;
		margin-top: 20px !important;
		margin-bottom: 20px !important;
	}
	
	.page .entry-content img,
	.page .entry-content figure,
	.page .entry-content .wp-block-image,
	.single .entry-content img,
	.single .entry-content figure,
	.single .entry-content .wp-block-image,
	.author-page-content img,
	.author-page-content figure {
		width: calc(100% + 84px) !important;
		max-width: calc(100% + 84px) !important;
		margin-left: -42px !important;
		margin-right: -42px !important;
	}
	
	.entry-content figure figcaption,
	.entry-content .wp-block-image figcaption {
		margin-left: 42px !important;
		margin-right: 42px !important;
	}
	
	.page .entry-content figure figcaption,
	.page .entry-content .wp-block-image figcaption,
	.single .entry-content figure figcaption,
	.single .entry-content .wp-block-image figcaption,
	.author-page-content figure figcaption {
		margin-left: 42px !important;
		margin-right: 42px !important;
	}
	
	.entry-content .wp-block-image.aligncenter,
	.entry-content .wp-block-image.alignnone,
	.entry-content .gallery,
	.entry-content .wp-block-gallery {
		width: calc(100% + 84px) !important;
		max-width: calc(100% + 84px) !important;
		margin-left: -42px !important;
		margin-right: -42px !important;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.entry-content img,
	.entry-content figure,
	.entry-content .wp-block-image,
	.page .entry-content img,
	.page .entry-content figure,
	.single .entry-content img,
	.single .entry-content figure,
	.author-page-content img,
	.author-page-content figure {
		width: calc(100% + 40px);
		max-width: calc(100% + 40px);
		margin-left: -20px;
		margin-right: -20px;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	.entry-content figure figcaption,
	.entry-content .wp-block-image figcaption,
	.author-page-content figure figcaption {
		margin-left: 20px;
		margin-right: 20px;
	}
	
	.entry-content .wp-block-image.aligncenter,
	.entry-content .wp-block-image.alignnone,
	.entry-content .gallery,
	.entry-content .wp-block-gallery {
		width: calc(100% + 40px);
		max-width: calc(100% + 40px);
		margin-left: -20px;
		margin-right: -20px;
	}
}

/* Small mobile */
@media (max-width: 480px) {
	.entry-content img,
	.entry-content figure,
	.entry-content .wp-block-image,
	.page .entry-content img,
	.page .entry-content figure,
	.single .entry-content img,
	.single .entry-content figure,
	.author-page-content img,
	.author-page-content figure {
		width: calc(100% + 30px);
		max-width: calc(100% + 30px);
		margin-left: -15px;
		margin-right: -15px;
		margin-top: 15px;
		margin-bottom: 15px;
	}
	
	.entry-content figure figcaption,
	.entry-content .wp-block-image figcaption,
	.author-page-content figure figcaption {
		margin-left: 15px;
		margin-right: 15px;
	}
	
	.entry-content .wp-block-image.aligncenter,
	.entry-content .wp-block-image.alignnone,
	.entry-content .gallery,
	.entry-content .wp-block-gallery {
		width: calc(100% + 30px);
		max-width: calc(100% + 30px);
		margin-left: -15px;
		margin-right: -15px;
	}
}

/* ========================================
   Prevent Images in Sidebar from Full Width
   ======================================== */

.widget img,
.sidebar img,
#secondary img {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Author widget avatar - keep circular and override fullwidth rules */
.widget .author-widget-photo img,
.widget.author-box-widget img,
.widget.bc-author-widget img,
#secondary .author-widget-photo img,
.sidebar .author-widget-photo img {
	width: 120px !important;
	height: 120px !important;
	max-width: 120px !important;
	min-width: 120px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	margin: 0 auto !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 0 !important;
	margin-bottom: 20px !important;
	display: block !important;
	padding: 0 !important;
	border: 4px solid #f0f0f0 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}