/* ================================
   SF PRO TEXT
================================ */

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-Ultralight.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-Thin.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-Heavy.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


/* ================================
   SF PRO TEXT - ITALIC
================================ */

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-UltralightItalic.otf') format('opentype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-ThinItalic.otf') format('opentype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-RegularItalic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-SemiboldItalic.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-HeavyItalic.otf') format('opentype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-BlackItalic.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}


/* ================================
   SF PRO DISPLAY
================================ */

@font-face {
    font-family: 'SF Pro Display';
    src: url('./static/fonts/SFPRODISPLAYREGULAR.OTF') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('./static/fonts/SFPRODISPLAYMEDIUM.OTF') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('./static/fonts/SFPRODISPLAYBOLD.OTF') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ================================
   CSS VARIABLES
================================ */

:root {
    --font-text: 'SF Pro Text', Arial, sans-serif;
    --font-display: 'SF Pro Display', Arial, sans-serif;

    --weight-ultralight: 100;
    --weight-thin: 200;
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-heavy: 800;
    --weight-black: 900;

    
    --gradient-1: linear-gradient(90deg, #C439FF 0%, #12DEFE 100%);
    --gradient-2: linear-gradient(90deg, #C439FF 50%, #12DFFF 100%);

}

body{
    margin: 0;
    padding: 0;
    background: black;
    overflow-x: hidden;
}

* { box-sizing: border-box; }
img { max-width: 100%; }

/* =========================================================
   VYBE - DESKTOP
   Aktivno od 1000px preko media atributa u index.html.

   Figma referenca: 1920px
   - kartica: max 1526px
   - prve 2 kartice: 1526 x 795
   - ostale kartice: 1526 x 617
   - gap kartica: 67px
   - header / pill font: 25px
   - logo: 221 x 71px
========================================================= */

:root {
    /* Glavne desktop vrijednosti - mijenjaj ovdje */
    --desktop-shell-max: 1672px;
    --desktop-card-max: 1526px;
    --desktop-pill-overhang: 146px;

    --desktop-card-gap: 67px;
    --desktop-card-radius: 60px;

    --desktop-font: 25px;
    --desktop-control-height: 78px;
    --desktop-button-width: 259px;

    --desktop-pill-height: 92px;
    --desktop-pill-padding-x: 46px;

    --desktop-header-padding-y: 70px;
    --desktop-header-to-cards: 130px;

    --desktop-footer-gap: 130px;
    --desktop-footer-height: 350px;
    --desktop-footer-radius: 60px;
}

/* -----------------------------------------------------
   HEADER
----------------------------------------------------- */

.header,
.upper-header,
.kontakt-header {
    display: none !important;
}

.header-desktop {
    width: calc(100% - 12.92vw);
    max-width: var(--desktop-shell-max);
    height: auto;
    margin: 0 auto;
    padding: var(--desktop-header-padding-y) 0;
    box-sizing: border-box;

    display: flex;
    align-items: center;

    
}

.desktop-line{
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.logo-header {
    width: min(11.51vw, 221px);
    height: auto;
    margin: 0;
    flex: 0 0 auto;
}

.header-desktop .lang {
    margin-left: 19.48vw;
    margin-right: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-desktop .lang a,
.header-desktop .lang span {
    font-family: var(--font-text);
    font-size: clamp(18px, 1.302vw, var(--desktop-font));
    font-weight: var(--weight-bold);
    line-height: 1;
    text-decoration: none;
}

.header-desktop .lang a {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.38);
}

.header-desktop .lang a.active {
    color: #fff;
}

.header-desktop .lang span {
    color: rgba(255, 255, 255, 0.38);
    font-weight: 300;
}

.desktop-icons {
    display: flex;
    align-items: center;
    gap: 24px;
}

.header-icon-link {
    width: var(--desktop-control-height);
    height: var(--desktop-control-height);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    text-decoration: none;
}

.desktop-icons .icon {
    width: 100%;
    height: 100%;
    display: block;
}

.header-divider {
    width: 1px;
    height: 46px;
    margin: 0 4px;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.22);
}

.cjenovnikh,
.rezervisi {
    width: min(13.49vw, var(--desktop-button-width));
    height: var(--desktop-control-height);
    box-sizing: border-box;
    flex: 0 0 auto;

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

    border-radius: 999px;
    font-family: var(--font-text);
    font-size: clamp(18px, 1.302vw, var(--desktop-font));
    font-weight: var(--weight-bold);
    line-height: 1;
    color: #fff;
    text-decoration: none;

    transition: transform .18s ease, opacity .18s ease;
}

.cjenovnikh {
    position: relative;
    background: transparent;
}

.cjenovnikh::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: var(--gradient-1);

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.rezervisi {
    background: var(--gradient-2);
}

.cjenovnikh:hover,
.rezervisi:hover,
.header-icon-link:hover {
    transform: translateY(-2px);
}

.cjenovnikh:active,
.rezervisi:active,
.header-icon-link:active {
    transform: translateY(0);
    opacity: .82;
}

.header-desktop a:focus-visible {
    outline: 2px solid #12DFFF;
    outline-offset: 4px;
}


/* -----------------------------------------------------
   KARTICE
   Shell je samo prostor za originalni pill overhang.
   Sama fotografija / kartica ostaje max 1526px.
----------------------------------------------------- */

.mob {
    display: none !important;
}

.des {
    display: flex;
}

.main-kartice.des {
    width: calc(100% - 12.92vw);
    max-width: var(--desktop-shell-max);
    margin: var(--desktop-header-to-cards) auto 0;
    padding: 0;
    box-sizing: border-box;

    flex-direction: column;
    align-items: flex-start;
    gap: var(--desktop-card-gap);
}

.main-kartice.des .main-kartica {
    width: min(var(--desktop-card-max), calc(100% - var(--desktop-pill-overhang)));
    margin: 0;
    position: relative;
    background: #111; /* placeholder ako slika još nije ubačena */
    border-radius: var(--desktop-card-radius);
    font-size: inherit;
}

.main-kartice.des .main-kartica:nth-child(-n + 2) {
    aspect-ratio: 1526 / 795;
}

.main-kartice.des .main-kartica:nth-child(n + 3) {
    aspect-ratio: 1526 / 617;
}

.main-kartice.des .main-kartica img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: var(--desktop-card-radius);
    background: #111;
}

/* Jedan isti pill za sve kartice */
.main-kartice.des .main-kartica > a {
position: absolute;
z-index: 2;

top: 50%;
left: auto;
right: -7vw; /* BITNO */
transform: translateY(-50%);

width: fit-content;
min-width: 0;

height: var(--desktop-pill-height);
padding: 0 var(--desktop-pill-padding-x);

box-sizing: border-box;

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

background: #000;
border-radius: 999px;

color: #fff;
font-family: var(--font-text);
font-size: clamp(18px, 1.302vw, var(--desktop-font));
font-weight: var(--weight-bold);
line-height: 1.2;

text-align: center;
text-decoration: none;
white-space: nowrap;
}


/* -----------------------------------------------------
   FOOTER - desktop verzija prema tvom rasporedu
   Mobilni footer ostaje originalni iz style.css.
----------------------------------------------------- */

.footer {
    display: none;
}

.footer-desktop {
    width: calc(100% - 12.92vw);
    max-width: var(--desktop-shell-max);
    min-height: var(--desktop-footer-height);
    margin: var(--desktop-footer-gap) auto 130px;
    padding: 68px 108px;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: 1.25fr 1fr .9fr .9fr;
    align-items: start;
    gap: 64px;

    position: relative;
    border-radius: var(--desktop-footer-radius) 0 var(--desktop-footer-radius) var(--desktop-footer-radius) ;
    background: #000;
}

.footer-desktop::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: linear-gradient(90deg, #C933FF 0%, #C933FF 45%, #C933FF 100%);

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.footer-block {
    min-width: 0;
}

.footer-block h3 {
    margin: 0 0 34px;
    color: #C439FF;
    font-family: var(--font-text);
    font-size: 18px;
    font-weight: var(--weight-bold);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .16em;
}

.footer-block p,
.footer-block a {
    margin: 0;
    color: #fff;
    font-family: var(--font-text);
    font-size: 24px;
    font-weight: var(--weight-regular);
    line-height: 1.75;
    text-decoration: none;
}

.footer-block a {
    display: block;
}

.footer-socials {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-socials a {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.footer-socials img {
    width: 72px;
    height: 72px;
    display: block;
}

.footer-desktop a:focus-visible {
    outline: 2px solid #12DFFF;
    outline-offset: 4px;
}

/* Mobilni burger postoji u zajedničkom HTML-u, ali se na desktopu ne prikazuje. */
.mobile-menu {
    display: none !important;
}