.video-background-wrapper {
    position: relative;
    width: 100%;
    height: 90vh; /* wrapper */
    overflow: hidden;
}
.video-background-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    /* video középre+zoom */
    transform: translate(-50%, -50%) scale(1.4);

    /* cover */
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;

    pointer-events: none; /* a videóra ne lehessen kattintani */
    z-index: 1;
    will-change: transform;
}
.video-logo {
    position: absolute;
    top: 20px; /* logó pozíció */
    left: 20px; /* logó pozíció */
    max-width: 350px; /* logó méret */
    z-index: 6;
}
/* sötét overlay a videó fölé, a szöveg alá */
.video-overlay {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    background: linear-gradient(180deg, rgba(5,13,31,0.55) 0%, rgba(8,16,34,0.6) 40%, rgba(8,16,34,0.75) 100%);
    z-index: 3; /* a videó fölött, de a logó és szöveg alatt */
    pointer-events: none;
    /* enyhe desaturate és kontraszt csökkentés */
    backdrop-filter: saturate(0.8) contrast(0.9);
}

.sponsors {
    display: flex;
    flex-wrap: wrap; /* wrap on small screens */
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100%;
    gap: 12px; /* spacing between items */
    box-sizing: border-box;
    padding: 0 12px;
    margin-bottom: 24px;
}

/* Each sponsor container should flex equally so the row never exceeds 100% */
.sponsordiv {
    flex: 1 1 0; /* grow/shrink equally */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 8px;
    box-sizing: border-box;
    min-width: 0; /* allow images to shrink inside flex items */
    overflow: hidden; /* prevent oversized images from poking out */
}

/* Images scale to their container but keep aspect ratio. Limit height to control total visual size. */
.sponsordiv img, .sponsors img {
    max-width: 100%;
    height: auto;
    display: block;
    max-height: 64px; /* adjust this to taste */
    object-fit: contain;
}

/* Make the fourth sponsor (hrfest10) larger so it stands out if its source image is small */
.sponsor-4 img {
    max-height: 140px; /* reduce from 200 to avoid large width */
    max-width: 100%;
    width: auto;
    display: block;
    object-fit: contain;
    margin-right: 24px;
}

/* MOBIL NÉZET */
@media (max-width: 800px) {
    /* mobil: Videó div benne ikonnal szöveggel*/
    .video-background-wrapper {
        height: 77vh; /* mobil crop */
    }
    
    .video-background-iframe {
        /* mobil video zoom */
        transform: translate(-50%, -50%) scale(3.0);
        min-width: 100%;
        min-height: 100%;
    }

    .video-logo {
          /* mobil logó: középre */
        position: absolute;
        top: 100px;
        left: 50%;
        transform: translateX(-50%);
        max-width: 320px;
        z-index: 3;
        pointer-events: none;
    }
}

/* Smaller screens: reduce logo height and increase wrapping */
@media (max-width: 480px) {
    /* On very small screens keep all four logos on a single row
       by giving each sponsor a fixed 25% width and preventing wrap. */
    .sponsors {
        flex-wrap: nowrap;
        overflow-x: hidden; /* keep in one visual row */
    }

    .sponsordiv {
        flex: 0 0 25%; /* four items per row */
        padding: 6px 4px;
    }

    .sponsordiv img, .sponsors img {
        max-height: 42px;
        width: auto;
    }

    /* ensure sponsor-4 doesn't stay oversized on small screens */
    .sponsor-4 img {
        max-height: 64px; /* scale down on small screens */
        max-width: 100%;
        width: auto;
    }
}

/* HERO TEXT (video fölött) */
.video-text {
    position: absolute;
    left: 40px; /* távolság a bal széltől (összhangban a logóval) */
    bottom: 120px; /* a kép aljához közel */
    z-index: 4;
    color: #ffffff;
    max-width: 760px;
    pointer-events: none; /* a videó vezérléséhez ne akadályozza */
}

.video-title {
    margin: 0;
    font-weight: 600;
    line-height: 1.05;
    /* skálázódó méret: kisebb képernyőn kisebb, nagyon nagy */
    font-size: clamp(20px, 4.5vw, 32px);
}

.video-date {
    margin: 14px 0 0 0;
    font-size: clamp(18px, 2.2vw, 28px);
    font-weight: 400;
}

.footer-div {
    display:flex;
    justify-content:space-between;
    align-items:center;
    background-color: #fff;
    text-align: center;
}
.footerlogo {
    margin-left: 2rem;
}
.copyright {
    margin-right: 2rem;
    font-size: 16px;
    color: #333333;
}

@media (max-width: 800px) {
    .video-text {
        width:100%;
        left: 57%;
        transform: translateX(-50%);
        bottom: 100px;
        max-width: 100%;
        text-align: left;
        z-index: 5; /* felülre a mobil logó felett */
    }
    .video-title {
        font-size: clamp(22px, 7.5vw, 38px);
    }
    .video-date {
        font-size: 24px;
        font-weight: 600;
    }
    .video-logo {
        max-width: 370px;
        top: 80px;
    }
}