/* Phoenix Instagram feed. Colours come from the theme's palette, with fallbacks. */

.phoenix-ig {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 1.5rem 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.phoenix-ig { grid-template-columns: repeat(min(3, var(--phoenix-ig-columns, 4)), minmax(0, 1fr)); }
}

@media (min-width: 960px) {
	.phoenix-ig { grid-template-columns: repeat(var(--phoenix-ig-columns, 4), minmax(0, 1fr)); gap: 1rem; }
}

.phoenix-ig__item {
	margin: 0;
	padding: 0;
}

.phoenix-ig__link {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 12px;
	background: var(--wp--preset--color--surface, #F7F3EC);
	color: #fff;
	text-decoration: none;
}

.phoenix-ig__link img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.phoenix-ig__caption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 2.5rem 0.875rem 0.75rem;
	background: linear-gradient(to top, rgba(28, 43, 51, 0.88), rgba(28, 43, 51, 0));
	font-size: 0.875rem;
	line-height: 1.4;
	opacity: 0;
	transform: translateY(0.5rem);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

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

.phoenix-ig__link:hover .phoenix-ig__caption,
.phoenix-ig__link:focus-visible .phoenix-ig__caption { opacity: 1; transform: none; }

.phoenix-ig__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold, #F2B233);
	outline-offset: 3px;
}

/* Small icon in the corner for videos and multi-photo posts. */
.phoenix-ig__badge {
	position: absolute;
	top: 0.625rem;
	right: 0.625rem;
	width: 1.25rem;
	height: 1.25rem;
	background: #fff;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
	-webkit-mask: var(--phoenix-ig-icon) center / contain no-repeat;
	mask: var(--phoenix-ig-icon) center / contain no-repeat;
}

.phoenix-ig__badge--video {
	--phoenix-ig-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15a1 1 0 0 0 1.5.86l12.5-7.5a1 1 0 0 0 0-1.72L8.5 3.64A1 1 0 0 0 7 4.5z'/%3E%3C/svg%3E");
}

.phoenix-ig__badge--carousel_album {
	--phoenix-ig-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zM2 8a2 2 0 0 1 2-2v14h14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}

.phoenix-ig__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Touch screens can't hover, so captions stay hidden there. */
@media (hover: none) {
	.phoenix-ig__caption { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.phoenix-ig__link img,
	.phoenix-ig__caption { transition: none; }
	.phoenix-ig__link:hover img { transform: none; }
}

.phoenix-ig-empty {
	padding: 1rem 1.25rem;
	border: 1px dashed var(--wp--preset--color--line, #E3DDD2);
	border-radius: 12px;
	color: var(--wp--preset--color--muted, #5B6770);
}