/**
 * KENuFM Now Playing v0.4.0
 *
 * Minden selector a .kenufm-np névtérből indul, így nem írja felül az
 * Elementor vagy a régi nowplaying iframe-ek általános elemeit.
 */

.kenufm-np {
    --kenufm-np-size: 300px;
    --kenufm-np-gap: 12px;
    --kenufm-np-columns: 1;
    --kenufm-np-opacity: 1;

    /*
     * Az aktív változókat használja minden komponens. Ezek nincsenek inline
     * beállítva, ezért a mobil media query valóban felül tudja írni őket.
     * A korábbi verzió hibája az volt, hogy az inline --kenufm-np-size értéket
     * próbálta stylesheetből felülírni, ami a CSS kaszkád miatt lehetetlen.
     */
    --kenufm-np-active-size: var(--kenufm-np-size);
    --kenufm-np-active-gap: var(--kenufm-np-gap);
    --kenufm-np-active-columns: var(--kenufm-np-columns);
    --kenufm-np-active-opacity: var(--kenufm-np-opacity);
    --kenufm-np-title-size: 12px;
    --kenufm-np-artist-size: 12px;
    --kenufm-np-rotate: 0deg;
    --kenufm-np-top: auto;
    --kenufm-np-right: auto;
    --kenufm-np-bottom: auto;
    --kenufm-np-left: auto;
    --kenufm-np-z-index: 10;
    --kenufm-np-pointer-events: auto;

    width: 100%;
    min-width: 0;
    transform: rotate(var(--kenufm-np-rotate));
    transform-origin: center center;
    top: var(--kenufm-np-top);
    right: var(--kenufm-np-right);
    bottom: var(--kenufm-np-bottom);
    left: var(--kenufm-np-left);
    z-index: var(--kenufm-np-z-index);
    pointer-events: var(--kenufm-np-pointer-events);
}

/* A fixed dekoráció a görgetéstől függetlenül a viewportban marad. */
.kenufm-np-position--fixed {
    position: fixed;
    width: max-content;
    max-width: none;
}

.kenufm-np-position--normal {
    position: relative;
}

/*
 * A desktop/tablet/mobil opacity kizárólag a dekoratív cover layoutot érinti.
 * A trackenkénti upcoming halványítás változatlanul ezen belül érvényesül.
 */
.kenufm-np--covers {
    opacity: var(--kenufm-np-active-opacity);
}

.kenufm-np-grid {
    display: grid;
    grid-template-columns: repeat(var(--kenufm-np-active-columns), minmax(0, var(--kenufm-np-active-size)));
    gap: var(--kenufm-np-active-gap);
    align-items: start;
}

.kenufm-np-align--left .kenufm-np-grid { justify-content: start; }
.kenufm-np-align--center .kenufm-np-grid { justify-content: center; }
.kenufm-np-align--right .kenufm-np-grid { justify-content: end; }

.kenufm-np-track {
    position: relative;
    min-width: 0;
    overflow: hidden;
}

.kenufm-np-artwork {
    display: block;
    width: 100%;
    max-width: var(--kenufm-np-active-size);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 0;
    padding: 0;
    margin: 0;
}

/* A tooltip csak pointer_events="auto" mellett érzékelhető. */
.kenufm-np-track[data-kenufm-tooltip="1"] .kenufm-np-artwork {
    cursor: help;
}

/* A következő számok finom távolodó hatása pozíció alapján. */
.kenufm-np-track--upcoming[data-kenufm-position="1"] .kenufm-np-artwork { opacity: .72; }
.kenufm-np-track--upcoming[data-kenufm-position="2"] .kenufm-np-artwork { opacity: .48; }
.kenufm-np-track--upcoming[data-kenufm-position="3"] .kenufm-np-artwork,
.kenufm-np-track--upcoming[data-kenufm-position="4"] .kenufm-np-artwork { opacity: .34; }
.kenufm-np-track--upcoming[data-kenufm-position="5"] .kenufm-np-artwork,
.kenufm-np-track--upcoming[data-kenufm-position="6"] .kenufm-np-artwork,
.kenufm-np-track--upcoming[data-kenufm-position="7"] .kenufm-np-artwork,
.kenufm-np-track--upcoming[data-kenufm-position="8"] .kenufm-np-artwork,
.kenufm-np-track--upcoming[data-kenufm-position="9"] .kenufm-np-artwork { opacity: .25; }

