/**
 * DFL Instagram — follow panel beside a strip of feed images.
 * No JavaScript: the layout and the hover reveal are custom properties + CSS.
 */

.dfl-ig {
	--dfl-panel-width: 24%;
	--dfl-gap: 40px;
	--dfl-panel-valign: center;
	--dfl-text-align: start;
	--dfl-cols: 6;
	--dfl-img-gap: 14px;
	--dfl-ratio: 0.88;
	--dfl-zoom: 1.06;
	--dfl-speed: 450ms;
	--dfl-scroll-item: 44%;

	display: flex;
	align-items: var(--dfl-panel-valign, center);
	gap: var(--dfl-gap, 40px);
	width: 100%;
}

.dfl-ig *,
.dfl-ig *::before,
.dfl-ig *::after {
	box-sizing: border-box;
}

.dfl-ig--panel-right {
	flex-direction: row-reverse;
}

/* --------------------------------- Panel --------------------------------- */

.dfl-ig__panel {
	flex: 0 0 var(--dfl-panel-width, 24%);
	max-width: var(--dfl-panel-width, 24%);
	min-width: 0;
}

.dfl-ig--no-panel .dfl-ig__grid {
	width: 100%;
}

.dfl-ig__panel-inner {
	max-width: 100%;
	text-align: var(--dfl-text-align, start);
}

.dfl-ig__eyebrow {
	margin-bottom: 14px;
	color: #b08d45;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.dfl-ig__handle {
	margin: 0 0 16px;
	color: #14100b;
	font-size: 34px;
	font-weight: 500;
	line-height: 1.2;
}

.dfl-ig__handle-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: inherit;
	text-decoration: none;
	transition: color var(--dfl-speed, 450ms) ease;
}

a.dfl-ig__handle-link:hover {
	color: #b08d45;
	text-decoration: none;
}

.dfl-ig__handle-icon {
	display: inline-flex;
	font-size: 22px;
	line-height: 1;
}

.dfl-ig__handle-icon i,
.dfl-ig__handle-icon svg {
	display: block;
	width: 1em;
	height: 1em;
	font-size: inherit;
	fill: currentColor;
}

/* Wrapper keeps the rule following the panel alignment. */
.dfl-ig__divider-wrap {
	display: flex;
	justify-content: var(--dfl-text-align, start);
	margin-bottom: 22px;
}

.dfl-ig__divider {
	display: block;
	width: 46px;
	height: 1px;
	background-color: #c9a24d;
}

.dfl-ig__description {
	margin: 0 0 26px;
	color: #6b6358;
	font-size: 14px;
	line-height: 1.8;
}

.dfl-ig__description p {
	margin: 0;
}

.dfl-ig__description p + p {
	margin-top: 1em;
}

.dfl-ig__button-wrap {
	display: flex;
	justify-content: var(--dfl-text-align, start);
}

.dfl-ig__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 18px 34px;
	border: 1px solid #14100b;
	border-radius: 2px;
	background-color: #14100b;
	color: #fffef3;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: color var(--dfl-speed, 450ms) ease, background-color var(--dfl-speed, 450ms) ease,
		border-color var(--dfl-speed, 450ms) ease;
}

.dfl-ig__button:hover {
	text-decoration: none;
}

.dfl-ig__button-icon {
	display: flex;
}

.dfl-ig__button-icon i,
.dfl-ig__button-icon svg {
	display: block;
	width: 1em;
	height: 1em;
	font-size: 1.2em;
	fill: currentColor;
}

/* ---------------------------------- Grid --------------------------------- */

.dfl-ig__grid {
	display: grid;
	grid-template-columns: repeat(var(--dfl-cols, 6), minmax(0, 1fr));
	gap: var(--dfl-img-gap, 14px);
	flex: 1 1 auto;
	min-width: 0;
}

.dfl-ig__item {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--dfl-ratio, 0.88);
	border-radius: 2px;
	background-color: rgba(20, 16, 11, 0.06);
	line-height: 0;
	text-decoration: none;
}

.dfl-ig--ratio-auto .dfl-ig__item {
	aspect-ratio: auto;
}

.dfl-ig__item:hover {
	text-decoration: none;
}

/* Two classes on purpose: Elementor ships `.elementor img { height: auto }`,
   which outranks a single-class selector and leaves the tile part empty. */
.dfl-ig__item .dfl-ig__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
	transition: transform var(--dfl-speed, 450ms) ease;
}

.dfl-ig--ratio-auto .dfl-ig__item .dfl-ig__img {
	height: auto;
}

/* iOS Safari below 15 has no aspect-ratio at all, so the tile would collapse to
   the image's own proportions. Reproduce the ratio with the padding trick and
   pin the image over it. */
