/*
 * Thelma's Instagram feed — square tiles in a grid with a Load More pill,
 * laid out like the Elfsight widget it replaces (whose breakpoints were
 * upper bounds):
 *
 *   over 768px    4 columns × 2 rows, 20px gaps
 *   376–768px     2 × 2, 14px gaps
 *   up to 375px   1 × 1
 *
 * Load More reveals another columns × rows each time. It sits in the
 * homepage's baby-blue .tt-social section; the font and Thelma's red come
 * from the thelmas-treats theme.
 */

.tt-ig,
.tt-ig-lightbox {
	--tt-ig-font: var(--tt-font-display, 'Quicksand', sans-serif);
	--tt-ig-red: var(--tt-red, #c13c33);
}

.tt-ig {
	--tt-ig-cols: 4;
	--tt-ig-rows: 2;
	--tt-ig-gap: 20px;
	width: 100%;
}

@media (max-width: 768px) {
	.tt-ig {
		--tt-ig-cols: 2;
		--tt-ig-gap: 14px;
	}
}

@media (max-width: 375px) {
	.tt-ig {
		--tt-ig-cols: 1;
		--tt-ig-rows: 1;
		--tt-ig-gap: 20px;
	}
}

.tt-ig__grid {
	display: grid;
	grid-template-columns: repeat(var(--tt-ig-cols), minmax(0, 1fr));
	gap: var(--tt-ig-gap);
}

/* Until feed.js takes over, only the first page shows, so the section
   doesn't load every post tall and then collapse. */
.tt-ig:not(.is-ready) .tt-ig__post:nth-child(n + 9) {
	display: none;
}

@media (max-width: 768px) {
	.tt-ig:not(.is-ready) .tt-ig__post:nth-child(n + 5) {
		display: none;
	}
}

@media (max-width: 375px) {
	.tt-ig:not(.is-ready) .tt-ig__post:nth-child(n + 2) {
		display: none;
	}
}

.tt-ig__post {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.25);
}

.tt-ig__post[hidden] {
	display: none;
}

.tt-ig__post img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Caption on hover, over a dark veil (the old widget's 80% black). */
.tt-ig__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	text-align: center;
	opacity: 0;
	transition: opacity 0.25s ease;
}

@media (hover: hover) {
	.tt-ig__post:hover .tt-ig__overlay {
		opacity: 1;
	}
}

.tt-ig__post:focus-visible .tt-ig__overlay {
	opacity: 1;
}

.tt-ig__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
	font-family: var(--tt-ig-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

/* Video and album markers, top right of the tile: a video camera, or two
   overlapping squares. */
.tt-ig__post--video::after,
.tt-ig__post--album::after {
	content: '';
	position: absolute;
	top: 7px;
	right: 7px;
	width: 24px;
	height: 24px;
	background: no-repeat center / contain;
	opacity: 0.8;
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
	pointer-events: none;
}

.tt-ig__post--video::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath fill-rule='evenodd' d='M4 3.25h9.5a4 4 0 0 1 4 4v9.5a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4v-9.5a4 4 0 0 1 4-4zM8.75 6.75a5.25 5.25 0 1 0 0 10.5 5.25 5.25 0 1 0 0-10.5zM8.75 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 1 0 0-7z'/%3E%3Cpath d='M18.75 9.2 24 5.8v12.4l-5.25-3.4z'/%3E%3C/svg%3E");
}

.tt-ig__post--album::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='7.5' y='1.5' width='15' height='15' rx='2.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Crect x='1' y='7' width='16' height='16' rx='3' fill='%23fff'/%3E%3C/svg%3E");
}

/* ── Load More ──────────────────────────────────────────────────────── */

/* Same box as the old widget's button, which the theme had restyled into
   this outlined pill. */
.tt-ig__more-wrap {
	margin-top: calc(4% + 20px);
	text-align: center;
}

.tt-ig__more-wrap[hidden] {
	display: none;
}

.tt-ig .tt-ig__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 228px;
	max-width: 100%;
	margin: 0;
	padding: 0.875em 1em;
	border: 2px solid #fff;
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-family: var(--tt-ig-font);
	font-weight: 700;
	font-size: 0.85rem;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease;
}

.tt-ig .tt-ig__more:hover,
.tt-ig .tt-ig__more:focus-visible {
	background: #fff;
	color: #6e96a5;
}

.tt-ig .tt-ig__more:focus {
	outline: none;
}

.tt-ig .tt-ig__more:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ── Lightbox (a <dialog> built by feed.js) ─────────────────────────── */