.kenufm-np-meta {
    margin-top: .35rem;
    font-family: "Poppins", sans-serif;
    line-height: 1.2;
}

.kenufm-np-title,
.kenufm-np-artist {
    display: block;
    overflow-wrap: anywhere;
}

.kenufm-np-title {
    color: #6ec1e4;
    font-size: var(--kenufm-np-title-size);
    font-weight: 400;
}

.kenufm-np-artist {
    color: #b7e0f2;
    font-size: var(--kenufm-np-artist-size);
    text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * Szöveges nézet és az aktuális szám jelölése
 * ---------------------------------------------------------------------- */

.kenufm-np--text .kenufm-np-grid {
    grid-template-columns: 1fr;
}

.kenufm-np--text .kenufm-np-track {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    padding-block: .38rem;
}

.kenufm-np--text .kenufm-np-artwork {
    width: min(var(--kenufm-np-active-size), 100px);
}

.kenufm-np-current-label {
    display: block;
    width: max-content;
    margin: 0 0 .18rem;
    color: rgba(183, 224, 242, .9);
    font: 600 9px/1.2 "Poppins", sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/*
 * Cover-only nézetben a címke a képre kerül. Text layoutban a címke a meta
 * blokkon belül van, ezért az aktuális kép ugyanazon a bal oldali vonalon és
 * ugyanabban a grid-oszlopban marad, mint az összes többi kép.
 */
.kenufm-np-current-label--cover {
    position: absolute;
    top: .4rem;
    left: .4rem;
    z-index: 3;
    padding: .2rem .35rem;
    background: rgba(0, 0, 0, .42);
}

/*
 * Az aktuális track térköze a teljes soron marad, de sem vonal, sem háttér nem
 * érintheti a borítót. Így minden kép ugyanabban a tiszta bal oldali oszlopban
 * marad, a leválasztás pedig kizárólag a szöveges blokkban látható.
 */
.kenufm-np-current-style--line.kenufm-np--text .kenufm-np-track--current,
.kenufm-np-current-style--soft.kenufm-np--text .kenufm-np-track--current {
    margin-bottom: .45rem;
}

/* Szolid, függőleges jelölés csak a cím/előadó meta blokk bal oldalán. */
.kenufm-np-current-style--line.kenufm-np--text .kenufm-np-track--current .kenufm-np-meta {
    margin-top: 0;
    padding: .38rem .55rem .38rem .7rem;
    border-left: 2px solid rgba(110, 193, 228, .72);
    background: linear-gradient(90deg, rgba(110, 193, 228, .08), rgba(110, 193, 228, 0));
}

/* Erősebb alternatíva szintén kizárólag a szöveges blokkra korlátozva. */
.kenufm-np-current-style--soft.kenufm-np--text .kenufm-np-track--current .kenufm-np-meta {
    margin-top: 0;
    padding: .38rem .55rem;
    border-radius: 8px;
    background: rgba(110, 193, 228, .09);
    box-shadow:
        inset 0 0 0 1px rgba(110, 193, 228, .22),
        inset 0 0 18px rgba(110, 193, 228, .04);
}

.kenufm-np-current-style--none .kenufm-np-current-label {
    display: none;
}

/* -------------------------------------------------------------------------
 * Vinyl nézet
 * ---------------------------------------------------------------------- */

/*
 * A vinyl gyökér pontosan akkora helyet foglal a dokumentum-flow-ban, mint a
 * lemez. Ez a fix width + height páros szándékos: Elementorban és mobilon sem
 * tud nullára összeesni a shortcode magassága, így a lemez nem csúszhat rá a
 * következő player-gombokra.
 */
.kenufm-np--vinyl {
    box-sizing: border-box !important;
    background: transparent !important;
    display: block !important;
    width: min(var(--kenufm-np-active-size), 100%) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: min(var(--kenufm-np-active-size), 100vw) !important;
    min-height: 0 !important;
    isolation: isolate;
    pointer-events: none;
    z-index: var(--kenufm-np-z-index, 0);
}

.kenufm-np--vinyl.kenufm-np-align--left { margin-right: auto; }
.kenufm-np--vinyl.kenufm-np-align--center { margin-inline: auto; }
.kenufm-np--vinyl.kenufm-np-align--right { margin-left: auto; }

/* Egyetlen négyzetes koordinátarendszer minden vinyl-réteghez. */
.kenufm-np-vinyl {
    position: relative !important;
    background: transparent !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    isolation: isolate;
    overflow: visible;
    pointer-events: none;
}

/* Az eredeti #vinyl: 106%-os háttér, középre igazítva. */
.kenufm-np-vinyl-disc {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50%;
    background-image: var(--kenufm-vinyl-image);
    background-repeat: no-repeat;
    background-size: 106% 106%;
    background-position: center;
    box-shadow: 0 0 20px 4px rgba(0, 0, 0, .6);
    transform-origin: 50% 50%;
    pointer-events: none;
}

/*
 * Az aktuális cover pontosan az eredeti top:2%; left:2%; width:96%; height:96%.
 * Az inset + width/height keverés helyett kizárólag insetet használunk; így az
 * Elementor globális img-szabályai sem tudják eltolni vagy túlnyújtani.
 */
.kenufm-np-vinyl-cover {
    position: absolute !important;
    top: 2% !important;
    left: 2% !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 1;
    box-sizing: border-box !important;
    display: block !important;
    width: 96% !important;
    min-width: 0 !important;
    max-width: 96% !important;
    height: 96% !important;
    min-height: 0 !important;
    max-height: 96% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;
    pointer-events: none;
}

/* Az eredeti #vinyl-cover::before: 2.5% / 95%, screen, opacity .3. */
.kenufm-np-vinyl-disc::after {
    content: "";
    position: absolute;
    inset: 2.5%;
    z-index: 2;
    border-radius: 50%;
    background-image: var(--kenufm-vinyl-texture);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    mix-blend-mode: screen;
    opacity: .3;
    pointer-events: none;
}

/* A 600×600-as center PNG teljes méretű, álló overlay. */
.kenufm-np-vinyl-center {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    pointer-events: none;
}

/*
 * Középső logó: a top/left a logó középpontja. Az alap 50% / 50%, tehát a
 * geometriai középpont. A belépési animáció a wrapperen fut; a shine a belső
 * linken, így a két animáció nem írja felül egymást.
 */
.kenufm-np-vinyl .kenufm-np-vinyl-logo.mask.pseudo {
    box-sizing: border-box !important;
    position: absolute !important;
    top: var(--kenufm-vinyl-logo-top, 48%) !important;
    left: var(--kenufm-vinyl-logo-left, 50%) !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 4 !important;
    display: block !important;
    width: var(--kenufm-vinyl-logo-size, 33%) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 / 1;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 1;
    background: transparent !important;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .5));
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    pointer-events: auto !important;
    will-change: transform, opacity;
}

