/* ============================================================
   Amygdala History – Multi-Widget CSS  v2.5
   Widgets: hero · ticker · list · grid · slide · dual-marquee

   - All widgets: light defaults matching original widget style
   - Ticker: fixed centering (align-items on track)
   - Hero: list-mode responsive (Opción 1 & 2 from reference)
   - Hero: play button toggle
   - Dual-row marquee: two rows, opposite directions
   ============================================================ */

/* ── P4 Transparency controls ────────────────────────────────── */
/*
 * Elementor prefix_class='amh-widget-bg-' adds 'amh-widget-bg-yes' when ON.
 * When the switcher is OFF, Elementor adds no class → widget has transparent bg.
 */
/*
 * Fix P4 (confirmed from screenshots):
 * When the background toggle is OFF, Elementor adds 'amh-widget-bg-' (empty suffix)
 * to the widget wrapper. The :not(.amh-widget-bg-yes) selector targets that state.
 *
 * The widget root div (.amh-widget.amh-ticker / .amh-hero / etc.) has:
 *   - background: var(--amh-ticker-bg)  → overridden by !important below ✓
 *   - padding: 10px 16px               → overridden by higher specificity below ✓
 *   - border-radius: 10px              → cleared so no clipping context remains
 *   - overflow: hidden                 → cleared so content isn't clipped
 *
 * Our selector specificity: 0-3-0 (2 classes + 1 pseudo-class + descendant combinator)
 * Competing specificity:    0-1-0 (.amh-ticker alone) → we always win.
 */
.elementor-widget:not(.amh-widget-bg-yes) .amh-widget {
    background:    transparent !important;
    padding:       0 !important;
    border-radius: 0 !important;
    overflow:      visible !important;
}

/* Fade masks (Slide, Dual, Ticker) are controlled exclusively by the
   fade_mask SWITCHER control in each widget's Elementor panel.
   They are NOT auto-hidden when the widget background is OFF — the user
   decides independently whether to show the fade on a transparent widget.
   When bg=OFF and fade=ON, the gradient colour (--amh-bg / --amh-ticker-bg)
   should be set to match the page background via the colour controls. */


/* Card background transparency: controlled via color_card_bg = transparent */
.amh-grid-card[style*="background:transparent"],
.amh-list-row[style*="background:transparent"],
.amh-slide-card[style*="background:transparent"],
.amh-hero-mini[style*="background:transparent"],
.amh-dual-card[style*="background:transparent"] {
    border: none;
    box-shadow: none;
}

/* Badge transparency: when color_badge = transparent, hide the badge */
.amh-badge[style*="background:transparent"],
.amh-badge[style*="background: transparent"] {
    display: none !important;
}

/* ── Reset ───────────────────────────────────────────────────── */
.amh-widget,
.amh-widget *,
.amh-widget *::before,
.amh-widget *::after { box-sizing: border-box; }

.amh-widget { font-family: inherit; line-height: 1.4; }

/* ── Shared: cover ───────────────────────────────────────────── */
.amh-cover {
    display: block;
    object-fit: cover;
    background: #e2e8f0;
    flex-shrink: 0;
}

