/* ============================================
   QAF Gallery Fix - missing utilities
   (no build needed - shared: home + gallery)
   ============================================ */

[x-cloak]{display:none!important}
/* Desktop size fix - 4 columns on large screens */
@media (min-width: 1280px) {
    .xl\:columns-4 { columns: 4; }
}

/* Container center guarantee */
.qaf-container {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}
/* Masonry columns */
.columns-1{columns:1}
.columns-2{columns:2}
@media(min-width:768px){.md\:columns-3{columns:3}}
@media(min-width:1024px){.lg\:columns-3{columns:3}}
@media(min-width:1280px){.xl\:columns-4{columns:4}}

/* Masonry items */
.break-inside-avoid{break-inside:avoid}
.cursor-zoom-in{cursor:zoom-in}
.rounded-xl{border-radius:.75rem}
@media(min-width:640px){.sm\:rounded-2xl{border-radius:1rem}}

/* Spacing */
.gap-2{gap:.5rem}
@media(min-width:640px){.sm\:gap-4{gap:1rem}}
@media(min-width:1024px){.lg\:gap-6{gap:1.5rem}}
.mb-2{margin-bottom:.5rem}
@media(min-width:640px){.sm\:mb-4{margin-bottom:1rem}}
@media(min-width:1024px){.lg\:mb-6{margin-bottom:1.5rem}}

/* Lightbox */
.z-\[9999\]{z-index:9999}
.max-h-\[85vh\]{max-height:85vh}
.max-h-\[90vh\]{max-height:90vh}
.max-w-\[90vw\]{max-width:90vw}
.backdrop-blur-sm{backdrop-filter:blur(4px)}
.bg-black\/90{background-color:rgb(0 0 0/.9)}
.bg-white\/10{background-color:rgb(255 255 255/.1)}
.hover\:bg-white\/20:hover{background-color:rgb(255 255 255/.2)}
.top-1\/2{top:50%}
.-translate-y-1\/2{transform:translateY(-50%)}

/* Text */
.line-clamp-2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
@media(min-width:640px){.sm\:block{display:block}}
/* ============================================
   Smooth Filter Animation
   ============================================ */
.qaf-anim-enter-active,
.qaf-anim-leave-active {
    transition: opacity .45s cubic-bezier(.4, 0, .2, 1),
                transform .45s cubic-bezier(.4, 0, .2, 1);
}

.qaf-anim-enter-from,
.qaf-anim-leave-to {
    opacity: 0;
    transform: scale(.9) translateY(16px);
}

.qaf-anim-enter-to,
.qaf-anim-leave-from {
    opacity: 1;
    transform: scale(1) translateY(0);
}