/*
 * HB Gallery Grid — gallery-grid.css  v1.6.0
 *
 * Sections:
 *   1.  Filter buttons
 *   2.  Grid layout
 *   3.  Card / thumbnail
 *   4.  Hover overlay
 *   5.  Filter animations    ← new
 *   6.  Card animations      ← new
 *   7.  Custom lightbox
 *   8.  Lightbox animations  ← new
 *   9.  Accessibility
 *   10. Utility
 *
 * Colour customisation:
 *
 *   .hb-gallery-wrap {
 *     --hb-accent:     #c4a572;
 *     --hb-overlay-bg: rgba(0,0,0,0.50);
 *   }
 */


/* ── 1. Filter Buttons ─────────────────────────────────────────────────────── */

.hb-gallery-filters {
	margin-bottom: 32px;
}

.hb-gallery-filters ul,
.hb-gallery-filters ul.clearfix {
	list-style:   none !important;
	padding-left: 0   !important;
	margin-left:  0   !important;
	margin-right: 0   !important;
	display:      flex;
	flex-wrap:    wrap;
	gap:          8px;
}

.hb-gallery-filters ul li::before,
.hb-gallery-filters ul li::marker {
	content: none !important;
	display: none !important;
}

.hb-gallery-filters .hb-filter a {
	display:         inline-block;
	padding:         8px 20px;
	border:          2px solid #cccccc;
	border-radius:   3px;
	background:      transparent;
	color:           #777777;
	font-size:       0.8125rem;
	font-weight:     600;
	text-transform:  uppercase;
	letter-spacing:  0.06em;
	text-decoration: none;
	line-height:     1;
	/* Animate bg, colour, border, and scale for the press effect */
	transition:
		background    0.2s ease,
		color         0.2s ease,
		border-color  0.2s ease,
		transform     0.12s ease;
}

.hb-gallery-filters .hb-filter a:hover {
	background:   #444444;
	border-color: #444444;
	color:        #ffffff;
}

/* Subtle scale-down on press */
.hb-gallery-filters .hb-filter a:active {
	transform: scale( 0.94 );
}

.hb-gallery-filters .hb-filter.active a {
	background:   var( --hb-accent, #333333 );
	border-color: var( --hb-accent, #333333 );
	color:        #ffffff;
}


/* ── 2. Grid Layout ────────────────────────────────────────────────────────── */

.hb-gallery-grid {
	display:               grid;
	grid-template-columns: repeat( var( --hb-columns, 3 ), 1fr );
	gap:                   16px;
}

@media ( max-width: 980px ) {
	.hb-gallery-grid { grid-template-columns: repeat( 2, 1fr ); }
}

@media ( max-width: 580px ) {
	.hb-gallery-grid { grid-template-columns: 1fr; }
}


/* ── 3. Card / Thumbnail ───────────────────────────────────────────────────── */

.hb-gallery-item {
	cursor:     pointer;
	display:    block;
	outline:    none;
	border:     0;
	background: transparent;
	padding:    0;
}

.hb-gallery-thumb {
	position:     relative;
	overflow:     hidden;
	aspect-ratio: 4 / 3;
	background:   #e8e8e8;
	/* Scale transition for the hover zoom AND the press effect */
	transition: transform 0.12s ease;
}

.hb-gallery-thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.45s cubic-bezier( 0.25, 0.46, 0.45, 0.94 );
}

.hb-gallery-item:hover .hb-gallery-thumb img,
.hb-gallery-item:focus-visible .hb-gallery-thumb img {
	transform: scale( 1.06 );
}


/* ── 4. Hover Overlay ──────────────────────────────────────────────────────── */

.hb-gallery-overlay {
	position:        absolute;
	inset:           0;
	background:      var( --hb-overlay-bg, rgba( 0, 0, 0, 0.48 ) );
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	opacity:         0;
	transition:      opacity 0.3s ease;
	color:           #ffffff;
	padding:         20px;
	text-align:      center;
}

.hb-gallery-item:hover .hb-gallery-overlay,
.hb-gallery-item:focus-visible .hb-gallery-overlay {
	opacity: 1;
}

.hb-gallery-overlay-icon svg {
	display: block;
	color:   var( --hb-accent, #ffffff );
	filter:  drop-shadow( 0 1px 3px rgba( 0, 0, 0, 0.4 ) );
}

.hb-gallery-overlay-title {
	font-size:   1rem;
	font-weight: 700;
	line-height: 1.3;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5 );
}

.hb-gallery-overlay-count {
	font-size:      0.75rem;
	font-weight:    400;
	opacity:        0.85;
	letter-spacing: 0.04em;
}


/* ── 5. Filter Animations ──────────────────────────────────────────────────── */

/*
 * Filter transitions use the FLIP technique (First, Last, Invert, Play).
 * All animation is driven by inline styles set in gallery-grid.js.
 * This section only defines the hidden state and the base item rule.
 *
 * Departing cards: cloned as position:fixed overlays, faded out, then removed.
 * Staying cards:   translateX/Y snapped to old position, then transitioned to 0.
 * Appearing cards: opacity + translateY animated in via inline transition.
 */

/* Hidden state — collapses the grid slot so CSS Grid reflows */
.hb-gallery-item.hb-hidden {
	display: none;
}


/* ── 6. Card Animations ────────────────────────────────────────────────────── */

/*
 * Page-load entrance: cards drift up from slightly below and fade in.
 * animation-delay is set inline by JS (staggered per card index).
 */
@keyframes hbCardEnter {
	from {
		opacity:   0;
		transform: translateY( 18px ) scale( 0.97 );
	}
	to {
		opacity:   1;
		transform: translateY( 0 ) scale( 1 );
	}
}

.hb-gallery-item.hb-card-enter {
	animation: hbCardEnter 0.5s cubic-bezier( 0.25, 0.46, 0.45, 0.94 ) backwards;
}

/*
 * Click press: brief scale-down before lightbox opens —
 * gives a satisfying "push" feel.
 */
.hb-gallery-item.hb-card-pressed .hb-gallery-thumb {
	transform: scale( 0.96 );
}


/* ── 7. Custom Lightbox ────────────────────────────────────────────────────── */

#hb-lb {
	display:         none;
	position:        fixed;
	inset:           0;
	z-index:         99999;
	align-items:     center;
	justify-content: center;
}

