/* Seletor duplo: vence a regra de temas de blocos que limitam todo o conteúdo à largura de texto. */
.sirecom-banner.sirecom-banner {
	position: relative;
	width: 100%;
	max-width: var( --sirecom-banner-max, 1200px );
	margin: 0 auto 1.5rem;
}

/* Todos os slides ocupam a mesma célula: a altura é a do maior, sem pulo ao trocar. */
.sirecom-banner__slides {
	display: grid;
}

.sirecom-banner__slide {
	grid-area: 1 / 1;
	visibility: hidden;
	opacity: 0;
	/* A parte do efeito ao passar o mouse vem do CSS compartilhado do Core (hover.css). */
	transition: opacity 0.4s ease, var( --sirecom-hover-t, transform 0s );
	/* O bloco tem o mesmo arredondamento da imagem: assim uma sombra ou borda colocada por classe CSS acompanha os cantos. */
	border-radius: var( --sirecom-img-radius, 10px );
	overflow: hidden;
}

.sirecom-banner__slide.is-active {
	visibility: visible;
	opacity: 1;
}

.sirecom-banner__link {
	display: block;
}

.sirecom-banner__slide picture,
.sirecom-banner__img {
	display: block;
	width: 100%;
	height: auto;
}

/* A imagem copia o raio do bloco: se uma classe do item mudar o raio do slide, a imagem acompanha. */
.sirecom-banner__link,
.sirecom-banner__slide picture,
.sirecom-banner__img {
	border-radius: inherit;
}

.sirecom-banner__nav {
	position: absolute;
	right: 0;
	bottom: 8px;
	left: 0;
	display: flex;
	justify-content: center;
	gap: 4px;
	pointer-events: none;
}

.sirecom-banner__dot {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	pointer-events: auto;
}

.sirecom-banner__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.35 );
}

.sirecom-banner__dot.is-active::before {
	background: var( --sirecom-primary, #004c99 );
}

.sirecom-banner__dot:focus-visible {
	outline: 2px solid var( --sirecom-primary, #004c99 );
	outline-offset: 0;
}

.sirecom-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}