/**
 * Featured Image Title Highlight – Front-end base styles.
 *
 * v1.2 – Supports two injection modes:
 *   1. .fith-wrap: server-side wrapper around <img> (classic themes).
 *   2. Direct .fith-overlay inside .elementor-post__thumbnail (Elementor).
 *
 * Dynamic values (colors, sizes, clamp) come from inline <style>.
 *
 * @package FITH
 */

/* ═══════════════════════════════════════════
 * Classic wrapper (.fith-wrap)
 * ═══════════════════════════════════════════ */
.fith-wrap {
	position: relative;
	display: block;
	overflow: hidden;
	line-height: 0;
	box-sizing: border-box;
}

.fith-wrap img {
	display: block;
	width: 100%;
	height: auto;
}

/* ═══════════════════════════════════════════
 * Overlay structure (shared)
 * ═══════════════════════════════════════════ */
.fith-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: stretch;
	pointer-events: none;
	z-index: 10;
	box-sizing: border-box;
}

.fith-overlay__band {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.fith-overlay__text {
	display: block;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
	white-space: normal;
	overflow: visible;
	overflow-wrap: anywhere;
	hyphens: auto;
	word-break: normal;
}

/* ═══════════════════════════════════════════
 * Clickability: overlay never blocks links
 * ═══════════════════════════════════════════ */
a .fith-wrap .fith-overlay,
a .fith-overlay,
a > .fith-overlay {
	pointer-events: none;
}

/* ═══════════════════════════════════════════
 * Prevent layout gaps
 * ═══════════════════════════════════════════ */
.fith-wrap > a {
	display: block;
	line-height: 0;
}