/* Shortcode [flip_in_the_media] — grille de cards mentions presse.
   Le bouton .flip-btn--join est stylé globalement dans style.css. */

.flip-in-the-media {
    --flip-in-the-media-cols: 3;
    --flip-in-the-media-gap: var(--Spacing-bloc, 32px);

    &:where([data-cols="1"]) { --flip-in-the-media-cols: 1; }
    &:where([data-cols="2"]) { --flip-in-the-media-cols: 2; }
    &:where([data-cols="3"]) { --flip-in-the-media-cols: 3; }
    &:where([data-cols="4"]) { --flip-in-the-media-cols: 4; }

    display: grid;
    grid-template-columns: repeat(var(--flip-in-the-media-cols), minmax(0, 1fr));
    gap: var(--flip-in-the-media-gap);
    align-self: stretch;

    .flip-in-the-media-card {
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        box-sizing: border-box;
        height: 100%;
    }

    .flip-in-the-media-card__media {
        aspect-ratio: 16/9;
        max-height: 220px;
        background: #0a1f38;
    }

    .flip-in-the-media-card__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .flip-in-the-media-card__content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 16px;
        padding: 24px;
        flex: 1 1 auto;
    }

    .flip-in-the-media-card__body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .flip-in-the-media-card__badge {
        display: inline-block;
        padding: 6px 14px;
        border-radius: 999px;
        background: rgba(0, 118, 255, 0.1);
        color: #0076FF;
        font-family: var(--font-family-body, "DM Sans");
        font-size: 13px;
        font-weight: 500;
        line-height: 1.4;
    }

    .flip-in-the-media-card__title {
        margin: 0;
        color: var(--Neutral-Main-neutral-900, #232529);
        font-family: var(--font-family-body, "DM Sans");
        font-size: var(--font-size-h6, 20px);
        font-weight: 700;
        line-height: 140%;
    }

    .flip-in-the-media-card__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-top: 16px;
        border-top: 1px solid rgba(35, 37, 41, 0.08);
    }

    .flip-in-the-media-card__date {
        color: var(--Neutral-Main-neutral-600, #6a6f78);
        font-family: var(--font-family-body, "DM Sans");
        font-size: 14px;
        font-weight: 400;
        line-height: 150%;
    }

    @media (max-width: 1280px) {
        --flip-in-the-media-cols: 2;

        .flip-in-the-media-card__content {
            gap: 12px;
            padding: 18px;
        }

        .flip-in-the-media-card__body {
            gap: 10px;
        }

        .flip-in-the-media-card__title {
            font-size: 18px;
        }
    }

    @media (max-width: 700px) {
        --flip-in-the-media-cols: 1;

        .flip-in-the-media-card__content {
            padding: 16px;
            gap: 10px;
        }

        .flip-in-the-media-card__footer {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
            padding-top: 12px;
        }

        .flip-in-the-media-card__title {
            font-size: 17px;
        }
    }
}

/* Bouton CTA jaune — même structure que .flip-event-featured__cta mais palette
   .flip-btn--join. Flèche SVG fournie par le ::after global de style.css. */
.flip-in-the-media-card__btn {
    background: #FFD166;
    color: #04221D;
    --liquid-fill: #F4F5F5;
    width: fit-content;
    font-size: 0.9rem !important;
    padding-bottom: 0.55em !important;
    padding-right: 2em !important;
    padding-left: 0.7em !important;
    border: 2px solid #FFD166;

    &:hover {
        background: #FFD166;
        color: #04221D;
        border-color: #FFD166;
    }
}