#hb-lb.hb-lb-open,
#hb-lb.hb-lb-closing {
	display: flex;
}

.hb-lb-backdrop {
	position:   absolute;
	inset:      0;
	background: rgba( 0, 0, 0, 0.92 );
	cursor:     pointer;
}

.hb-lb-stage {
	position:   relative;
	z-index:    1;
	width:      90vw;
	max-width:  1400px;
	height:     85vh;
	overflow:   hidden;
}

.hb-lb-slide {
	position:        absolute;
	inset:           0;
	display:         none;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
}

.hb-lb-slide.hb-lb-current,
.hb-lb-slide.hb-lb-visible {
	display: flex;
}

.hb-lb-img {
	max-width:           100%;
	max-height:          80vh;
	object-fit:          contain;
	display:             block;
	user-select:         none;
	-webkit-user-select: none;
}

.hb-lb-caption {
	margin:     8px 0 0;
	padding:    6px 16px;
	color:      rgba( 255, 255, 255, 0.80 );
	font-size:  0.875rem;
	text-align: center;
	line-height: 1.4;
	max-width:  60ch;
}

.hb-lb-counter {
	position:       fixed;
	bottom:         20px;
	left:           50%;
	transform:      translateX( -50% );
	z-index:        2;
	color:          rgba( 255, 255, 255, 0.60 );
	font-size:      0.8125rem;
	letter-spacing: 0.05em;
	pointer-events: none;
}

.hb-lb-close {
	position:        fixed;
	top:             16px;
	right:           16px;
	z-index:         2;
	width:           44px;
	height:          44px;
	background:      rgba( 255, 255, 255, 0.15 );
	color:           #ffffff;
	border:          none;
	border-radius:   50%;
	font-size:       26px;
	line-height:     1;
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      background 0.2s ease, transform 0.2s ease;
}

.hb-lb-close:hover { background: rgba( 255, 255, 255, 0.30 ); }

.hb-lb-prev,
.hb-lb-next {
	position:        fixed;
	top:             50%;
	transform:       translateY( -50% );
	z-index:         2;
	width:           56px;
	height:          56px;
	background:      rgba( 255, 255, 255, 0.15 );
	color:           #ffffff;
	border:          none;
	border-radius:   50%;
	font-size:       36px;
	line-height:     1;
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      background 0.2s ease, transform 0.15s ease;
}

.hb-lb-prev { left:  20px; }
.hb-lb-next { right: 20px; }

.hb-lb-prev:hover { background: rgba( 255, 255, 255, 0.30 ); transform: translateY( -50% ) translateX( -2px ); }
.hb-lb-next:hover { background: rgba( 255, 255, 255, 0.30 ); transform: translateY( -50% ) translateX(  2px ); }
.hb-lb-prev:active { transform: translateY( -50% ) translateX( -4px ) scale( 0.94 ); }
.hb-lb-next:active { transform: translateY( -50% ) translateX(  4px ) scale( 0.94 ); }