/* ── Shared: badge ───────────────────────────────────────────── */
.amh-badge {
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .4px;
    padding: 3px 7px;
    border-radius: 4px;
    width: fit-content;
    margin-bottom: 4px;
    text-transform: uppercase;
    line-height: 1;
    font-family: inherit;
    background: var(--amh-badge, #ff0038);
}

/* ── Shared: EQ bars ─────────────────────────────────────────── */
.amh-eq {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 20px;
    flex-shrink: 0;
}

.amh-eq span {
    width: 3px;
    border-radius: 2px;
    /*
     * EQ colour:
     * --amh-eq        = normal state colour (set per widget via inline style)
     * --amh-eq-hover  = colour on card hover (defaults to white so it's
     *                   always visible above the blur overlay)
     * Card EQ should default dark (#1e293b) so it's visible on white cards;
     * cover EQ always sits inside a dark overlay so white (#ffffff) is correct.
     */
    background: var(--amh-eq, #1e293b);
    animation: amh-eq-bar .9s ease-in-out infinite;
}

/* On card hover the blur overlay darkens the background, so EQ flips white */
.amh-grid-card:hover .amh-eq--card span,
.amh-list-row:hover  .amh-eq--card span {
    background: var(--amh-eq-hover, #ffffff);
}

.amh-eq span:nth-child(1) { height: 8px;  animation-delay: 0s;   }
.amh-eq span:nth-child(2) { height: 16px; animation-delay: .18s; }
.amh-eq span:nth-child(3) { height: 10px; animation-delay: .36s; }
.amh-eq span:nth-child(4) { height: 20px; animation-delay: .12s; }

@keyframes amh-eq-bar {
    0%, 100% { transform: scaleY(.35); opacity: .5; }
    50%       { transform: scaleY(1);  opacity: 1;  }
}

.amh-eq--card {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

.amh-eq-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    z-index: 2;
}

.amh-eq--cover { position: static; transform: none; }

.amh-no-animations .amh-eq span,
.amh-no-animations .amh-ticker-dot { animation: none; }

/* ── Shared: artwork blur on cards ─────────────────────────────
   JS sets --amh-card-art on each card element.
   ::before = blurred artwork fill  ::after = dark overlay       */
.amh-grid-card,
.amh-list-row,
.amh-slide-card,
.amh-hero-mini { position: relative; overflow: hidden; }

.amh-grid-card::before,
.amh-list-row::before,
.amh-slide-card::before,
.amh-hero-mini::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--amh-card-art, transparent) center / cover no-repeat;
    filter: blur(18px);
    transform: scale(1.15);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.amh-grid-card::after,
.amh-list-row::after,
.amh-slide-card::after,
.amh-hero-mini::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.42);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.amh-grid-card:hover::before,
.amh-list-row:hover::before,
.amh-slide-card:hover::before,
.amh-hero-mini:hover::before { opacity: 1; }

.amh-grid-card:hover::after,
.amh-list-row:hover::after,
.amh-slide-card:hover::after,
.amh-hero-mini:hover::after  { opacity: 1; }

.amh-grid-card > *,
.amh-list-row > *,
.amh-slide-card > *,
.amh-hero-mini > * { position: relative; z-index: 2; }

.amh-no-animations .amh-grid-card::before,
.amh-no-animations .amh-grid-card::after,
.amh-no-animations .amh-list-row::before,
.amh-no-animations .amh-list-row::after,
.amh-no-animations .amh-slide-card::before,
.amh-no-animations .amh-slide-card::after,
.amh-no-animations .amh-hero-mini::before,
.amh-no-animations .amh-hero-mini::after { transition: none; }

/* ── Shared: skeleton ────────────────────────────────────────── */
.amh-skeleton {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(0,0,0,.06);
}

.amh-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.55) 50%,
        rgba(255,255,255,0) 100%);
    background-size: 200% 100%;
    animation: amh-shimmer 1.4s infinite;
}

.amh-no-animations .amh-skeleton::after { animation: none; }

@keyframes amh-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* ══════════════════════════════════════════════════════════════
   1. HERO / DESTACADO
   ══════════════════════════════════════════════════════════════ */

.amh-hero {
    background: var(--amh-bg, #f1f5f9);
    padding: 20px;
    border-radius: 16px;
    box-sizing: border-box;
}

/* ── Main card ── */
.amh-hero-main {
    display: flex;
    align-items: center;
    gap: 20px;
    border-radius: 14px;
    padding: 22px 20px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    min-height: 130px;
    background: var(--amh-hero-main-bg, #1e293b);
}

.amh-hero-main.amh-hero-blur { background: transparent; }

.amh-hero-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--amh-hero-art, transparent) center / cover no-repeat;
    filter: blur(28px);
    transform: scale(1.2);
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
    z-index: 0;
}

.amh-hero-main.amh-hero-blur::before { opacity: 1; }

.amh-hero-main::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.38);
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
    z-index: 1;
}

.amh-hero-main.amh-hero-blur::after { opacity: 1; }

.amh-hero-cover-wrap,
.amh-hero-meta,
.amh-hero-main > .amh-eq { position: relative; z-index: 2; }

.amh-hero-cover-wrap {
    flex-shrink: 0;
    width: 90px;
    height: 90px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
}

.amh-hero-cover-wrap .amh-cover {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.amh-hero-eq-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.48);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    z-index: 3;
}