.tt-ig-lightbox {
	width: min(1100px, 94vw);
	max-width: none;
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: #fff;
	color: #333;
	overflow: visible;
	font-family: var(--tt-ig-font);
}

.tt-ig-lightbox::backdrop {
	background: rgba(43, 43, 43, 0.9);
}

.tt-ig-lightbox__inner {
	display: grid;
	max-height: 92vh;
	border-radius: inherit;
	overflow: hidden;
}

@media (min-width: 768px) {
	.tt-ig-lightbox__inner {
		grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr);
	}
}

.tt-ig-lightbox__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: 60vh;
	object-fit: contain;
	background: #111;
}

@media (min-width: 768px) {
	.tt-ig-lightbox__img {
		max-height: 92vh;
	}
}

.tt-ig-lightbox__side {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 0;
	padding: 24px;
	overflow-y: auto;
}

.tt-ig-lightbox a.tt-ig-lightbox__user {
	align-self: flex-start;
	color: var(--tt-ig-red);
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
}

.tt-ig-lightbox a.tt-ig-lightbox__user:hover,
.tt-ig-lightbox a.tt-ig-lightbox__user:focus-visible {
	text-decoration: underline;
}

.tt-ig-lightbox__caption {
	margin: 0;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.6;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.tt-ig-lightbox__caption:empty {
	display: none;
}

.tt-ig-lightbox__date {
	font-size: 13px;
	color: #777;
}

.tt-ig-lightbox a.tt-ig-lightbox__link {
	margin-top: auto;
	padding: 0.875em 2em;
	border: 2px solid var(--tt-ig-red);
	border-radius: 999px;
	background: var(--tt-ig-red);
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
	line-height: 1;
	letter-spacing: 0.06em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background 0.25s ease, color 0.25s ease;
}

.tt-ig-lightbox a.tt-ig-lightbox__link:hover,
.tt-ig-lightbox a.tt-ig-lightbox__link:focus-visible {
	background: #fff;
	color: var(--tt-ig-red);
}

.tt-ig-lightbox button.tt-ig-lightbox__close,
.tt-ig-lightbox button.tt-ig-lightbox__prev,
.tt-ig-lightbox button.tt-ig-lightbox__next {
	position: fixed;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.tt-ig-lightbox button.tt-ig-lightbox__close:hover,
.tt-ig-lightbox button.tt-ig-lightbox__close:focus,
.tt-ig-lightbox button.tt-ig-lightbox__prev:hover,
.tt-ig-lightbox button.tt-ig-lightbox__prev:focus,
.tt-ig-lightbox button.tt-ig-lightbox__next:hover,
.tt-ig-lightbox button.tt-ig-lightbox__next:focus {
	background: transparent;
	color: #fff;
	opacity: 0.8;
}

.tt-ig-lightbox button.tt-ig-lightbox__close:focus-visible,
.tt-ig-lightbox button.tt-ig-lightbox__prev:focus-visible,
.tt-ig-lightbox button.tt-ig-lightbox__next:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -2px;
	border-radius: 50%;
}

.tt-ig-lightbox button.tt-ig-lightbox__close {
	top: 12px;
	right: 12px;
	font-family: Arial, sans-serif;
	font-size: 36px;
	line-height: 48px;
}

.tt-ig-lightbox button.tt-ig-lightbox__prev,
.tt-ig-lightbox button.tt-ig-lightbox__next {
	top: 50%;
	margin-top: -24px;
}

.tt-ig-lightbox button.tt-ig-lightbox__prev[hidden],
.tt-ig-lightbox button.tt-ig-lightbox__next[hidden] {
	display: none;
}

.tt-ig-lightbox button.tt-ig-lightbox__prev {
	left: 8px;
}

.tt-ig-lightbox button.tt-ig-lightbox__next {
	right: 8px;
}

.tt-ig-lightbox__prev::before,
.tt-ig-lightbox__next::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	border: solid #fff;
	border-width: 3px 3px 0 0;
}

.tt-ig-lightbox__prev::before {
	transform: translate(-30%, -50%) rotate(-135deg);
}

.tt-ig-lightbox__next::before {
	transform: translate(-70%, -50%) rotate(45deg);
}

@media (max-width: 767px) {
	/* On phones, side arrows would cover the photo, so they drop to the
	   bottom corners. */
	.tt-ig-lightbox button.tt-ig-lightbox__prev,
	.tt-ig-lightbox button.tt-ig-lightbox__next {
		top: auto;
		bottom: 12px;
		margin-top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tt-ig__overlay,
	.tt-ig .tt-ig__more,
	.tt-ig-lightbox a.tt-ig-lightbox__link {
		transition: none;
	}
}