/* Blog Image Skeleton — shimmer placeholders until images load */

.blog-img-skeleton {
	position: relative;
	display: block;
	box-sizing: border-box;
	overflow: hidden;
}

.blog-img-skeleton__shimmer {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: #d5dce6;
	opacity: 1;
	overflow: hidden;
	border-radius: inherit;
	transition: opacity 0.25s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.blog-img-skeleton__shimmer {
		background: linear-gradient(
			90deg,
			#d5dce6 0%,
			#eef2f7 45%,
			#ffffff 50%,
			#eef2f7 55%,
			#d5dce6 100%
		);
		background-size: 200% 100%;
		animation: blog-img-skeleton-shimmer 1.1s ease-in-out infinite;
	}
}

body.dark .blog-img-skeleton__shimmer {
	background: rgba(255, 255, 255, 0.1);
}

@media (prefers-reduced-motion: no-preference) {
	body.dark .blog-img-skeleton__shimmer {
		background: linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.08) 0%,
			rgba(255, 255, 255, 0.2) 50%,
			rgba(255, 255, 255, 0.08) 100%
		);
		background-size: 200% 100%;
	}
}

@keyframes blog-img-skeleton-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.blog-img-skeleton img {
	display: block;
	max-width: 100%;
	height: auto;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.blog-img-skeleton--loaded img,
.blog-img-skeleton.is-loaded img {
	opacity: 1;
}

.blog-img-skeleton--loaded .blog-img-skeleton__shimmer,
.blog-img-skeleton.is-loaded .blog-img-skeleton__shimmer {
	opacity: 0;
}

/* ── Archive thumbnails ── */
.blog-img-skeleton--thumb {
	width: 100%;
}

.blog-img-skeleton--thumb img {
	width: 100%;
	object-fit: cover;
}

.blog-img-skeleton--list {
	min-height: 200px;
}

.blog-img-skeleton--list img {
	height: 200px;
}

.blog-img-skeleton--grid {
	aspect-ratio: 550 / 367;
	min-height: 200px;
}

.blog-img-skeleton--grid img {
	height: 236px;
}

.blog-img-skeleton--classic {
	aspect-ratio: 750 / 400;
}

/* ── Inline / content / Elementor ── */
.blog-img-skeleton--inline {
	display: block;
	max-width: 100%;
	box-sizing: border-box;
}

.blog-img-skeleton--inline.blog-img-skeleton--elementor {
	display: inline-block;
	vertical-align: middle;
}

.blog-img-skeleton--elementor img {
	display: inline-block;
	vertical-align: middle;
}

.blog-img-skeleton--inline img {
	width: 100%;
	height: auto;
}

/* Fixed-frame presets (e.g. About Me): border on wrapper, shimmer + image inside */
.blog-img-skeleton--preset {
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
	width: var(--bis-w, auto);
	height: var(--bis-h, auto);
	box-sizing: border-box;
}

.blog-img-skeleton--preset.blog-img-skeleton--about-me {
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 0;
}

.blog-img-skeleton--preset img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border: none !important;
	border-radius: inherit;
}

.blog-img-skeleton--preset .blog-img-skeleton__shimmer {
	border: none;
	border-radius: inherit;
}

/* About Me — fixed frame on Elementor container (border matches .btn-default) */
.elementor-element-add7499 .elementor-widget-container {
	display: inline-block;
	width: 202px;
	height: 202px;
	min-width: 202px;
	min-height: 202px;
	box-sizing: border-box;
	border: 1px solid var(--katen-cta-border, #2a4d7a);
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	vertical-align: middle;
	flex-shrink: 0;
	isolation: isolate;
	contain: paint;
}

.elementor-element-add7499 .elementor-widget-container > img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	border: none !important;
	border-radius: 50%;
}

.elementor-element-add7499 .blog-img-skeleton--about-me {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;
	border-radius: 50%;
}