.amh-hero-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.amh-hero .amh-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--amh-title, #ffffff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.amh-hero .amh-artist {
    font-size: 13px;
    font-weight: 500;
    color: var(--amh-artist, rgba(255,255,255,.85));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Mini grid (desktop) ── */
.amh-hero-grid { display: grid; gap: 10px; }

/* ── Mini card: Opción 2 – Tarjetas apiladas (default) ── */
.amh-hero-mini {
    background: var(--amh-mini-bg, #ffffff);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: transform .2s, box-shadow .2s;
    cursor: default;
}

.amh-hero-mini:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
}

.amh-no-animations .amh-hero-mini { transition: none; }

.amh-hero-mini-cover-wrap {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 6px;
}

.amh-hero-mini .amh-cover {
    width: 44px;
    height: 44px;
    border-radius: inherit;
}

.amh-hero-mini-info {
    min-width: 0;
    flex: 1;
}

/* Title/artist colour: dark on light cards, flips white on hover */
.amh-hero-mini .amh-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--amh-title, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s;
}

.amh-hero-mini .amh-artist {
    font-size: 11px;
    color: var(--amh-artist, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s;
}

.amh-hero-mini .amh-timestamp {
    font-size: 10px;
    color: var(--amh-timestamp, #94a3b8);
    background: var(--amh-timestamp-bg, transparent);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color .2s;
}

.amh-hero-mini:hover .amh-title     { color: var( --amh-title-hover,  #ffffff ); }
.amh-hero-mini:hover .amh-artist    { color: var( --amh-artist-hover, rgba(255,255,255,.85) ); }
.amh-hero-mini:hover .amh-timestamp {
    color: var( --amh-timestamp-hover, rgba(255,255,255,.75) );
    background: var( --amh-timestamp-bg-hover, rgba(255,255,255,.2) );
}

.amh-no-animations .amh-hero-mini:hover .amh-title,
.amh-no-animations .amh-hero-mini:hover .amh-artist,
.amh-no-animations .amh-hero-mini:hover .amh-timestamp { color: inherit; }

/* ── Opción 1: Listado detallado (data-hero-list-mode="detailed") ──
   Shows timestamp right-aligned and play button, wider layout      */
.amh-hero[data-hero-list-mode="detailed"] .amh-hero-mini {
    padding: 10px 14px;
    gap: 12px;
}

.amh-hero[data-hero-list-mode="detailed"] .amh-hero-mini-cover-wrap {
    width: 54px;
    height: 54px;
    border-radius: 8px;
}

.amh-hero[data-hero-list-mode="detailed"] .amh-hero-mini .amh-cover {
    width: 54px;
    height: 54px;
}

.amh-hero[data-hero-list-mode="detailed"] .amh-hero-mini .amh-title {
    font-size: 13px;
}

.amh-hero[data-hero-list-mode="detailed"] .amh-hero-mini .amh-artist {
    font-size: 12px;
}

/* ── Hero skeleton ── */
.amh-hero-skeleton { height: 66px; background: rgba(0,0,0,.06); }

/* ── Responsive hero ── */
@media (max-width: 640px) {
    /* Main card stacks vertically */
    .amh-hero-main { flex-wrap: wrap; gap: 14px; padding: 16px; }
    .amh-hero-cover-wrap { width: 72px; height: 72px; }
    .amh-hero .amh-title { font-size: 16px; }

    /* On mobile: mini grid becomes single column Opción 2 style */
    .amh-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }

    /* On mobile always use compact stacked cards */
    .amh-hero-mini {
        padding: 10px 12px;
        gap: 12px;
    }

    .amh-hero-mini-cover-wrap { width: 50px; height: 50px; border-radius: 8px; }
    .amh-hero-mini .amh-cover { width: 50px; height: 50px; }
    .amh-hero-mini .amh-title  { font-size: 13px; }
    .amh-hero-mini .amh-artist { font-size: 12px; }

    /* Timestamp always visible on mobile */
    .amh-hero-mini .amh-timestamp { display: block; }
}

@media (max-width: 380px) {
    .amh-hero-main { padding: 14px; }
    .amh-hero-cover-wrap { width: 60px; height: 60px; }
}

/* ══════════════════════════════════════════════════════════════
   2. TICKER / MARQUEE
   ══════════════════════════════════════════════════════════════ */

.amh-ticker {
    display: flex;
    align-items: center;        /* FIX: vertically centres label + track */
    gap: 14px;
    background: var(--amh-ticker-bg, #1e293b);
    border-radius: 10px;
    padding: 10px 16px;
    overflow: hidden;
}

.amh-ticker-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--amh-label-bg, #ff0038);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    flex-shrink: 0;
    line-height: 1;
    white-space: nowrap;        /* FIX: prevent label from wrapping */
    align-self: center;         /* FIX: explicit vertical alignment */
}

.amh-ticker-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    animation: amh-pulse-dot 1.2s ease-in-out infinite;
}

@keyframes amh-pulse-dot {
    0%, 100% { opacity: 1; }
    50%       { opacity: .3; }
}

/* FIX ticker centering: the track must align its content vertically */
.amh-ticker-track {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-width: 0;
    display: flex;              /* FIX: makes the inner flex child centrable */
    align-items: center;        /* FIX: vertically centres the scrolling content */
}

.amh-ticker-inner {
    display: inline-flex;
    align-items: center;        /* FIX: items in same line vertically centred */
    white-space: nowrap;
    will-change: transform;
    line-height: 1;
}

.amh-ticker-inner.amh-ticker-ltr { animation: amh-ticker-ltr linear infinite; }
.amh-ticker-inner.amh-ticker-rtl { animation: amh-ticker-rtl linear infinite; }

@keyframes amh-ticker-ltr {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes amh-ticker-rtl {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

.amh-ticker-content {
    display: inline-flex;
    align-items: center;        /* FIX: each copy of content centred */
}

.amh-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    font-size: 13px;
    line-height: 1;
}

.amh-ticker-item img {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    vertical-align: middle;     /* FIX: inline image baseline fix */
}

/* Ticker text colors — fully independent controls:
   color_title  → --amh-title  → canción  (Color del texto)
   color_artist → --amh-artist → artista  (Color artista negrita) */
.amh-ticker-item .amh-title {
    color: var(--amh-title, #cbd5e1);
    font-weight: 400;
}

.amh-ticker-item .amh-artist {
    color: var(--amh-artist, #ffffff);
    font-weight: 700;
}

.amh-ticker-inner-sep {
    color: var(--amh-ticker-text, #64748b);
    opacity: .6;
}

.amh-ticker-sep {
    opacity: .4;
    margin-left: 8px;
    color: var(--amh-ticker-text, #64748b);
}

@media (max-width: 400px) {
    .amh-ticker { padding: 8px 10px; gap: 8px; }
    .amh-ticker-label { font-size: 10px; padding: 4px 7px; }
}


/* ── Ticker fade mask ─────────────────────────────────────────────────────
   Fix P5: add fade-out gradient on both edges of the scrolling track.
   The mask sits on .amh-ticker-track (overflow:hidden container) so the
   gradient clips correctly. Disabled with data-fade-mask="0" on the root. */

.amh-ticker-track { position: relative; } /* already set, but ensure for ::before/::after */

.amh-ticker[data-fade-mask="1"] .amh-ticker-track::before,
.amh-ticker[data-fade-mask="1"] .amh-ticker-track::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    z-index: 4;
}

.amh-ticker[data-fade-mask="1"] .amh-ticker-track::before {
    left: 0;
    background: linear-gradient( to right, var(--amh-ticker-bg, #1e293b) 0%, transparent 100% );
}

.amh-ticker[data-fade-mask="1"] .amh-ticker-track::after {
    right: 0;
    background: linear-gradient( to left, var(--amh-ticker-bg, #1e293b) 0%, transparent 100% );
}

/* ══════════════════════════════════════════════════════════════
   3. LIST / LISTADO COMPACTO
   ══════════════════════════════════════════════════════════════ */

.amh-list {
    background: var(--amh-bg, #f8fafc);
    border-radius: 16px;
    padding: 16px;
}

.amh-list-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.amh-list-items::-webkit-scrollbar { width: 4px; }
.amh-list-items::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.15);
    border-radius: 2px;
}

.amh-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--amh-row-bg, #ffffff);
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: transform .2s, box-shadow .2s;
    cursor: default;
}

.amh-list-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,.1);
}

.amh-no-animations .amh-list-row { transition: none; }

.amh-list-cover {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 6px;
}

.amh-list-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.amh-list-text { min-width: 0; flex: 1; }

.amh-list .amh-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--amh-title, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s;
}

.amh-list .amh-artist {
    font-size: 12px;
    color: var(--amh-artist, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s;
}

.amh-list-row:hover .amh-title,
.amh-list-row:hover .amh-artist { color: var( --amh-artist-hover, #ffffff ); }

.amh-no-animations .amh-list-row:hover .amh-title,
.amh-no-animations .amh-list-row:hover .amh-artist { color: inherit; }

.amh-list-row:hover .amh-play-btn svg { fill: #fff; }

.amh-timestamp {
    font-size: 11px;
    color: var(--amh-timestamp, #94a3b8);
    background: var(--amh-timestamp-bg, rgba(0,0,0,.05));
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color .2s, background .2s;
}

.amh-list-row:hover .amh-timestamp {
    color: var(--amh-timestamp-hover, rgba(255,255,255,.8));
    background: var(--amh-timestamp-bg-hover, rgba(255,255,255,.15));
}


/* Fix P3: wrapper for list cover — enables EQ overlay over the cover image */
.amh-list-cover-wrap {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
}

.amh-list-cover-wrap .amh-cover {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.amh-list-skeleton {
    height: 64px;
    background: var(--amh-row-bg, #ffffff);
    border: 1px solid rgba(0,0,0,.06);
}

@media (max-width: 380px) {
    .amh-list-cover { width: 36px; height: 36px; }
    .amh-list .amh-title  { font-size: 12px; }
    .amh-list .amh-artist { font-size: 11px; }
    .amh-timestamp { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   4. GRID / CUADRÍCULA
   ══════════════════════════════════════════════════════════════ */

.amh-grid {
    background: var(--amh-bg, #f8fafc);
    border-radius: 16px;
    padding: 20px;
}

.amh-grid-inner { display: grid; gap: 14px; }

.amh-grid-card {
    background: var(--amh-card-bg, #ffffff);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    transition: transform .2s, box-shadow .2s;
    cursor: default;
}

.amh-grid-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.amh-no-animations .amh-grid-card { transition: none; }

.amh-grid-cover-wrap {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.amh-grid-cover-wrap .amh-cover {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.amh-grid-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.amh-grid .amh-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--amh-title, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s;
}

.amh-grid .amh-artist {
    font-size: 11px;
    color: var(--amh-artist, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s;
}

.amh-grid-card:hover .amh-title,
.amh-grid-card:hover .amh-artist { color: var( --amh-artist-hover, #ffffff ); }

.amh-no-animations .amh-grid-card:hover .amh-title,
.amh-no-animations .amh-grid-card:hover .amh-artist { color: inherit; }

.amh-grid-skeleton {
    height: 92px;
    background: var(--amh-card-bg, #ffffff);
    border: 1px solid rgba(0,0,0,.06);
}

/* ══════════════════════════════════════════════════════════════
   5. SLIDE INFINITO HORIZONTAL
   ══════════════════════════════════════════════════════════════ */

.amh-slide {
    background: var(--amh-bg, #f8fafc);
    padding: 8px 0 12px;        /* vertical padding for hover lift; no horizontal so track fills full width */
    border-radius: 14px;
    overflow: visible;          /* FIX: was hidden, clipped hover translateY and edge cards */
    position: relative;
}

/* Fade mask at both edges — toggled via data-fade-mask="0" to disable */
.amh-slide::before,
.amh-slide::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 48px;
    pointer-events: none;
    z-index: 3;
    transition: opacity .2s;
}

.amh-slide::before {
    left: 0;
    background: linear-gradient(to right, var(--amh-bg, #f8fafc) 0%, transparent 100%);
    border-radius: 14px 0 0 14px;
}

.amh-slide::after {
    right: 0;
    background: linear-gradient(to left, var(--amh-bg, #f8fafc) 0%, transparent 100%);
    border-radius: 0 14px 14px 0;
}

.amh-slide[data-fade-mask="0"]::before,
.amh-slide[data-fade-mask="0"]::after { opacity: 0; }

.amh-slide-track {
    /* CSS-animation architecture — same structure as .amh-ticker-track:
       display:flex makes .amh-slide-inner a flex item so translateX(-50%)
       moves it by half its own width, not relative to the block container.
       Without display:flex the inner behaves as inline and translateX clips
       the content incorrectly, leaving most frames blank. */
    display: flex;
    align-items: center;
    overflow: hidden;
    height: calc( var(--amh-slide-card-h, 90px) + 18px );
}

/* grab cursor removed — CSS animation doesn't use scroll drag */


.amh-slide-card {
    background: var(--amh-card-bg, #ffffff);
    width:  var(--amh-slide-card-w, 280px);
    height: var(--amh-slide-card-h, 90px);
    flex-shrink: 0;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    transition: transform .2s;
}

.amh-slide-card:hover { transform: translateY(-3px); }
.amh-no-animations 
/* .amh-slide-inner: the animated strip containing 2× the card set.
   translateX(-50%) always equals exactly half the inner width → seamless loop. */
.amh-slide-inner {
    display: inline-flex;           /* shrink-wraps to content width × 2 */
    flex-direction: row;            /* explicit: cards always in a horizontal row */
    flex-wrap: nowrap;              /* never wrap to a second row */
    align-items: center;
    gap: var(--amh-slide-gap, 16px);
    height: 100%;                   /* fill the track height */
    will-change: transform;
    padding: 0 24px;                /* horizontal breathing room for edge cards */
}

.amh-slide-inner.amh-slide-ltr { animation: amh-slide-ltr linear infinite; }
.amh-slide-inner.amh-slide-rtl { animation: amh-slide-rtl linear infinite; }

@keyframes amh-slide-ltr {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes amh-slide-rtl {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* Pause on hover — JS also sets animationPlayState directly */
.amh-slide:hover .amh-slide-inner { animation-play-state: paused; }
.amh-no-animations .amh-slide:hover .amh-slide-inner { animation-play-state: running; }

.amh-slide-card { transition: none; }

.amh-slide-cover-wrap {
    position: relative;
    width:  var(--amh-slide-cover, 70px);
    height: var(--amh-slide-cover, 70px);
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.amh-slide-cover-wrap .amh-cover {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.amh-slide-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.amh-slide .amh-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--amh-title, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s;
}

.amh-slide .amh-artist {
    font-size: 12px;
    font-weight: 500;
    color: var(--amh-artist, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s;
}

.amh-slide-card:hover .amh-title,
.amh-slide-card:hover .amh-artist { color: var( --amh-artist-hover, #ffffff ); }

.amh-no-animations .amh-slide-card:hover .amh-title,
.amh-no-animations .amh-slide-card:hover .amh-artist { color: inherit; }

.amh-slide-skeleton {
    width:  var(--amh-slide-card-w, 280px);
    height: var(--amh-slide-card-h, 90px);
    background: var(--amh-card-bg, #ffffff);
    border: 1px solid rgba(0,0,0,.06);
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .amh-slide-card,
    .amh-slide-skeleton { width: 220px !important; }
    .amh-slide-cover-wrap { width: 54px !important; height: 54px !important; }
}

/* ══════════════════════════════════════════════════════════════
   7. DUAL-ROW MARQUEE
   ══════════════════════════════════════════════════════════════ */

.amh-dual {
    background: var(--amh-bg, #f8fafc);
    border-radius: 16px;
    padding: 16px 0 12px;
    overflow: visible;          /* allow hover lift */
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

/* Fade mask at both edges */
.amh-dual::before,
.amh-dual::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    pointer-events: none;
    z-index: 3;
}

.amh-dual::before {
    left: 0;
    background: linear-gradient(to right, var(--amh-bg, #f8fafc) 0%, transparent 100%);
    border-radius: 16px 0 0 16px;
}

.amh-dual::after {
    right: 0;
    background: linear-gradient(to left, var(--amh-bg, #f8fafc) 0%, transparent 100%);
    border-radius: 0 16px 16px 0;
}

.amh-dual[data-fade-mask="0"]::before,
.amh-dual[data-fade-mask="0"]::after { display: none; }

/* Each row */
.amh-dual-row {
    overflow: hidden;
    position: relative;
}

.amh-dual-inner {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    gap: 0;
}

.amh-dual-inner.amh-dual-ltr { animation: amh-dual-ltr linear infinite; }
.amh-dual-inner.amh-dual-rtl { animation: amh-dual-rtl linear infinite; }

@keyframes amh-dual-ltr {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

@keyframes amh-dual-rtl {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.amh-dual-content { display: inline-flex; align-items: center; }

/* ── Shared card base ── */
.amh-dual-card {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 4px 6px;
    background: var(--amh-card-bg, #ffffff);
    border: 1px solid rgba(0,0,0,.07);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
    cursor: default;
}

.amh-dual-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--amh-card-art, transparent) center / cover no-repeat;
    filter: blur(18px);
    transform: scale(1.15);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.amh-dual-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.42);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.amh-dual-card:hover::before { opacity: 1; }
.amh-dual-card:hover::after  { opacity: 1; }

.amh-dual-card > * { position: relative; z-index: 2; }

.amh-dual-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

.amh-no-animations .amh-dual-card { transition: none; }

.amh-no-animations .amh-dual-card::before,
.amh-no-animations .amh-dual-card::after { transition: none; }

.amh-no-animations .amh-dual-card:hover::before,
.amh-no-animations .amh-dual-card:hover::after { opacity: 0; }

/* ── Pill mode (default) ── */
.amh-dual-card.amh-dual-pill-mode {
    padding: 8px 14px;
    border-radius: 50px;
    min-width: 180px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

/* ── Card mode (matches original widget style) ── */
.amh-dual-card.amh-dual-card-mode {
    padding: 12px 14px;
    border-radius: 12px;
    min-width: 240px;
    height: 80px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

.amh-dual-card .amh-cover {
    object-fit: cover;
    background: #e2e8f0;
    flex-shrink: 0;
}

/* Pill mode: small circular cover */
.amh-dual-card.amh-dual-pill-mode .amh-cover {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

/* Card mode: square cover like original widget */
.amh-dual-card.amh-dual-card-mode .amh-cover {
    width: 52px;
    height: 52px;
    border-radius: 8px;
}

.amh-dual-card-meta {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.amh-dual-card .amh-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--amh-title, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s;
}

.amh-dual-card .amh-artist {
    font-size: 11px;
    color: var(--amh-artist, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s;
}

.amh-dual-card:hover .amh-title,
.amh-dual-card:hover .amh-artist { color: var( --amh-artist-hover, #ffffff ); }

.amh-no-animations .amh-dual-card:hover .amh-title,
.amh-no-animations .amh-dual-card:hover .amh-artist { color: inherit; }

/* Pause both rows on hover of widget */
.amh-dual:hover .amh-dual-inner { animation-play-state: paused; }
.amh-no-animations .amh-dual:hover .amh-dual-inner { animation-play-state: running; }

/* Now-playing: accent ring */
.amh-dual-card.is-now {
    border-color: var(--amh-badge, #ff0038);
    box-shadow: 0 0 0 1.5px var(--amh-badge, #ff0038);
}


/* Shadow intensity — Elementor writes the box-shadow value directly via
   the SELECT control selector. No intermediate CSS var needed.
   Default (subtle) applied here; Elementor overrides with inline style. */
.amh-grid-card,
.amh-list-row,
.amh-slide-card,
.amh-hero-mini,
.amh-dual-card {
    box-shadow: 0 1px 4px rgba(0,0,0,.06); /* default: subtle */
}

/* ── Glassmorphism effect ──────────────────────────────────────────────────
   Activated by prefix_class 'amh-glass-yes' on the Elementor widget wrapper.
   backdrop-filter runs on GPU; applied only to Hero/Grid/List/Dual (not Slide)
   to avoid compounding animation cost.
   The card bg colour must have alpha < 1 for the blur to be visible — the
   panel shows a helper note guiding the user to reduce the card bg opacity. */

.amh-glass-yes .amh-grid-card,
.amh-glass-yes .amh-list-row,
.amh-glass-yes .amh-hero-mini,
.amh-glass-yes .amh-dual-card {
    /* backdrop-filter — intensity driven by Elementor slider */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    isolation: isolate;

    /* Override the opaque --amh-card-bg with a semitransparent version.
       color-mix() preserves the user's tint color but forces 15% opacity,
       making the backdrop-filter visible. Fallback for older browsers. */
    background: rgba(255,255,255,0.15);
    background: color-mix(in srgb, var(--amh-card-bg, #ffffff) 15%, transparent);

    /* Glass border — soft white line, overridable via the border group control */
    border-color: rgba(255,255,255,0.25);
}