*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width     : 100%;
    min-height: 100%;
    margin    : 0;
    padding   : 0;
    background: #ffffff;
}

body {
    min-height: 100vh;
    min-height: 100svh;

    display       : flex;
    flex-direction: column;
    align-items   : center;

    overflow-x: hidden;
    overflow-y: auto;
}


/* =========================================================
   POZIVNICA — FORMAT 9:16
   ========================================================= */

.pozivnica {
    position: relative;

    /*
       Pozivnica ostaje u formatu 9:16.
       Na širokom ekranu prilagođava se visini,
       a na uskom ekranu širini.
    */
    width       : min(100vw, 56.25svh);
    aspect-ratio: 9 / 16;

    flex      : 0 0 auto;
    overflow  : hidden;
    background: #ffffff;

    /*
       Omogućava da cqw jedinice zavise od širine
       same pozivnice, a ne od širine prozora.
    */
    container-type: inline-size;
}


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

.pozivnica video {
    position: absolute;
    top     : 48%;
    left    : 50%;

    display: block;
    width  : 100%;
    height : 100%;

    object-fit     : cover;
    object-position: center center;

    /*
       Blago uvećanje uklanja tanku belu ivicu,
       a top: 49% pomera video malo nagore.
    */
    transform       : translate(-50%, -50%) scale(1.015);
    transform-origin: center center;

    background: #ffffff;
}


/* =========================================================
   ZAJEDNIČKI STIL TEKSTA PREKO VIDEA
   ========================================================= */

.tekst {
    position: absolute;
    left    : 50%;
    z-index : 2;

    width    : 70%;
    max-width: none;
    margin   : 0;

    transform: translateX(-50%);

    text-align   : center;
    text-wrap    : balance;
    overflow-wrap: normal;
    word-break   : normal;
    hyphens      : none;

    color      : #7c6339;
    font-family: Georgia, "Times New Roman", serif;
    font-size  : 4.1cqw;
    line-height: 1.35;

    pointer-events: none;
}

.tekst p {
    margin: 0.8cqw 0;
}


/* =========================================================
   GORNJI TEKST
   ========================================================= */

.tekst-gore {
    top        : 25%;
    font-size  : 4.3cqw;
    line-height: 1.65;
}


/* =========================================================
   DONJI TEKST
   ========================================================= */

.tekst-dole {
    top           : 59%;
    /* font-size  : 3.9cqw; */
    font-size     : clamp(14px, 2.5vw, 22px);
    line-height   : 1.65;
    width         : 100%;
}

.datum {
    font-size  : 1.12em;
    font-weight: 700;
}

.potpis {
    margin-top: 5.5cqw !important;
    font-style: italic;
    font-size : clamp(12px, 2.5vw, 22px);
}


/* =========================================================
   FOOTER ISPOD POZIVNICE
   ========================================================= */

.site-footer {
    width: min(100vw, 56.25svh);
    flex : 0 0 auto;

    margin : 0;
    padding: 8px 10px 14px;

    text-align: center;
    color     : rgba(124, 99, 57, 0.5);
    background: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size  : 14px;
    line-height: 1.3;
}

.site-footer a {
    color          : inherit;
    font-weight    : 400;
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color          : #7c6339;
    text-decoration: underline;
}


/* =========================================================
   EKSTREMNO USKI EKRANI
   ========================================================= */

@container (max-width: 220px) {
    .tekst {
        width      : 88%;
        line-height: 1.25;
    }

    .tekst-gore {
        top      : 25%;
        font-size: 4cqw;
    }

    .tekst-dole {
        top      : 57%;
        font-size: 3.45cqw;
    }

    .tekst p {
        margin: 0.5cqw 0;
    }

    .potpis {
        margin-top: 1.5cqw !important;
        font-size : clamp(12px, 2.5vw, 22px);
    }
}


/* =========================================================
   VEOMA NISKI EKRANI
   ========================================================= */

@media (max-height: 500px) and (orientation: landscape) {
    .pozivnica {
        width: min(100vw, 56.25vh);
    }

    .site-footer {
        width: min(100vw, 56.25vh);
    }
}