/* ============================================================
   Poka Gallery Block — front-end styles
   Lightbox CSS copied verbatim from Casino Card (ccb- → pgb-).
   Inherits --ccb-* design tokens when Casino Card is present.
   ============================================================ */

/* ── Block wrapper — poka card style ── */
.pgb-block {
	--pgb-radius:  var(--ccb-border-radius,          8px);
	--pgb-bg:      var(--ccb-boxes-bg-color,          #f0f3f7);
	--pgb-bg2:     var(--ccb-boxes-secondary-bg-color,#e8ecf2);
	--pgb-border:  var(--ccb-border-color,            #dce1ea);
	--pgb-text:    var(--ccb-text-color,              #1d2730);

	background:    var(--pgb-bg);
	border:        1px solid var(--pgb-border);
	border-radius: var(--pgb-radius);
	padding:       16px;
	margin:        0 0 24px;
	box-shadow:    0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ── Grid ── */
.pgb-grid {
	display: grid;
	gap:     8px;
}

.pgb-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.pgb-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.pgb-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Item ── */
.pgb-item {
	flex-shrink:   0;
	border-radius: 7px;
	overflow:      hidden;
	background:    #0a0a0a;
	position:      relative;
	cursor:        pointer;
	aspect-ratio:  16 / 9;
}

.pgb-item img {
	display:        block;
	width:          100%;
	height:         100%;
	object-fit:     cover;
	object-position: center;
	pointer-events: none;
	transition:     transform 0.3s ease;
}

.pgb-item:hover img {
	transform: scale(1.04);
}

/* Darken overlay on hover (matches casino card ::after) */
.pgb-item::after {
	content:       '';
	position:      absolute;
	inset:         0;
	background:    transparent;
	border-radius: inherit;
	transition:    background 0.18s ease;
	pointer-events: none;
}
.pgb-item:hover::after {
	background: rgba(0, 0, 0, 0.28);
}

/* Caption */
.pgb-item__caption {
	position:    absolute;
	bottom:      0;
	left:        0;
	right:       0;
	padding:     6px 10px;
	background:  linear-gradient(transparent, rgba(0, 0, 0, 0.62));
	color:       #fff;
	font-size:   0.75rem;
	line-height: 1.4;
	text-align:  center;
	pointer-events: none;
	border-radius: 0 0 7px 7px;
}

/* Zoom icon */
.pgb-item__zoom {
	position:        absolute;
	inset:           0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	opacity:         0;
	transition:      opacity 0.18s ease;
	pointer-events:  none;
}
.pgb-item:hover .pgb-item__zoom {
	opacity: 1;
}
.pgb-item__zoom svg {
	display:    block;
	width:      32px;
	height:     32px;
	filter:     drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
	stroke:     #fff;
	fill:       none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ── Lightbox (exact Casino Card CSS, ccb- → pgb-) ── */

#pgb-lb {
	display:         none;
	position:        fixed;
	inset:           0;
	z-index:         99999;
	background:      rgba(0, 0, 0, 0.92);
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

#pgb-lb.pgb-lb--open {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

#pgb-lb-img {
	max-width:      100%;
	max-height:     85vh;
	border-radius:  8px;
	-webkit-box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
	        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
	display:        block;
	-o-object-fit:  contain;
	   object-fit:  contain;
}

/* Close button — styles applied via JS stampCloseStyles (matching Casino Card exactly) */
#pgb-lb-close,
body #pgb-lb-close {
	position:   fixed !important;
	top:        1rem  !important;
	right:      1rem  !important;
	width:      44px  !important;
	height:     44px  !important;
	min-width:  0     !important;
	max-width:  none  !important;
	min-height: 0     !important;
	padding:    0     !important;
	margin:     0     !important;
	border:     none  !important;
	border-radius: 10px !important;
	background: #e53935 !important;
	color:      #fff    !important;
	display:    flex    !important;
	align-items: center !important;
	justify-content: center !important;
	cursor:     pointer !important;
	z-index:    100002  !important;
	line-height: 0      !important;
	font-size:   0      !important;
	-webkit-appearance: none !important;
	        appearance: none !important;
	box-sizing: border-box   !important;
}
#pgb-lb-close:hover,
#pgb-lb-close:focus-visible,
body #pgb-lb-close:hover,
body #pgb-lb-close:focus-visible {
	background: #c62828 !important;
	-webkit-transform: translateY(2px) !important;
	        transform: translateY(2px) !important;
	-webkit-box-shadow: 0 2px 8px rgba(229, 57, 53, 0.4) !important;
	        box-shadow: 0 2px 8px rgba(229, 57, 53, 0.4) !important;
	outline: none !important;
}
#pgb-lb-close:active,
body #pgb-lb-close:active {
	background: #b71c1c !important;
	-webkit-transform: translateY(4px) !important;
	        transform: translateY(4px) !important;
}
#pgb-lb-close svg,
body #pgb-lb-close svg {
	display:        block   !important;
	pointer-events: none    !important;
	width:          24px    !important;
	height:         24px    !important;
	-ms-flex-negative: 0    !important;
	flex-shrink:    0       !important;
	stroke:         #fff    !important;
	fill:           none    !important;
}

/* Prev / Next arrows */
#pgb-lb-prev,
#pgb-lb-next {
	position:   fixed   !important;
	top:        50%     !important;
	-webkit-transform: translateY(-50%) !important;
	        transform: translateY(-50%) !important;
	width:      40px    !important;
	height:     40px    !important;
	min-width:  0       !important;
	padding:    0       !important;
	border:     none    !important;
	border-radius: 50%  !important;
	background: rgba(0, 0, 0, 0.55) !important;
	color:      #fff    !important;
	font-size:  2rem    !important;
	line-height: 1      !important;
	cursor:     pointer !important;
	z-index:    100001  !important;
	display:    flex    !important;
	align-items: center !important;
	justify-content: center !important;
	-webkit-backdrop-filter: blur(4px);
	        backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
#pgb-lb-prev { left:  0.75rem !important; }
#pgb-lb-next { right: 0.75rem !important; }
#pgb-lb-prev:hover,
#pgb-lb-next:hover,
#pgb-lb-prev:focus-visible,
#pgb-lb-next:focus-visible {
	background: rgba(0, 0, 0, 0.85) !important;
	outline:    none                 !important;
}

/* Counter pill */
#pgb-lb-counter {
	position:   fixed;
	bottom:     1.5rem;
	left:       50%;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.52);
	color:      rgba(255, 255, 255, 0.88);
	font-size:  0.8125rem;
	padding:    4px 12px;
	border-radius: 999px;
	z-index:    100001;
	white-space: nowrap;
	font-family: sans-serif;
}

/* ── Responsive ── */
@media (max-width: 640px) {
	.pgb-grid--cols-4 {
		grid-template-columns: repeat(3, 1fr);
	}
	.pgb-block {
		padding: 10px;
	}
}