/*--------------------------------------------------------------
# Blog Image Gallery Overrides
# Custom styles for blog detail page image galleries
--------------------------------------------------------------*/

/* Portfolio grid styling - square images with lightbox */
.portfolio-one__grid .portfolio-one__single {
	margin-bottom: 30px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0px 10px 20px 0px rgba(67, 131, 99, 0.1);
	background-color: #fff !important;
}

/* Create square container with aspect ratio - OVERRIDE GREEN BACKGROUND */
.portfolio-one__grid .portfolio-one__image {
	position: relative;
	width: 100%;
	padding-bottom: 100%; /* 1:1 aspect ratio for square */
	overflow: hidden;
	border-radius: 10px;
	background-color: #fff !important; /* Override the green var(--thm-base) from style.css */
}

/* Position anchor tag to fill container */
.portfolio-one__grid .portfolio-one__image a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* Position and style images */
.portfolio-one__grid .portfolio-one__image a img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
	transition: transform 500ms ease;
	opacity: 1 !important; /* Ensure image is visible, not transparent */
}

/* Hover zoom effect */
.portfolio-one__grid .portfolio-one__single:hover .portfolio-one__image a img {
	transform: scale(1.05);
	opacity: 1 !important; /* Keep at full opacity on hover */
}

/* Hide old plus icon overlay */
.portfolio-one__grid .portfolio-one__content {
	display: none !important;
}

/* Magnific Popup lightbox styling */
.mfp-bg {
	background-color: rgba(0, 0, 0, 0.9);
}

.mfp-figure figure {
	background-color: transparent;
}

/*--------------------------------------------------------------
# Blog Image Gallery
# Custom image gallery for blog detail pages
--------------------------------------------------------------*/

/* Gallery container */
.blog-gallery {
	margin-top: 40px;
	margin-bottom: 40px;
}

.blog-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 30px;
}

/* Individual gallery item */
.blog-gallery__item {
	position: relative;
	width: 100%;
	padding-top: 100%; /* 1:1 aspect ratio for square */
	overflow: hidden;
	border-radius: 10px;
	background-color: #f5f5f5;
	box-shadow: 0px 10px 20px 0px rgba(67, 131, 99, 0.1);
	cursor: pointer;
	transition: transform 300ms ease, box-shadow 300ms ease;
}

.blog-gallery__item:hover {
	transform: translateY(-5px);
	box-shadow: 0px 15px 30px 0px rgba(67, 131, 99, 0.15);
}

/* Image link wrapper */
.blog-gallery__link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* Image styling */
.blog-gallery__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
	transition: transform 500ms ease;
}

.blog-gallery__item:hover .blog-gallery__image {
	transform: scale(1.08);
}

/* Overlay effect on hover */
.blog-gallery__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(66, 126, 27, 0.1);
	opacity: 0;
	transition: opacity 300ms ease;
	border-radius: 10px;
	pointer-events: none;
}

.blog-gallery__item:hover .blog-gallery__overlay {
	opacity: 1;
}

/* Responsive layout */
@media (max-width: 991px) {
	.blog-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}
}

@media (max-width: 575px) {
	.blog-gallery__grid {
		grid-template-columns: 1fr;
		gap: 15px;
	}
}

/* Magnific Popup lightbox styling */
.mfp-bg {
	background-color: rgba(0, 0, 0, 0.9);
}

.mfp-img {
	background-color: transparent;
}

.mfp-figure figure {
	background-color: transparent;
}

.mfp-figure::after {
	background-color: transparent;
	box-shadow: none;
}

.mfp-container {
	background-color: rgba(0, 0, 0, 0.9);
}