/* ============================================================================
   KONTAKT — stilovi stranice (page-kontakt.php · post 345 · /kontakt/)
   1:1 replika stare Gutenberg/UiCore stranice na svim širinama.
   Učitava se samo na is_page('kontakt') iz inc/setup.php (deps child-style).

   ORGANIZACIJA: svaka sekcija drži SVA svoja pravila na jednom mestu — bazna,
   pa njeni @media override-i. Numeracija je ista kao u markupu („NN. NASLOV").

   SADRŽAJ
     00  ZAJEDNIČKO
     01  HERO
     02  UVOD
     03  KONTAKT KARTICA
     04  FORMA
     05  KONTAKT PODACI

   PRELOMI — preuzeti iz starih UiCore fajlova (uploads/uicore-blocks/
   uicore-345-{mobile,tablet,desktop}.css) i globalnog container CSS-a:
     > 1024   desktop: kolone 50% / 40%, kartica u redu
     = 1024   i dalje RED (UiCore desktop fajl važi od min-width:1024), ali su
              širine kolona i hero kartice „auto" (UiCore width-var za tablet
              važi od max-width:1024) → kolone se skupljaju po sadržaju
     ≤ 1023   tablet: kartica, redovi telefon/e-mail i ikonice mreža u koloni
              (UiCore tablet fajl)
     ≤ 996    vertikalni razdelnik nevidljiv i ikonice mreža ponovo u redu
              (stara pravila iz style.css, @media max-width:996px)
     ≤ 767    mobilni
   Tipografija (h1 56/60/40px, p 16/15/14px, line-height 1.875em) dolazi iz
   uicore-global.css — ovde se pregazi SAMO ono što su blokovi eksplicitno
   postavljali. CF7 polja (.ivx-cf7--contact) su globalno u style.css.

   SPECIFIČNOST: uicore-global.css se učitava POSLE ovog fajla, pa sva pravila
   idu pod .kontakt-page (0,2,0) da bi pobedila njegove h1/p/a (0,0,1) selektore.

   Paleta: ink #584642 · linija #EEE4DF · tekst uvoda #101010 · pozadina #FDFAF8
   ============================================================================ */


/* ==========================================================================
   00  ZAJEDNIČKO
   ======================================================================= */
/* Stari omotač .content-area je nosio pozadinu #FDFAF8 (uicore-inline stil);
   šablon ga nema, pa je pozadina na <main>. */
.kontakt-page {
    display: block;
    background: #FDFAF8;
}
.kontakt-page [class*="kt-"] { box-sizing: border-box; }


/* ==========================================================================
   01  HERO
   fotografija 1240×461 (desktop) sa belim naslovom; na tabletu uska kartica
   (širina po sadržaju, ~289px) — tako je izgledala i stara stranica
   ======================================================================= */
.kontakt-page .kt-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    width: 100%;
    margin: 0;
    padding: 0;
}
.kontakt-page .kt-hero__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 1240px;
    min-height: 461px;
    margin: 150px auto 0;
    padding: 0;
    border-radius: 24px;
}
/* Umesto CSS pozadine: <img> sa istim kadrom (cover + ista pozicija).
   border-radius na samoj slici (ne overflow:hidden na kartici) — na tabletu
   naslov „Kontakt" malo viri preko ivice kartice, kao i ranije. */
.kontakt-page .kt-hero__img {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 59% 17%;
    border-radius: inherit;
}
.kontakt-page .kt-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: inherit;
    gap: 20px;
    width: 95%;
    max-width: 1230px;
    margin: 0 auto;
    padding: 0 0 0 80px;
}
.kontakt-page .kt-hero__title {
    position: relative;
    margin: 0;
    color: var(--uicore-white-color);
}

@media (max-width: 1024px) {
    .kontakt-page .kt-hero__card { width: auto; }
}
@media (max-width: 767px) {
    .kontakt-page .kt-hero__card {
        width: 95%;
        min-height: 475px;
        margin: 110px 11px 0;
        justify-content: flex-start;
    }
    .kontakt-page .kt-hero__img { object-position: 35% 0%; }
    .kontakt-page .kt-hero__inner {
        max-width: 100%;
        padding: 40px 0 0 20px;
    }
    .kontakt-page .kt-hero__title { font-size: 40px; }
}


/* ==========================================================================
   02  UVOD
   jedna centrirana rečenica ispod hero-a
   ======================================================================= */
.kontakt-page .kt-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}
.kontakt-page .kt-intro__wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 95%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px;
}
.kontakt-page .kt-intro__lead {
    position: relative;
    margin: 0;
    font-weight: 300;
    font-size: 20px;
    line-height: 34px;
    color: #584642;
    text-align: center;
}

@media (max-width: 767px) {
    .kontakt-page .kt-intro__lead {
        font-size: 16px;
        line-height: 26px;
    }
}


/* ==========================================================================
   03  KONTAKT KARTICA
   bela kartica sa senkom; unutrašnji omotač nosi raspored kolona i vertikalni
   razdelnik (::after, pozicioniran u odnosu na karticu). Padding 50px je i na
   kartici i na unutrašnjem omotaču — tako ga je UiCore duplirao.
   ======================================================================= */
.kontakt-page .kt-contact {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 60px 0 0;
    padding: 0;
}
.kontakt-page .kt-contact__wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 95%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 0 200px;
}
.kontakt-page .kt-contact__box {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 170px;
    min-height: 700px;
    margin: 0;
    padding: 50px;
    background-color: var(--uicore-white-color);
    border-radius: 24px;
    box-shadow: 0 40px 70px 70px rgba(206, 134, 103, .05);
    transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.kontakt-page .kt-contact__inner {
    display: flex;
    flex-direction: inherit;
    align-items: inherit;
    gap: inherit;
    width: 95%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 50px;
}
.kontakt-page .kt-contact__inner::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 100%;
    max-height: 500px;
    background: #EEE4DF;
}