/* Régi globális .mask pseudo-effektek célzott semlegesítése. */
.kenufm-np-vinyl .kenufm-np-vinyl-logo.mask.pseudo::after {
    content: none !important;
    display: none !important;
}

.kenufm-np-vinyl .kenufm-np-vinyl-logo-link {
    box-sizing: border-box !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    color: transparent !important;
    background: transparent !important;
    text-decoration: none !important;
    filter: none !important;
    pointer-events: auto !important;
    cursor: pointer;
    overflow: hidden;
    border-radius: 50%;
}

.kenufm-np-vinyl .kenufm-np-vinyl-logo-image {
    position: relative !important;
    z-index: 1;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: brightness(1.2) drop-shadow(0 0 28px #7a7a7a);
    pointer-events: none;
}

/*
 * Stabil shiny effekt.
 *
 * Az eredeti radial-gradient + logómaszk vizuális elvét tartja meg, de a
 * háttér 240%-os, ezért a background-position valóban végig tud futni. A JS
 * minden pointerenter/fókusz eseménynél leveszi és újra felteszi az osztályt,
 * így hoverenként biztosan az elejéről indul és animationend után leáll.
 */
.kenufm-np-vinyl .kenufm-np-vinyl-logo-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(
            112deg,
            rgba(255, 255, 255, 0) 34%,
            rgba(255, 255, 255, .18) 42%,
            rgba(255, 255, 255, .98) 50%,
            rgba(255, 255, 255, .22) 58%,
            rgba(255, 255, 255, 0) 66%
        ) no-repeat;
    background-size: 260% 100%;
    background-position: 180% 0;
    mix-blend-mode: screen;
    -webkit-mask-image: var(--kenufm-vinyl-logo-mask-image);
    mask-image: var(--kenufm-vinyl-logo-mask-image);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    will-change: opacity, background-position;
}

