/* Portfolio Layout */
.portfolio-navigation-layout {
    display: grid;
    grid-template-areas:
        "top-thumbs top-thumbs top-thumbs"
        "left-thumbs main-content right-thumbs"
        "bottom-thumbs bottom-thumbs bottom-thumbs";
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 200px 1fr 200px;
    min-height: 100vh;
    gap: 1rem;
    background: #f8f9fa;
}

.thumbnail-top { grid-area: top-thumbs; padding: 1rem 0; }
.thumbnail-left { grid-area: left-thumbs; }
.main-content-area { grid-area: main-content; padding: 2rem; background: white; }
.thumbnail-right { grid-area: right-thumbs; }
.thumbnail-bottom { grid-area: bottom-thumbs; padding: 1rem 0; }

.content-grid-container { display: contents; }

.thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.thumbnail-item {
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.thumbnail-item:hover {
    transform: scale(1.05);
}

.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Flip Animation */
.flip-card {
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
}

.flip-card-front {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flip-card-back {
    background: linear-gradient(135deg, rgba(0,0,0,0.8), rgba(0,0,0,0.6));
    color: white;
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
}

.flip-card-back h3 {
    margin: 0;
    font-size: 1.2rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}