@media (max-width: 1023.98px) {
    .kontakt-page .kt-contact__box { flex-direction: column; }
}
@media (max-width: 996px) {
    .kontakt-page .kt-contact__inner::after { opacity: 0; }
}
@media (max-width: 767px) {
    .kontakt-page .kt-contact { margin-top: 65px; }
    .kontakt-page .kt-contact__box {
        gap: 30px;
        min-height: 100%;
        margin: 0 10px;
        padding: 15px;
    }
    .kontakt-page .kt-contact__inner { padding: 15px; }
}


/* ==========================================================================
   04  FORMA
   naslov + CF7 forma (izgled polja/dugmeta/hCaptcha je globalno u style.css)
   ======================================================================= */
.kontakt-page .kt-form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 50%;
    padding: 0;
}
/* <h3> kao i nekadašnji UiCore heading blok (ista struktura naslova kao na staroj
   stranici); tipografija (Lora 32px) je eksplicitna pa ne zavisi od h3 globala */
.kontakt-page .kt-form__title {
    position: relative;
    margin: 0;
    font-family: var(--uicore-typography--h3-f);
    font-weight: var(--uicore-typography--h3-w);
    font-style: normal;
    font-size: 32px;
    line-height: 1.2em;
    letter-spacing: -0.027em;
    text-transform: none;
    color: #584642;
}

@media (max-width: 1024px) {
    .kontakt-page .kt-form { width: auto; }
}


/* ==========================================================================
   05  KONTAKT PODACI
   telefon, e-mail (sa horizontalnim linijama ispod) i društvene mreže
   ======================================================================= */
/* min-width: 0 — novi e-mail (info@inspirisanadecom.com) je duža, neprelomiva
   reč; bez ovoga bi podigao min-content kolone i u redu (1024–~1100px) suzio
   formu za ~18px. Ovako kolone ostaju tačno kao ranije, a adresa po potrebi
   samo zađe u unutrašnji padding kartice.
   max-width: 100% — na mobilnom je kartica kolona sa align-items:center pa
   kolona uzima fit-content širinu; ispod ~345px bi je neprelomiva adresa
   raširila (i linije od 80% sa njom). Ovako kolona ostaje široka kao ranije. */
.kontakt-page .kt-info {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 40%;
    min-width: 0;
    max-width: 100%;
    padding: 0;
}
.kontakt-page .kt-info__row {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 10px;
}
/* linija ispod telefona i e-maila — bez left/top: statička pozicija u flex
   kontejneru (levo na desktopu/tabletu, centrirano na mobilnom) */
.kontakt-page .kt-info__row--line::after {
    content: '';
    position: absolute;
    bottom: -30px;
    width: 80%;
    height: 1px;
    background: #EEE4DF;
}
.kontakt-page .kt-info__icon {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    overflow: hidden;
}
/* Ikonice (telefon, e-mail, mreže) — preslikano globalno UiCore pravilo
   `[class*='wp-block-uicore-'] img` koje ove klase više ne pogađaju:
   height:auto + contain → u redu se slika rastegne na visinu reda (30px) a SVG
   ostane centriran; u koloni visina ide po stvarnom odnosu SVG-a (npr. 25.8px). */
.kontakt-page .kt-info__icon img,
.kontakt-page .kt-social__item img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
.kontakt-page .kt-info__icon > img { width: 24px; }
.kontakt-page .kt-info__value {
    position: relative;
    margin: 0;
    font-family: Inter;
    font-weight: 500;
    color: #584642;
}
.kontakt-page .kt-info__value a,
.kontakt-page .kt-info__value a:hover,
.kontakt-page .kt-info__value a:focus {
    color: #584642;
    font-weight: 500;
}
.kontakt-page .kt-social {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px;
}
.kontakt-page .kt-social__title {
    position: relative;
    margin: 0 0 15px;
    font-family: Inter;
    font-weight: 500;
    color: #584642;
}
.kontakt-page .kt-social__list {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 50px;
    padding: 0;
}
.kontakt-page .kt-social__item {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    overflow: hidden;
}

@media (max-width: 1024px) {
    .kontakt-page .kt-info { width: auto; }
}
/* Ikonice mreža: 997–1023px u KOLONI (UiCore tablet fajl), ≤ 996px ponovo u
   REDU (style.css @media max-width:996px) — redosled ova dva bloka je bitan. */
@media (max-width: 1023.98px) {
    .kontakt-page .kt-info__row { flex-direction: column; }
    .kontakt-page .kt-social__list { flex-direction: column; }
}
@media (max-width: 996px) {
    .kontakt-page .kt-social__list { flex-direction: row; }
}
@media (max-width: 767px) {
    .kontakt-page .kt-info__row {
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    .kontakt-page .kt-info__value { font-size: 18px; }
    .kontakt-page .kt-social__title {
        font-size: 18px;
        text-align: center;
    }
    .kontakt-page .kt-social__list {
        align-items: center;
        justify-content: center;
        gap: 15px 20px;
    }
}

/* ============================================================
   23. 9. 2026 (klijent): preko fotografije u zaglavlju ne sme da stoji nikakav tekst.
   Naslov h1 „Kontakt" ostaje u kodu (Google i čitači ekrana), samo se vizuelno ne vidi.
   Fotografija se menja kad klijent pošalje snimak sa scene (beli kombinezon).
   ============================================================ */
.kontakt-page .kt-hero__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}