/* Feed de Instagram — quatro layouts.
   As variáveis (--seol-fundo, --seol-texto, --seol-borda, --seol-raio,
   --seol-acao-*) vêm dos arquivos de assets/css/estilos/, que escopam em
   .seol-ig junto com as peças de avaliação.

   DESENHADO PARA O DADO REAL: a mídia carrega toda a informação. Não há legenda
   em layout nenhum — legenda de post passa de 300 caracteres e produzia colunas
   de texto mais altas que a própria imagem.

   A proporção é configurável (`proporcao="4/5"` dá o retângulo do feed do
   Instagram); o padrão continua quadrado. */

.seol-ig {
	color: var(--seol-texto);

	/* Geometria com PADRÃO AQUI e sobrescrita por atributo do shortcode
	   (raio, espaco, proporcao, colunas), que chega como --seol-ig-* inline no
	   elemento raiz. Quatro eixos independentes: como classe seriam dezenas de
	   combinações de CSS morto. */
	--seol-ig-raio: var(--seol-raio, 10px);
	--seol-ig-espaco: 10px;
	--seol-ig-prop: 1 / 1;
}

/* ---- peças comuns ---- */

.seol-ig__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* aspect-ratio no LINK, não na imagem: assim o card reserva o espaço antes de
   a imagem carregar e a página não pula (CLS). */
.seol-ig__link {
	position: relative;
	display: block;
	aspect-ratio: var(--seol-ig-prop);
	overflow: hidden;
	border-radius: var(--seol-ig-raio);
	background: var(--seol-borda);
}

.seol-ig__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

/* Some no toque: hover em tela sem cursor deixa o card "preso" no estado de
   passagem depois do tap. */
@media (hover: hover) {
	.seol-ig__link:hover .seol-ig__img { transform: scale(1.04); }
}

.seol-ig__play {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 0 7px 12px;
	border-color: transparent transparent transparent #fff;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}

.seol-ig__perfil {
	margin: 0 0 12px;
	font-weight: 600;
}
.seol-ig__perfil a {
	color: inherit;
	text-decoration: none;
}
.seol-ig__perfil a:hover { text-decoration: underline; }

.seol-ig__rodape {
	margin: 14px 0 0;
	text-align: center;
}

.seol-ig__cta {
	display: inline-block;
	padding: 9px 18px;
	border-radius: 999px;
	background: var(--seol-acao-fundo, #1a1a1a);
	color: var(--seol-acao-texto, #fff);
	font-size: .9em;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
}
.seol-ig__cta:hover { opacity: .88; }

/* ---- tira: uma linha, arrastável ---- */

.seol-ig--tira .seol-ig__lista {
	display: flex;
	gap: var(--seol-ig-espaco);
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-snap-type: x mandatory;
}
.seol-ig--tira .seol-ig__lista::-webkit-scrollbar { display: none; }
.seol-ig--tira .seol-ig__item {
	flex: 0 0 min(160px, 38%);
	scroll-snap-align: start;
}

/* ---- grade: o padrão ---- */

.seol-ig--grade .seol-ig__lista {
	display: grid;
	gap: var(--seol-ig-espaco);
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* Colunas fixas: a classe é o interruptor, porque o CSS não sabe perguntar se
   uma variável foi definida. Com `colunas="3"` e `qtd="6"` saem duas linhas —
   o número de linhas é consequência, não um controle à parte.
   minmax(0, 1fr) e não 1fr: 1fr tem mínimo `auto`, e um card com imagem larga
   estouraria a coluna em vez de encolher. */
.seol-ig--colunas-fixas .seol-ig__lista {
	grid-template-columns: repeat(var(--seol-ig-colunas), minmax(0, 1fr));
}

/* ---- destaque: um grande, o resto ao lado ---- */

.seol-ig--destaque .seol-ig__palco-destaque {
	display: grid;
	gap: var(--seol-ig-espaco);
	grid-template-columns: 1fr;
}
.seol-ig--destaque .seol-ig__lista {
	display: grid;
	gap: var(--seol-ig-espaco);
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	align-content: start;
}

/* Aperto por ESPAÇO DISPONÍVEL, não por aparelho — o feed vive em coluna de
   Elementor e barra lateral, onde media query concluiria "desktop" numa caixa
   de 300px. Mesma regra que reviews.css já aplica. */
@container (min-width: 560px) {
	.seol-ig--destaque .seol-ig__palco-destaque {
		grid-template-columns: 1.6fr 1fr;
	}
}
@supports not (container-type: inline-size) {
	@media (min-width: 700px) {
		.seol-ig--destaque .seol-ig__palco-destaque {
			grid-template-columns: 1.6fr 1fr;
		}
	}
}
.seol-ig--destaque { container-type: inline-size; }

/* ---- carrossel: pista + setas + bolinhas (assets/js/carrossel.js) ---- */

.seol-ig--carrossel .seol-ig__pista {
	display: flex;
	gap: var(--seol-ig-espaco);
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-snap-type: x mandatory;
}
.seol-ig--carrossel .seol-ig__pista::-webkit-scrollbar { display: none; }
.seol-ig--carrossel .seol-ig__item {
	flex: 0 0 min(220px, 62%);
	scroll-snap-align: start;
}

/* Controles: o JS monta com o prefixo que o template manda em data-seol-base,
   então as classes abaixo são seol-ig__*, não seol-reviews__*. Duplicar ~25
   linhas aqui é o preço de o feed não depender do reviews.css estar na página. */
.seol-ig__palco { position: relative; }
.seol-ig__seta {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--seol-borda);
	border-radius: 50%;
	background: var(--seol-fundo, #fff);
	color: var(--seol-texto);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.seol-ig__seta--ant { left: 4px; }
.seol-ig__seta--prox { right: 4px; }
.seol-ig__seta[disabled] { opacity: .35; cursor: default; }
.seol-ig__pontos {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 10px;
}
.seol-ig__ponto {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 1px solid var(--seol-borda);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}
.seol-ig__ponto[aria-current="true"] {
	background: var(--seol-marca, var(--seol-texto));
	border-color: transparent;
}
/* O JS esconde em vez de reconstruir quando a pista cabe inteira; a regra de
   atributo do navegador perderia para as classes acima. */
.seol-ig__seta[hidden],
.seol-ig__pontos[hidden] { display: none; }