/**
 * Insta Feed – grid bez JavaScriptu.
 * Všechny nastavitelné hodnoty přicházejí jako CSS proměnné na .insta-feed,
 * takže na stránku nepřibývá žádný <style> blok navíc.
 */

.insta-feed {
	display: grid;
	grid-template-columns: repeat(var(--if-cols, 4), minmax(0, 1fr));
	gap: var(--if-gap, 8px);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Roztažení přes celou šířku okna i uvnitř kontejneru s omezenou šířkou. */
.insta-feed--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/*
 * 100vw je šířka okna VČETNĚ svislého posuvníku, takže grid o jeho šířku
 * přeteče a vznikne vodorovný posuvník. Řeší se to oříznutím na úrovni
 * stránky – ale jen tam, kde grid s plnou šířkou opravdu je.
 *
 * `clip` místo `hidden` schválně: nevytváří scrollovací kontejner, takže
 * nerozbije position: sticky v hlavičce webu ani kotvy na stránce.
 * Prohlížeč bez podpory :has() nebo clip zobrazí posuvník jako dřív –
 * nic se nerozbije, jen to nebude tak čisté.
 *
 * Musí to být na <html> i <body>: overflow jednoho z nich se vždy propaguje
 * na viewport a ten prvek si sám ponechá `visible`. Když je hodnota na obou,
 * jeden ji propaguje a druhý doopravdy ořízne. Ověřeno měřením.
 */
@supports (overflow: clip) and selector(body:has(*)) {
	html:has(.insta-feed--full),
	body:has(.insta-feed--full) {
		overflow-x: clip;
	}
}

.insta-feed__item {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background-color: #f1f1f1;
	border-radius: var(--if-radius, 0px);
	text-decoration: none;
	line-height: 0;
	-webkit-tap-highlight-color: transparent;
}

.insta-feed__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	border-radius: inherit;
	transition: transform 0.45s ease;
}

.insta-feed__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.35);
	border-radius: inherit;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.insta-feed__badge {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	color: #fff;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
	pointer-events: none;
}

.insta-feed__item:hover .insta-feed__img,
.insta-feed__item:focus-visible .insta-feed__img {
	transform: scale(1.06);
}

.insta-feed__item:hover .insta-feed__overlay,
.insta-feed__item:focus-visible .insta-feed__overlay {
	opacity: 1;
}

.insta-feed__item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.insta-feed__profile {
	margin: 16px 0 0;
	text-align: center;
	line-height: 1.4;
}

.insta-feed__notice {
	padding: 12px 16px;
	border: 1px dashed #c3c4c7;
	border-radius: 4px;
	background-color: #fff;
	color: #50575e;
	font-size: 14px;
	line-height: 1.5;
}

@media (max-width: 1024px) {
	.insta-feed {
		grid-template-columns: repeat(var(--if-cols-t, 3), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.insta-feed {
		grid-template-columns: repeat(var(--if-cols-m, 2), minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.insta-feed__img,
	.insta-feed__overlay {
		transition: none;
	}

	.insta-feed__item:hover .insta-feed__img {
		transform: none;
	}
}
