/*
 * Hamo Progress - Slides — CSS estrutural.
 * Valores visuais vêm dos controles do Elementor ({{WRAPPER}} vence por
 * especificidade). Nunca declarar as CSS vars dos controles diretamente
 * em .hamo-ps aqui (lição do shadowing).
 */

.hamo-ps {
	display: flex;
	align-items: center;
	gap: 40px;
}

/* Imagem à esquerda inverte a ordem das colunas. */
.hamo-ps-image-left .hamo-ps {
	flex-direction: row-reverse;
}

.hamo-ps__content {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.hamo-ps__item {
	cursor: pointer;
	outline: none;
	opacity: var(--hamo-ps-inactive-opacity, 1);
	transition: opacity var(--hamo-ps-fade, 0.6s) ease;
}

.hamo-ps__item.is-active {
	cursor: default;
	opacity: 1;
}

.hamo-ps__item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.hamo-ps__title {
	margin: 0;
}

.hamo-ps__desc {
	margin: 8px 0 0;
}

/* inline-block (em vez de block) para a barra obedecer ao text-align do
   item quando tiver largura menor que 100% — permite alinhar o conteúdo
   inteiro (título, descrição e barra) pelo controle responsivo. */
.hamo-ps__bar {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 100%;
	height: 2px;
	margin-top: 16px;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.15);
}

/* O preenchimento anima via transition de width controlada pelo JS
   (sincronizada com o timer de avanço automático). */
.hamo-ps__bar-fill {
	display: block;
	width: 0;
	height: 100%;
	background-color: #4ec5f1;
}

/* Imagens empilhadas na mesma célula: o container assume o tamanho da
   maior, e a ativa aparece com fade. */
.hamo-ps__media {
	flex: 0 0 50%;
	min-width: 0;
	display: grid;
	grid-template-columns: 1fr;
}

.hamo-ps__image {
	grid-column: 1;
	grid-row: 1;
	opacity: 0;
	transition: opacity var(--hamo-ps-fade, 0.6s) ease;
}

.hamo-ps__image.is-active {
	opacity: 1;
}

.hamo-ps__image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Empilha as colunas em telas estreitas (breakpoint mobile do Elementor). */
@media (max-width: 767px) {
	.hamo-ps,
	.hamo-ps-image-left .hamo-ps {
		flex-direction: column;
	}

	.hamo-ps__media {
		width: 100%;
		flex-basis: auto !important;
	}
}