/* =========================================================
   CARL GUSTAV JUNG — BIOGRAFIJA
   ARHIVA PSIHE
   ========================================================= */


/* =========================================================
   HERO BIOGRAFIJA
   ========================================================= */

.jung-biography {

    max-width:1500px;

    margin:120px auto 110px;

    padding:0 5%;

    display:grid;

    grid-template-columns:minmax(0,1fr) 380px;

    gap:80px;

    align-items:center;

}


/* =========================================================
   HERO — TEKST
   ========================================================= */

.jung-bio-text {

    position:relative;

}


.small-title {

    font-family:"Inter",sans-serif;

    font-size:13px;

    letter-spacing:6px;

    text-transform:uppercase;

    color:var(--gold);

    margin-bottom:25px;

}


.jung-title {

    font-family:"Cormorant Garamond",serif;

    font-size:82px;

    line-height:1;

    font-weight:600;

    color:var(--ink);

    margin:0 0 30px;

}


.jung-subtitle {

    font-family:"Cormorant Garamond",serif;

    font-size:34px;

    line-height:1.5;

    font-weight:400;

    color:var(--brown);

    margin:0 0 45px;

}


/* =========================================================
   UVODNA ARHIVSKA KARTICA
   ========================================================= */

.jung-intro-card {

    position:relative;

    padding:55px 65px;

    background:
        radial-gradient(
            circle at 30% 20%,
            #ffffff,
            #fff8e8 45%,
            #f2dca8 100%
        );

    border-top:
        1px solid rgba(176,138,82,.20);

    border-bottom:
        1px solid rgba(176,138,82,.15);
}






/* unutrašnji okvir */

.jung-intro-card::before {

    content:"";

    position:absolute;

    inset:15px;

    border:1px solid rgba(176,138,82,.20);

    pointer-events:none;

}


/* dodatni diskretni sjaj */

.jung-intro-card::after {

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    right:-110px;

    top:-110px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(176,138,82,.12),
            transparent 70%
        );

    pointer-events:none;

}


/* =========================================================
   SIMBOL PRVE KARTICE
   ========================================================= */

.jung-intro-card .card-symbol {

    position:relative;

    z-index:2;

    text-align:center;

    font-family:"Cormorant Garamond",serif;

    font-size:42px;

    color:var(--gold);

    margin-bottom:25px;

}


.jung-intro-card p {

    position:relative;

    z-index:2;

    font-family:"Cormorant Garamond",serif;

    font-size:23px;

    line-height:1.75;

    color:var(--ink);

    margin:0 0 30px;

}


.jung-intro-card p:last-child {

    margin-bottom:0;

}


/* =========================================================
   PORTRET
   ========================================================= */

.jung-image {

    text-align:center;

}


.portrait-frame {

    position:relative;

}


.jung-image img {

    width:330px;

    max-width:100%;

    padding:12px;

    background:var(--paper);

    border:1px solid rgba(176,138,82,.45);

    box-shadow:var(--shadow);

    filter:sepia(.35);

    transition:
        transform .6s ease,
        box-shadow .6s ease;

}


.jung-image img:hover {

    transform:translateY(-10px);

    box-shadow:
        0 25px 55px rgba(0,0,0,.15);

}


.portrait-symbol {

    position:absolute;

    left:50%;

    bottom:-20px;

    transform:translateX(-50%);

    background:var(--paper-dark);

    border:1px solid rgba(176,138,82,.45);

    padding:10px 25px;

    font-family:"Inter",sans-serif;

    font-size:12px;

    letter-spacing:4px;

    color:var(--gold);

    white-space:nowrap;

}


/* =========================================================
   GLAVNE JUNG ARHIVSKE KARTICE
   ========================================================= */

.jung-section {

    max-width:1380px;

    margin:0 auto 100px;

    padding:75px 80px 85px;

    display:grid;

    grid-template-columns:minmax(0,1fr) 360px;

    column-gap:80px;

    align-items:center;

    position:relative;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 30% 20%,
            #ffffff,
            #fff8e8 45%,
            #f2dca8 100%
        );

}

/* =========================================================
   UNUTRAŠNJI OKVIR SVAKOG POGLAVLJA
   ========================================================= */

.jung-section::after {

    content:"";

    position:absolute;

    inset:15px;

    border:1px solid rgba(176,138,82,.18);

    pointer-events:none;

}




/* =========================================================
   VELIKI SIMBOL SA DESNE STRANE
   ========================================================= */

