/* Base Grid */
.sky-portfolio-grid {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* Portfolio Item */
.sky-portfolio-item .inner {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.sky-portfolio-item .image {
    flex: 0 0 40%;
    max-width: 40%;
}
.sky-portfolio-item .image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}
.sky-portfolio-item .content {
    flex: 1 1 55%;
    max-width: 55%;
}
.sky-portfolio-item .title {
    margin: 0 0 8px 0;
    font-size: 1.25rem;
    font-weight: 600;
}
.sky-portfolio-item .technologies {
    margin-bottom: 8px;
}
.sky-portfolio-item .technologies .tech {
    display: inline-block;
    margin-right: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    font-size: 0.85rem;
}

/* Image Right */
.sky-portfolio-item.image-right .inner {
    flex-direction: row-reverse;
}
.sky-portfolio-item.image-right .image {
    text-align: right;
}

/* Toggle Buttons */
.sky-view-toggle {
    text-align: right;
    margin-bottom: 20px;
}
.sky-view-toggle .toggle-btn {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 8px 12px;
    margin-left: 6px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.25s ease;
}
.sky-view-toggle .toggle-btn.active {
    background: #0073aa;
    color: #fff;
    border-color: #0073aa;
}
.sky-view-toggle .toggle-btn span.dashicons {
    font-size: 18px;
}

/* Grid Layout */
.sky-portfolio-grid.layout-grid {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px;
}
.sky-portfolio-grid.layout-grid .sky-portfolio-item {
    width: calc(50% - 15px);
    background: #fff;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}
.sky-portfolio-grid.layout-grid .sky-portfolio-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.sky-portfolio-grid.layout-grid .sky-portfolio-item .inner {
    flex-direction: column;
}
.sky-portfolio-grid.layout-grid .sky-portfolio-item .image,
.sky-portfolio-grid.layout-grid .sky-portfolio-item .content {
    max-width: 100%;
}

/* List Layout */
.sky-portfolio-grid.layout-list {
    flex-direction: column;
}
.sky-portfolio-grid.layout-list .sky-portfolio-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    padding: 20px;
}
.sky-portfolio-grid.layout-list .sky-portfolio-item .inner {
    display: flex;
    align-items: center;
    gap: 25px;
}
.sky-portfolio-grid.layout-list .sky-portfolio-item.image-right .inner {
    flex-direction: row-reverse;
}
.sky-portfolio-grid.layout-list .sky-portfolio-item .image {
    flex: 0 0 35%;
    max-width: 35%;
}
.sky-portfolio-grid.layout-list .sky-portfolio-item .content {
    flex: 1;
}

/* Responsive Fix for Grid/List */
@media (max-width: 800px) {
    /* All portfolio items stack vertically */
    .sky-portfolio-item .inner {
        flex-direction: column !important;
        align-items: flex-start;
    }
    .sky-portfolio-item .image,
    .sky-portfolio-item .content {
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* Grid layout items full width */
    .sky-portfolio-grid.layout-grid .sky-portfolio-item {
        width: 100% !important;
    }

    /* List layout items full width and stacked */
    .sky-portfolio-grid.layout-list .sky-portfolio-item .inner {
        flex-direction: column !important;
        gap: 15px !important;
    }
}

/* Hide List button on mobile */
@media (max-width: 700px) {
    .sky-view-toggle .toggle-btn[data-layout="list"] {
        display: none;
    }
}


/* Responsive Fix for Grid/List */
@media (max-width: 800px) {
    /* All items stack vertically */
    .sky-portfolio-item .inner {
        flex-direction: column !important;
        align-items: flex-start;
    }
    .sky-portfolio-item .image,
    .sky-portfolio-item .content {
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* Grid layout: full width */
    .sky-portfolio-grid.layout-grid .sky-portfolio-item {
        width: 100% !important;
    }

    /* List layout: stack image/content vertically on small mobile only */
    @media (max-width: 700px) {
        .sky-portfolio-grid.layout-list .sky-portfolio-item .inner {
            flex-direction: column !important;
            gap: 15px !important;
        }
    }
}

/* Hide List button only on mobile */
@media (max-width: 700px) {
    .sky-view-toggle .toggle-btn[data-layout="list"] {
        display: none;
    }
}

.sky-portfolio-item.color1 { background:#fef9f5; }
.sky-portfolio-item.color2 { background:#f5faff; }
.sky-portfolio-item.color3 { background:#f9f5ff; }
.sky-portfolio-item.color4 { background:#f5fff5; }