/**
 * Home/Feed do Instagram — Figma 260:1757 / 270:13846.
 *
 * Desktop (1200×399): perfil centralizado, gap 40 entre identidade, números e botão
 *   avatar 56 com anel de 2 px (cores do Instagram) e miolo de 46 (brand / brand-contrast)
 *   nome Heading Small 20/1.3 (600) · @usuario Caption 14 ink-muted
 *   números: valor Label 16 (500), rótulo Caption 14 ink-muted, gap 24
 *   botão brand de 50 px com ícone 16
 *   fotos: 6 por tela, altura 223 (≈ 4:5), gap 16, raio radius-card
 *   seta: círculo branco 44 com sombra Float, a 8 px da borda.
 * Mobile (< 782px): perfil em coluna, gap 16 · fotos 136×170, gap 8, rolagem lateral.
 */

.cdw-insta .cdw-secao__conteiner {
	align-items: center;
}

.cdw-insta__perfil {
	display: flex;
	align-items: center;
	gap: 40px;
}

.cdw-insta__identidade {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cdw-insta__avatar {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--custom--marcas--instagram);
}

.cdw-insta__avatar-img,
.cdw-insta__avatar-letra {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	/* 3 px de respiro branco entre o anel (2 px) e o miolo, como no Figma. */
	box-shadow: 0 0 0 3px var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--full);
}

.cdw-insta__avatar-img {
	object-fit: cover;
}

.cdw-insta__avatar-letra {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand-contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: var(--wp--custom--weight--heavy);
	line-height: 1.3;
}

.cdw-insta__textos {
	display: flex;
	flex-direction: column;
}

.cdw-insta__nome {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	/* Figma: Heading Small = 20/1.3. */
	font-size: 1.25rem;
	font-weight: var(--wp--custom--weight--heavy);
	line-height: 1.3;
}

.cdw-insta__verificado {
	display: flex;
	color: var(--wp--preset--color--brand);
	font-size: 16px;
}

.cdw-insta__usuario {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
}

.cdw-insta__numeros {
	display: flex;
	gap: var(--wp--preset--spacing--space-24);
	margin: 0;
	line-height: 1.5;
}

.cdw-insta__numero {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
}

.cdw-insta__numero dd {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight--bold);
}

.cdw-insta__numero dt {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
}

/* ---------- Fotos ---------- */

.cdw-insta__feed {
	position: relative;
	width: 100%;
}

.cdw-insta__fotos {
	display: flex;
	gap: var(--wp--preset--spacing--space-16);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.cdw-insta__fotos::-webkit-scrollbar {
	display: none;
}

.cdw-insta__item {
	flex: 0 0 calc((100% - 5 * var(--wp--preset--spacing--space-16)) / 6);
	margin: 0;
	scroll-snap-align: start;
}

.cdw-insta__foto {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface-alt);
}

.cdw-insta__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--motion--duracao-padrao) var(--wp--custom--motion--ease-padrao);
}

a.cdw-insta__foto:hover .cdw-insta__img {
	transform: scale(1.04);
}

/* Seta de rolagem (reutilizável: .cdw-seta dentro de [data-cdw-carrossel]). */
.cdw-seta {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--float);
	color: var(--wp--preset--color--ink);
	font-size: 16px;
	cursor: pointer;
	transform: translateY(-50%);
}

.cdw-seta--anterior {
	left: 8px;
}

.cdw-seta--proxima {
	right: 8px;
}

.cdw-seta:hover {
	background: var(--wp--preset--color--surface-hover);
}

@media (max-width: 781px) {
	.cdw-insta__perfil {
		flex-direction: column;
		gap: var(--wp--preset--spacing--space-16);
	}

	.cdw-insta__feed {
		width: auto;
		align-self: stretch;
		margin-inline: calc(-1 * var(--wp--preset--spacing--space-16));
	}

	.cdw-insta__fotos {
		gap: var(--wp--preset--spacing--space-8);
		padding-inline: var(--wp--preset--spacing--space-16);
		scroll-padding-inline: var(--wp--preset--spacing--space-16);
	}

	.cdw-insta__item {
		flex: 0 0 136px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cdw-insta__img {
		transition: none;
	}
}