/**
 * Frontend-Styles für InstaFeedWP.
 *
 * Bewusst zurückhaltend gestaltet: Es werden keine Theme-fremden Farben,
 * Schriftarten oder Radien fest vorgegeben. Schrift und Textfarbe werden
 * vom umgebenden Theme geerbt (inherit), Radien/Abstände nutzen – sofern
 * vorhanden – die Theme.json-Variablen des aktiven Themes als Fallback-Kette.
 */

.instafeedwp {
	display: grid;
	grid-template-columns: repeat( var( --instafeedwp-columns, 3 ), 1fr );
	gap: var( --instafeedwp-gap, 8px );
	list-style: none;
	margin: 0;
	padding: 0;
}

.instafeedwp-item {
	position: relative;
	display: block;
	color: inherit;
	font-family: inherit;
	text-decoration: none;
	overflow: hidden;
	border-radius: var( --wp--custom--instafeedwp--radius, 0px );
	background: rgba( 0, 0, 0, 0.04 );
}

.instafeedwp-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.instafeedwp-hover .instafeedwp-item:hover img,
.instafeedwp-hover .instafeedwp-item:focus-visible img {
	transform: scale( 1.06 );
}

.instafeedwp-aspect-square .instafeedwp-item {
	aspect-ratio: 1 / 1;
}

.instafeedwp-aspect-portrait .instafeedwp-item {
	aspect-ratio: 4 / 5;
}

.instafeedwp-aspect-landscape .instafeedwp-item {
	aspect-ratio: 16 / 9;
}

.instafeedwp-aspect-original .instafeedwp-item {
	aspect-ratio: auto;
}

.instafeedwp-aspect-original .instafeedwp-item img {
	height: auto;
}

.instafeedwp-pin-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 14px;
	line-height: 1;
	background: rgba( 255, 255, 255, 0.9 );
	border-radius: 50%;
	padding: 5px;
	filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, 0.25 ) );
}

.instafeedwp-type-icon {
	position: absolute;
	top: 8px;
	left: 8px;
	font-size: 13px;
	line-height: 1;
	color: #fff;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.6 );
}

.instafeedwp-caption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 10px 10px 8px;
	font-size: 0.85em;
	color: #fff;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.7 ), rgba( 0, 0, 0, 0 ) );
	opacity: 0;
	transition: opacity 0.25s ease;
	line-height: 1.3;
}

.instafeedwp-item:hover .instafeedwp-caption,
.instafeedwp-item:focus-visible .instafeedwp-caption {
	opacity: 1;
}

.instafeedwp-item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.instafeedwp-notice {
	padding: 1em;
	border: 1px dashed currentColor;
	border-radius: 4px;
	font-family: inherit;
	opacity: 0.8;
}

@media ( max-width: 600px ) {
	.instafeedwp {
		grid-template-columns: repeat( min( var( --instafeedwp-columns, 3 ), 2 ), 1fr );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.instafeedwp-item img,
	.instafeedwp-caption {
		transition: none;
	}
}