/*
 * Bloco do Instagram na home.
 *
 * O embed é iframe de outra origem: o cabeçalho que vem dentro dele não pode ser
 * estilizado e sai no idioma do visitante. Então ele é CORTADO e o cabeçalho de
 * cima é nosso.
 *
 * O corte funciona assim: o conteúdo do iframe é o cabeçalho deles (altura fixa,
 * ~158px) mais a grade (2 linhas de quadrados em 3 colunas, ou seja
 * largura × 2/3). O invólucro tem só a altura da grade, o iframe é feito mais
 * alto na mesma medida e empurrado para cima — o cabeçalho deles fica fora da
 * área visível.
 *
 * `padding-bottom` percentual é relativo à LARGURA, então tudo isso cabe em CSS
 * puro e acompanha qualquer container, sem uma linha de JavaScript.
 */

.ig {
	--ig-cabecalho-embed: 158px;
	--ig-azul: #22577a;
	--ig-verde: #38a3a5;

	font-family: "Cabin", -apple-system, "Segoe UI", sans-serif;
	text-align: left;
}

/* ── cabeçalho (nosso) ─────────────────────────────────────────────────── */

.ig__perfil {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.ig__avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: contain;
	background: #fff;
	border: 1px solid #e4e4e4;
	flex: none;
}

.ig__ident {
	flex: 1 1 260px;
	min-width: 0;
}

.ig__nome {
	margin: 0 0 3px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: #2d2d2d;
}

/* Tudo numa linha só: @usuário · N publicações · N seguidores. Em tela estreita
   quebra sozinho pelo flex-wrap, em vez de estourar a largura. */
.ig__dados {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
	color: #7f7f7f;
}

.ig__dados a {
	color: var(--ig-azul);
	font-weight: 600;
	text-decoration: none;
}

.ig__dados a:hover {
	text-decoration: underline;
}

.ig__dados strong {
	color: #2d2d2d;
	font-weight: 700;
}

.ig__sep {
	color: #c9c9c9;
}

/*
 * Seletor com o `a` junto porque o tema estiliza `a` globalmente e vencia a cor
 * daqui — o botão saía com texto #57CC99 sobre fundo #38A3A5, verde sobre verde.
 *
 * E o fundo é o azul, não o verde dos outros botões do site: branco sobre
 * #38A3A5 dá ~2.9:1 de contraste, abaixo do mínimo para texto deste tamanho.
 * Sobre #22577A passa com folga. Perde-se um pouco de consistência com os
 * botões vizinhos, mas um botão ilegível não é consistência.
 */
.ig a.ig__seguir {
	flex: none;
	padding: 11px 26px;
	background: var(--ig-azul);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: opacity .15s ease;
}

.ig a.ig__seguir:hover {
	opacity: .88;
	color: #fff;
}

.ig a.ig__seguir:focus-visible {
	outline: 3px solid var(--ig-verde);
	outline-offset: 3px;
}

/* ── grade (iframe cortado) ────────────────────────────────────────────── */

.ig__grade {
	position: relative;
	width: 100%;
	padding-bottom: 66.67%; /* 2 linhas de 3 colunas quadradas */
	height: 0;
	overflow: hidden;
}

.ig__quadro {
	position: absolute;
	left: 0;
	/* empurra o cabeçalho do Instagram para fora da área visível */
	top: calc(-1 * var(--ig-cabecalho-embed));
	width: 100%;
	height: calc(100% + var(--ig-cabecalho-embed));
	border: 0;
	display: block;
}

@media (max-width: 480px) {
	.ig {
		/* abaixo disso o cabeçalho do embed encolhe */
		--ig-cabecalho-embed: 147px;
	}

	.ig a.ig__seguir {
		flex-basis: 100%;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ig a.ig__seguir {
		transition: none;
	}
}