/* ==========================================================================
   WAMUGUNDA FARM - 3D MOUSE HOVER TRACKER GALLERY CARDS (With Real Thumbnails)
   Brand Palette: Warm Earth Brown (#5c3a21, #8d5b2d) + Forest Green (#1b5e20) + Harvest Gold (#facc15)
   ========================================================================== */

.gallery-3d-wrapper {
    position: relative;
    width: 100%;
    min-height: 460px;
    height: 100%;
    user-select: none;
    -webkit-user-select: none;
    margin-bottom: 25px;
}

.gallery-canvas {
    perspective: 1000px;
    inset: 0;
    position: absolute;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-template-areas:
        "tr-1 tr-2 tr-3 tr-4 tr-5"
        "tr-6 tr-7 tr-8 tr-9 tr-10"
        "tr-11 tr-12 tr-13 tr-14 tr-15"
        "tr-16 tr-17 tr-18 tr-19 tr-20"
        "tr-21 tr-22 tr-23 tr-24 tr-25";
    z-index: 10;
}

.gallery-3d-card {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 20px;
    background: #ffffff;
    border: 2px solid #ebdcd0;
    box-shadow: 0 12px 30px rgba(92, 58, 33, 0.1);
    transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 350ms ease, border-color 300ms ease;
    overflow: hidden;
    transform-style: preserve-3d;
}

/* Rich Earth Brown + Organic Green Ambient Glow */
.gallery-3d-card::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: linear-gradient(135deg, #5c3a21 0%, #1b5e20 40%, #8d5b2d 75%, #facc15 100%);
    filter: blur(1.5rem);
    opacity: 0;
    border-radius: 24px;
    z-index: -1;
    transition: opacity 350ms ease;
}

.tracker:hover ~ .gallery-3d-card::before,
.gallery-3d-wrapper:hover .gallery-3d-card::before {
    opacity: 0.7;
}

.tracker:hover ~ .gallery-3d-card {
    border-color: #a05a2c;
    box-shadow: 0 24px 50px rgba(92, 58, 33, 0.25);
}

