/* =============================================
   GALLERY CARDS - Complete 10 styles
   For both posts-grid and admin preview
   ============================================= */

/* Grid layout */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}
@media (max-width: 768px) { .posts-grid { grid-template-columns: 1fr; } }

/* ==================== 1. GLASS ==================== */
.glass-card {
    position: relative; border-radius: 24px; overflow: hidden; cursor: pointer;
    aspect-ratio: 1; background: #1a1a2e; box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.glass-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.23,1,.32,1); }
.glass-card:hover img { transform: scale(1.1); }
.glass-card .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.3) 40%, transparent 70%); }
.glass-card .shine { position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,.1) 50%, transparent 60%); transform: translateX(-100%); transition: transform .8s ease; pointer-events: none; }
.glass-card:hover .shine { transform: translateX(100%); }
.glass-card .content { position: absolute; inset: 0; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; z-index: 2; }
.glass-card .badge { position: absolute; top: 15px; left: 15px; padding: 6px 14px; border-radius: 50px; background: rgba(255,255,255,.15); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.2); font-size: .75rem; transform: translateY(-10px); opacity: 0; transition: all .4s cubic-bezier(.23,1,.32,1); }
.glass-card:hover .badge { transform: translateY(0); opacity: 1; }
.glass-card .title { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; text-shadow: 0 2px 10px rgba(0,0,0,.3); transform: translateY(20px); transition: transform .5s cubic-bezier(.23,1,.32,1); }
.glass-card:hover .title { transform: translateY(0); }
.glass-card .meta { display: flex; align-items: center; justify-content: space-between; }
.glass-card .author { display: flex; align-items: center; gap: 8px; }
.glass-card .avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.2); }
.glass-card .likes { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 50px; background: rgba(255,255,255,.1); backdrop-filter: blur(10px); font-size: .85rem; }
.glass-card .featured-badge { position: absolute; top: 10px; right: 10px; z-index: 3; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; padding: 4px 10px; border-radius: 20px; font-size: .7rem; font-weight: 600; display: flex; align-items: center; gap: 4px; }

/* ==================== 2. TILE ==================== */
.tile-card {
    position: relative; aspect-ratio: 1; overflow: hidden; cursor: pointer; border-radius: 0;
}
.tile-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tile-card:hover img { transform: scale(1.05); }
.tile-card .overlay { position: absolute; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; gap: 25px; opacity: 0; transition: opacity .3s ease; }
.tile-card:hover .overlay { opacity: 1; }
.tile-card .stat { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; }
.tile-card .featured-badge { position: absolute; top: 10px; right: 10px; z-index: 3; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; padding: 4px 10px; border-radius: 20px; font-size: .7rem; font-weight: 600; display: flex; align-items: center; gap: 4px; }

