/* ════════════════════════════════════════════════════════════════════════════
   Recipes Grid Widget — overrides condizionali per display mode
   Scoping: solo quando il container ha le classi BEM modifier (.ricette-grid--*).
   Lo shortcode legacy che NON applica modifier resta intatto sul CSS base.
   ════════════════════════════════════════════════════════════════════════════ */

/* Variabili dinamiche settate da Elementor (responsive control colonne + gap).
   Fallback se non valorizzate. */
.ricette-grid-container.cl-recipes-widget {
    --cl-recipes-cols: 4;
    --cl-recipes-gap: 20px;
}

/* ─── DISPLAY MODE: GRID (dinamico via var) ────────────────────────────────── */
.ricette-grid-container.ricette-grid--grid.cl-recipes-widget {
    display: grid;
    grid-template-columns: repeat(var(--cl-recipes-cols), 1fr);
    gap: var(--cl-recipes-gap);
    align-items: stretch;
}

/* ─── DISPLAY MODE: MASONRY (CSS columns) ──────────────────────────────────── */
.ricette-grid-container.ricette-grid--masonry.cl-recipes-widget {
    display: block;
    column-count: var(--cl-recipes-cols);
    column-gap: var(--cl-recipes-gap);
}

.ricette-grid-container.ricette-grid--masonry.cl-recipes-widget .recipe-post-item {
    display: inline-block;
    width: 100%;
    margin-bottom: var(--cl-recipes-gap);
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

/* In masonry l'altezza immagine può variare per dare effetto naturale */
.ricette-grid-container.ricette-grid--masonry.cl-recipes-widget .recipe-image-wrapper {
    height: auto !important;
    min-height: 180px;
    aspect-ratio: 4 / 3;
}

/* ─── DISPLAY MODE: CAROUSEL (Swiper) ──────────────────────────────────────── */
.ricette-grid-container.ricette-grid--carousel.cl-recipes-widget {
    display: block;
    position: relative;
    overflow: hidden;
}

/* Wrapper iniettato da JS: Swiper richiede questa struttura */
.ricette-grid-container.ricette-grid--carousel.cl-recipes-widget .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.ricette-grid-container.ricette-grid--carousel.cl-recipes-widget .swiper-slide {
    height: auto; /* card stretch verticale */
    box-sizing: border-box;
}

/* Override delle navigazioni Swiper per coerenza brand */
.ricette-grid-container.ricette-grid--carousel.cl-recipes-widget .swiper-button-prev,
.ricette-grid-container.ricette-grid--carousel.cl-recipes-widget .swiper-button-next {
    color: #0A2838;
    width: 36px;
    height: 36px;
    background: rgba(255, 254, 246, 0.95);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ricette-grid-container.ricette-grid--carousel.cl-recipes-widget .swiper-button-prev::after,
.ricette-grid-container.ricette-grid--carousel.cl-recipes-widget .swiper-button-next::after {
    font-size: 16px;
    font-weight: bold;
}

.ricette-grid-container.ricette-grid--carousel.cl-recipes-widget .swiper-pagination {
    position: relative;
    margin-top: 16px;
}

.ricette-grid-container.ricette-grid--carousel.cl-recipes-widget .swiper-pagination-bullet-active {
    background: #f5c140;
}

/* Carousel: nasconde il blocco controlli legacy se per qualche motivo arriva renderizzato */
.ricette-grid-container.ricette-grid--carousel.cl-recipes-widget ~ .ricette-grid-controls {
    display: none;
}

/* ─── LOCK CTA (nuovo bottone opzionale dentro overlay lock) ───────────────── */
.cl-recipes-widget .lock-overlay .lock-cta,
.ricette-grid-container .lock-overlay .lock-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;               /* centrato nell'overlay (flex column) */
    width: auto;
    max-width: calc(100% - 28px);     /* margini laterali dentro la card */
    margin: 10px 14px 0;
    min-height: 44px;                 /* tap target mobile */
    padding: 6px 14px;
    background: #f5c140;
    color: #0A2838;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    font-size: 15px;
    line-height: 1.25;
    cursor: pointer;                  /* override di .recipe-item-locked a { not-allowed } */
    pointer-events: auto;
    transition: transform .15s ease, background .15s ease;
}

.cl-recipes-widget .lock-overlay .lock-cta:hover {
    background: #ffd158;
    transform: translateY(-1px);
}

/* ─── RESPONSIVE: fallback per mode grid/masonry se editor responsive non applicato ── */
@media (max-width: 1024px) {
    .ricette-grid-container.cl-recipes-widget {
        --cl-recipes-cols: 3;
    }
}

@media (max-width: 768px) {
    .ricette-grid-container.cl-recipes-widget {
        --cl-recipes-cols: 2;
    }
}

@media (max-width: 480px) {
    .ricette-grid-container.cl-recipes-widget {
        --cl-recipes-cols: 1;
    }
}