/* 25 Tracker Cells */
.gallery-canvas .tracker {
    position: relative;
    z-index: 30;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.gallery-canvas .tr-1 { grid-area: tr-1; }
.gallery-canvas .tr-2 { grid-area: tr-2; }
.gallery-canvas .tr-3 { grid-area: tr-3; }
.gallery-canvas .tr-4 { grid-area: tr-4; }
.gallery-canvas .tr-5 { grid-area: tr-5; }
.gallery-canvas .tr-6 { grid-area: tr-6; }
.gallery-canvas .tr-7 { grid-area: tr-7; }
.gallery-canvas .tr-8 { grid-area: tr-8; }
.gallery-canvas .tr-9 { grid-area: tr-9; }
.gallery-canvas .tr-10 { grid-area: tr-10; }
.gallery-canvas .tr-11 { grid-area: tr-11; }
.gallery-canvas .tr-12 { grid-area: tr-12; }
.gallery-canvas .tr-13 { grid-area: tr-13; }
.gallery-canvas .tr-14 { grid-area: tr-14; }
.gallery-canvas .tr-15 { grid-area: tr-15; }
.gallery-canvas .tr-16 { grid-area: tr-16; }
.gallery-canvas .tr-17 { grid-area: tr-17; }
.gallery-canvas .tr-18 { grid-area: tr-18; }
.gallery-canvas .tr-19 { grid-area: tr-19; }
.gallery-canvas .tr-20 { grid-area: tr-20; }
.gallery-canvas .tr-21 { grid-area: tr-21; }
.gallery-canvas .tr-22 { grid-area: tr-22; }
.gallery-canvas .tr-23 { grid-area: tr-23; }
.gallery-canvas .tr-24 { grid-area: tr-24; }
.gallery-canvas .tr-25 { grid-area: tr-25; }

/* 3D Tilt Angles */
.gallery-canvas .tr-1:hover ~ .gallery-3d-card { transform: rotateX(14deg) rotateY(-12deg); }
.gallery-canvas .tr-2:hover ~ .gallery-3d-card { transform: rotateX(14deg) rotateY(-6deg); }
.gallery-canvas .tr-3:hover ~ .gallery-3d-card { transform: rotateX(14deg) rotateY(0deg); }
.gallery-canvas .tr-4:hover ~ .gallery-3d-card { transform: rotateX(14deg) rotateY(6deg); }
.gallery-canvas .tr-5:hover ~ .gallery-3d-card { transform: rotateX(14deg) rotateY(12deg); }

.gallery-canvas .tr-6:hover ~ .gallery-3d-card { transform: rotateX(7deg) rotateY(-12deg); }
.gallery-canvas .tr-7:hover ~ .gallery-3d-card { transform: rotateX(7deg) rotateY(-6deg); }
.gallery-canvas .tr-8:hover ~ .gallery-3d-card { transform: rotateX(7deg) rotateY(0deg); }
.gallery-canvas .tr-9:hover ~ .gallery-3d-card { transform: rotateX(7deg) rotateY(6deg); }
.gallery-canvas .tr-10:hover ~ .gallery-3d-card { transform: rotateX(7deg) rotateY(12deg); }

.gallery-canvas .tr-11:hover ~ .gallery-3d-card { transform: rotateX(0deg) rotateY(-12deg); }
.gallery-canvas .tr-12:hover ~ .gallery-3d-card { transform: rotateX(0deg) rotateY(-6deg); }
.gallery-canvas .tr-13:hover ~ .gallery-3d-card { transform: rotateX(0deg) rotateY(0deg); }
.gallery-canvas .tr-14:hover ~ .gallery-3d-card { transform: rotateX(0deg) rotateY(6deg); }
.gallery-canvas .tr-15:hover ~ .gallery-3d-card { transform: rotateX(0deg) rotateY(12deg); }

.gallery-canvas .tr-16:hover ~ .gallery-3d-card { transform: rotateX(-7deg) rotateY(-12deg); }
.gallery-canvas .tr-17:hover ~ .gallery-3d-card { transform: rotateX(-7deg) rotateY(-6deg); }
.gallery-canvas .tr-18:hover ~ .gallery-3d-card { transform: rotateX(-7deg) rotateY(0deg); }
.gallery-canvas .tr-19:hover ~ .gallery-3d-card { transform: rotateX(-7deg) rotateY(6deg); }
.gallery-canvas .tr-20:hover ~ .gallery-3d-card { transform: rotateX(-7deg) rotateY(12deg); }

.gallery-canvas .tr-21:hover ~ .gallery-3d-card { transform: rotateX(-14deg) rotateY(-12deg); }
.gallery-canvas .tr-22:hover ~ .gallery-3d-card { transform: rotateX(-14deg) rotateY(-6deg); }
.gallery-canvas .tr-23:hover ~ .gallery-3d-card { transform: rotateX(-14deg) rotateY(0deg); }
.gallery-canvas .tr-24:hover ~ .gallery-3d-card { transform: rotateX(-14deg) rotateY(6deg); }
.gallery-canvas .tr-25:hover ~ .gallery-3d-card { transform: rotateX(-14deg) rotateY(12deg); }

/* ==================== REAL PHOTO THUMBNAIL BANNER ==================== */
.gallery-media-banner {
    position: relative;
    height: 250px;
    background-color: #2e1a0f;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.4s ease;
}

.tracker:hover ~ .gallery-3d-card .gallery-thumb-img,
.gallery-3d-wrapper:hover .gallery-thumb-img {
    transform: scale(1.08);
    filter: brightness(1.05);
}

.gallery-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(46, 26, 15, 0.88) 0%, rgba(92, 58, 33, 0.25) 50%, rgba(0, 0, 0, 0.2) 100%);
    z-index: 2;
}

.gallery-center-icon {
    position: relative;
    z-index: 5;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    border: 2px solid #ffffff;
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e1306c;
    font-size: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    text-decoration: none;
}

.tracker:hover ~ .gallery-3d-card .gallery-center-icon {
    transform: scale(1.18);
    background: #ffffff;
    color: #c13584;
    box-shadow: 0 0 20px rgba(250, 204, 21, 0.7);
}

/* Content Badges */
.gallery-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    backdrop-filter: blur(6px);
    z-index: 15;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gallery-badge.reel {
    background: linear-gradient(45deg, #8d5b2d 0%, #dc2743 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.gallery-badge.post {
    background: linear-gradient(45deg, #5c3a21 0%, #1b5e20 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.gallery-badge.story {
    background: linear-gradient(45deg, #b45309 0%, #5c3a21 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.gallery-insta-direct {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.95);
    color: #e1306c;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 35;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, background 0.2s ease;
    text-decoration: none;
}

.gallery-insta-direct:hover {
    transform: scale(1.15);
    background: #ffffff;
    color: #c13584;
}

/* ==================== CARD CONTENT & TYPOGRAPHY ==================== */
.gallery-3d-body {
    padding: 22px;
    background: #ffffff;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 15;
}

.gallery-3d-subtitle {
    font-size: 11px;
    font-weight: 800;
    color: #8d5b2d; /* Warm Brown */
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
    display: block;
}

.gallery-3d-title {
    font-size: 17px;
    font-weight: 800;
    color: #2e1a0f; /* Deep Earth Espresso */
    line-height: 1.35;
    margin-bottom: 15px;
}

.gallery-3d-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px dashed #ebdcd0;
}

.gallery-category-pill {
    background: #fbf7f2;
    color: #5c3a21;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 12px;
    border: 1px solid #ebdcd0;
}

.gallery-watch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    color: #1b5e20;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    z-index: 35;
    position: relative;
}

.gallery-watch-btn:hover {
    color: #8d5b2d;
    transform: translateX(3px);
}