/*
 * FifoConsult Responsive - Mobile HYRO
 * Mobile portrait HYRO scene corrections.
 */

@media (max-width: 700px) and (orientation: portrait) {
    .fc-hyro-teaser__scene--film .fc-hyro-teaser__calibration {
        display: none;
    }

    .fc-hero {
        background-image: url("../../../img/responsive/mobile/hyro-background-mobile.png");
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: no-repeat;
    }

    .fc-hero-breath-video {
        display: none;
    }

    .fc-hyro-teaser__scene,
    .fc-hyro-teaser__scene--architecture,
    .fc-hyro-teaser__scene--value {
        left: 50%;
        right: auto;
        top: 44%;
        width: calc(100vw - 36px);
        max-width: 360px;
        transform: translate(-50%, -50%);
        text-align: center;
        justify-items: center;
        row-gap: 0;
    }

    .fc-hyro-teaser__scene--trust .fc-hyro-teaser__title,
    .fc-hyro-teaser__scene--film .fc-hyro-teaser__title,
    .fc-hyro-teaser__scene--architecture .fc-hyro-teaser__title,
    .fc-hyro-teaser__scene--value .fc-hyro-teaser__title {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        align-items: center;
        width: 100%;
        max-width: 100%;
        margin: 0;
        gap: 0;
        text-align: center;
        white-space: normal;
    }

    .fc-hyro-teaser__scene--trust .fc-hyro-teaser__title span,
    .fc-hyro-teaser__scene--film .fc-hyro-teaser__title span,
    .fc-hyro-teaser__scene--architecture .fc-hyro-teaser__title span,
    .fc-hyro-teaser__scene--value .fc-hyro-teaser__title span {
        display: block;
        width: max-content;
        max-width: 100%;
        white-space: nowrap;
    }

    .fc-hyro-teaser__scene--trust .fc-hyro-teaser__title,
    .fc-hyro-teaser__scene--film .fc-hyro-teaser__title,
    .fc-hyro-teaser__scene--value .fc-hyro-teaser__title {
        font-size: clamp(30px, 9.4vw, 40px);
        line-height: 0.88;
    }

    .fc-hyro-teaser__scene--architecture .fc-hyro-teaser__title {
        font-size: clamp(26px, 8.2vw, 35px);
        line-height: 0.88;
    }

    .fc-hyro-teaser__subtitle,
    .fc-hyro-teaser__scene--value .fc-hyro-teaser__subtitle {
        width: 100%;
        max-width: 320px;
        margin: 14px auto 0;
        font-size: clamp(13px, 3.4vw, 15px);
        font-weight: 400;
        line-height: 1.38;
        text-align: center;
    }

    .fc-hyro-teaser__micro,
    .fc-hyro-teaser__pillars {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        max-width: 320px;
        margin: 16px auto 0;
        column-gap: 10px;
        row-gap: 12px;
        align-items: center;
        justify-items: center;
        justify-content: center;
    }

    .fc-hyro-teaser__micro span,
    .fc-hyro-teaser__pillars span {
        min-width: 0;
        max-width: 100%;
        margin: 0;
        font-size: clamp(9px, 2.7vw, 11px);
        line-height: 1.25;
        text-align: center;
        white-space: nowrap;
    }

    .fc-hyro-teaser__scene--value .fc-hyro-teaser__label {
        order: 1;
    }

    .fc-hyro-teaser__scene--value .fc-hyro-teaser__title {
        order: 2;
    }

    .fc-hyro-teaser__scene--value .fc-hyro-teaser__subtitle {
        order: 3;
    }

    .fc-hyro-teaser__scene--value .fc-hyro-teaser__pillars {
        order: 4;
    }

    .fc-hyro-teaser__scene--value {
        padding-top: 0;
    }

    .fc-hyro-teaser__scene .fc-hyro-teaser__label,
    .fc-hyro-teaser__scene .fc-hyro-teaser__micro,
    .fc-hyro-teaser__scene .fc-hyro-teaser__pillars {
        display: none;
    }
}