/************************************/
/***    Instagram gallery css      ***/
/***    (image-gallery.html)       ***/
/************************************/

.ig-gallery{
	padding: 100px 0 70px;
}

/* Intro row: heading + profile card */
.ig-intro{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 50px;
}

.ig-intro .section-title{
	flex: 1 1 420px;
	margin-bottom: 0;
}

.ig-profile{
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	background: var(--secondary-color);
	border-radius: 30px;
	padding: 20px 24px;
}

.ig-avatar-ring{
	flex-shrink: 0;
	padding: 3px;
	border-radius: 50%;
	background: linear-gradient(45deg, #FFC83B, #FF0069, #7638FA);
}

.ig-avatar-ring img{
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 3px solid var(--white-color);
	background: var(--white-color);
	object-fit: cover;
}

.ig-profile-name{
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ig-profile-name strong{
	font-size: 18px;
	color: var(--primary-color);
}

.ig-profile-name span{
	font-size: 14px;
	color: var(--text-color);
	opacity: 0.7;
}

.ig-follow i{
	margin-right: 6px;
}

/* Grid */
.ig-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.ig-tile{
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 30px;
	background: var(--white-color);
	box-shadow: inset 0 0 0 1px rgba(11, 16, 48, 0.08);
}

/* Posts are mostly designed posters (square to 4:5) with text near the edges, so show them whole. */
.ig-tile img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.5s ease-out;
}

/* Reel covers are 9:16; fill the tile the way Instagram's own grid does. */
.ig-tile-video img{
	object-fit: cover;
}

.ig-tile:hover img,
.ig-tile:focus-visible img{
	transform: scale(1.04);
}

.ig-tile:focus-visible{
	outline: 3px solid var(--accent-color-two);
	outline-offset: 3px;
}

.ig-badge{
	position: absolute;
	top: 16px;
	right: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: var(--white-color);
	font-size: 14px;
}

.ig-overlay{
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 8px;
	padding: 24px;
	background: linear-gradient(0deg, rgba(11, 44, 29, 0.88) 0%, rgba(11, 44, 29, 0.2) 55%, transparent 100%);
	color: var(--white-color);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ig-overlay i{
	font-size: 22px;
}

.ig-overlay-caption{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.4em;
}

.ig-tile:hover .ig-overlay,
.ig-tile:focus-visible .ig-overlay{
	opacity: 1;
}

/* Loading skeleton */
.ig-skeleton{
	aspect-ratio: 4 / 5;
	border-radius: 30px;
	background: var(--secondary-color);
	animation: ig-pulse 1.4s ease-in-out infinite;
}

@keyframes ig-pulse{
	50%{ opacity: 0.5; }
}

/* Notices */
.ig-notice{
	border-radius: 16px;
	padding: 14px 20px;
	margin-bottom: 30px;
	font-size: 15px;
}

.ig-notice-mock{
	background: #FFF6DB;
	color: #5C4500;
}

.ig-notice-stale{
	background: var(--secondary-color);
	color: var(--primary-color);
}

/* Empty / error message */
.ig-status{
	max-width: 620px;
	margin: 0 auto 30px;
	text-align: center;
	background: var(--secondary-color);
	border-radius: 30px;
	padding: 50px 30px;
}

.ig-status-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--white-color);
	color: var(--accent-color-two);
	font-size: 28px;
	margin-bottom: 20px;
}

.ig-status h2{
	font-size: 28px;
	margin-bottom: 12px;
}

.ig-status p{
	margin-bottom: 24px;
}

.ig-status-actions{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

.ig-retry{
	font-size: 16px;
	font-weight: 600;
	line-height: 1em;
	color: var(--primary-color);
	background: var(--white-color);
	border: 1px solid var(--primary-color);
	border-radius: 50px;
	padding: 16px 30px;
}

.ig-retry:hover{
	background: var(--primary-color);
	color: var(--white-color);
}

/* See more */
.ig-more{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: 50px;
}

.ig-updated{
	font-size: 13px;
	opacity: 0.6;
}

/* Lightbox (Magnific Popup): image and caption share one card that fits the window */
.ig-mfp .mfp-image-holder .mfp-content{
	width: 100%;
	max-width: 760px;
}

.ig-lightbox-open .sticky-button{
	display: none !important;
}

.ig-mfp .mfp-figure:after{
	display: none;
}

.ig-mfp .mfp-figure figure{
	background: #000;
	border-radius: 20px;
	overflow: hidden;
}

/* Leaves room for the caption below; overrides Magnific's inline max-height. */
.ig-mfp img.mfp-img{
	max-height: calc(100vh - 230px) !important;
	padding: 0;
}

.ig-mfp .mfp-bottom-bar{
	position: static;
	margin-top: 0;
}

.ig-mfp .mfp-title{
	padding-right: 0;
}

.ig-mfp .mfp-counter{
	display: none;
}

.ig-lb-caption{
	background: var(--white-color);
	color: var(--text-color);
	border-radius: 0 0 20px 20px;
	padding: 18px 22px;
	text-align: left;
}

.ig-lb-text{
	max-height: 110px;
	overflow-y: auto;
	white-space: pre-line;
	font-size: 15px;
	line-height: 1.5em;
	margin-bottom: 10px;
}

.ig-lb-note{
	display: block;
	font-size: 13px;
	font-weight: 600;
	opacity: 0.7;
	margin-bottom: 10px;
}

.ig-lb-meta{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 13px;
}

.ig-lb-link{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--white-color) !important;
	background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-color-two) 100%);
	border-radius: 50px;
	padding: 9px 18px;
}

.ig-lb-video{
	position: relative;
	max-width: 760px;
	margin: 0 auto;
}

.ig-lb-video video{
	display: block;
	width: 100%;
	max-height: 70vh;
	background: #000;
	border-radius: 20px 20px 0 0;
}

@media only screen and (max-width: 991px){
	.ig-gallery{
		padding: 50px 0 30px;
	}

	.ig-grid{
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.ig-intro{
		margin-bottom: 30px;
	}
}

@media only screen and (max-width: 479px){
	.ig-grid{
		grid-template-columns: 1fr;
	}

	.ig-profile{
		width: 100%;
	}
}

@media (hover: none){
	.ig-overlay{
		opacity: 1;
		background: linear-gradient(0deg, rgba(11, 44, 29, 0.75) 0%, transparent 45%);
	}

	.ig-overlay-caption{
		display: none;
	}
}

@media (prefers-reduced-motion: reduce){
	.ig-tile img,
	.ig-overlay{
		transition: none;
	}

	.ig-skeleton{
		animation: none;
	}
}