/*
 * East Talent
 * Artikel-Video-/Vergleichstabellen-Test
 *
 * Ausschließlich:
 * /artikel/personalvermittlung-osteuropa.html
 *
 * Keine Footer-Regeln.
 * Keine globalen Änderungen.
 */


/* =========================================================
   GEMEINSAMER BEREICH
   ========================================================= */

.et-article-media-test {
    position: relative;
    overflow: visible;

    background:
        linear-gradient(
            rgba(35, 15, 55, 0.68),
            rgba(35, 15, 55, 0.68)
        ),
        url("/images/jobs-list-background.jpg")
        center center / cover no-repeat;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
}


/* =========================================================
   FRISCH NACH DEM PFLICHTVIDEO
   Homepage-artiger Hero
   ========================================================= */

.et-article-media-test--fresh {
    min-height: 43rem;
}

.et-article-media-test--fresh .header-content {
    min-height: 43rem;
}


/* =========================================================
   SPÄTERER BESUCH
   Video/Tabelle direkt nach dem Artikel-Hero
   ========================================================= */

.et-article-media-test--revisit {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
}

.et-article-media-test--revisit .header-content {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 4rem !important;
    padding-bottom: 5.5rem !important;
}


/* =========================================================
   DESKTOP
   Gleiche Geometrie wie Homepage
   ========================================================= */

@media (min-width: 1200px) {

    .et-article-media-test {
        --et-article-video-width:
            min(65.75rem, calc(53.5vw - 2.5rem));
    }

    /*
     * Beim frischen Zustand bleibt die komplette
     * Homepage-artige 2-Spalten-Struktur bestehen.
     */
    .et-article-media-test--fresh
    .header-content > .container {
        width:
            calc(
                var(--et-article-video-width)
                + clamp(3rem, 3.5vw, 4.5rem)
                + clamp(31rem, 28vw, 36rem)
            ) !important;

        max-width: none !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .et-article-media-test--fresh
    .header-content > .container > .row {
        display: grid !important;

        grid-template-columns:
            var(--et-article-video-width)
            clamp(31rem, 28vw, 36rem);

        column-gap:
            clamp(3rem, 3.5vw, 4.5rem);

        align-items: center;

        width: 100% !important;

        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .et-article-media-test--fresh
    .homepage-video-container {
        grid-column: 1;

        position: relative !important;

        width: var(--et-article-video-width) !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }

    .et-article-media-test--fresh
    .et-article-media-test__copy {
        grid-column: 2;

        width: clamp(31rem, 28vw, 36rem) !important;
        max-width: none !important;

        margin-left: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;

        flex: none !important;
    }


    /*
     * Späterer Besuch:
     * Video/Tabelle allein, aber in exakt derselben
     * Breite wie der Medienblock auf der Homepage.
     */
    .et-article-media-test--revisit
    .header-content > .container {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .et-article-media-test--revisit
    .header-content > .container > .row {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
    }

    .et-article-media-test--revisit
    .homepage-video-container {
        position: relative !important;

        width: var(--et-article-video-width) !important;
        max-width: none !important;

        margin-right: auto !important;
        margin-left: auto !important;

        padding: 0 !important;

        transform: none !important;
    }

    .et-article-media-test--revisit
    .et-article-media-test__copy {
        display: none !important;
    }
}


/* =========================================================
   VIDEO
   ========================================================= */

.et-article-media-test .homepage-hero-video {
    display: block;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;

    border-radius: 1rem;
}


/* =========================================================
   VERGLEICHSTABELLE
   Homepage-Styling vollständig beibehalten
   ========================================================= */

.et-article-media-test
.homepage-video-container.is-comparison-visible {
    display: block !important;

    height: auto !important;
    aspect-ratio: auto !important;

    overflow: visible !important;
}

.et-article-media-test
.homepage-video-container.is-comparison-visible
.homepage-hero-video,

.et-article-media-test
.homepage-video-container.is-comparison-visible
.homepage-video-start-overlay {
    display: none !important;
}


/*
 * Wichtig:
 * Die Tabelle bekommt KEINE eigene schmalere Maximalbreite.
 * Sie füllt exakt denselben Mediencontainer wie auf der Homepage.
 */
.et-article-media-test
.homepage-recruiting-comparison {
    width: 100% !important;
    max-width: none !important;

    margin-right: 0 !important;
    margin-left: 0 !important;
}


/* =========================================================
   BUTTON UNTER VIDEO / TABELLE
   ========================================================= */

.et-article-media-test
.homepage-recruiting-comparison__reopen {
    z-index: 4 !important;
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 1199px) {

    .et-article-media-test--fresh,
    .et-article-media-test--fresh .header-content {
        min-height: 0 !important;
    }

    .et-article-media-test .header-content {
        padding-top: 3rem !important;
        padding-bottom: 5rem !important;
    }

    .et-article-media-test
    .header-content > .container {
        width: 100% !important;
        max-width: 100% !important;

        padding-right: 15px !important;
        padding-left: 15px !important;
    }

    .et-article-media-test
    .header-content > .container > .row {
        display: block !important;

        width: 100% !important;

        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .et-article-media-test
    .homepage-video-container {
        position: relative !important;

        width: min(100%, 65.75rem) !important;
        max-width: 65.75rem !important;

        margin-right: auto !important;
        margin-left: auto !important;

        padding: 0 !important;

        transform: none !important;
    }

    .et-article-media-test--revisit
    .et-article-media-test__copy {
        display: none !important;
    }

    .et-article-media-test--fresh
    .et-article-media-test__copy {
        display: block !important;

        width: min(100%, 42rem) !important;

        margin: 2rem auto 0 !important;

        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}


@media (max-width: 767px) {

    .et-article-media-test .header-content {
        padding-top: 1.5rem !important;
        padding-bottom: 5rem !important;
    }

    .et-article-media-test
    .homepage-video-container {
        width: 100% !important;
    }
}