.jung-section::before {

    content:"✦";

    position:absolute;

    right:70px;

    top:50%;

    transform:translateY(-50%);

    width:285px;

    height:285px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-family:"Cormorant Garamond",serif;

    font-size:155px;

    font-weight:400;

    color:rgba(176,138,82,.34);

    border:1px solid rgba(176,138,82,.28);

    background:
        radial-gradient(
            circle,
            rgba(176,138,82,.13),
            rgba(176,138,82,.04) 45%,
            transparent 70%
        );

    box-shadow:
        inset 0 0 40px rgba(176,138,82,.05),
        0 0 50px rgba(176,138,82,.04);

    animation:symbolFloat 8s ease-in-out infinite;

    pointer-events:none;

    z-index:0;

}


/* =========================================================
   SIMBOLI PO POGLAVLJIMA
   ========================================================= */


/* 01 — Detinjstvo */

.jung-childhood::before {

    content:"☽";

}


/* 02 — Mladost */

.jung-youth::before {

    content:"✦";

}


/* 03 — Obrazovanje */

.jung-education::before {

    content:"⚕";

}


/* 04 — Psihijatrija */

.jung-psychiatry::before {

    content:"◈";

}


/* 05 — Asocijacije */

.jung-association::before {

    content:"⌁";

}


/* 06 — Privatni život */

.jung-private-life::before {

    content:"∞";

}


/* 07 — Freud */

.jung-freud::before {

    content:"☯";

}


/* 08 — Prelom */

.jung-break::before {

    content:"↟";

}


/* 09 — Unutrašnji svet */

.jung-inner-journey::before {

    content:"✧";

}


/* 10 — Putovanja */

.jung-travel::before {

    content:"◇";

}


/* 11 — Arhetipovi */

.jung-archetypes::before {

    content:"✦";

}


/* 12 — Individuacija */

.jung-individuation::before {

    content:"◎";

}


/* 13 — Alhemija */

.jung-alchemy::before {

    content:"⚗";

}


/* 14 — Kasne godine */

.jung-late-life::before {

    content:"☼";

}


/* 15 — Kraj */

.jung-death::before {

    content:"✦";

}


/* =========================================================
   SADRŽAJ KARTICE
   ========================================================= */

.jung-section > .section-title,

.jung-section > h2,

.jung-section > .jung-text {

    position:relative;

    z-index:3;

}


/* =========================================================
   MALI NASLOV
   ========================================================= */

.section-title {

    grid-column:1;

    font-family:"Inter",sans-serif;

    font-size:.78rem;

    font-weight:500;

    letter-spacing:5px;

    text-transform:uppercase;

    color:var(--gold);

    margin:0 0 22px;

}


/* =========================================================
   GLAVNI NASLOV
   ========================================================= */

.jung-section h2 {

    grid-column:1;

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(3rem,5vw,5rem);

    line-height:1.05;

    font-weight:600;

    color:var(--ink);

    margin:0 0 45px;

    max-width:850px;

}


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

.jung-text {

    grid-column:1;

    max-width:850px;

}


/* =========================================================
   GODINA — KRUŽNA OZNAKA
   ========================================================= */

.jung-date-circle {

    width:118px;

    height:118px;

    margin:0 0 35px;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    border:1px solid rgba(176,138,82,.55);

    background:
        radial-gradient(
            circle,
            rgba(176,138,82,.13),
            transparent 70%
        );

    box-shadow:
        inset 0 0 25px rgba(176,138,82,.06);

}


.jung-date-circle span {

    font-family:"Cormorant Garamond",serif;

    font-size:24px;

    line-height:1;

    color:var(--ink);

}


.jung-date-circle small {

    margin-top:8px;

    font-family:"Inter",sans-serif;

    font-size:8px;

    letter-spacing:2px;

    color:var(--gold);

}


/* =========================================================
   UVODNI TEKST
   ========================================================= */

.jung-lead {

    font-family:"Cormorant Garamond",serif;

    font-size:25px;

    line-height:1.75;

    color:var(--ink);

    margin:0 0 50px;

    max-width:820px;

}


/* =========================================================
   UNUTRAŠNJE PODKARTICE
   ========================================================= */

.jung-subcards {

    position:relative;

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:55px;

    margin-top:20px;

    padding-top:65px;

}


/* =========================================================
   LINIJA KOJA POVEZUJE KRUŽIĆE
   ========================================================= */

