/* =========================================
   IMAGE TEXT SYSTEM (MASTER)
========================================= */




.imgtxt-content {
	position: absolute;
	z-index: 2;
	padding: 1rem;
	width: auto;
	max-width: 100%;
}




.imgtxt {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	container-type: inline-size;
	isolation: isolate;
}

.imgtxt img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.imgtxt video,
.imgtxt .imgtxt-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Overlay layer */
.imgtxt::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		var(--ov-gradient, none),
		var(--ov-color, #000);
	opacity: var(--ov-opacity, 0);
	z-index: 1;
	pointer-events: none;
	transition: opacity 0.25s ease;
	backdrop-filter: blur(var(--ov-blur, 0px));
	-webkit-backdrop-filter: blur(var(--ov-blur, 0px));
}

/* Content */
.imgtxt-content {
	position: absolute;
	z-index: 2;
	padding: 1rem;
	color: #fff;
	max-width: 100%;
	box-sizing: border-box;
	max-height: calc(100% - 2rem);
	overflow: auto;
}

/* Text readability */
.imgtxt-content,
.imgtxt-content h1,
.imgtxt-content h2,
.imgtxt-content h3,
.imgtxt-content h4,
.imgtxt-content h5,
.imgtxt-content h6,
.imgtxt-content p {
	color: #fff;
	text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

.imgtxt-content > *:last-child {
	margin-bottom: 0;
}


/* =========================================
	VIDEO HERO
==========================================*/
.imgtxt.hero-video-wrap {
	position: relative;
	overflow: hidden;
}

.imgtxt.hero-video-wrap .imgtxt-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.imgtxt.hero-video-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.ov-45::before { opacity: .45; }
.ov-afblue::before { background-color: #2f6fdb; }
.ov-grad-angle::before { background-image: linear-gradient(135deg, rgba(255,255,255,.05), rgba(0,0,0,.45)); }

.imgtxt.hero-video-wrap .imgtxt-content {
	position: absolute;
	z-index: 2;
	width: max-content;
	max-width: 90%;
	padding: 1rem;
}

.pos-mc-vid-hero {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.imgtxt.hero-video-wrap .hero-navbar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 3;
	background: transparent !important;
}

/* =========================================
   POSITION UTILITIES (BASE 9 GRID)
========================================= */

/* Top */
.pos-tl .imgtxt-content {
	top: 0;
	left: 0;
	text-align: left;
	transform: none;
}

.pos-tc .imgtxt-content {
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	width: calc(100% - 2rem);
	max-width: calc(100% - 2rem);
}

.pos-tr .imgtxt-content {
	top: 0;
	right: 0;
	text-align: right;
	transform: none;
}

/* Middle */
.pos-ml .imgtxt-content {
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	text-align: left;
}

.pos-mc .imgtxt-content {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	width: calc(100% - 2rem);
	max-width: calc(100% - 2rem);
}

.pos-mr .imgtxt-content {
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	text-align: right;
}

/* Bottom */
.pos-bl .imgtxt-content {
	bottom: 0;
	left: 0;
	text-align: left;
	transform: none;
}

.pos-bc .imgtxt-content {
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	width: calc(100% - 2rem);
	max-width: calc(100% - 2rem);
}

.pos-br .imgtxt-content {
	bottom: 0;
	right: 0;
	text-align: right;
	transform: none;
}


/* =========================================
   RESPONSIVE POSITION UTILITIES
========================================= */

/* MD (≥768px) */
@media (min-width: 768px) {

	.pos-md-tl .imgtxt-content {
		top: 0;
		right: auto;
		bottom: auto;
		left: 0;
		transform: none;
		text-align: left;
		width: auto;
		max-width: 100%;
	}

	.pos-md-tc .imgtxt-content {
		top: 0;
		right: auto;
		bottom: auto;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		width: calc(100% - 2rem);
		max-width: calc(100% - 2rem);
	}

	.pos-md-tr .imgtxt-content {
		top: 0;
		right: 0;
		bottom: auto;
		left: auto;
		transform: none;
		text-align: right;
		width: auto;
		max-width: 100%;
	}

	.pos-md-ml .imgtxt-content {
		top: 50%;
		right: auto;
		bottom: auto;
		left: 0;
		transform: translateY(-50%);
		text-align: left;
		width: auto;
		max-width: 100%;
	}

	.pos-md-mc .imgtxt-content {
		top: 50%;
		right: auto;
		bottom: auto;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		width: calc(100% - 2rem);
		max-width: calc(100% - 2rem);
	}

	.pos-md-mr .imgtxt-content {
		top: 50%;
		right: 0;
		bottom: auto;
		left: auto;
		transform: translateY(-50%);
		text-align: right;
		width: auto;
		max-width: 100%;
	}

	.pos-md-bl .imgtxt-content {
		top: auto;
		right: auto;
		bottom: 0;
		left: 0;
		transform: none;
		text-align: left;
		width: auto;
		max-width: 100%;
	}

	.pos-md-bc .imgtxt-content {
		top: auto;
		right: auto;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		width: calc(100% - 2rem);
		max-width: calc(100% - 2rem);
	}

	.pos-md-br .imgtxt-content {
		top: auto;
		right: 0;
		bottom: 0;
		left: auto;
		transform: none;
		text-align: right;
		width: auto;
		max-width: 100%;
	}
}

/* LG (≥992px) */
@media (min-width: 992px) {

	.pos-lg-tl .imgtxt-content {
		top: 0;
		right: auto;
		bottom: auto;
		left: 0;
		transform: none;
		text-align: left;
		width: auto;
		max-width: 100%;
	}

	.pos-lg-tc .imgtxt-content {
		top: 0;
		right: auto;
		bottom: auto;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		width: calc(100% - 2rem);
		max-width: calc(100% - 2rem);
	}

	.pos-lg-tr .imgtxt-content {
		top: 0;
		right: 0;
		bottom: auto;
		left: auto;
		transform: none;
		text-align: right;
		width: auto;
		max-width: 100%;
	}

	.pos-lg-ml .imgtxt-content {
		top: 50%;
		right: auto;
		bottom: auto;
		left: 0;
		transform: translateY(-50%);
		text-align: left;
		width: auto;
		max-width: 100%;
	}

	.pos-lg-mc .imgtxt-content {
		top: 50%;
		right: auto;
		bottom: auto;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		width: calc(100% - 2rem);
		max-width: calc(100% - 2rem);
	}

	.pos-lg-mr .imgtxt-content {
		top: 50%;
		right: 0;
		bottom: auto;
		left: auto;
		transform: translateY(-50%);
		text-align: right;
		width: auto;
		max-width: 100%;
	}

	.pos-lg-bl .imgtxt-content {
		top: auto;
		right: auto;
		bottom: 0;
		left: 0;
		transform: none;
		text-align: left;
		width: auto;
		max-width: 100%;
	}

	.pos-lg-bc .imgtxt-content {
		top: auto;
		right: auto;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		width: calc(100% - 2rem);
		max-width: calc(100% - 2rem);
	}

	.pos-lg-br .imgtxt-content {
		top: auto;
		right: 0;
		bottom: 0;
		left: auto;
		transform: none;
		text-align: right;
		width: auto;
		max-width: 100%;
	}
}

/* XL (≥1200px) */
@media (min-width: 1200px) {

	.pos-xl-tl .imgtxt-content {
		top: 0;
		right: auto;
		bottom: auto;
		left: 0;
		transform: none;
		text-align: left;
		width: auto;
		max-width: 100%;
	}

	.pos-xl-tc .imgtxt-content {
		top: 0;
		right: auto;
		bottom: auto;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		width: calc(100% - 2rem);
		max-width: calc(100% - 2rem);
	}

	.pos-xl-tr .imgtxt-content {
		top: 0;
		right: 0;
		bottom: auto;
		left: auto;
		transform: none;
		text-align: right;
		width: auto;
		max-width: 100%;
	}

	.pos-xl-ml .imgtxt-content {
		top: 50%;
		right: auto;
		bottom: auto;
		left: 0;
		transform: translateY(-50%);
		text-align: left;
		width: auto;
		max-width: 100%;
	}

	.pos-xl-mc .imgtxt-content {
		top: 50%;
		right: auto;
		bottom: auto;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		width: calc(100% - 2rem);
		max-width: calc(100% - 2rem);
	}

	.pos-xl-mr .imgtxt-content {
		top: 50%;
		right: 0;
		bottom: auto;
		left: auto;
		transform: translateY(-50%);
		text-align: right;
		width: auto;
		max-width: 100%;
	}

	.pos-xl-bl .imgtxt-content {
		top: auto;
		right: auto;
		bottom: 0;
		left: 0;
		transform: none;
		text-align: left;
		width: auto;
		max-width: 100%;
	}

	.pos-xl-bc .imgtxt-content {
		top: auto;
		right: auto;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		width: calc(100% - 2rem);
		max-width: calc(100% - 2rem);
	}

	.pos-xl-br .imgtxt-content {
		top: auto;
		right: 0;
		bottom: 0;
		left: auto;
		transform: none;
		text-align: right;
		width: auto;
		max-width: 100%;
	}
}


/* =========================================
   OVERLAY SYSTEM
========================================= */

/* Rounded overlay support */
.ov-rounded,
.ov-rounded img,
.ov-rounded::before {
	border-radius: inherit;
}

/* Opacity */
.ov-0  { --ov-opacity: 0; }
.ov-10 { --ov-opacity: .10; }
.ov-20 { --ov-opacity: .20; }
.ov-30 { --ov-opacity: .30; }
.ov-40 { --ov-opacity: .40; }
.ov-50 { --ov-opacity: .50; }
.ov-60 { --ov-opacity: .60; }
.ov-70 { --ov-opacity: .70; }
.ov-80 { --ov-opacity: .80; }
.ov-90 { --ov-opacity: .90; }

/* Solid colors */
.ov-primary   { --ov-color: var(--bs-primary, #0d6efd); }
.ov-secondary { --ov-color: var(--bs-secondary, #6c757d); }
.ov-success   { --ov-color: var(--bs-success, #198754); }
.ov-danger    { --ov-color: var(--bs-danger, #dc3545); }
.ov-warning   { --ov-color: var(--bs-warning, #ffc107); }
.ov-info      { --ov-color: var(--bs-info, #0dcaf0); }
.ov-light     { --ov-color: var(--bs-light, #f8f9fa); }
.ov-dark      { --ov-color: var(--bs-dark, #212529); }

.ov-white  { --ov-color: #fff; }
.ov-black  { --ov-color: #000; }
.ov-afblue { --ov-color: #00308F; }
.ov-indigo { --ov-color: #6610f2; }
.ov-purple { --ov-color: #8B00D1; }
.ov-pink   { --ov-color: #e83e8c; }
.ov-orange { --ov-color: #fd7e14; }
.ov-teal   { --ov-color: #20c997; }



.blur-0 {filter:blur(0px);}
.blur-2 {filter:blur(2px);}
.blur-4 {filter:blur(4px);}
.blur-6 {filter:blur(6px);}
.blur-8 {filter:blur(8px);}
.blur-10 {filter:blur(10px);}








/* Gradients */
.ov-grad-b {
	--ov-gradient: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
}

.ov-grad-t {
	--ov-gradient: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0));
}

.ov-grad-l {
	--ov-gradient: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0));
}

.ov-grad-r {
	--ov-gradient: linear-gradient(to left, rgba(0,0,0,0.7), rgba(0,0,0,0));
}

.ov-grad-vignette {
	--ov-gradient: radial-gradient(circle, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%);
}

.ov-grad-spot {
	--ov-gradient: radial-gradient(circle at center, rgba(0,0,0,0.5), rgba(0,0,0,0));
}

.ov-grad-angle {
	--ov-gradient: linear-gradient(135deg, rgba(0,0,0,0.6), rgba(0,0,0,0));
}






/* =========================================
   AUTO-SCALING TYPOGRAPHY
========================================= */
/
.imgtxt-content-scale {
	font-size: clamp(.95rem, 2.2cqw, 1.15rem);
	line-height: 1.25;
}

.imgtxt-content-scale h1,
.imgtxt-content-scale .h1 {
	font-size: clamp(1.5rem, 6.5cqw, 3.5rem);
	line-height: 1.05;
	margin-bottom: .35em;
}

.imgtxt-content-scale h2,
.imgtxt-content-scale .h2 {
	font-size: clamp(1.3rem, 5.5cqw, 2.8rem);
	line-height: 1.1;
	margin-bottom: .35em;
}

.imgtxt-content-scale h3,
.imgtxt-content-scale .h3 {
	font-size: clamp(1.15rem, 4.7cqw, 2.2rem);
	line-height: 1.15;
	margin-bottom: .35em;
}

.imgtxt-content-scale h4,
.imgtxt-content-scale .h4 {
	font-size: clamp(1.05rem, 4cqw, 1.8rem);
	line-height: 1.15;
	margin-bottom: .35em;
}

.imgtxt-content-scale h5,
.imgtxt-content-scale .h5 {
	font-size: clamp(1rem, 3.2cqw, 1.4rem);
	line-height: 1.2;
	margin-bottom: .35em;
}

.imgtxt-content-scale h6,
.imgtxt-content-scale .h6 {
	font-size: clamp(.95rem, 2.7cqw, 1.15rem);
	line-height: 1.2;
	margin-bottom: .35em;
}

.imgtxt-content-scale p,
.imgtxt-content-scale .imgtxt-text {
	font-size: clamp(.9rem, 2.4cqw, 1.25rem);
	line-height: 1.35;
	margin-bottom: .5em;
}


/* =========================================
   OPTIONAL: TIGHTER SCALING FOR SMALL CARDS
========================================= */

.imgtxt.scale-tight .imgtxt-content h1,
.imgtxt.scale-tight .imgtxt-content .h1 {
	font-size: clamp(1.25rem, 5.4cqw, 2.5rem);
}

.imgtxt.scale-tight .imgtxt-content h2,
.imgtxt.scale-tight .imgtxt-content .h2 {
	font-size: clamp(1.15rem, 4.8cqw, 2rem);
}

.imgtxt.scale-tight .imgtxt-content h3,
.imgtxt.scale-tight .imgtxt-content .h3 {
	font-size: clamp(1.05rem, 4.2cqw, 1.6rem);
}

.imgtxt.scale-tight .imgtxt-content p,
.imgtxt.scale-tight .imgtxt-content .imgtxt-text {
	font-size: clamp(.85rem, 2.1cqw, 1rem);
}


/* =========================================
   FALLBACK FOR OLDER BROWSERS
========================================= */

@supports not (container-type: inline-size) {
	.imgtxt-content {
		font-size: clamp(.95rem, 1.2vw, 1.15rem);
	}

	.imgtxt-content h1,
	.imgtxt-content .h1 {
		font-size: clamp(1.5rem, 3.5vw, 3.5rem);
	}

	.imgtxt-content h2,
	.imgtxt-content .h2 {
		font-size: clamp(1.3rem, 3vw, 2.8rem);
	}

	.imgtxt-content h3,
	.imgtxt-content .h3 {
		font-size: clamp(1.15rem, 2.5vw, 2.2rem);
	}

	.imgtxt-content h4,
	.imgtxt-content .h4 {
		font-size: clamp(1.05rem, 2.1vw, 1.8rem);
	}

	.imgtxt-content h5,
	.imgtxt-content .h5 {
		font-size: clamp(1rem, 1.8vw, 1.4rem);
	}

	.imgtxt-content h6,
	.imgtxt-content .h6 {
		font-size: clamp(.95rem, 1.5vw, 1.15rem);
	}

	.imgtxt-content p,
	.imgtxt-content .imgtxt-text {
		font-size: clamp(.9rem, 1.3vw, 1.25rem);
	}
}


/* =========================================
   OPTIONAL: HOVER EFFECT
========================================= */

.imgtxt-hover:hover::before {
	opacity: .65;
}