/* ==================== 3. FLOATING ==================== */
.floating-card {
    position: relative; aspect-ratio: 3/4; cursor: pointer;
    transform-style: preserve-3d; perspective: 1000px;
    transition: all .6s cubic-bezier(.23,1,.32,1);
}
.floating-card:hover { transform: translateY(-15px) rotateY(5deg); }
.floating-card .shadow { position: absolute; inset: 0; background: #000; opacity: .15; transform: translateY(25px) scale(.95); filter: blur(35px); border-radius: 24px; transition: all .5s ease; }
.floating-card:hover .shadow { opacity: .3; }
.floating-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }
.floating-card .info { position: absolute; left: 15px; right: 15px; bottom: -35px; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.95); backdrop-filter: blur(20px); box-shadow: 0 15px 40px rgba(0,0,0,.1); transition: transform .5s cubic-bezier(.23,1,.32,1); }
.floating-card:hover .info { transform: translateY(-12px); }
.floating-card .info-content { display: flex; align-items: center; justify-content: space-between; }
.floating-card .info h4 { color: #1a1a2e; font-weight: 700; font-size: 1rem; }
.floating-card .info p { color: #666; font-size: .75rem; margin-top: 2px; }
.floating-card .like-btn { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); display: flex; align-items: center; justify-content: center; color: #fff; }
.floating-card .featured-badge { position: absolute; top: 10px; right: 10px; z-index: 3; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; padding: 4px 10px; border-radius: 20px; font-size: .7rem; font-weight: 600; display: flex; align-items: center; gap: 4px; }

/* Dark mode floating */
body.dark-mode .floating-card .info { background: rgba(30,30,40,.95); }
body.dark-mode .floating-card .info h4 { color: #fff; }
body.dark-mode .floating-card .info p { color: #aaa; }

/* ==================== 4. NEURO ==================== */
.neuro-card {
    position: relative; border-radius: 24px; overflow: hidden; cursor: pointer; aspect-ratio: 1;
    background: linear-gradient(145deg,#1e1e32,#151525);
    box-shadow: 8px 8px 20px rgba(0,0,0,.4),-8px -8px 20px rgba(255,255,255,.02);
    transition: all .4s ease;
}
.neuro-card:hover { box-shadow: 12px 12px 30px rgba(0,0,0,.5),-12px -12px 30px rgba(255,255,255,.03); transform: translateY(-5px); }
.neuro-card img { width: 100%; height: 70%; object-fit: cover; border-radius: 24px 24px 0 0; }
.neuro-card .content { padding: 15px 18px; }
.neuro-card h4 { font-size: 1rem; font-weight: 600; margin-bottom: 8px; color: #fff; }
.neuro-card .tags { display: flex; gap: 8px; }
.neuro-card .tag { padding: 4px 12px; border-radius: 20px; background: rgba(255,255,255,.05); font-size: .7rem; color: rgba(255,255,255,.6); }
.neuro-card .featured-badge { position: absolute; top: 10px; right: 10px; z-index: 3; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; padding: 4px 10px; border-radius: 20px; font-size: .7rem; font-weight: 600; display: flex; align-items: center; gap: 4px; }

/* ==================== 5. GRADIENT ==================== */
.gradient-card {
    position: relative; border-radius: 20px; overflow: hidden; cursor: pointer; aspect-ratio: 1; padding: 3px;
    background: linear-gradient(135deg,#f093fb,#f5576c,#4facfe,#00f2fe);
    background-size: 300% 300%; animation: gradientMove 4s ease infinite;
}
@keyframes gradientMove { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.gradient-card .inner { width: 100%; height: 100%; border-radius: 17px; overflow: hidden; background: #1a1a2e; }
.gradient-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .5s ease; }
.gradient-card:hover img { transform: scale(1.1); filter: brightness(1.1); }
.gradient-card .content { position: absolute; inset: 3px; border-radius: 17px; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; background: linear-gradient(to top,rgba(0,0,0,.8),transparent 60%); opacity: 0; transition: opacity .4s ease; }
.gradient-card:hover .content { opacity: 1; }
.gradient-card h4 { color: #fff; }
.gradient-card .featured-badge { position: absolute; top: 10px; right: 10px; z-index: 3; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; padding: 4px 10px; border-radius: 20px; font-size: .7rem; font-weight: 600; display: flex; align-items: center; gap: 4px; }

/* ==================== 6. MORPH ==================== */
.morph-card {
    position: relative; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; overflow: hidden;
    cursor: pointer; aspect-ratio: 1; transition: all .6s cubic-bezier(.23,1,.32,1);
}
.morph-card:hover { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; }
.morph-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.morph-card:hover img { transform: scale(1.15); }
.morph-card .content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(0,0,0,.5); backdrop-filter: blur(5px); opacity: 0; transition: opacity .4s ease; text-align: center; padding: 14px; color: #fff; }
.morph-card:hover .content { opacity: 1; }
.morph-card h4 { color: #fff; }
.morph-card .play-btn { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.2); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; margin-top: 15px; }
.morph-card .featured-badge { position: absolute; top: 10px; right: 10px; z-index: 3; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; padding: 4px 10px; border-radius: 20px; font-size: .7rem; font-weight: 600; display: flex; align-items: center; gap: 4px; }

/* ==================== 7. SPOTLIGHT ==================== */
.spotlight-card {
    position: relative; border-radius: 20px; overflow: hidden; cursor: pointer; aspect-ratio: 1;
}
.spotlight-card img { width: 100%; height: 100%; object-fit: cover; transition: all .5s ease; filter: brightness(.7); }
.spotlight-card:hover img { filter: brightness(.5); }
.spotlight-card .spotlight { position: absolute; inset: 0; background: radial-gradient(circle 150px at var(--x, 50%) var(--y, 50%), rgba(255,255,255,.15), transparent); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.spotlight-card:hover .spotlight { opacity: 1; }
.spotlight-card .content { position: absolute; inset: 0; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.spotlight-card h4 { color: #fff; }
.spotlight-card .progress { width: 100%; height: 4px; background: rgba(255,255,255,.2); border-radius: 10px; margin-top: 10px; overflow: hidden; }
.spotlight-card .progress-bar { height: 100%; background: linear-gradient(90deg,#f093fb,#f5576c); border-radius: 10px; }
.spotlight-card .featured-badge { position: absolute; top: 10px; right: 10px; z-index: 3; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; padding: 4px 10px; border-radius: 20px; font-size: .7rem; font-weight: 600; display: flex; align-items: center; gap: 4px; }

/* ==================== 8. ROTATE ==================== */
.rotate-card {
    perspective: 1000px; cursor: pointer; aspect-ratio: 1;
}
.rotate-card .inner { position: relative; width: 100%; height: 100%; transition: transform .8s cubic-bezier(.23,1,.32,1); transform-style: preserve-3d; }
.rotate-card:hover .inner { transform: rotateY(180deg); }
.rotate-card .front, .rotate-card .back { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 20px; overflow: hidden; }
.rotate-card .front img { width: 100%; height: 100%; object-fit: cover; }
.rotate-card .back { background: linear-gradient(135deg,#1a1a2e 0%,#2d2d44 100%); transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 25px; text-align: center; color: #fff; }
.rotate-card .back h4 { color: #fff; }
.rotate-card .back p { color: #ccc; font-size: .85rem; }
.rotate-card .btn { padding: 12px 30px; border-radius: 50px; background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); color: #fff; border: none; cursor: pointer; margin-top: 10px; }
.rotate-card .featured-badge { position: absolute; top: 10px; right: 10px; z-index: 3; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; padding: 4px 10px; border-radius: 20px; font-size: .7rem; font-weight: 600; display: flex; align-items: center; gap: 4px; }

/* ==================== 9. PARALLAX - Fixed ==================== */
.parallax-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1;
}
.parallax-card .layers {
    position: relative;
    width: 100%;
    height: 100%;
}
.parallax-card .layer {
    position: absolute;
    inset: 0;
    transition: transform .4s ease-out;
}
.parallax-card .layer-back { z-index: 1; }
.parallax-card .layer-content { z-index: 2; }
.parallax-card .layer-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.parallax-card:hover .layer-back { transform: scale(1.1); }
.parallax-card:hover .layer-content { transform: translateY(-5px); }
.parallax-card .layer-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 25px;
    background: linear-gradient(to top, rgba(0,0,0,.8), transparent 50%);
    color: #fff;
}
.parallax-card h4 {
    color: #fff;
    margin: 0 0 8px 0;
    font-size: 1.1rem;
}
.parallax-card .category {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 20px;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(10px);
    font-size: .8rem;
    width: fit-content;
}
.parallax-card .floating-elements {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}
.parallax-card .float-icon {
    position: absolute;
    padding: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 1.2rem;
    animation: parallaxFloat 3s ease-in-out infinite;
    transition: transform .4s ease;
}
.parallax-card .float-icon:nth-child(1) { top: 15%; right: 15%; animation-delay: 0s; }
.parallax-card .float-icon:nth-child(2) { top: 45%; left: 10%; animation-delay: 1s; }
.parallax-card .float-icon:nth-child(3) { bottom: 30%; right: 15%; animation-delay: 2s; }
.parallax-card:hover .float-icon:nth-child(1) { transform: translateY(-10px) scale(1.2); }
.parallax-card:hover .float-icon:nth-child(2) { transform: translateX(-10px) scale(1.2); }
.parallax-card:hover .float-icon:nth-child(3) { transform: translateY(10px) scale(1.2); }

@keyframes parallaxFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(5deg); }
}

.parallax-card .featured-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
}
/* ==================== 10. SPLIT ==================== */
.split-card {
    position: relative; border-radius: 20px; overflow: hidden; cursor: pointer; aspect-ratio: 16/9;
}
.split-card .split { display: flex; width: 200%; height: 100%; transition: transform .6s cubic-bezier(.23,1,.32,1); }
.split-card:hover .split { transform: translateX(50%); }
.split-card .panel { width: 50%; height: 100%; }
.split-card .panel img { width: 100%; height: 100%; object-fit: cover; }
.split-card .panel-content { background: linear-gradient(135deg,#1a1a2e,#2d2d44); display: flex; flex-direction: column; justify-content: center; padding: 25px; color: #fff; }
.split-card .panel-content h4 { color: #fff; }
.split-card .stats { display: flex; gap: 20px; margin-top: 10px; }
.split-card .stat-value { font-size: 1.5rem; font-weight: 800; background: linear-gradient(135deg,#f093fb,#f5576c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.split-card .stat-label { font-size: .75rem; color: rgba(255,255,255,.5); }
.split-card .featured-badge { position: absolute; top: 10px; right: 10px; z-index: 3; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; padding: 4px 10px; border-radius: 20px; font-size: .7rem; font-weight: 600; display: flex; align-items: center; gap: 4px; }

/* ==================== GENERAL ==================== */
.featured-badge i { font-size: .6rem; }