/* ==========================================================================
   Gallery Pages Styles
   ========================================================================== */

.gallery-page { padding-top: var(--spacing-xl); }
.gallery-header { text-align: center; margin-bottom: var(--spacing-xl); }
.gallery-header p { max-width: 700px; margin: 0 auto; color: var(--color-text-light); font-size: 1.1rem; }

.gallery-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-xl); }
.gallery-nav a { padding: var(--spacing-sm) var(--spacing-lg); background: var(--color-bg-alt); border-radius: var(--radius-full); color: var(--color-text); font-weight: 500; transition: all var(--transition-fast); }
.gallery-nav a:hover { background: var(--color-primary-light); color: var(--color-text-inverse); }
.gallery-nav a.active { background: var(--color-primary); color: var(--color-text-inverse); }

.gallery-masonry { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 380px)); gap: var(--spacing-md); justify-content: center; }

.gallery-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; box-shadow: none; transition: all var(--transition-normal); border: 1px solid var(--color-border); }
.gallery-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
.gallery-card img { width: 100%; height: 250px; object-fit: cover; transition: transform var(--transition-slow); }
.gallery-card:hover img { transform: scale(1.05); }

.gallery-card-overlay { position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(0,0,0,0.7)); display: flex; align-items: flex-end; padding: var(--spacing-md); opacity: 0; transition: opacity var(--transition-normal); }
.gallery-card:hover .gallery-card-overlay { opacity: 1; }
.gallery-card-overlay span { color: var(--color-text-inverse); font-size: 0.9rem; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.95); display: none; align-items: center; justify-content: center; padding: var(--spacing-lg); }
.lightbox.active { display: flex; }
.lightbox-content { position: relative; max-width: 90vw; max-height: 90vh; }
.lightbox-content img { max-width: 100%; max-height: 85vh; border-radius: var(--radius-md); }
.lightbox-close { position: absolute; top: -40px; right: 0; background: transparent; border: none; color: white; font-size: 2rem; cursor: pointer; padding: var(--spacing-sm); line-height: 1; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.2); border: none; color: white; font-size: 2rem; cursor: pointer; padding: var(--spacing-md); border-radius: var(--radius-md); transition: background var(--transition-fast); }
.lightbox-nav:hover { background: rgba(255,255,255,0.3); }
.lightbox-prev { left: -60px; }
.lightbox-next { right: -60px; }
@media (max-width: 768px) { .lightbox-prev { left: 10px; } .lightbox-next { right: 10px; } }
.lightbox-counter { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); color: white; font-size: 0.9rem; }

/* CTA Section */
.cta-section { margin-top: var(--spacing-2xl); padding: var(--spacing-xl); background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); border-radius: var(--radius-lg); text-align: center; color: var(--color-text-inverse); }
.cta-section h2 { color: var(--color-text-inverse); margin-bottom: var(--spacing-md); }
.cta-section p { margin-bottom: var(--spacing-lg); opacity: 0.9; }
.cta-section .btn { background: var(--color-text-inverse); color: var(--color-primary); }
.cta-section .btn:hover { background: var(--color-accent); }