/* DRG Hero (from themes/makemake/hero.php). The --hero-* variables come from the widget's layout controls. */

.section--hero { position: relative; height: var(--hero-height); overflow: hidden; background-color: var(--color-blue-dark); }
.section--hero .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms ease; }
.section--hero .hero-slide.active { opacity: 1; }
.section--hero .hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-object-position, center); }
.section--hero::after { content: ""; position: absolute; inset: 0; background: var(--hero-overlay); pointer-events: none; }
.section--hero .hero-content { position: absolute; z-index: 1; left: 0; right: 0; bottom: var(--hero-content-bottom, 5rem); display: flex; justify-content: space-between; align-items: flex-end; gap: var(--size-l); }
.section--hero .hero-copy { max-width: var(--hero-copy-width, 45rem); }
.section--hero .hero-copy h1 { color: white; text-transform: uppercase; margin-bottom: var(--size-m); }
.section--hero .hero-copy p { color: white; }
.section--hero .hero-controls { display: flex; gap: var(--size-xs); }
.section--hero .hero-controls button { display: flex; align-items: center; justify-content: center; width: 2.375rem; height: 2.375rem; padding: 0; border: 0; border-radius: 0; background: rgba(0, 0, 0, 0.3); cursor: pointer; transition: background-color 300ms ease; }
.section--hero .hero-controls button:hover { background: rgba(0, 0, 0, 0.5); }
.section--hero .hero-controls button:focus-visible { outline: 0.0625rem solid white; outline-offset: 0.125rem; }
.section--hero .hero-controls .hero-prev img, .section--hero .hero-controls .hero-next img { width: 1.875rem; height: 1.875rem; }
.section--hero .hero-controls .hero-pause img { width: 1.375rem; height: 1.375rem; }
.section--hero .hero-controls .hero-pause .icon-play { display: none; }
.section--hero .hero-controls .hero-pause.paused .icon-pause { display: none; }
.section--hero .hero-controls .hero-pause.paused .icon-play { display: block; }

@media (width < 51rem)
{
	.section--hero { height: var(--hero-height-mobile); }
	.section--hero::after { background: var(--hero-overlay-mobile); }
	.section--hero .hero-content { bottom: 1.5rem; flex-direction: column-reverse; align-items: flex-start; gap: var(--size-s); }
	.section--hero .hero-copy h1 { margin-bottom: var(--size-s); }
}