/* =========================================================
   ARABIC VIDEO MOSAIC – DESIGN
   ========================================================= */

.ar-video-mosaic {
    border-top: 8px solid #c89b3c;
    width: 100%;
    max-width: 1500px;
    margin: 70px auto;
    padding: 0 25px;
    box-sizing: border-box;
}

.ar-video-mosaic-header {
    display: block !important;
    width: 100% !important;

    margin-bottom: 30px !important;

    position: relative !important;
    z-index: 20 !important;

    text-align: right !important;
}

.ar-video-mosaic-header h2 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.ar-video-mosaic-header span {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.ar-video-mosaic-line {
    display: block !important;
}

/* =========================================================
   GRID
   ========================================================= */

.ar-video-mosaic-grid {
    display: grid;

    grid-template-columns: 1.30fr 0.7fr 0.7fr;
    grid-template-rows: 260px 260px;

    gap: 18px;

    direction: ltr;

    align-items: stretch;
}


/* =========================================================
   KARTEN
   ========================================================= */

.ar-video-card {
    position: relative;

    min-width: 0;

    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.10);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

    direction: rtl;
}

.ar-video-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   GROSSE KARTE
   ========================================================= */

.ar-video-card-large {
    grid-column: 1;
    grid-row: 1 / 3;
}


/* =========================================================
   OBERE RECHTE KARTE
   ========================================================= */

.ar-video-card-top {
    grid-column: 2 / 4;
    grid-row: 1;
}


/* =========================================================
   UNTERE KARTEN
   ========================================================= */

.ar-video-card-small {
    grid-row: 2;
}


/* =========================================================
   MEDIA
   ========================================================= */

.ar-video-card-media {
    width: 100%;
    height: calc(100% - 72px);

    overflow: hidden;

    background: #f3f3f3;
}

.ar-video-card-media video,
.ar-video-card-media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================================
   VIDEO-CONTENT
   ========================================================= */

.ar-video-card-content {
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 12px 20px;

    box-sizing: border-box;

    background: #ffffff;

    text-align: center;
}

.ar-video-card-content h3 {
    margin: 0;

    color: #083f2b;

    font-size: 20px;
    font-weight: 700;

    line-height: 1.4;
}


/* Kleine Karten */

.ar-video-card-small .ar-video-card-content {
    height: 65px;
}

.ar-video-card-small .ar-video-card-content h3 {
    font-size: 17px;
}


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

@media (max-width: 900px) {

    .ar-video-mosaic {
        padding: 0 18px;
    }

    .ar-video-mosaic-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 280px 220px;
    }

    .ar-video-card-large {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .ar-video-card-top {
        grid-column: 1;
        grid-row: 2;
    }

    .ar-video-card-small {
        grid-column: 2;
        grid-row: 2;
    }
}


@media (max-width: 600px) {

    .ar-video-mosaic {
        padding: 0 15px;
    }

    .ar-video-mosaic-grid {
        display: flex;
        flex-direction: column;

        gap: 18px;
    }

    .ar-video-card,
    .ar-video-card-large,
    .ar-video-card-top,
    .ar-video-card-small {
        width: 100%;
        height: 280px;
    }

    .ar-video-card-media {
        height: calc(100% - 65px);
    }

    .ar-video-card-content {
        height: 65px;
    }
}

/* =========================================================
   AR VIDEO MOSAIC – TITEL AUF DEM BILD
   ========================================================= */

.ar-video-card {
    position: relative;
}


/* =========================================================
   AR VIDEO CARD – TITEL DIREKT AUF DEM BILD
   ========================================================= */

.ar-video-card {
    position: relative !important;
    overflow: hidden !important;
}


/* Bild nimmt die komplette Karte ein */

.ar-video-card-media {
    position: absolute !important;

    inset: 0 !important;

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

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

    overflow: hidden !important;
}


/* Video / Bild */

.ar-video-card-media video,
.ar-video-card-media img {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;
}


/* Weißer Inhaltsbereich verschwindet */

.ar-video-card-content {
    position: absolute !important;

    right: 20px !important;
    left: 20px !important;
    bottom: 18px !important;

    width: auto !important;
    height: auto !important;

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

    background: transparent !important;

    z-index: 20 !important;

    display: block !important;

    text-align: right !important;
}


/* Titel */

.ar-video-card-content h3 {
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 22px !important;
    font-weight: 700 !important;

    line-height: 1.4 !important;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.85);
}

.ar-video-card-media::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 45%;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75),
        rgba(0, 0, 0, 0)
    );

    z-index: 5;

    pointer-events: none;
}


/* Titel */

.ar-video-card-content h3 {
    margin: 0 !important;

    color: #ffffff !important;

    font-size: 22px;
    font-weight: 700;

    line-height: 1.4;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.75);
}

/* =========================================
   PLAY BUTTON – MITTIG
   ========================================= */

.ar-video-card-media {
    position: relative;
}

.ar-video-card-media::after {
    content: "▶";

    position: absolute !important;

    top: 50% !important;
    left: 50% !important;
    right: auto !important;

    transform: translate(-50%, -50%) !important;

    width: 72px;
    height: 72px;

    border-radius: 50%;

    background: rgba(8, 63, 43, 0.88);
    color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 30px;
    padding-left: 4px;

    z-index: 10;
    pointer-events: none;
}

.ar-video-card.is-playing .ar-video-card-media::after {
    display: none;
}