/* Instagram feed module — paired with inc/instagram-feed.php + js/instagram-feed.js
   Plain CSS (no SCSS build). BEM-ish .sig namespace to avoid theme collisions. */

.sig {
	--sig-h: 300px;          /* row height; tile size derives from this */
	--sig-gap: 16px;
	--sig-radius: 6px;
	--sig-accent: #2a3f78;   /* arrow + handle color; override per brand */
	padding: 40px 0 60px;         /* padding, not margin, so the section bg stays contained */
}
.product-page-feed .sig {
    padding: 60px 0 0;
}

/* ---- header: heading on the left, arrows on the right ---- */
.sig__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.sig__heading {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.sig__title {
	margin: 0;
	line-height: 1.1;
}

.sig__handle {
	color: var(--sig-accent);
	font-weight: 600;
	text-decoration: none;
}

.sig__handle:hover { text-decoration: underline; }

/* ---- arrows ---- */
.sig__nav {
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
}

.sig__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 50%;
	background: #fff;
	color: var(--sig-accent);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}

.sig__arrow:hover:not(:disabled) {
	background: var(--sig-accent);
	border-color: var(--sig-accent);
	color: #fff;
}

.sig__arrow:disabled {
	opacity: .35;
	cursor: default;
}

.sig__arrow:focus-visible {
	outline: 2px solid var(--sig-accent);
	outline-offset: 2px;
}

/* ---- viewport / scroll track ---- */
.sig__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;          /* Firefox */
	-ms-overflow-style: none;       /* old Edge */
}

.sig__viewport::-webkit-scrollbar { display: none; } /* WebKit */

.sig__viewport:focus-visible {
	outline: 2px solid var(--sig-accent);
	outline-offset: 4px;
}

.sig__track {
	display: flex;
	gap: var(--sig-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---- tiles ---- */
.sig__item {
	flex: 0 0 auto;
	width: calc(var(--sig-h) * 4 / 5);  /* 4:5 portrait to suit IG posts */
	height: var(--sig-h);
	scroll-snap-align: start;
}

/* featured tile is the same size as the rest (pinning still applies, no size bump) */
.sig__item--featured {
	width: calc(var(--sig-h) * 4 / 5);
}

.sig__link {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: var(--sig-radius);
	background: #eceff4;
	text-decoration: none;
}

.sig__img {
	width: 100%;
	height: 100%;
	object-fit: contain;    /* show the whole post, no cropping (letterboxed on the tile bg) */
	display: block;
	transition: transform .4s ease;
}

.sig__link:hover .sig__img,
.sig__link:focus-visible .sig__img {
	transform: scale(1.05);
}

/* ---- hover overlay ---- */
.sig__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px;
	color: #fff;
	text-align: center;
	background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .55));
	opacity: 0;
	transition: opacity .2s ease;
}

.sig__link:hover .sig__overlay,
.sig__link:focus-visible .sig__overlay {
	opacity: 1;
}

.sig__icon { line-height: 0; }

.sig__cap {
	font-size: 13px;
	line-height: 1.4;
	max-width: 90%;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* caption shows on hover for every tile (uniform now that tiles are equal size) */

/* ---- when JS finds no overflow, hide the arrows ---- */
.sig[data-sig-static] .sig__nav { display: none; }

/* ---- responsive ---- */
@media (max-width: 991.98px) {
	.sig { --sig-h: 240px; }
}

@media (max-width: 575.98px) {
	.sig {
		--sig-h: 66vw;   /* ~1.5 tiles peek so it reads as scrollable */
		--sig-gap: 12px;
	}
	.sig__item--featured { width: calc(var(--sig-h) * 4 / 5); }
	/* show caption on every tile on mobile (no hover) */
	.sig__overlay { opacity: 1; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.6)); justify-content: flex-end; align-items: flex-start; text-align: left; }
	.sig__icon { position: absolute; top: 12px; right: 12px; }
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.sig__viewport { scroll-behavior: auto; }
	.sig__img { transition: none; }
}