.jung-subcards::before {

    content:"";

    position:absolute;

    left:55px;

    right:55px;

    top:23px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(176,138,82,.60) 12%,
            rgba(176,138,82,.60) 88%,
            transparent
        );

    z-index:0;

}


/* =========================================================
   PODKARTICA
   ========================================================= */

.jung-subcard {

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    min-width:0;

    z-index:2;

}


/* =========================================================
   KRUŽIĆ NA LINIJI
   ========================================================= */

.jung-circle {

    position:absolute;

    top:-65px;

    left:0;

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-family:"Cormorant Garamond",serif;

    font-size:23px;

    color:var(--gold);

    background:var(--paper);

    border:1px solid rgba(176,138,82,.60);

    box-shadow:
        0 0 0 7px var(--paper);

    z-index:4;

}


/* =========================================================
   PODKARTICA SADRŽAJ
   ========================================================= */

.jung-subcard-content {

    width:100%;

    padding:30px 28px 28px;

    border:1px solid rgba(176,138,82,.22);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.18),
            rgba(176,138,82,.035)
        );

    transition:
        transform .5s ease,
        border-color .5s ease,
        box-shadow .5s ease;

}


.jung-subcard:hover .jung-subcard-content {

    transform:translateY(-5px);

    border-color:rgba(176,138,82,.48);

    box-shadow:
        0 15px 35px rgba(0,0,0,.06);

}


/* =========================================================
   NASLOV PODKARTICE
   ========================================================= */

.jung-subcard h3 {

    font-family:"Inter",sans-serif;

    font-size:12px;

    letter-spacing:3px;

    font-weight:500;

    color:var(--gold);

    margin:0 0 20px;

}


/* =========================================================
   TEKST PODKARTICE
   ========================================================= */

.jung-subcard p {

    font-family:"Cormorant Garamond",serif;

    font-size:19px;

    line-height:1.75;

    color:var(--brown);

    margin:0 0 18px;

}


.jung-subcard p:last-child {

    margin-bottom:0;

}


.jung-subcard strong {

    color:var(--ink);

    font-weight:600;

}


/* =========================================================
   KADA JE SAMO JEDNA PODKARTICA
   ========================================================= */

.jung-subcards:has(.jung-subcard:only-child) {

    grid-template-columns:minmax(0,1fr);

}


/* =========================================================
   ZAVRŠNA GODINA
   ========================================================= */

.final-date {

    border-color:rgba(176,138,82,.75);

    background:
        radial-gradient(
            circle,
            rgba(176,138,82,.18),
            transparent 70%
        );

}


/* =========================================================
   ZAVRŠNI SIMBOL
   ========================================================= */

.jung-final-symbol {

    width:100px;

    height:100px;

    margin:65px auto 35px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-family:"Cormorant Garamond",serif;

    font-size:45px;

    color:var(--gold);

    border:1px solid rgba(176,138,82,.55);

    background:
        radial-gradient(
            circle,
            rgba(176,138,82,.15),
            transparent 70%
        );

    box-shadow:
        0 0 35px rgba(176,138,82,.08);

}


/* =========================================================
   ZAVRŠNA REČENICA
   ========================================================= */

.jung-final-line {

    text-align:center;

    font-family:"Cormorant Garamond",serif;

    font-size:28px;

    font-style:italic;

    line-height:1.6;

    color:var(--ink);

    margin:0 auto;

    max-width:650px;

}


/* =========================================================
   ZAVRŠNA KARTICA
   ========================================================= */

.jung-biography-end {

    margin-bottom:160px;

}


/* =========================================================
   BLAGI HOVER
   ========================================================= */

.jung-section .jung-text {

    transition:transform .6s ease;

}


.jung-section:hover .jung-text {

    transform:translateX(4px);

}


/* =========================================================
   ANIMACIJA VELIKOG SIMBOLA
   ========================================================= */

