/* DB Instagram Feed v1.1.0
 * Colors, sizes and weights use site tokens and follow the accessibility modes.
 * Heading: Light --brand-red 5.7:1 (hover --color-link-hover); Dark white 17.4:1 (hover --color-link-hover-on-dark 6.8:1).
 * Hover colors live here (the old .db-instagram-feed a:hover rule in styles.css is removed).
 */

/* -- Outer wrapper: full-width, carries theme background -- */
.db-instagram-feed {
	display: block;
	width: 100%;
}

.db-instagram-feed[hidden] { display: none !important; }

.db-instagram-feed--light { background-color: var(--color-white, #ffffff); }
.db-instagram-feed--dark  { background-color: var(--surface-dark, #1a1a1a); }

/* -- Divider (decorative, hidden from screen readers) -- */
.db-instagram-feed__hr {
	border: none;
	height: 2px;
	margin: 0;
}

.db-instagram-feed--light .db-instagram-feed__hr { background-color: var(--surface-dark, #1a1a1a); }
.db-instagram-feed--dark  .db-instagram-feed__hr { background-color: var(--brand-red, #c32b2a); }

/* -- Heading (h2; overrides the site's large Besom h2 style) -- */
.db-instagram-feed .db-instagram-feed__heading {
	text-align: center;
	margin: 0 0 16px;
	padding: 0;
	font-family: var(--font-primary, 'Lato', sans-serif);
	font-size: var(--font-size-xl, 20px);
	font-weight: var(--font-weight-bold, 700);
	font-style: normal;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.db-instagram-feed .db-instagram-feed__heading--lg  { font-size: var(--font-size-lg, 18px); }
.db-instagram-feed .db-instagram-feed__heading--xl  { font-size: var(--font-size-xl, 20px); }
.db-instagram-feed .db-instagram-feed__heading--2xl { font-size: var(--font-size-2xl, 25px); }
.db-instagram-feed .db-instagram-feed__heading--3xl { font-size: var(--font-size-3xl, 30px); }

.db-instagram-feed--light .db-instagram-feed__heading { color: var(--brand-red, #c32b2a); }
.db-instagram-feed--dark  .db-instagram-feed__heading { color: var(--color-white, #ffffff); }

.db-instagram-feed .db-instagram-feed__heading-link {
	text-decoration: none;
	transition: color 0.2s ease;
}

/* !important + extra specificity beat the site-wide a:hover rules */
.db-instagram-feed--light .db-instagram-feed__heading .db-instagram-feed__heading-link { color: var(--brand-red, #c32b2a) !important; }
.db-instagram-feed--light .db-instagram-feed__heading .db-instagram-feed__heading-link:hover { color: var(--color-link-hover, #94111e) !important; }
.db-instagram-feed--dark  .db-instagram-feed__heading .db-instagram-feed__heading-link { color: var(--color-white, #ffffff) !important; }
.db-instagram-feed--dark  .db-instagram-feed__heading .db-instagram-feed__heading-link:hover { color: var(--color-link-hover-on-dark, #ff7a6b) !important; }

.db-instagram-feed .db-instagram-feed__heading-link:hover { text-decoration: underline; }

.db-instagram-feed .db-instagram-feed__heading-link:focus { outline: none; }
.db-instagram-feed .db-instagram-feed__heading-link:focus-visible {
	outline: 2px solid var(--color-focus, #c32b2a);
	outline-offset: 3px;
	border-radius: 2px;
}
.db-instagram-feed--dark .db-instagram-feed__heading-link:focus-visible { outline-color: var(--color-white, #ffffff); }

/* -- Screen-reader-only text -- */
.db-instagram-feed__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -- Grid (ul) -- */
.db-instagram-feed .db-instagram-feed__grid {
	--db-ig-count: 6;
	--db-ig-gap: 8px;
	--db-ig-item-size: 160px;
	display: grid;
	grid-template-columns: repeat(var(--db-ig-count), minmax(0, 1fr));
	gap: var(--db-ig-gap);
	width: 100%;
	max-width: calc(var(--db-ig-count) * var(--db-ig-item-size) + (var(--db-ig-count) - 1) * var(--db-ig-gap));
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

@media (min-width: 480px) {
	.db-instagram-feed .db-instagram-feed__grid { --db-ig-gap: 10px; --db-ig-item-size: 180px; }
}
@media (min-width: 768px) {
	.db-instagram-feed .db-instagram-feed__grid { --db-ig-gap: 12px; --db-ig-item-size: 200px; }
}

/* -- Item and image -- */
.db-instagram-feed .db-instagram-feed__item {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.db-instagram-feed__link {
	display: block;
	overflow: hidden;
	position: relative;
	background-color: var(--surface-dark, #1a1a1a);
}

.db-instagram-feed__link::before {
	content: '';
	display: block;
	padding-top: 100%;
}

.db-instagram-feed__image {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.db-instagram-feed__link:hover .db-instagram-feed__image,
.db-instagram-feed__link:focus-visible .db-instagram-feed__image {
	transform: scale(1.05);
	opacity: 0.85;
}

.db-instagram-feed .db-instagram-feed__link:focus { outline: none; }
.db-instagram-feed .db-instagram-feed__link:focus-visible {
	outline: 2px solid var(--color-focus, #c32b2a);
	outline-offset: 2px;
}
.db-instagram-feed--dark .db-instagram-feed__link:focus-visible { outline-color: var(--color-white, #ffffff); }

/* -- Loading -- */
.db-instagram-feed .db-instagram-feed__loading {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 32px 0;
}

.db-instagram-feed__loading-dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	background-color: var(--brand-red, #c32b2a);
	animation: db-ig-pulse 1.2s ease-in-out infinite;
}
.db-instagram-feed--dark .db-instagram-feed__loading-dot { background-color: var(--color-link-on-dark, #ff3b30); }
.db-instagram-feed__loading-dot:nth-child(3) { animation-delay: 0.2s; }
.db-instagram-feed__loading-dot:nth-child(4) { animation-delay: 0.4s; }

@keyframes db-ig-pulse {
	0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
	40%            { opacity: 1;   transform: scale(1); }
}

/* -- Reduced motion: no zoom, steady dots -- */
@media (prefers-reduced-motion: reduce) {
	.db-instagram-feed__image { transition: none; }
	.db-instagram-feed__link:hover .db-instagram-feed__image,
	.db-instagram-feed__link:focus-visible .db-instagram-feed__image { transform: none; }
	.db-instagram-feed__loading-dot { animation: none; opacity: 0.6; }
}

/* -- Error and notice (Page Builder preview only) -- */
.db-instagram-feed__error,
.db-instagram-feed__notice {
	max-width: 640px;
	margin: 0 auto;
	padding: 16px;
	text-align: center;
	font-family: var(--font-primary, 'Lato', sans-serif);
	font-size: var(--font-size-sm, 14px);
	color: var(--status-error-text, #a94442);
	background-color: var(--status-error-bg, #f2dede);
	border: 1px solid var(--status-error-border, #ebccd1);
	border-radius: 4px;
}

.db-instagram-feed__error[hidden],
.db-instagram-feed__notice[hidden] { display: none; }