/**
 * Custom Layout Examples for Limenco Freelance Cards
 * Add these CSS rules to customize card layouts
 */

/* Example 1: Move location to header top */
.lfc-custom-layout-1 .lfc-card-info {
    display: flex;
    flex-direction: column;
}

.lfc-custom-layout-1 .lfc-card-location {
    order: -1; /* Move location above name */
    margin-bottom: 5px;
}

/* Example 2: Move skills to header */
.lfc-custom-layout-2 .lfc-card-header {
    flex-direction: column;
}

.lfc-custom-layout-2 .lfc-card-skills {
    order: -1; /* Move skills to top of card */
    margin-bottom: 10px;
}

/* Example 3: Horizontal meta layout */
.lfc-custom-layout-3 .lfc-card-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.lfc-custom-layout-3 .lfc-card-experience {
    order: 1;
}

.lfc-custom-layout-3 .lfc-card-rating {
    order: 2;
}

.lfc-custom-layout-3 .lfc-card-rate {
    order: 3;
    grid-column: 1 / -1; /* Span full width */
}

/* Example 4: Compact header with everything inline */
.lfc-custom-layout-4 .lfc-card-header {
    flex-wrap: wrap;
    align-items: center;
}

.lfc-custom-layout-4 .lfc-card-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.lfc-custom-layout-4 .lfc-card-name,
.lfc-custom-layout-4 .lfc-card-title,
.lfc-custom-layout-4 .lfc-card-location {
    margin: 0;
}

/* Example 5: Move availability to header */
.lfc-custom-layout-5 .lfc-card-availability {
    position: absolute;
    top: 15px;
    right: 15px;
}

.lfc-custom-layout-5 .lfc-card-footer {
    justify-content: center;
}

/* Example 6: Vertical card layout */
.lfc-custom-layout-6 .lfc-card {
    text-align: center;
}

.lfc-custom-layout-6 .lfc-card-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.lfc-custom-layout-6 .lfc-card-avatar {
    margin-bottom: 10px;
}

/* Example 7: Side-by-side layout */
.lfc-custom-layout-7 .lfc-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
        "header meta"
        "body footer";
    gap: 15px;
}

.lfc-custom-layout-7 .lfc-card-header {
    grid-area: header;
}

.lfc-custom-layout-7 .lfc-card-body {
    grid-area: body;
}

.lfc-custom-layout-7 .lfc-card-meta {
    grid-area: meta;
    flex-direction: column;
}

.lfc-custom-layout-7 .lfc-card-footer {
    grid-area: footer;
}

/* Example 8: Minimal header, everything else in body */
.lfc-custom-layout-8 .lfc-card-header {
    margin-bottom: 5px;
}

.lfc-custom-layout-8 .lfc-card-location {
    display: none; /* Hide from header */
}

.lfc-custom-layout-8 .lfc-card-body::before {
    content: attr(data-location);
    display: block;
    font-size: 13px;
    color: #646970;
    margin-bottom: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .lfc-custom-layout-7 .lfc-card {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "header"
            "meta"
            "body"
            "footer";
    }
    
    .lfc-custom-layout-4 .lfc-card-info {
        flex-direction: column;
        align-items: flex-start;
    }
}