/**
 * Style Quentin Sous-titre v0.7
 * Pilules stylisées pour badges et labels
 */

/* ==========================================================================
   CONTENEUR PRINCIPAL
   ========================================================================== */

.qba-subtitle {
    display: flex;
    margin: 1rem 0;
}

/* Alignements */
.qba-subtitle-align-left {
    justify-content: flex-start;
}

.qba-subtitle-align-center {
    justify-content: center;
}

.qba-subtitle-align-right {
    justify-content: flex-end;
}

/* ==========================================================================
   PILULE
   ========================================================================== */

.qba-subtitle-pill {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
}

/* Effet hover pour liens */
a.qba-subtitle-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   TAILLES
   ========================================================================== */

.qba-subtitle-small .qba-subtitle-pill {
    padding: 0.4rem 1rem;
    font-size: 0.7rem;
}

.qba-subtitle-medium .qba-subtitle-pill {
    padding: 0.6rem 1.5rem;
    font-size: 0.85rem;
}

.qba-subtitle-large .qba-subtitle-pill {
    padding: 0.8rem 2rem;
    font-size: 1rem;
}

/* ==========================================================================
   STYLES
   ========================================================================== */

/* Style Filled (plein) */
.qba-subtitle-filled .qba-subtitle-pill {
    background: var(--pill-color, #4a7c59);
    color: white;
    border: none;
}

.qba-subtitle-filled a.qba-subtitle-pill:hover {
    opacity: 0.9;
}

/* Style Outlined (contour) */
.qba-subtitle-outlined .qba-subtitle-pill {
    background: transparent;
    color: var(--pill-color, #4a7c59);
    border: 2px solid var(--pill-color, #4a7c59);
}

.qba-subtitle-outlined a.qba-subtitle-pill:hover {
    background: var(--pill-color, #4a7c59);
    color: white;
}

/* Style Soft (fond léger) */
.qba-subtitle-soft .qba-subtitle-pill {
    background: var(--pill-soft-bg, rgba(74, 124, 89, 0.15));
    color: var(--pill-color, #4a7c59);
    border: 1px solid var(--pill-color, #4a7c59);
    border-opacity: 0.3;
}

.qba-subtitle-soft a.qba-subtitle-pill:hover {
    background: var(--pill-color, #4a7c59);
    color: white;
}

/* ==========================================================================
   MODE ÉDITEUR
   ========================================================================== */

.editor-styles-wrapper .qba-subtitle {
    /* margin: 1.5rem 0; */
}

.editor-styles-wrapper .qba-subtitle-pill {
    cursor: text;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .qba-subtitle-small .qba-subtitle-pill {
        padding: 0.35rem 0.85rem;
        font-size: 0.65rem;
    }
    
    .qba-subtitle-medium .qba-subtitle-pill {
        padding: 0.5rem 1.2rem;
        font-size: 0.75rem;
    }
    
    .qba-subtitle-large .qba-subtitle-pill {
        padding: 0.7rem 1.5rem;
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes pillAppear {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.qba-subtitle-pill {
    animation: pillAppear 0.3s ease-out;
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .qba-subtitle-pill {
        border: 1px solid #333 !important;
        background: white !important;
        color: #333 !important;
    }
}