/* News Hero Granbel: banner carousel for the Granbel page — same look as News Hero Carousel, edge to edge */
.nhg{
	--nhg-green:#3b7a75;
	--nhg-gray:#d9d9d9;
	--nhg-container:1340px;                                   /* width of the site content: title and arrows line up with it */
	--nhg-height:max(420px,calc(100vh - var(--gm-altura,0px)));   /* full screen below the menu (nhg.js measures it exactly) */
	--nhg-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 */
	--nhg-inset:max(24px,calc((100% - var(--nhg-container)) / 2));
	font-family:var(--gb-font,'Montserrat',system-ui,sans-serif);

	/* full width, whatever the width of the column the shortcode sits in.
	   nhg.js measures the real page width and the real left offset and sets --nhg-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(--nhg-vw,100vw);max-width:none;
	height:var(--nhg-height);
	margin:0 0 56px calc(50% - 50vw);
	background:var(--nhg-gray);overflow:hidden;
}
@supports (height:1svh){.nhg{--nhg-height:max(420px,calc(100svh - var(--gm-altura,0px)))}}
.nhg,.nhg *,.nhg *::before,.nhg *::after{box-sizing:border-box}
/* 100vw includes the scrollbar: never let it create a sideways scroll */
html:has(.nhg),body:has(.nhg){overflow-x:clip}

.nhg .nhg-slide{
	position:absolute;inset:0;display:block;
	opacity:0;visibility:hidden;
	transition:opacity .6s ease,visibility .6s;text-decoration:none;
}
.nhg .nhg-slide.is-active{opacity:1;visibility:visible;z-index:1}
.nhg .nhg-slide img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--nhg-focus,50% 30%);display:block}
.nhg .nhg-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. */
.nhg .nhg-slide.is-contain{background:#0b2f2d}
.nhg .nhg-slide.is-contain::before{content:"";position:absolute;inset:-60px;background:var(--nhg-bg) center/cover no-repeat;filter:blur(28px) saturate(1.1);transform:scale(1.05)}
.nhg .nhg-slide.is-contain img{object-fit:contain;object-position:center center}

/* dark mask: transparent at the top -> almost black at the bottom */
.nhg .nhg-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%)}

.nhg .nhg-title{
	position:absolute;left:var(--nhg-inset);right:calc(var(--nhg-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;
}
.nhg .nhg-slide:hover .nhg-title{color:#bddbd4}

.nhg .nhg-arrows{position:absolute;right:var(--nhg-inset);bottom:68px;z-index:3;display:flex;gap:18px}
.nhg .nhg-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;
}
.nhg .nhg-arrows button:hover{opacity:1}
.nhg .nhg-arrows button:focus-visible{outline:2px solid #fff!important;outline-offset:2px}

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

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