.elementor-element-add7499 .blog-img-skeleton--about-me .blog-img-skeleton__shimmer {
	border-radius: 50%;
}

.elementor-element-add7499 .blog-img-skeleton--about-me img {
	border-radius: 50%;
}

/* Solid fill only before JS — no animated gradient on the container (avoids bleed) */
.elementor-element-add7499 .elementor-widget-container:not(:has(.blog-img-skeleton)) {
	background: #d5dce6;
}

.elementor-element-add7499 .elementor-widget-container:has(.blog-img-skeleton.is-loaded) {
	background: transparent;
}

/* Post content images — inset border overlay, image fills frame edge-to-edge */
.entry-content .blog-img-skeleton--content,
.post-content .blog-img-skeleton--content {
	box-sizing: border-box;
	border: none;
	border-radius: 25px;
	overflow: hidden;
	contain: layout paint;
	position: relative;
	isolation: isolate;
}

.entry-content .blog-img-skeleton--content:not(.blog-img-skeleton--elementor-host)::after,
.post-content .blog-img-skeleton--content:not(.blog-img-skeleton--elementor-host)::after,
.entry-content .elementor-element.elementor-widget-image:not(.elementor-element-add7499) .elementor-widget-container > a::after,
.post-content .elementor-element.elementor-widget-image:not(.elementor-element-add7499) .elementor-widget-container > a::after,
.entry-content .elementor-element.elementor-widget-image:not(.elementor-element-add7499) .elementor-image::after,
.post-content .elementor-element.elementor-widget-image:not(.elementor-element-add7499) .elementor-image::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 5px solid #3D6698;
	border-radius: inherit;
	pointer-events: none;
	z-index: 2;
	box-sizing: border-box;
}

.entry-content .blog-img-skeleton--content:not(.blog-img-skeleton--elementor-host) img,
.post-content .blog-img-skeleton--content:not(.blog-img-skeleton--elementor-host) img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	border: none !important;
	border-radius: inherit;
}

/* Elementor memes — frame on the image link, not the full-width widget container */
.entry-content .elementor-element.elementor-widget-image:not(.elementor-element-add7499) .elementor-widget-container > a,
.post-content .elementor-element.elementor-widget-image:not(.elementor-element-add7499) .elementor-widget-container > a,
.entry-content .elementor-element.elementor-widget-image:not(.elementor-element-add7499) .elementor-image,
.post-content .elementor-element.elementor-widget-image:not(.elementor-element-add7499) .elementor-image,
.entry-content .blog-img-skeleton--elementor-host,
.post-content .blog-img-skeleton--elementor-host {
	position: relative;
	display: block;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	border-radius: 25px;
	overflow: hidden;
	isolation: isolate;
}

.entry-content .elementor-element.elementor-widget-image:not(.elementor-element-add7499) .elementor-widget-container > a img,
.post-content .elementor-element.elementor-widget-image:not(.elementor-element-add7499) .elementor-widget-container > a img,
.entry-content .elementor-element.elementor-widget-image:not(.elementor-element-add7499) .elementor-image img,
.post-content .elementor-element.elementor-widget-image:not(.elementor-element-add7499) .elementor-image img,
.entry-content .blog-img-skeleton--elementor-host img,
.post-content .blog-img-skeleton--elementor-host img {
	border: none !important;
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: inherit;
}

.entry-content .blog-img-skeleton--elementor-host img,
.post-content .blog-img-skeleton--elementor-host img {
	opacity: 0;
	transition: opacity 0.2s ease;
}

.entry-content .blog-img-skeleton--elementor-host.is-loaded img,
.post-content .blog-img-skeleton--elementor-host.is-loaded img {
	opacity: 1;
}

/* Featured image on singles */
.post-single .featured-image .blog-img-skeleton {
	border-radius: 10px;
}

.post-single .featured-image .blog-img-skeleton__shimmer {
	border-radius: 10px;
}

.post-single .featured-image .blog-img-skeleton img {
	border-radius: 10px;
}