/* ============================================
   Widget : À propos d'un événement
   ============================================ */

.cf-wc-about {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: calc(100% - clamp(220px, 28vw, 322px) - clamp(32px, 6vw, 148px));
}

/* ---- Titre principal ---- */
.cf-wc-about__title {
    font-size: 3rem;       /* 48px */
    font-weight: 700;
    line-height: 1.3;
    color: #161a2d;
    margin: 0;
}

/* ---- Section Détails ---- */
.cf-wc-about__details-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.cf-wc-about__section-title {
    font-size: 1.5rem;     /* 24px */
    font-weight: 500;
    line-height: 1.3;
    color: #000;
    margin: 0;
}

/* ---- Liste de détails ---- */
.cf-wc-about__detail-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.cf-wc-about__detail-item {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 1.125rem;   /* 18px */
    font-weight: 500 !important;
    color: #000;
}

.cf-wc-about__detail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    font-size: 16px;
    color: #000;
}

.cf-wc-about__detail-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.cf-wc-about__detail-text {
    line-height: 1.3;
    min-width: 0;
}

.cf-wc-about__detail-text a {
    color: inherit;
    text-decoration: none;
}

.cf-wc-about__detail-text a:hover {
    text-decoration: underline;
}

/* Date */
.cf-wc-about__date-highlight {
    color: #e94560;
    font-weight: 500;
}

.cf-wc-about__connector {
    color: #8f9299;
}

.cf-wc-about__time {
    color: #161a2d;
}

/* Séparateur */
.cf-wc-about__divider {
    width: 100%;
    height: 1px;
    background-color: #e5e7eb;
    flex-shrink: 0;
}

/* ---- Description ---- */
.cf-wc-about__description {
    font-size: 1rem;       /* 16px */
    font-weight: 400;
    line-height: 1.5;
    color: #000;
    width: 100%;
    margin: 0;
}

.cf-wc-about__description p {
    margin: 0 0 0.5em;
}

.cf-wc-about__description p:last-child {
    margin-bottom: 0;
}

/* ---- Line UP ---- */
.cf-wc-about__lineup-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.cf-wc-about__lineup-title {
    font-size: 1.5rem;     /* 24px */
    font-weight: 500;
    line-height: 1.3;
    color: #000;
    margin: 0;
}

.cf-wc-about__artists {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}

.cf-wc-about__artist {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.cf-wc-about__artist-image {
    width: 100px;
    height: 100px;
    border-radius: 50% !important;
    object-fit: cover;
    display: block;
}

.cf-wc-about__artist-image--placeholder {
    background-color: #d1d5db;
}

.cf-wc-about__artist-name {
    font-size: 1rem;       /* 16px */
    font-weight: 500;
    line-height: 1.3;
    color: #161a2d;
    white-space: nowrap;
}

/* ============================================
   Responsive — Tablette
   ============================================ */
@media (max-width: 1024px) {
    .cf-wc-about__title {
        font-size: 2.25rem;
    }

    .cf-wc-about__detail-item {
        font-size: 1.0625rem;
    }
}

/* ============================================
   Responsive — Mobile
   ============================================ */
@media (max-width: 767px) {
    .cf-wc-about {
        max-width: 100%;
    }

    .cf-wc-about__title {
        font-size: 1.75rem;
    }

    .cf-wc-about__section-title,
    .cf-wc-about__lineup-title {
        font-size: 1.25rem;
    }

    .cf-wc-about__detail-item {
        font-size: 1rem;
    }

    .cf-wc-about__artist-name {
        white-space: normal;
    }
}