/* ═══════════════════════════════════════════════════════════════════════════
   Cloe Featured Menu — Frontend Layout
   Matches the Elementor "Featured Menu" section: horizontal items with
   vertical dividers, centered image, copper price, serif name, description.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Grid ─────────────────────────────────────────────────────────────── */
.cloe-fm-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1140px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Auto-adjust columns based on item count */
.cloe-fm-grid[data-count="1"] { grid-template-columns: 1fr; max-width: 320px; }
.cloe-fm-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.cloe-fm-grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
/* 4+ stays as repeat(4, 1fr) */

/* ─── Item ─────────────────────────────────────────────────────────────── */
.cloe-fm-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 28px;
    position: relative;
}

/* Vertical divider between items */
.cloe-fm-item + .cloe-fm-item {
    border-left: 1px solid #ddd;
}

/* ─── Image ────────────────────────────────────────────────────────────── */
.cloe-fm-item-image {
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.cloe-fm-item-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0;
    transition: transform 0.4s ease;
}

.cloe-fm-item:hover .cloe-fm-item-image img {
    transform: scale(1.05);
}

/* ─── Price ────────────────────────────────────────────────────────────── */
.cloe-fm-item-price {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.95rem;
    font-weight: 500;
    color: #b07c4b;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}

/* ─── Name ─────────────────────────────────────────────────────────────── */
.cloe-fm-item-name {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
    font-size: 1.45rem;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0 0 10px;
    line-height: 1.3;
}

/* ─── Description ──────────────────────────────────────────────────────── */
.cloe-fm-item-desc {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.88rem;
    color: #6b6b6b;
    line-height: 1.6;
    margin: 0;
    max-width: 240px;
}

/* ─── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .cloe-fm-grid,
    .cloe-fm-grid[data-count="4"] {
        grid-template-columns: repeat(2, 1fr);
    }

    .cloe-fm-grid[data-count="3"] {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Reset left borders for wrapped rows */
    .cloe-fm-item {
        border-left: none !important;
    }

    /* Re-apply dividers: every even item in 2-col */
    .cloe-fm-item:nth-child(2n) {
        border-left: 1px solid #ddd !important;
    }

    /* Bottom border for first row */
    .cloe-fm-grid[data-count="3"] .cloe-fm-item:nth-child(-n+2),
    .cloe-fm-grid[data-count="4"] .cloe-fm-item:nth-child(-n+2),
    .cloe-fm-grid .cloe-fm-item:nth-child(-n+2) {
        border-bottom: 1px solid #ddd;
        padding-bottom: 28px;
        margin-bottom: 8px;
    }

    .cloe-fm-item-image {
        width: 150px;
        height: 150px;
    }
}

@media (max-width: 600px) {
    .cloe-fm-grid,
    .cloe-fm-grid[data-count="2"],
    .cloe-fm-grid[data-count="3"],
    .cloe-fm-grid[data-count="4"] {
        grid-template-columns: 1fr;
    }

    .cloe-fm-item {
        border-left: none !important;
        border-bottom: 1px solid #ddd;
        padding: 24px 16px;
    }

    .cloe-fm-item:last-child {
        border-bottom: none;
    }

    .cloe-fm-item-image {
        width: 140px;
        height: 140px;
    }
}