/**
 * Badge - Sdílené styly pro badge komponenty
 * Podporuje: animace, gradient border, hover efekty
 *
 * @package ReactWind Energy Child
 * @version 1.0.0
 */

/* =====================================================
   BADGE POLOŽKY - ZÁKLADNÍ
   ===================================================== */

.badge-item {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Levá strana - posun zleva */
.badge-item[data-side="left"] {
    transform: translateX(-20px);
}

/* Pravá strana - posun zprava */
.badge-item[data-side="right"] {
    transform: translateX(20px);
}

/* Viditelný stav (po scroll animaci) */
.badge-item.visible {
    opacity: 1;
    transform: translateX(0);
}

/* =====================================================
   BADGE STYLING
   ===================================================== */

/* DaisyUI badge úpravy */
.badge-item .badge {
    font-size: 0.8rem;
    padding: 0.65rem 0.9rem;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (min-width: 1024px) {
    .badge-item .badge {
        font-size: 0.875rem;
        padding: 0.75rem 1rem;
    }
}

.badge-item .badge svg {
    flex-shrink: 0;
}

/* Hover efekt na badge */
.badge-item .badge:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px -5px color-mix(in srgb, black 30%, transparent);
}

/* =====================================================
   GRADIENT BORDER
   ===================================================== */

/**
 * Gradient border technika:
 * Wrapper má gradient pozadí a padding rovný border-width.
 * Vnitřní badge má vlastní pozadí, které překrývá střed.
 */
.badge-gradient-border {
    --border-width: 2px;
    --border-gradient: linear-gradient(135deg, var(--color-blue-light), var(--color-pink));
    --border-radius: 9999px; /* Pill shape - default */

    position: relative;
    padding: var(--border-width);
    background: var(--border-gradient);
    border-radius: var(--border-radius);
    display: inline-flex;
    /* TASK-039: Overflow hidden zajistí, že vnitřní pozadí nepřesahuje gradient border */
    overflow: hidden;
}

.badge-gradient-border .badge {
    /* Zrušit border - gradient wrapper ho nahrazuje */
    border: none !important;
    /* Border-radius menší o border-width */
    border-radius: calc(var(--border-radius) - var(--border-width));
    /* Roztáhnout na celou šířku wrapperu */
    width: 100%;
    justify-content: flex-start;
}

/* Hover efekt pro gradient border */
.badge-gradient-border:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px -5px color-mix(in srgb, black 30%, transparent);
}

.badge-gradient-border:hover .badge {
    transform: none; /* Zrušit dvojitý scale */
}

/* =====================================================
   ANIMACE VYPNUTÉ
   ===================================================== */

[data-animations="false"] .badge-item {
    opacity: 1;
    transform: none;
}

/* =====================================================
   GRADIENT TEXT SUPPORT
   ===================================================== */

.badge-item span {
    /* Zajistí správné zobrazení gradient textu */
    display: inline-block;
}