@supports not (aspect-ratio: 1 / 1) {
	.dfl-ig__item::before {
		content: "";
		display: block;
		padding-top: calc(100% / var(--dfl-ratio, 0.88));
	}

	.dfl-ig__item .dfl-ig__img {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.dfl-ig--ratio-auto .dfl-ig__item::before {
		display: none;
	}

	.dfl-ig--ratio-auto .dfl-ig__item .dfl-ig__img {
		position: static;
	}
}

.dfl-ig__item:hover .dfl-ig__img,
.dfl-ig__item:focus-visible .dfl-ig__img {
	transform: scale(var(--dfl-zoom, 1.06));
}

.dfl-ig--no-zoom .dfl-ig__item:hover .dfl-ig__img,
.dfl-ig--no-zoom .dfl-ig__item:focus-visible .dfl-ig__img {
	transform: none;
}

/* ------------------------------ Hover reveal ----------------------------- */

.dfl-ig__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px;
	background-color: rgba(20, 16, 11, 0.55);
	opacity: 0;
	text-align: center;
	transition: opacity var(--dfl-speed, 450ms) ease;
}

.dfl-ig__item:hover .dfl-ig__overlay,
.dfl-ig__item:focus-visible .dfl-ig__overlay {
	opacity: 1;
}

.dfl-ig__overlay-icon {
	display: flex;
	color: #fffef3;
	font-size: 28px;
	line-height: 1;
	transform: translateY(10px) scale(0.85);
	transition: transform var(--dfl-speed, 450ms) cubic-bezier(0.2, 0.7, 0.3, 1);
}

.dfl-ig__overlay-icon i,
.dfl-ig__overlay-icon svg {
	display: block;
	width: 1em;
	height: 1em;
	font-size: inherit;
	fill: currentColor;
}

.dfl-ig__item:hover .dfl-ig__overlay-icon,
.dfl-ig__item:focus-visible .dfl-ig__overlay-icon {
	transform: none;
}

.dfl-ig__caption {
	display: block;
	color: #fffef3;
	font-size: 12px;
	line-height: 1.4;
}

.dfl-ig__item:focus-visible {
	outline: 2px solid #b08d45;
	outline-offset: 3px;
}

.dfl-ig__button:focus-visible,
a.dfl-ig__handle-link:focus-visible {
	outline: 2px solid #b08d45;
	outline-offset: 3px;
}

/* Pointer-less devices never fire hover, so the reveal can stay on instead. */
@media (hover: none) {
	.dfl-ig--touch-overlay .dfl-ig__overlay {
		opacity: 1;
	}

	.dfl-ig--touch-overlay .dfl-ig__overlay-icon {
		transform: none;
	}
}

/* ------------------------------- Stacking -------------------------------- */

@media (max-width: 1024px) {
	.dfl-ig--stack-tablet {
		flex-direction: column;
		align-items: stretch;
	}

	.dfl-ig--stack-tablet.dfl-ig--stack-panel-last {
		flex-direction: column-reverse;
	}

	.dfl-ig--stack-tablet .dfl-ig__panel {
		flex-basis: auto;
		width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.dfl-ig--stack-mobile {
		flex-direction: column;
		align-items: stretch;
	}

	.dfl-ig--stack-mobile.dfl-ig--stack-panel-last {
		flex-direction: column-reverse;
	}

	.dfl-ig--stack-mobile .dfl-ig__panel {
		flex-basis: auto;
		width: 100%;
		max-width: 100%;
	}

	/* One swipeable row instead of a cramped grid. */
	.dfl-ig--scroll-mobile .dfl-ig__grid {
		display: flex;
		/* Safari stretches flex items to the tallest sibling by default, and a
		   stretched cross size wins over aspect-ratio — which is why the tiles
		   came out as wide rectangles on iOS but were square-ish on Android. */
		align-items: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.dfl-ig--scroll-mobile .dfl-ig__grid::-webkit-scrollbar {
		display: none;
	}

	.dfl-ig--scroll-mobile .dfl-ig__item {
		flex: 0 0 var(--dfl-scroll-item, 44%);
		/* An explicit width gives Safari a definite main size to derive the
		   ratio from; flex-basis alone is not enough there. */
		width: var(--dfl-scroll-item, 44%);
		height: auto;
		align-self: flex-start;
		scroll-snap-align: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dfl-ig__item .dfl-ig__img,
	.dfl-ig__overlay,
	.dfl-ig__overlay-icon,
	.dfl-ig__button,
	.dfl-ig__handle-link {
		transition-duration: 1ms;
	}

	.dfl-ig__item:hover .dfl-ig__img,
	.dfl-ig__item:focus-visible .dfl-ig__img {
		transform: none;
	}
}