/* ==========================================================================
   Featured Image (.sentio-fi)
   ==========================================================================
   Extracted from frontend.css during the Batch 8 mechanical extraction
   (2026-04-18). Behavior-preserving.
   Overlay, hover effects, shape masks.
   ========================================================================== */

/* ── Base ── */
.sentio-fi {
	position: relative;
	display: inline-block;
	overflow: hidden;
	line-height: 0;
	margin: 0;
	max-width: 100%;
}

.sentio-fi__link {
	display: block;
	position: relative;
	line-height: 0;
}

.sentio-fi__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: opacity 0.4s, filter 0.4s, transform 0.6s;
}

.sentio-fi__caption {
	margin-top: 8px;
	font-size: 13px;
	color: #6b7280;
	line-height: 1.5;
	text-align: center;
}

/* ── Placeholder ── */
.sentio-fi--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	padding: 24px;
	background: #f3f4f6;
	border: 2px dashed #d1d5db;
	border-radius: 8px;
	color: #6b7280;
	font-size: 13px;
	line-height: 1.4;
}

/* ══════════════════════════════════
 *  Diff #1 — Content Overlay
 * ══════════════════════════════════ */
.sentio-fi__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	z-index: 2;
	padding: 20px;
	transition: opacity 0.4s;
}

.sentio-fi__overlay--top {
	align-items: flex-start;
}

.sentio-fi__overlay--center {
	align-items: center;
	justify-content: center;
}

.sentio-fi__overlay--bottom {
	align-items: flex-end;
}

.sentio-fi__overlay-text {
	color: #fff;
	font-size: 16px;
	line-height: 1.5;
	max-width: 100%;
}

/* Show on hover variant */
.sentio-fi--overlay-hover .sentio-fi__overlay {
	opacity: 0;
}

.sentio-fi--overlay-hover:hover .sentio-fi__overlay {
	opacity: 1;
}

/* ══════════════════════════════════
 *  Diff #2 — Hover Effects
 * ══════════════════════════════════ */

/* Zoom In */
.sentio-fi--hover-zoom-in:hover .sentio-fi__img {
	transform: scale(1.1);
}

/* Zoom Out */
.sentio-fi--hover-zoom-out .sentio-fi__img {
	transform: scale(1.1);
}

.sentio-fi--hover-zoom-out:hover .sentio-fi__img {
	transform: scale(1);
}

/* Slide Up — image shifts up on hover */
.sentio-fi--hover-slide-up:hover .sentio-fi__img {
	transform: translateY(-10px);
}

/* Ken Burns — slow auto-zoom + pan */
.sentio-fi--hover-ken-burns .sentio-fi__img {
	animation: sentioFiKenBurns 20s ease-in-out infinite alternate;
}

@keyframes sentioFiKenBurns {
	0% {
		transform: scale(1) translate(0, 0);
	}
	100% {
		transform: scale(1.15) translate(-2%, -1%);
	}
}

.sentio-fi--hover-ken-burns:hover .sentio-fi__img {
	animation-play-state: paused;
}

/* 3D Tilt — JS sets transform */
.sentio-fi--hover-tilt {
	perspective: 600px;
}

.sentio-fi--hover-tilt .sentio-fi__img {
	transition: transform 0.15s ease-out;
}

/* Curtain Reveal */
.sentio-fi__curtain {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: #111827;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
	pointer-events: none;
}

.sentio-fi--hover-curtain:hover .sentio-fi__curtain {
	transform: scaleX(1);
	transform-origin: right;
}

/* Shine Sweep — diagonal shine via pseudo-element */
.sentio-fi--hover-shine {
	/* Container already has overflow:hidden */
}

.sentio-fi--hover-shine::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -60%;
	width: 40%;
	height: 200%;
	background: linear-gradient(
		105deg,
		transparent 40%,
		rgba(255, 255, 255, 0.3) 45%,
		rgba(255, 255, 255, 0.05) 50%,
		transparent 55%
	);
	z-index: 4;
	transform: translateX(0);
	transition: none;
	pointer-events: none;
	opacity: 0;
}

.sentio-fi--hover-shine:hover::after {
	opacity: 1;
	animation: sentioFiShine 0.8s ease-out;
}

@keyframes sentioFiShine {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(350%);
	}
}

/* ══════════════════════════════════
 *  Diff #3 — Aspect Ratio & Masks
 * ══════════════════════════════════ */

/* Aspect ratios applied via inline style: aspect-ratio:16/9 etc. */
.sentio-fi[style*="aspect-ratio"] {
	display: block;
}

.sentio-fi[style*="aspect-ratio"] .sentio-fi__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Mask Shapes via clip-path */
.sentio-fi--mask-circle {
	clip-path: circle(50% at 50% 50%);
}

.sentio-fi--mask-diamond {
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.sentio-fi--mask-hexagon {
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.sentio-fi--mask-rounded {
	clip-path: inset(0 round 30% 70% 70% 30% / 30% 30% 70% 70%);
}

.sentio-fi--mask-slant-l {
	clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.sentio-fi--mask-slant-r {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
}

.sentio-fi--mask-arch {
	clip-path: ellipse(50% 90% at 50% 100%);
	/* Vertically flip for top arch */
	clip-path: inset(0 0 0 0 round 50% 50% 0 0);
	border-radius: 999px 999px 0 0;
}

/* Masks override border-radius */
.sentio-fi[class*="sentio-fi--mask-"] {
	border-radius: 0;