/*
 * Maison Velours — Cocktail Marquee Widget
 * Base styles. Alle visuele waarden worden overschreven via Elementor selectors.
 */

/* ── Wrapper ────────────────────────────────── */
.mv-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    background-color: #0c0908; /* fallback — wordt overschreven via Elementor */
}

/* ── Marquee viewport ───────────────────────── */
.mv-marquee {
    position: relative;
    width: 100%;
    height: 560px;       /* overschreven via control */
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image:         linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

/* ── Scrollende track ───────────────────────── */
.mv-marquee-track {
    display: flex;
    gap: 20px;           /* overschreven via control */
    width: max-content;
    will-change: transform;
    /* animatie wordt per widget-instance via inline <style> ingesteld */
}

/* ── Kaart ──────────────────────────────────── */
.mv-card {
    position: relative;
    flex-shrink: 0;
    width: 280px;        /* overschreven via control */
    aspect-ratio: 3 / 4;
    border-radius: 14px; /* overschreven via control */
    overflow: hidden;
    border: 1px solid rgba(243, 236, 223, 0.16);
    background-color: #1a1311;
    cursor: default;
}

/* ── Afbeelding ─────────────────────────────── */
.mv-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* ── Donkere gradient-overlay ───────────────── */
.mv-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(12, 9, 8, 0.85) 0%, transparent 45%);
    pointer-events: none;
    z-index: 1;
}

/* ── Tekst meta-blok ────────────────────────── */
.mv-meta {
    position: absolute;
    left: 14px;
    bottom: 14px;
    right: 14px;
    z-index: 2;
    color: #f3ecdf;
}

/* ── Naam ───────────────────────────────────── */
.mv-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-style: italic;
    line-height: 1;
    margin: 0 0 6px;
    color: #f3ecdf;
}

/* ── Type / ingrediënten ────────────────────── */
.mv-type {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #e6c98a;
}

/* ── Link in naam (optioneel) ───────────────── */
.mv-name a {
    color: inherit;
    text-decoration: none;
}
.mv-name a:hover {
    text-decoration: underline;
}

/* ── Pauzeer-state (wordt ingesteld via inline <style> per instance) ── */
/* .mv-marquee:hover .mv-marquee-track { animation-play-state: paused; } */