/* News Hero Informes: banner carousel for the Informes page — same look as News Hero Carousel, edge to edge */
.nhi{
	--nhi-green:#3b7a75;
	--nhi-gray:#d9d9d9;
	--nhi-container:1340px;                                   /* width of the site content: title and arrows line up with it */
	--nhi-height:max(420px,calc(100vh - var(--gm-altura,0px)));   /* full screen below the menu (nhi.js measures it exactly) */
	--nhi-focus:50% 30%;                                      /* which part of the photo stays in view when it is cropped (x y), e.g. 50% 0% = top, 50% 50% = center */
	--nhi-inset:max(24px,calc((100% - var(--nhi-container)) / 2));
	font-family:var(--gb-font,'Montserrat',system-ui,sans-serif);

	/* full width, whatever the width of the column the shortcode sits in.
	   nhi.js measures the real page width and the real left offset and sets --nhi-vw / margin-left,
	   so the banner always starts at the left edge of the screen and is never cut on either side.
	   The values below are only the fallback used before the script runs. */
	position:relative;
	width:var(--nhi-vw,100vw);max-width:none;
	height:var(--nhi-height);
	margin:0 0 56px calc(50% - 50vw);
	background:var(--nhi-gray);overflow:hidden;
}
@supports (height:1svh){.nhi{--nhi-height:max(420px,calc(100svh - var(--gm-altura,0px)))}}
.nhi,.nhi *,.nhi *::before,.nhi *::after{box-sizing:border-box}
/* 100vw includes the scrollbar: never let it create a sideways scroll */
html:has(.nhi),body:has(.nhi){overflow-x:clip}

.nhi .nhi-slide{
	position:absolute;inset:0;display:block;
	opacity:0;visibility:hidden;
	transition:opacity .6s ease,visibility .6s;text-decoration:none;
}
.nhi .nhi-slide.is-active{opacity:1;visibility:visible;z-index:1}
.nhi .nhi-slide img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--nhi-focus,50% 30%);display:block}
.nhi .nhi-slide:focus-visible{outline:3px solid #fff;outline-offset:-6px}

/* pictures that are much taller/squarer than the banner (posters, graphics with text) are shown whole,
   over a blurred copy of themselves, instead of being cut. Add fit="cover" to the shortcode to turn this off. */
.nhi .nhi-slide.is-contain{background:#0b2f2d}
.nhi .nhi-slide.is-contain::before{content:"";position:absolute;inset:-60px;background:var(--nhi-bg) center/cover no-repeat;filter:blur(28px) saturate(1.1);transform:scale(1.05)}
.nhi .nhi-slide.is-contain img{object-fit:contain;object-position:center center}

/* dark mask: transparent at the top -> almost black at the bottom */
.nhi .nhi-mask{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.12) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.88) 100%)}

.nhi .nhi-title{
	position:absolute;left:var(--nhi-inset);right:calc(var(--nhi-inset) + 130px);bottom:72px;
	max-width:1100px;
	color:#fff;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:0;
	text-shadow:0 1px 3px rgba(0,0,0,.4);
	transition:color .25s ease;
}
.nhi .nhi-slide:hover .nhi-title{color:#bddbd4}

.nhi .nhi-arrows{position:absolute;right:var(--nhi-inset);bottom:68px;z-index:3;display:flex;gap:18px}
.nhi .nhi-arrows button{
	margin:0!important;padding:8px!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
	color:#fff!important;font-size:34px!important;line-height:1!important;opacity:.9;cursor:pointer;
}
.nhi .nhi-arrows button:hover{opacity:1}
.nhi .nhi-arrows button:focus-visible{outline:2px solid #fff!important;outline-offset:2px}

/* progress bar */
.nhi .nhi-bar{position:absolute;left:0;right:0;bottom:0;height:6px;background:rgba(255,255,255,.85);z-index:3}
.nhi .nhi-bar-fill{display:block;height:100%;width:0;background:var(--nhi-green)}
.nhi .nhi-bar-fill.run{animation:nhi-progress var(--nhi-time,15s) linear forwards}
.nhi:hover .nhi-bar-fill,.nhi:focus-within .nhi-bar-fill{animation-play-state:paused}   /* pause on hover / keyboard focus */
@keyframes nhi-progress{from{width:0}to{width:100%}}

@media (max-width:800px){
	.nhi{--nhi-inset:20px;margin-bottom:32px}
	.nhi .nhi-title{right:calc(var(--nhi-inset) + 92px);bottom:44px;font-size:22px}
	.nhi .nhi-arrows{bottom:38px;gap:8px}
	.nhi .nhi-arrows button{font-size:26px!important}
}
@media (prefers-reduced-motion:reduce){
	.nhi .nhi-slide{transition:none}
	.nhi .nhi-bar{display:none}   /* no auto-advance: use the arrows */
}