/* =========================================================
   GardenPortal Videoplayer
   Datei: gardenportal-video.css
   ========================================================= */

.gp-video-player {
    /* -------------------------
       Größe und Position
       ------------------------- */
    --gp-video-width: 900px;
    --gp-video-max-width: 100%;
    --gp-video-margin-top: 20px;
    --gp-video-margin-bottom: 20px;

    /* -------------------------
       Player-Rahmen
       ------------------------- */
    --gp-video-radius: 18px;
    --gp-video-border-width: 6px;
    --gp-video-border-color: #ADADAD;

    /* Player-Schatten – einzeln einstellbar */
    --gp-video-shadow-x: 1px;
    --gp-video-shadow-y: 2px;
    --gp-video-shadow-blur: 14px;
    --gp-video-shadow-spread: 0px;
    --gp-video-shadow-color: rgba(0,0,0,.28);

    /* Sammelvariable: kann weiterhin direkt überschrieben werden.
       Schatten abschalten: --gp-video-shadow: none; */
    --gp-video-shadow:
        var(--gp-video-shadow-x)
        var(--gp-video-shadow-y)
        var(--gp-video-shadow-blur)
        var(--gp-video-shadow-spread)
        var(--gp-video-shadow-color);

    --gp-video-bg: #000;

    /* -------------------------
       Bedienleiste
       ------------------------- */
    --gp-video-controls-bg: rgba(20, 35, 24, .92);
    --gp-video-controls-gap: 10px;
    --gp-video-controls-padding: 10px 12px;

    /* -------------------------
       Buttons – Standard
       ------------------------- */
    --gp-video-button-width: 42px;
    --gp-video-button-height: 38px;
    --gp-video-button-radius: 12px;
    --gp-video-button-border: 2px solid rgba(255,255,255,.28);
    --gp-video-button-color: #fff;
    --gp-video-button-font-size: 18px;

    /* Farbverlauf, falls KEINE Grafik verwendet wird */
    --gp-video-button-bg:
        linear-gradient(180deg, #5DA94A 0%, #315C3C 100%);

    /* -------------------------------------------------------
       OPTIONALE BUTTON-GRAFIK
       Standardmäßig wird der Farbverlauf verwendet.
       Eine eigene Grafik ersetzt den Verlauf vollständig.

       Beispiel:
       --gp-video-button-image: url("images/textures/metall-gold.webp");
       ------------------------------------------------------- */
    --gp-video-button-image: var(--gp-video-button-bg);
    --gp-video-button-image-size: cover;
    --gp-video-button-image-position: center;
    --gp-video-button-image-repeat: no-repeat;

    --gp-video-button-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        1px 2px 5px rgba(0,0,0,.28);

    --gp-video-button-hover-filter: brightness(1.60);
    --gp-video-button-active-transform: translateY(1px);

    /* -------------------------
       Fortschrittsanzeige
       ------------------------- */
    --gp-video-accent: #699D42;
    --gp-video-range-bg: rgba(255,255,255,.28);

    /* -------------------------
       Text / Zeit
       ------------------------- */
    --gp-video-time-color: #fff;
    --gp-video-time-font-size: 13px;
    --gp-video-time-min-width: 92px;

    width: min(var(--gp-video-width), var(--gp-video-max-width));
    margin:
        var(--gp-video-margin-top)
        auto
        var(--gp-video-margin-bottom);

    box-sizing: border-box;
}

.gp-video-frame {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: var(--gp-video-bg);
    border: var(--gp-video-border-width) solid var(--gp-video-border-color);
    border-radius: var(--gp-video-radius);
    box-shadow: var(--gp-video-shadow);
}

.gp-video-frame video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    background: var(--gp-video-bg);
}

/* Standard-Browser-Steuerung wird ausgeblendet.
   Fällt JavaScript aus, aktiviert das JS sie automatisch wieder. */
.gp-video-frame video::-webkit-media-controls {
    display: none !important;
}

.gp-video-controls {
    display: grid;
    grid-template-columns: auto auto minmax(80px, 1fr) auto auto auto;
    align-items: center;
    gap: var(--gp-video-controls-gap);
    padding: var(--gp-video-controls-padding);
    background: var(--gp-video-controls-bg);
    box-sizing: border-box;
}

.gp-video-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--gp-video-button-width);
    height: var(--gp-video-button-height);
    padding: 0;
    border: var(--gp-video-button-border);
    border-radius: var(--gp-video-button-radius);
    color: var(--gp-video-button-color);
    font-size: var(--gp-video-button-font-size);
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--gp-video-button-shadow);
    background-color: #315C3C;
    /* Eigene Grafik ODER Standardverlauf – keine überlagernden Ebenen. */
    background-image: var(--gp-video-button-image);
    background-size: var(--gp-video-button-image-size);
    background-position: var(--gp-video-button-image-position);
    background-repeat: var(--gp-video-button-image-repeat);
    transition:
        filter .18s ease,
        transform .12s ease,
        box-shadow .18s ease;
}

.gp-video-btn:hover {
    filter: var(--gp-video-button-hover-filter);
}

.gp-video-btn:active {
    transform: var(--gp-video-button-active-transform);
}

.gp-video-btn:focus-visible,
.gp-video-range:focus-visible {
    outline: 3px solid rgba(214,232,200,.85);
    outline-offset: 2px;
}

.gp-video-range {
    width: 100%;
    min-width: 0;
    accent-color: var(--gp-video-accent);
    cursor: pointer;
}

.gp-video-time {
    min-width: var(--gp-video-time-min-width);
    color: var(--gp-video-time-color);
    font: 600 var(--gp-video-time-font-size)/1.2 Arial, sans-serif;
    text-align: center;
    white-space: nowrap;
}

.gp-video-volume-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 125px;
}

.gp-video-volume {
    width: 76px;
}

.gp-video-player.is-fullscreen {
    width: 100%;
    max-width: none;
    margin: 0;
}

.gp-video-player.is-fullscreen .gp-video-frame {
    height: 100vh;
    border: 0;
    border-radius: 0;
}

.gp-video-player.is-fullscreen video {
    height: calc(100vh - 62px);
    max-height: none;
}

@media (max-width: 700px) {
    .gp-video-controls {
        grid-template-columns: auto minmax(70px, 1fr) auto auto;
        gap: 7px;
    }

    .gp-video-time {
        min-width: 78px;
        font-size: 12px;
    }

    .gp-video-volume-wrap {
        display: none;
    }
}

@media (max-width: 460px) {
    .gp-video-player {
        --gp-video-radius: 12px;
        --gp-video-button-width: 38px;
        --gp-video-button-height: 34px;
    }

    .gp-video-controls {
        grid-template-columns: auto 1fr auto;
    }

    .gp-video-time {
        display: none;
    }
}