/**
 * Hydrotech MAPA — CPT templates (cards, hero, grids, sliders).
 *
 * @package Hydrotech_Markets_Applications
 */

:root {
	--hydrotech-mapa-blue: #0a6ebd;
	--hydrotech-mapa-blue-dark: #085a9a;
	--hydrotech-mapa-radius: 14px;
	/* Card (reference UI): square tile, large radius, glass bar */
	--hydrotech-mapa-card-radius: 24px;
	--hydrotech-mapa-card-bar-radius: 16px;
	--hydrotech-mapa-card-arrow-bg: #131b2e;
	--hydrotech-mapa-card-gap: 1.75rem;
	--hydrotech-mapa-overlay: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 35%,
		rgba(0, 0, 0, 0.72) 100%
	);
}

.hydrotech-mapa-archive,
.hydrotech-mapa-single {
	box-sizing: border-box;
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem 1.25rem 4rem;
}

.hydrotech-mapa-hero {
	position: relative;
	min-height: 42vw;
	max-height: 520px;
	border-radius: var(--hydrotech-mapa-radius);
	overflow: hidden;
	margin: 0 auto 2.5rem;
	background: #1a1f24 center/cover no-repeat;
}

.hydrotech-mapa-hero__media {
	position: absolute;
	inset: 0;
	background: center/cover no-repeat;
}

.hydrotech-mapa-hero__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.15) 0%,
		rgba(0, 0, 0, 0.55) 100%
	);
}

.hydrotech-mapa-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	min-height: 320px;
	padding: 2rem 2rem 2.25rem;
}

.hydrotech-mapa-hero__title {
	margin: 0;
	font-size: clamp(1.75rem, 4vw, 3rem);
	line-height: 1.1;
	color: #fff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.hydrotech-mapa-prose {
	font-size: 1.05rem;
	line-height: 1.65;
	color: #1e2328;
	margin-bottom: 2rem;
}

.hydrotech-mapa-prose p:first-child {
	margin-top: 0;
}

.hydrotech-mapa-section-title {
	font-size: 1.35rem;
	margin: 2.5rem 0 1rem;
}

.hydrotech-mapa-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--hydrotech-mapa-card-gap);
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Extra air between cards in shortcode / related grids */
.hydrotech-mapa-shortcode .hydrotech-mapa-grid--cards {
	gap: 2rem;
}

.hydrotech-mapa-grid--carousel {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 0.5rem;
	scrollbar-width: thin;
}

.hydrotech-mapa-grid--carousel .hydrotech-mapa-card {
	flex: 0 0 min(320px, 85vw);
	scroll-snap-align: start;
	aspect-ratio: auto;
	min-height: 280px;
}

.hydrotech-mapa-card {
	margin: 0;
	border-radius: var(--hydrotech-mapa-card-radius);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	min-height: clamp(220px, 32vw, 380px);
	box-shadow: 0 16px 48px rgba(15, 24, 40, 0.14);
	isolation: isolate;
}

.hydrotech-mapa-card__link {
	position: relative;
	display: block;
	height: 100%;
	min-height: 100%;
	color: inherit;
	text-decoration: none;
	z-index: 0;
}

.hydrotech-mapa-card__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: #dfe6ed;
	background-size: cover;
	background-position: center;
	transition: transform 0.35s ease;
}

.hydrotech-mapa-card__bg--placeholder {
	background-image: linear-gradient(135deg, #c5d4e3, #e8eef5);
}

.hydrotech-mapa-card__link:hover .hydrotech-mapa-card__bg,
.hydrotech-mapa-card__link:focus-visible .hydrotech-mapa-card__bg {
	transform: scale(1.04);
}

/* Glass bar: inset from card edges, blur behind title + arrow */
.hydrotech-mapa-card__overlay {
	position: absolute;
	left: 0.65rem;
	right: 0.65rem;
	bottom: 0.65rem;
	top: auto;
	z-index: 2;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 0.85rem;
	padding: 0.95rem 1rem 0.95rem 1.15rem;
	border-radius: var(--hydrotech-mapa-card-bar-radius);
	/* Base layer: readable on both photos and light placeholders */
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.34) 0%,
		rgba(18, 28, 48, 0.42) 100%
	);
	border: 1px solid rgba(255, 255, 255, 0.38);
	-webkit-backdrop-filter: blur(18px) saturate(165%);
	backdrop-filter: blur(18px) saturate(165%);
	box-shadow:
		0 10px 36px rgba(12, 20, 40, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.45);
	mix-blend-mode: normal;
}