.kenufm-np-vinyl .kenufm-np-vinyl-logo-link.is-kenufm-shining::after {
    animation: kenufmNpLogoShineStable
        var(--kenufm-vinyl-logo-shine-duration, 2s)
        ease-in-out
        0s
        1 both;
}

@keyframes kenufmNpLogoShineStable {
    0% {
        opacity: 0;
        background-position: 180% 0;
    }
    10% { opacity: 1; }
    86% { opacity: 1; }
    100% {
        opacity: 0;
        background-position: -80% 0;
    }
}

/* -------------------------------------------------------------------------
 * Logó belépési animációk – külön a shine-tól
 * ---------------------------------------------------------------------- */

.kenufm-np-vinyl-logo-entry--drop {
    animation: kenufmNpLogoEntryDrop
        var(--kenufm-vinyl-logo-entry-duration, 2s)
        ease-in-out
        var(--kenufm-vinyl-logo-entry-delay, 0s)
        1 both !important;
}

.kenufm-np-vinyl-logo-entry--fade {
    animation: kenufmNpLogoEntryFade
        var(--kenufm-vinyl-logo-entry-duration, 2s)
        ease-in-out
        var(--kenufm-vinyl-logo-entry-delay, 0s)
        1 both !important;
}

.kenufm-np-vinyl-logo-entry--scale {
    animation: kenufmNpLogoEntryScale
        var(--kenufm-vinyl-logo-entry-duration, 2s)
        ease-out
        var(--kenufm-vinyl-logo-entry-delay, 0s)
        1 both !important;
}

.kenufm-np-vinyl-logo-entry--none { animation: none !important; }

