/* ==========================================================================
   One-Page Gallery – Grid Mobile Edition  (frontend.css)
   ========================================================================== */

/* ---------- Wrap geral --------------------------------------------------- */
.opgg-wrap {
	position: relative;
	width: 100%;
}

/* ---------- Grelha de categorias ----------------------------------------- */
.opgg-grid {
	display: grid !important;
	gap: 16px !important;
	padding: 16px !important;
	box-sizing: border-box;
	width: 100%;
	/* Base: 1 coluna (mobile-first) */
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Desktop/tablet (≥ 600 px) — controlado pelo atributo columns */
@media (min-width: 600px) {
	.opgg-cols-1 { grid-template-columns: repeat(1, minmax(0, 420px)) !important; justify-content: center; }
	.opgg-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.opgg-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	.opgg-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* Mobile (< 600 px) — sempre 2 colunas, independente do parâmetro columns */
@media (max-width: 599px) {
	.opgg-cols-1,
	.opgg-cols-2,
	.opgg-cols-3,
	.opgg-cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.opgg-grid {
		gap: 8px !important;
		padding: 8px !important;
	}
}

/* ---------- Item de categoria -------------------------------------------- */
.opgg-cat-item {
	position: relative;
	cursor: pointer;
	border-radius: 4px;
	/* SEM overflow:hidden — o overlay é movido para fora pelo JS */
	outline: none;
	/* Garante que o item ocupa toda a célula do grid */
	width: 100% !important;
	display: block !important;
}

.opgg-cat-item:focus-visible {
	box-shadow: 0 0 0 3px rgba(0,0,0,.5);
}

/*
 * Thumbnail quadrado via padding-top trick (100% = largura do elemento).
 * Mais compatível do que aspect-ratio quando o tema sobrepõe height:auto.
 */
.opgg-cat-thumb {
	position: relative !important;
	width: 100% !important;
	padding-top: 100% !important;  /* cria altura = largura */
	height: 0 !important;
	overflow: hidden !important;
	background: #ccc;
	border-radius: 4px;
	display: block !important;
}

.opgg-cat-img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	max-width: none !important;
	max-height: none !important;
	display: block !important;
	transition: transform .35s ease;
}

.opgg-cat-item:hover .opgg-cat-img,
.opgg-cat-item:focus .opgg-cat-img {
	transform: scale(1.04);
}

.opgg-cat-no-thumb {
	width: 100% !important;
	height: 100% !important;
	background: #888;
}

/* Label centrada sobre a imagem */
.opgg-cat-label {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: rgba(0,0,0,.28);
	pointer-events: none;
}

.opgg-cat-title {
	color: #fff !important;
	font-size: clamp(.7rem, 2.5vw, 1.1rem) !important;
	font-weight: 700 !important;
	text-align: center !important;
	text-shadow: 0 1px 4px rgba(0,0,0,.8), 0 0 12px rgba(0,0,0,.5) !important;
	padding: 4px 6px;
	word-break: break-word;
}

/* ---------- Overlay de sub-galeria --------------------------------------- */
/*
 * A overlay é movida para body via JS para escapar ao stacking context
 * do item pai. Aqui definimos apenas o estilo visual.
 */
.opgg-overlay {
	position: fixed !important;
	inset: 0 !important;
	z-index: 99999 !important;
	background: rgba(0,0,0,.82) !important;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.opgg-overlay[hidden] {
	display: none !important;
}

.opgg-overlay-inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 20px 40px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

/* Botão Voltar — sticky no topo do scroll da overlay, sempre visível */
.opgg-back {
	position: sticky !important;
	top: 12px !important;
	left: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 8px 16px !important;
	border-radius: 999px !important;
	cursor: pointer !important;
	font-size: .9rem !important;
	font-weight: 600 !important;
	z-index: 100001 !important;
	box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
	transition: opacity .2s !important;
	margin-bottom: 16px !important;
	/* Evitar que fique largo demais */
	align-self: flex-start !important;
}

.opgg-back:hover { opacity: .8 !important; }

/* Título da overlay */
.opgg-overlay-title {
	color: #fff !important;
	text-align: center;
	margin: 0 0 24px !important;
	font-size: 1.4rem !important;
}

/* Grelha de fotos dentro da overlay (masonry-like com CSS columns) */
.opgg-photo-grid {
	column-count: 2 !important;
	column-gap: 8px !important;
}

@media (min-width: 600px) {
	.opgg-photo-grid {
		column-count: 3 !important;
		column-gap: 10px !important;
	}
}

@media (min-width: 900px) {
	.opgg-photo-grid {
		column-count: 4 !important;
		column-gap: 12px !important;
	}
}

.opgg-photo {
	break-inside: avoid !important;
	display: block !important;
	margin: 0 !important;
	padding: 4px 0 !important;
}

.opgg-photo-link {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

.opgg-photo-img {
	width: 100% !important;
	height: auto !important;
	display: block !important;
	max-width: none !important;
	border-radius: 2px;
	transition: opacity .2s;
}

.opgg-photo-link:hover .opgg-photo-img { opacity: .85; }

/* ---------- Lightbox ---------------------------------------------------- */
.opgg-lightbox {
	position: fixed !important;
	inset: 0 !important;
	z-index: 100002 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.opgg-lightbox[hidden] {
	display: none !important;
}

.opgg-lightbox-backdrop {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(0,0,0,.92) !important;
	cursor: zoom-out;
}

.opgg-lightbox-stage {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.opgg-lb-back {
	position: fixed !important;
	top: 16px !important;
	left: 16px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 8px 16px !important;
	border-radius: 999px !important;
	cursor: pointer !important;
	font-size: .9rem !important;
	font-weight: 600 !important;
	z-index: 100003 !important;
	box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
}

.opgg-lb-img {
	max-width: 90vw !important;
	max-height: 90vh !important;
	object-fit: contain !important;
	display: block !important;
	border-radius: 3px;
}

.opgg-lb-prev,
.opgg-lb-next {
	position: fixed !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	background: rgba(255,255,255,.15) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 50% !important;
	width: 44px !important;
	height: 44px !important;
	font-size: 1.6rem !important;
	cursor: pointer !important;
	z-index: 100003 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background .2s !important;
}

.opgg-lb-prev { left: 12px !important; }
.opgg-lb-next { right: 12px !important; }
.opgg-lb-prev:hover,
.opgg-lb-next:hover { background: rgba(255,255,255,.3) !important; }

/* Mensagem vazia */
.opgg-empty {
	text-align: center;
	padding: 40px;
	color: #666;
}