@keyframes symbolFloat {

    0% {

        transform:
            translateY(-50%)
            rotate(0deg);

    }

    50% {

        transform:
            translateY(calc(-50% - 10px))
            rotate(2deg);

    }

    100% {

        transform:
            translateY(-50%)
            rotate(0deg);

    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1100px) {


    .jung-biography {

        grid-template-columns:minmax(0,1fr) 300px;

        gap:50px;

    }


    .jung-title {

        font-size:70px;

    }


    .jung-subtitle {

        font-size:30px;

    }


    .jung-intro-card {

        padding:45px 50px;

    }


    .jung-image img {

        width:280px;

    }


    .jung-section {

        margin-left:5%;

        margin-right:5%;

        padding:65px 55px 70px;

        grid-template-columns:minmax(0,1fr) 270px;

        column-gap:45px;

    }


    .jung-section::before {

        right:35px;

        width:230px;

        height:230px;

        font-size:125px;

    }


    .jung-section h2 {

        font-size:clamp(2.8rem,5vw,4.2rem);

    }


    .jung-lead {

        font-size:23px;

    }


}


/* =========================================================
   TABLET / MANJI EKRANI
   ========================================================= */

@media (max-width:850px) {


    .jung-biography {

        grid-template-columns:1fr;

        text-align:center;

        gap:65px;

    }


    .jung-image {

        order:-1;

    }


    .jung-intro-card {

        text-align:left;

    }


    .jung-section {

        display:block;

        padding:65px 50px 70px;

    }


    .jung-section::before {

        position:absolute;

        right:35px;

        top:35px;

        transform:none;

        width:190px;

        height:190px;

        font-size:105px;

        opacity:.65;

    }


    .jung-section h2 {

        position:relative;

        z-index:3;

        max-width:70%;

    }


    .jung-text {

        position:relative;

        z-index:3;

    }


}


/* =========================================================
   MOBILNI
   ========================================================= */

@media (max-width:650px) {


    .jung-biography {

        margin:70px auto 80px;

        padding:0 6%;

    }


    .small-title {

        font-size:11px;

        letter-spacing:4px;

    }


    .jung-title {

        font-size:52px;

        line-height:1.05;

    }


    .jung-subtitle {

        font-size:26px;

        line-height:1.45;

    }


    .jung-intro-card {

        padding:45px 30px;

    }


    .jung-intro-card::before {

        inset:10px;

    }


    .jung-intro-card p {

        font-size:20px;

        line-height:1.7;

    }


    .jung-image img {

        width:270px;

    }


    .portrait-symbol {

        font-size:10px;

        letter-spacing:3px;

        padding:9px 18px;

    }


    /* -----------------------------------------
       GLAVNE KARTICE
       ----------------------------------------- */

    .jung-section {

        margin:0 5% 65px;

        padding:55px 28px 60px;

    }


    .jung-section::after {

        inset:10px;

    }


    .jung-section::before {

        right:22px;

        top:25px;

        width:135px;

        height:135px;

        font-size:75px;

        opacity:.48;

    }


    .section-title {

        font-size:10px;

        letter-spacing:3px;

        margin-bottom:20px;

    }


    .jung-section h2 {

        max-width:85%;

        font-size:2.65rem;

        line-height:1.08;

        margin-bottom:35px;

    }


    .jung-date-circle {

        width:95px;

        height:95px;

        margin-bottom:30px;

    }


    .jung-date-circle span {

        font-size:20px;

    }


    .jung-date-circle small {

        font-size:7px;

        letter-spacing:1.5px;

    }


    .jung-lead {

        font-size:21px;

        line-height:1.7;

        margin-bottom:45px;

    }


    /* -----------------------------------------
       DVE PODKARTICE → JEDNA ISPOD DRUGE
       ----------------------------------------- */

    .jung-subcards {

        grid-template-columns:1fr;

        gap:50px;

        padding-top:60px;

    }


    /* linija postaje vertikalno povezana */

    .jung-subcards::before {

        left:24px;

        right:auto;

        top:24px;

        bottom:24px;

        width:1px;

        height:auto;

        background:
            linear-gradient(
                180deg,
                transparent,
                rgba(176,138,82,.60) 10%,
                rgba(176,138,82,.60) 90%,
                transparent
            );

    }


    .jung-circle {

        top:-60px;

        left:0;

        width:48px;

        height:48px;

        box-shadow:
            0 0 0 6px var(--paper);

    }


    .jung-subcard {

        padding-left:35px;

    }


    .jung-subcard-content {

        padding:28px 22px;

    }


    .jung-subcard p {

        font-size:18px;

        line-height:1.7;

    }


    .jung-subcard h3 {

        font-size:10px;

        letter-spacing:2.5px;

    }


    .jung-final-symbol {

        width:85px;

        height:85px;

        font-size:38px;

    }


    .jung-final-line {

        font-size:23px;

    }


    .jung-biography-end {

        margin-bottom:100px;

    }


}


/* =========================================================
   VEOMA MALI EKRANI
   ========================================================= */

@media (max-width:420px) {


    .jung-title {

        font-size:44px;

    }


    .jung-subtitle {

        font-size:23px;

    }


    .jung-intro-card {

        padding:40px 22px;

    }


    .jung-intro-card p {

        font-size:19px;

    }


    .jung-section {

        margin-left:4%;

        margin-right:4%;

        padding:50px 22px 55px;

    }


    .jung-section::before {

        right:18px;

        top:22px;

        width:110px;

        height:110px;

        font-size:62px;

    }


    .jung-section h2 {

        max-width:90%;

        font-size:2.3rem;

    }


    .jung-lead {

        font-size:20px;

    }


    .jung-date-circle {

        width:88px;

        height:88px;

    }


    .jung-subcard {

        padding-left:30px;

    }


    .jung-subcard-content {

        padding:25px 18px;

    }


    .jung-subcard p {

        font-size:17px;

    }


}


/* ==========================================================
   PUT INDIVIDUACIJE — KARTICE KOJE SE OKREĆU
========================================================== */

.jung-map-card {
    position: relative;

    min-height: 280px;

    padding: 0;

    background: transparent;

    border: 0;

    box-shadow: none;

    perspective: 1000px;

    cursor: pointer;
}


/* unutrašnjost kartice */

.jung-map-card-inner {
    position: relative;

    width: 100%;
    min-height: 280px;

    transform-style: preserve-3d;

    transition:
        transform 0.8s cubic-bezier(.2,.7,.2,1);
}


/* kada je okrenuta */

.jung-map-card.is-flipped
.jung-map-card-inner {

    transform:
        rotateY(180deg);
}


/* ==========================================================
   PREDNJA I ZADNJA STRANA
========================================================== */

.jung-map-card-front,
.jung-map-card-back {

    position: absolute;

    inset: 0;

    min-height: 280px;

    padding: 35px 28px;

    border:
        1px solid rgba(176, 138, 82, 0.30);

    border-radius: 2px;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    display: flex;

    flex-direction: column;

    justify-content: center;

    background:
        linear-gradient(
            145deg,
            var(--paper-dark),
            var(--paper)
        );

    box-shadow:
        0 12px 35px rgba(60, 40, 20, 0.07);
}


/* ==========================================================
   PREDNJA STRANA
========================================================== */

.jung-map-card-front {

    transform:
        rotateY(0deg);
}


.jung-map-card-front .map-number {

    margin-bottom: 25px;
}


.jung-map-card-front h3 {

    margin: 0 0 17px;

    color: var(--ink);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 2rem;

    font-weight: 400;
}


.jung-map-card-front p {

    margin: 0;

    color: var(--brown);

    font-size: 0.9rem;

    line-height: 1.75;
}


/* ==========================================================
   ZADNJA STRANA — CITAT
========================================================== */

.jung-map-card-back {

    transform:
        rotateY(180deg);

    align-items: center;

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            var(--gold-light) 0%,
            var(--paper-dark) 38%,
            var(--paper) 85%
        );

    border-color:
        rgba(176, 138, 82, 0.55);

    box-shadow:
        0 15px 40px rgba(60, 40, 20, 0.10),
        inset 0 0 45px rgba(176, 138, 82, 0.08);
}