@keyframes kenufmNpLogoEntryDrop {
    0% {
        opacity: 0;
        transform: translate(
            -50%,
            calc(-50% - var(--kenufm-vinyl-logo-entry-distance, 200px))
        );
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@keyframes kenufmNpLogoEntryFade {
    0% { opacity: 0; transform: translate(-50%, -50%); }
    100% { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes kenufmNpLogoEntryScale {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.45); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.kenufm-np-vinyl.is-spinning .kenufm-np-vinyl-disc {
    animation: kenufmNpSpin 10s linear infinite;
}

@keyframes kenufmNpSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .kenufm-np-vinyl.is-spinning .kenufm-np-vinyl-disc,
    .kenufm-np-vinyl-logo-entry--drop,
    .kenufm-np-vinyl-logo-entry--fade,
    .kenufm-np-vinyl-logo-entry--scale,
    .kenufm-np-vinyl .kenufm-np-vinyl-logo-link.is-kenufm-shining::after {
        animation: none !important;
    }
}


/* -------------------------------------------------------------------------
 * Text/playlist kötelező normál dokumentum-flow
 * ---------------------------------------------------------------------- */

/*
 * A playlist nem dekorációs fixed elem. A normál text shortcode saját
 * gyökérelemén explicit !important védelem van, így sem egy korábbi fixed
 * shortcode-osztály, sem Elementor preview újrarenderelés nem rögzítheti.
 * Fixed text csak kifejezett fixed="1" paraméterrel engedélyezett, amikor
 * ez a kenufm-np-text-flow osztály nem kerül a markupba.
 */
.kenufm-np--text.kenufm-np-text-flow {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    z-index: auto !important;
}

/* -------------------------------------------------------------------------
 * Desktop/mobil eltérő elemszám
 * ---------------------------------------------------------------------- */

@media (min-width: 768px) {
    .kenufm-np-desktop-hidden {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    .kenufm-np-mobile-hidden {
        display: none !important;
    }
}

/* -------------------------------------------------------------------------
 * Tablet felülírások – 768–1024.98 px
 *
 * Minden tablet paraméter alapból a desktop értéket örökli, ezért a régi
 * shortcode-ok megjelenése változatlan. Csak explicit tablet_* paraméter
 * esetén tér el a méret, pozíció, forgatás, oszlopszám, gap vagy opacity.
 * ---------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1024.98px) {
    .kenufm-np {
        --kenufm-np-active-size: var(--kenufm-np-tablet-size);
        --kenufm-np-active-gap: var(--kenufm-np-tablet-gap);
        --kenufm-np-active-columns: var(--kenufm-np-tablet-columns);
        --kenufm-np-active-opacity: var(--kenufm-np-tablet-opacity);

        transform: rotate(var(--kenufm-np-tablet-rotate)) !important;
    }

    .kenufm-np-tablet-position--fixed {
        position: fixed !important;
        width: max-content !important;
        max-width: none !important;
        top: var(--kenufm-np-tablet-top) !important;
        right: var(--kenufm-np-tablet-right) !important;
        bottom: var(--kenufm-np-tablet-bottom) !important;
        left: var(--kenufm-np-tablet-left) !important;
    }

    .kenufm-np-tablet-position--normal {
        position: relative !important;
        width: fit-content !important;
        max-width: 100% !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
    }

    .kenufm-np--text.kenufm-np-tablet-position--normal {
        width: 100% !important;
    }

    .kenufm-np--covers .kenufm-np-grid {
        grid-template-columns: repeat(
            var(--kenufm-np-active-columns),
            var(--kenufm-np-active-size)
        ) !important;
        grid-auto-columns: var(--kenufm-np-active-size) !important;
        gap: var(--kenufm-np-active-gap) !important;
        width: max-content !important;
        max-width: none !important;
    }

    .kenufm-np--covers .kenufm-np-track,
    .kenufm-np--covers .kenufm-np-artwork {
        width: var(--kenufm-np-active-size) !important;
        min-width: var(--kenufm-np-active-size) !important;
        max-width: var(--kenufm-np-active-size) !important;
        height: var(--kenufm-np-active-size) !important;
        min-height: var(--kenufm-np-active-size) !important;
        max-height: var(--kenufm-np-active-size) !important;
    }
}

/* -------------------------------------------------------------------------
 * Mobil felülírások
 * ---------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .kenufm-np--text.kenufm-np-text-flow {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        z-index: auto !important;
    }

    .kenufm-np {
        --kenufm-np-active-size: var(--kenufm-np-mobile-size);
        --kenufm-np-active-gap: var(--kenufm-np-mobile-gap);
        --kenufm-np-active-columns: var(--kenufm-np-mobile-columns);
        --kenufm-np-active-opacity: var(--kenufm-np-mobile-opacity);

        transform: rotate(var(--kenufm-np-mobile-rotate)) !important;
    }

    /*
     * mobile_fixed="1": valóban viewporthoz rögzített, és csak ekkor
     * használjuk a mobile_top/right/bottom/left értékeket.
     */
    .kenufm-np-mobile-position--fixed {
        position: fixed !important;
        width: max-content !important;
        max-width: none !important;
        top: var(--kenufm-np-mobile-top) !important;
        right: var(--kenufm-np-mobile-right) !important;
        bottom: var(--kenufm-np-mobile-bottom) !important;
        left: var(--kenufm-np-mobile-left) !important;
    }

    /*
     * mobile_fixed="0": kötelezően normál dokumentum-flow. A desktop fixed
     * koordinátákat és a korábbi mobil offseteket is nullázzuk.
     */
    .kenufm-np-mobile-position--normal {
        position: relative !important;
        width: fit-content !important;
        max-width: 100% !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
    }

    .kenufm-np--text.kenufm-np-mobile-position--normal {
        width: 100% !important;
    }

    .kenufm-np--vinyl.kenufm-np-mobile-position--normal {
        position: relative !important;
        width: min(var(--kenufm-np-active-size), 100%) !important;
        height: var(--kenufm-np-active-size) !important;
        min-height: var(--kenufm-np-active-size) !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        z-index: 0 !important;
        margin-inline: auto !important;
        margin-block-end: 18px !important;
        clear: both;
    }

    /*
     * Mobilon is pontosan a desktop vinyl-rétegezés és animáció marad.
     * Nincs négyszögletes clip/paint containment és nincs külön mobilos
     * belépési távolság; kizárólag a mobile_size módosíthatja a méretet.
     */
    .kenufm-np--vinyl .kenufm-np-vinyl {
        overflow: visible !important;
        overflow-clip-margin: 0;
        contain: none;
        background: transparent !important;
    }

    /*
     * A covers layout rácsa és minden kártyája ugyanazt a mobil px értéket
     * kapja. Elementor globális img/max-width szabályai ezt nem írhatják felül.
     */
    .kenufm-np--covers .kenufm-np-grid {
        display: grid !important;
        grid-template-columns: repeat(
            var(--kenufm-np-active-columns),
            var(--kenufm-np-active-size)
        ) !important;
        grid-auto-columns: var(--kenufm-np-active-size) !important;
        grid-auto-rows: var(--kenufm-np-active-size) !important;
        gap: var(--kenufm-np-active-gap) !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .kenufm-np--covers .kenufm-np-track {
        box-sizing: border-box !important;
        inline-size: var(--kenufm-np-active-size) !important;
        min-inline-size: var(--kenufm-np-active-size) !important;
        max-inline-size: var(--kenufm-np-active-size) !important;
        block-size: var(--kenufm-np-active-size) !important;
        min-block-size: var(--kenufm-np-active-size) !important;
        max-block-size: var(--kenufm-np-active-size) !important;
    }

    .kenufm-np--covers .kenufm-np-artwork {
        box-sizing: border-box !important;
        display: block !important;
        inline-size: var(--kenufm-np-active-size) !important;
        min-inline-size: var(--kenufm-np-active-size) !important;
        max-inline-size: var(--kenufm-np-active-size) !important;
        block-size: var(--kenufm-np-active-size) !important;
        min-block-size: var(--kenufm-np-active-size) !important;
        max-block-size: var(--kenufm-np-active-size) !important;
        width: var(--kenufm-np-active-size) !important;
        height: var(--kenufm-np-active-size) !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
    }

    .kenufm-np--text .kenufm-np-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .kenufm-np--vinyl {
        width: min(var(--kenufm-np-active-size), 100%) !important;
        height: var(--kenufm-np-active-size) !important;
        min-height: var(--kenufm-np-active-size) !important;
        max-height: var(--kenufm-np-active-size) !important;
    }

    .kenufm-np--text .kenufm-np-track {
        gap: .55rem;
    }
}