/* =========================================================
   Portfólio / Coleção — grid 4 colunas + paginação
   Ajuste custom (child theme). Reversível: remova o enqueue
   em functions.php e volte o layout para "masonry".
   ========================================================= */

/* Container em grid quando o layout single_column está ativo */
.PP_Single_Column {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* 4 fotos por linha */
	gap: 14px;
	margin: 0 auto;
	max-width: 100%;
}

/* Tablet: 2 colunas | Celular: 1 coluna */
@media (max-width: 849px) {
	.PP_Single_Column { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 549px) {
	.PP_Single_Column { grid-template-columns: 1fr; }
}

/* Cada item vira uma célula uniforme (retrato 3:4) */
.PP_Single_Column .PP_Gallery__item {
	position: relative;
	margin: 0;
	width: auto;
	float: none;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #f2f0ee;
	border-radius: 4px;
	cursor: pointer;
}

/* Imagem e placeholder preenchem a célula, sem distorcer */
.PP_Single_Column .PP_Gallery__item img,
.PP_Single_Column .PP_Gallery__item .PP_Lazy_Image__placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	transition: transform .4s ease;
}
.PP_Single_Column .PP_Gallery__item:hover img {
	transform: scale(1.04);
}

/* Legenda como sobreposição discreta (aparece no hover) */
.PP_Single_Column .PP_Gallery__caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	margin: 0;
	padding: 22px 12px 10px;
	background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
	color: #fff;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}
.PP_Single_Column .PP_Gallery__item:hover .PP_Gallery__caption { opacity: 1; }
.PP_Single_Column .PP_Gallery__caption .PP_Caption__title { margin: 0; font-size: 14px; color: #fff; }
.PP_Single_Column .PP_Gallery__caption .PP_Caption__desc  { margin: 2px 0 0; font-size: 12px; color: #eee; }

/* Item ocultado pela paginação */
.PP_Single_Column .PP_Gallery__item.epp-hidden { display: none !important; }

/* Fallback em CSS puro: enquanto o JS não marca a galeria como pronta,
   limita quantas fotos aparecem por faixa de tela (a página nunca fica
   pesada, mesmo que o JS demore ou seja bloqueado por cache).
   Desktop: 20 | Tablet: 12 | Celular: 8 — igual ao JS. */
.PP_Single_Column:not(.epp-ready) .PP_Gallery__item:nth-child(n+21) {
	display: none;
}
@media (max-width: 849px) {
	.PP_Single_Column:not(.epp-ready) .PP_Gallery__item:nth-child(n+13) {
		display: none;
	}
}
@media (max-width: 549px) {
	.PP_Single_Column:not(.epp-ready) .PP_Gallery__item:nth-child(n+9) {
		display: none;
	}
}

/* ---------- Paginação ---------- */
.epp-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 34px 0 10px;
}
.epp-pagination button {
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #d9d4ce;
	background: #fff;
	color: #333;
	font-size: 14px;
	border-radius: 4px;
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s;
}
.epp-pagination button:hover:not(:disabled) { border-color: #111; color: #111; }
.epp-pagination button.epp-current {
	background: #111;
	border-color: #111;
	color: #fff;
	font-weight: 600;
	cursor: default;
}
.epp-pagination button:disabled { opacity: .4; cursor: default; }
.epp-pagination .epp-ellipsis {
	min-width: 20px;
	text-align: center;
	color: #999;
	user-select: none;
}
.epp-page-info {
	text-align: center;
	font-size: 13px;
	color: #888;
	margin-top: 4px;
}