/* When blur is unavailable: keep gradient “frosted” look — avoid flat navy block */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.hydrotech-mapa-card__overlay {
		background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.35) 0%,
			rgba(22, 32, 52, 0.78) 100%
		);
		border-color: rgba(255, 255, 255, 0.28);
	}
}

.hydrotech-mapa-card__title {
	margin: 0;
	font-size: clamp(1.05rem, 2.6vw, 1.35rem);
	line-height: 1.2;
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.01em;
	max-width: calc(100% - 58px);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	font-family: inherit;
}

.hydrotech-mapa-card__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	pointer-events: none;
}

.hydrotech-mapa-card__arrow-svg {
	display: block;
	width: 48px;
	height: 48px;
}

.hydrotech-mapa-card__arrow-disc {
	fill: var(--hydrotech-mapa-card-arrow-bg);
}

.hydrotech-mapa-card__arrow-path {
	stroke: #fff;
}

.hydrotech-mapa-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 0.65rem;
	margin: 1.5rem 0 2rem;
	list-style: none;
	padding: 0;
}

.hydrotech-mapa-gallery li {
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
}

.hydrotech-mapa-gallery img {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
}

.hydrotech-mapa-slider {
	position: relative;
	margin: 2rem 0;
	border-radius: var(--hydrotech-mapa-radius);
	overflow: hidden;
	background: #0f1419;
}

.hydrotech-mapa-slider__viewport {
	position: relative;
}

.hydrotech-mapa-slider__slides {
	display: flex;
	transition: transform 0.45s ease;
	will-change: transform;
}

.hydrotech-mapa-slider__slide {
	flex-shrink: 0;
}

.hydrotech-mapa-slider__slide img {
	display: block;
	width: 100%;
	max-height: 560px;
	object-fit: cover;
}

.hydrotech-mapa-slider__controls {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	padding: 1rem;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.45));
}

.hydrotech-mapa-slider__btn {
	appearance: none;
	border: 0;
	border-radius: 999px;
	width: 42px;
	height: 42px;
	cursor: pointer;
	background: var(--hydrotech-mapa-blue);
	color: #fff;
	font-size: 1.2rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, transform 0.15s ease;
}

.hydrotech-mapa-slider__btn:hover,
.hydrotech-mapa-slider__btn:focus-visible {
	background: var(--hydrotech-mapa-blue-dark);
	outline: none;
	transform: translateY(-1px);
}

.hydrotech-mapa-two-col {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 2rem;
	margin: 2rem 0;
}

.hydrotech-mapa-list {
	margin: 0;
	padding-left: 1.1rem;
}

.hydrotech-mapa-brands {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2rem;
	align-items: center;
	margin: 1.5rem 0 2rem;
}

.hydrotech-mapa-brand-logo {
	max-height: 64px;
	width: auto;
	display: block;
	object-fit: contain;
}

.hydrotech-mapa-slogan {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--hydrotech-mapa-blue);
	margin: 0 0 1rem;
}

.hydrotech-mapa-carousel-nav {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
}

.hydrotech-mapa-carousel-nav button {
	appearance: none;
	border: 0;
	border-radius: 999px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	background: var(--hydrotech-mapa-blue);
	color: #fff;
	transition: background 0.2s ease;
}

.hydrotech-mapa-carousel-nav button:hover,
.hydrotech-mapa-carousel-nav button:focus-visible {
	background: var(--hydrotech-mapa-blue-dark);
	outline: none;
}

.hydrotech-mapa-archive__title {
	margin: 0 0 1.75rem;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.hydrotech-mapa-simple-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.hydrotech-mapa-simple-list li {
	margin-bottom: 0.75rem;
}

.hydrotech-mapa-simple-list a {
	color: var(--hydrotech-mapa-blue);
	text-decoration: none;
	font-weight: 600;
}

.hydrotech-mapa-simple-list a:hover,
.hydrotech-mapa-simple-list a:focus-visible {
	text-decoration: underline;
	outline: none;
}

.hydrotech-mapa-muted {
	color: #5c6670;
	font-size: 0.95rem;
}

.hydrotech-mapa-brand-page-logo {
	text-align: center;
	margin: 1.5rem 0;
}

.hydrotech-mapa-brand-logo--page {
	max-height: 120px;
	margin: 0 auto;
}

@media (max-width: 600px) {
	.hydrotech-mapa-hero__inner {
		padding: 1.25rem 1.25rem 1.5rem;
		min-height: 240px;
	}
}