/* zvezdica */

.jung-map-card-back::before {

    content: "✦";

    display: block;

    margin-bottom: 22px;

    color: var(--gold);

    font-size: 1.5rem;
}


/* citat */

.jung-map-card-back blockquote {

    margin: 0;

    color: var(--ink);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.45rem;

    font-style: italic;

    line-height: 1.45;
}


/* mali tekst ispod citata */

.jung-map-card-back small {

    display: block;

    margin-top: 25px;

    color: var(--gold);

    font-size: 0.62rem;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


/* ==========================================================
   HOVER
========================================================== */

.jung-map-card:hover
.jung-map-card-front {

    border-color:
        rgba(176, 138, 82, 0.55);

    box-shadow:
        0 18px 45px rgba(60, 40, 20, 0.12),
        0 0 25px rgba(176, 138, 82, 0.08);
}


.jung-map-card:hover
.map-number {

    color: var(--gold);

}


/* ==========================================================
   MOBILNI
========================================================== */

@media (max-width: 650px) {

    .jung-map-card,
    .jung-map-card-inner,
    .jung-map-card-front,
    .jung-map-card-back {

        min-height: 300px;
    }

    .jung-map-card-front,
    .jung-map-card-back {

        padding: 30px 24px;
    }

    .jung-map-card-back blockquote {

        font-size: 1.3rem;
    }

}