/**
 * Info Band Module - Styles
 */

/* ================================================
   BASE
   ================================================ */

.cj-infoband {
    padding: 32px 6%;
}

.cj-infoband p {
    margin: 0;
    font-size: clamp(17px, 1.4vw, 21px);
    line-height: 1.5;
}

.cj-infoband strong {
    display: block;
    margin-bottom: 8px;
    font-family: "Saira Condensed", sans-serif;
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 900;
    text-transform: uppercase;
}

/* ================================================
   ICÔNE
   ================================================ */

.cj-infoband__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 12px;
    font-size: 18px;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

/* ================================================
   STYLES DE COULEUR
   ================================================ */

/* Orange */
.cj-infoband--orange {
    background: #eb5d0f;
}

.cj-infoband--orange p,
.cj-infoband--orange strong {
    color: #0b0a09;
}

.cj-infoband--orange .cj-infoband__icon {
    background: #0b0a09;
    color: #eb5d0f;
}

/* Sombre */
.cj-infoband--dark {
    background: #0b0a09;
}

.cj-infoband--dark p {
    color: #d7d0c6;
}

.cj-infoband--dark strong {
    color: #f5f2ec;
}

.cj-infoband--dark .cj-infoband__icon {
    background: #eb5d0f;
    color: #0b0a09;
}

/* Clair */
.cj-infoband--light {
    background: #f5f2ec;
}

.cj-infoband--light p {
    color: #3d3a35;
}

.cj-infoband--light strong {
    color: #15130f;
}

.cj-infoband--light .cj-infoband__icon {
    background: #eb5d0f;
    color: #0b0a09;
}

/* ================================================
   ALIGNEMENT
   ================================================ */

.cj-infoband--center {
    text-align: center;
}

.cj-infoband--center p {
    max-width: 800px;
    margin: 0 auto;
}

.cj-infoband--left {
    text-align: left;
}

.cj-infoband--left p {
    max-width: 900px;
}

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

@media (max-width: 700px) {
    .cj-infoband {
        padding: 28px 5%;
    }

    .cj-infoband__icon {
        width: 28px;
        height: 28px;
        font-size: 16px;
        margin-left: 10px;
    }
}