body.hb-lb-body-open { overflow: hidden; }

@media ( max-width: 600px ) {
	.hb-lb-prev { left:  8px; }
	.hb-lb-next { right: 8px; }
	.hb-lb-prev, .hb-lb-next { width: 44px; height: 44px; font-size: 28px; }
}


/* ── 8. Lightbox Animations ────────────────────────────────────────────────── */

/*
 * Open: backdrop fades in while the image stage scales up from 92% — the "pop".
 * Close: everything fades and shrinks back down before display:none.
 *
 * The stage uses a slight spring overshoot (cubic-bezier) so it settles
 * with a tiny bounce rather than a flat ease-out.
 */

/* Backdrop fade in */
@keyframes hbLbBackdropIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Stage pop — fades in AND scales up with a spring bounce */
@keyframes hbLbStageIn {
	from {
		opacity:   0;
		transform: scale( 0.90 );
	}
	to {
		opacity:   1;
		transform: scale( 1 );
	}
}

/* Close fade — everything fades and slides down slightly */
@keyframes hbLbFadeOut {
	from {
		opacity:   1;
		transform: scale( 1 );
	}
	to {
		opacity:   0;
		transform: scale( 0.94 );
	}
}

/* Open state — play entrance animations */
#hb-lb.hb-lb-open .hb-lb-backdrop {
	animation: hbLbBackdropIn 0.22s ease forwards;
}

#hb-lb.hb-lb-open .hb-lb-stage {
	animation: hbLbStageIn 0.32s cubic-bezier( 0.34, 1.28, 0.64, 1 ) forwards;
}

#hb-lb.hb-lb-open .hb-lb-close,
#hb-lb.hb-lb-open .hb-lb-prev,
#hb-lb.hb-lb-open .hb-lb-next,
#hb-lb.hb-lb-open .hb-lb-counter {
	animation: hbLbBackdropIn 0.3s ease 0.1s backwards;
}

/* Closing state — play exit animations */
#hb-lb.hb-lb-closing .hb-lb-backdrop,
#hb-lb.hb-lb-closing .hb-lb-stage,
#hb-lb.hb-lb-closing .hb-lb-close,
#hb-lb.hb-lb-closing .hb-lb-prev,
#hb-lb.hb-lb-closing .hb-lb-next,
#hb-lb.hb-lb-closing .hb-lb-counter {
	animation: hbLbFadeOut 0.2s ease forwards;
}

/* Respect reduced-motion preference — skip all animations */
@media ( prefers-reduced-motion: reduce ) {
	.hb-gallery-item.hb-card-enter,
	#hb-lb.hb-lb-open .hb-lb-backdrop,
	#hb-lb.hb-lb-open .hb-lb-stage,
	#hb-lb.hb-lb-open .hb-lb-close,
	#hb-lb.hb-lb-open .hb-lb-prev,
	#hb-lb.hb-lb-open .hb-lb-next,
	#hb-lb.hb-lb-open .hb-lb-counter,
	#hb-lb.hb-lb-closing .hb-lb-backdrop,
	#hb-lb.hb-lb-closing .hb-lb-stage,
	#hb-lb.hb-lb-closing .hb-lb-close,
	#hb-lb.hb-lb-closing .hb-lb-prev,
	#hb-lb.hb-lb-closing .hb-lb-next,
	#hb-lb.hb-lb-closing .hb-lb-counter {
		animation: none !important;
		transition: none !important;
	}
}


/* ── 9. Accessibility ──────────────────────────────────────────────────────── */

.hb-gallery-item:focus-visible {
	outline:        3px solid var( --hb-accent, #0073aa );
	outline-offset: 3px;
	border-radius:  2px;
}

.hb-gallery-item:focus:not( :focus-visible ) { outline: none; }

.hb-gallery-filters a:focus-visible {
	outline:        3px solid var( --hb-accent, #0073aa );
	outline-offset: 2px;
	border-radius:  3px;
}

.hb-lb-close:focus-visible,
.hb-lb-prev:focus-visible,
.hb-lb-next:focus-visible {
	outline:        3px solid rgba( 255, 255, 255, 0.8 );
	outline-offset: 2px;
}


/* ── 10. Utility ───────────────────────────────────────────────────────────── */

.hb-gallery-empty {
	padding:    20px;
	background: #fff8e1;
	border:     1px solid #ffe082;
	color:      #5d4037;
	font-size:  0.95rem;
}

.hb-gallery-wrap p { margin: 0; }