/*
 * ECCOPAPER FAMILY MENU
 * Global responsive title-wrap correction.
 *
 * Scope:
 * .ecco-family-menu only.
 *
 * Preserve:
 * - card background
 * - green right edge
 * - border
 * - shadow
 * - image circle
 * - grid breakpoints
 *
 * Correct:
 * - long semantic title lines may wrap naturally
 * - card decorative edge remains clipped correctly
 */


.ecco-family-menu__card {
    min-width: 0 !important;
    overflow: hidden !important;
}


.ecco-family-menu__title {
    min-width: 0 !important;

    max-width: 100%;

    white-space: normal !important;

    text-wrap: wrap !important;

    overflow: visible !important;
}


.ecco-family-menu__title-line {
    display: block;

    width: 100%;

    min-width: 0;

    max-width: 100%;

    white-space: normal !important;

    overflow: visible !important;

    text-overflow: clip !important;

    overflow-wrap: normal;

    word-break: normal;

    hyphens: none;
}


/*
 * Laptop refinement.
 * Preserve the original card geometry.
 * Only slightly optimise long second lines.
 */

@media
    (min-width: 1181px)
    and
    (max-width: 1599px) {

    .ecco-family-menu__title-line--2 {
        font-size: 13px;

        line-height: 1.17;

        letter-spacing: -0.02em;
    }
}


/*
 * Mobile:
 * wrapping is allowed instead of clipping.
 */

@media (max-width: 767px) {

    .ecco-family-menu__title {
        white-space: normal !important;
    }


    .ecco-family-menu__title-line {
        white-space: normal !important;

        overflow-wrap: normal;

        word-break: normal;
    }
}


/*
 * Very narrow mobile:
 * keep words intact whenever possible.
 */

@media (max-width: 390px) {

    .ecco-family-menu__title-line {
        hyphens: none;

        word-break: normal;
    }
}