/* assets/css/avada-elements/monthly-editorial.css */

.ssn-monthly-editorial {
    --ssn-me-accent: #21577D;
    display: flex;
    align-items: stretch;
    gap: 0;
    position: relative;
    background-color: var(--awb-color1, #fff);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 32px;
    box-shadow: 0 3px 30px 0 rgba(0, 0, 0, 0.1);
    transition: transform 250ms ease-in-out, box-shadow 250ms ease-in-out;
}

.ssn-monthly-editorial:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 22px 0 rgba(0, 0, 0, 0.16);
}

/* Flèche d'entrée, reprise à l'identique des cartes de dossiers. */
.ssn-monthly-editorial::before {
    content: '\f061';
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    width: 43px;
    height: 43px;
    padding-left: 18px;
    padding-top: 3px;
    box-sizing: border-box;
    background-color: var(--awb-color4, #5ec689);
    color: var(--awb-color7, #21577d);
    border-bottom-left-radius: 90%;
    transform: translateY(-55px);
    transition: transform 250ms ease-in-out;
    z-index: 5;
}

.ssn-monthly-editorial:hover::before {
    transform: translateY(0);
}

.ssn-monthly-editorial__media {
    flex: 0 0 50%;
    display: block;
    line-height: 0;
    overflow: hidden;
    border-bottom-right-radius: 75px;
    transition: border-radius 250ms ease-in-out;
}

.ssn-monthly-editorial:hover .ssn-monthly-editorial__media {
    border-bottom-right-radius: 110px;
}

.ssn-monthly-editorial__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ssn-monthly-editorial__body {
    flex: 1 1 auto;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
}

.ssn-monthly-editorial__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ssn-me-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    /* Sans line-height serré, la boîte de ligne héritée du thème est bien plus
       haute que les capitales : la puce, centrée sur cette boîte, tombe alors
       sous le centre optique du texte. */
    line-height: 1;
}

.ssn-monthly-editorial__label::before {
    content: '';
    flex: 0 0 auto;
    align-self: center;
    width: 8px;
    height: 8px;
    background-color: var(--ssn-me-accent);
}

/* Les titres de cartes n'utilisent pas la typo h2 du thème mais la
   typographie personnalisée 1 : on reprend exactement ses variables plutôt
   que de recopier des valeurs, pour rester aligné si elle change. */
.fusion-body .ssn-monthly-editorial .ssn-monthly-editorial__title {
    margin: 0;
    font-family: var(--awb-custom_typography_1-font-family);
    font-size: var(--awb-custom_typography_1-font-size);
    font-weight: var(--awb-custom_typography_1-font-weight);
    font-style: var(--awb-custom_typography_1-font-style);
    letter-spacing: var(--awb-custom_typography_1-letter-spacing);
    text-transform: var(--awb-custom_typography_1-text-transform);
    line-height: var(--awb-custom_typography_1-line-height);
}

.fusion-body .ssn-monthly-editorial .ssn-monthly-editorial__title a {
    color: var(--awb-color7);
}

.ssn-monthly-editorial__excerpt {
    margin: 0;
    color: #4a5666;
    font-size: 14px;
    line-height: 1.5;
    /* Garde-fou : trois lignes maximum quelle que soit la longueur du chapô. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Le balisage vient de ssn_meta ; restent deux règles du thème scopées à
   `.fusion-post-cards`, que notre bloc n'a pas comme ancêtre. On les reprend
   à l'identique — y compris leur spécificité et leurs `!important`, sans quoi
   elles perdent contre le socle du thème :
     - `.fusion-body .fusion-meta-tb` (0,2,0) impose la taille, l'interligne et
       la couleur des liens ;
     - `.fusion-body .fusion-meta-tb > span:not(.fusion-meta-tb-sep)` (0,4,0)
       force un fond transparent et un padding nul sur chaque span.
   Ni la taille ni la famille ne sont redéclarées : elles viennent du socle,
   donc identiques à celles des cartes. */
.fusion-body .ssn-monthly-editorial .ssn-monthly-editorial__meta {
    border-bottom: 0;
    padding-top: 10px;
    padding-bottom: 0;
    color: var(--awb-color7);
    line-height: 1.5em;
}

.fusion-body .ssn-monthly-editorial .fusion-tb-categories {
    background-color: #f4fbff !important;
    padding: 3px 6px !important;
    border-radius: 8px;
    color: var(--awb-color7);
}

@media (max-width: 800px) {
    .ssn-monthly-editorial {
        flex-direction: column;
    }

    .ssn-monthly-editorial__media {
        flex-basis: auto;
        border-bottom-right-radius: 0;
    }

    .ssn-monthly-editorial:hover .ssn-monthly-editorial__media {
        border-bottom-right-radius: 0;
    }

    .ssn-monthly-editorial__body {
        padding: 22px 20px;
    }
}