/* Gallery page extracted styles (from views/pages/gallery.php) */
:root { --fade-speed: 0.6s; }

body { margin: 0; color: #111; overflow-y: scroll; }

.section { padding: 6rem 1rem; }
.section-narrow { padding: 3rem 1rem; }

.fancy-text { text-align: center; margin: 0 auto; line-height: 1.4; color: #111827; }
@media (min-width: 768px) { .fancy-text { font-size: 2.4rem; line-height: 1.5; } }
.highlight { background: var(--color-primary, #ff7e1b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; }
.text-title_gallery { font-size: 2.6rem !important; }

/* Masonry gallery */
.gallery-grid { column-count: 1; column-gap: 1rem; margin: 0 auto; }
@media (min-width: 640px) { .gallery-grid { column-count: 2; } }
@media (min-width: 1024px) { .gallery-grid { column-count: 3; } }

.gallery-item { display: inline-block; width: 100%; margin-bottom: 1rem; border-radius: 0.75rem; overflow: hidden; background-color: #f3f4f6; cursor: pointer; break-inside: avoid; }
.img-wrapper { width: 100%; position: relative; background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); }
.img-wrapper img { width: 100%; height: auto; display: block; opacity: 0; transition: opacity var(--fade-speed) ease, transform 0.3s ease; will-change: opacity; }
.img-wrapper img.loaded { opacity: 1; }
.gallery-item:hover img.loaded { transform: scale(1.05); }
.gallery-item:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.15); transition: box-shadow 0.3s ease; }
.gallery-item {
  will-change: transform;
  content-visibility: auto;
  contain-intrinsic-size: 300px;
}

.img-wrapper img {
  will-change: opacity, transform;
}
/* Lightbox modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.9); align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(4px); }
.modal-overlay.open { display: flex; }
.modal-content { max-width: 90%; max-height: 90%; position: relative; animation: modalZoom 0.3s ease; }
@keyframes modalZoom { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-content img { width: 100%; height: auto; max-height: 85vh; border-radius: 0.5rem; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.close-btn { position: absolute; top: -3rem; right: 0; font-size: 2.5rem; color: #fff; cursor: pointer; line-height: 1; transition: transform 0.2s ease; }
.close-btn:hover { transform: scale(1.1); }

/* Utility classes for hero section */
.relative { position: relative; }
.h-screen { height: 100vh; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.text-center { text-align: center; }
.text-white { color: white; }
.overflow-hidden { overflow: hidden; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.bg-cover { background-size: cover; }
.bg-center { background-position: center; }
.bg-black { background-color: black; }
.opacity-40 { opacity: 0.4; }
.z-10 { z-index: 10; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.flex-col { flex-direction: column; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 1rem; }
.h-24 { height: 6rem; }
.opacity-95 { opacity: 0.95; }
.font-semibold { font-weight: 600; }
.text-shadow { text-shadow: 0 2px 10px rgba(0,0,0,0.3); }