@font-face {
    font-family: 'Exo2S';
    src: url('../fonts/Exo2-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Exo2E';
    src: url('../fonts/Exo2-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

:root {
    --cyan:   #00cce8;
    --orange: #e87a00;
    --white:  #f0f6ff;
    --text:   #daeaf8;
    --lbl:    #f0f8ff;
    --glow:   #0900ff;
    --line:   rgba(0, 204, 232, 0.55);
    --stage-ratio: 2.0222222222; /* predloha.png: 2912 / 1440 */
    --stage-width: min(100vw, 202.222222vh);
    --stage-height: min(100vh, 49.45055vw);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: grid;
    place-items: center;
    font-family: 'Exo2S', sans-serif;
    color: var(--text);
    background: #020716;
}

/* ===== GRID ===== */
.cv {
    position: relative;
    width: var(--stage-width);
    height: var(--stage-height);
    aspect-ratio: 2912 / 1440;
    overflow: hidden;
    min-width: 0;
    container-type: size;
    font-size: min(0.72vw, 1.456vh);
}

.cv-grid, .polylines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
}

.cv-grid {
    display: grid;
}

.cv-grid {
    z-index: 1;
    grid-template-columns: 21% 21% 14.6% 21% 21%;

    grid-template-rows: 11% 30.75% 27.5% 14.25% 14.25%;

    grid-template-areas:
        "header   header   omne     omne     omne   "
        "prace    prace    photo    vzdel    vzdel  "
        "jazyky   jazyky   photo    certif   certif "
        "technika technika zajmy    web      web    "
        "technika technika zajmy    kontakt  kontakt";

    gap: 0;
    padding: 0.545% 0.65%;
    padding: 1.1cqh 0.65cqw;
}

/* ===== SEKCE — průhledné panely ===== */
.cv-header, .cv-omne, .cv-prace, .cv-photo,
.cv-vzdel, .cv-jazyky, .cv-certif, .cv-web,
.cv-technika, .cv-zajmy, .cv-kontakt {
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.cv-header   { grid-area: header;   }
.cv-omne     { grid-area: omne;     }
.cv-prace    { grid-area: prace;    }
.cv-photo    { grid-area: photo;    }
.cv-vzdel    { grid-area: vzdel;    }
.cv-jazyky   { grid-area: jazyky;   }
.cv-certif   { grid-area: certif;   }
.cv-technika { grid-area: technika; }
.cv-zajmy    { grid-area: zajmy;    }
.cv-web      { grid-area: web;      }
.cv-kontakt  { grid-area: kontakt;  }

/* ===== HEADER ===== */
.header-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 12px 20px;
}

.header-name {
    font-family: 'Exo2E', sans-serif;
    font-size: 5.28em;
    color: var(--white);
    letter-spacing: 0.05em;
    line-height: 1;
    margin-bottom: 5px;
}

.header-title {
    font-family: 'Exo2S', sans-serif;
    font-size: 1.18em;
    color: var(--orange);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ===== SEKCE — vnitřek ===== */
.section-inner {
    height: 100%;
    padding: 9px 13px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: hidden;
}

/* ===== SEKCE — hlavička ===== */
.s-hd {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

.s-title {
    font-family: 'Exo2E', sans-serif;
    font-size: 1em;
    color: var(--white);
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.s-line {
    height: 1px;
    background: linear-gradient(90deg, var(--line) 0%, rgba(0, 204, 232, 0.08) 85%, transparent 100%);
    flex-shrink: 0;
}

/* ===== OBSAH ===== */
p {
    font-size: 0.88em;
    line-height: 1.52;
    color: var(--text);
}

.lbl {
    color: var(--lbl);
    font-family: 'Exo2E', sans-serif;
}

/* ===== PRACOVNÍ ZKUŠENOSTI ===== */
.job-name {
    color: var(--lbl);
    font-family: 'Exo2E', sans-serif;
    font-size: 0.88em;
    line-height: 1.4;
}

.job-list {
    padding-left: 1.2em;
    font-size: 0.86em;
    line-height: 1.55;
    color: var(--text);
}

.job-list li {
    margin-bottom: 1px;
}

/* ===== VZDĚLÁNÍ ===== */
.school-name {
    color: var(--lbl);
    font-family: 'Exo2E', sans-serif;
    font-size: 0.88em;
    line-height: 1.4;
}

/* ===== FOTO ===== */
.cv-photo {
    position: relative;
}

.photo {
    width: 100%;
    height: 100%;
}

.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.portrait-frame {
    position: absolute;
    left: calc(1209.258 / 2912 * 100%);
    top: calc(392.727 / 1440 * 100%);
    width: calc((1720.525 - 1209.258) / 2912 * 100%);
    height: calc((933.818 - 392.727) / 1440 * 100%);
    overflow: hidden;
    z-index: 1;
}

.portrait-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 34%;
}

.icon-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.cv-icon {
    position: absolute;
    display: block;
    object-fit: contain;
    opacity: 0.96;
    filter: brightness(1.8) saturate(1.55) drop-shadow(0 0 18px #0900ff);
    user-select: none;
    -webkit-user-drag: none;
}

.icon-prace {
    left: calc(78 / 2912 * 100%);
    top: calc(238 / 1440 * 100%);
    width: calc(230 / 2912 * 100%);
}

.icon-omne {
    left: calc(1310 / 2912 * 100%);
    top: calc(18 / 1440 * 100%);
    width: calc(128 / 2912 * 100%);
}

.icon-vzdelani {
    left: calc(2675 / 2912 * 100%);
    top: calc(250 / 1440 * 100%);
    width: calc(195 / 2912 * 100%);
}

.icon-certifikace {
    left: calc(2722 / 2912 * 100%);
    top: calc(596 / 1440 * 100%);
    width: calc(180 / 2912 * 100%);
}

.icon-jazyky {
    left: calc(8 / 2912 * 100%);
    top: calc(600 / 1440 * 100%);
    width: calc(165 / 2912 * 100%);
}

.icon-technika {
    left: calc(35 / 2912 * 100%);
    top: calc(1022 / 1440 * 100%);
    width: calc(205 / 2912 * 100%);
}

.icon-zajmy {
    left: calc(1200 / 2912 * 100%);
    top: calc(1000 / 1440 * 100%);
    width: calc(170 / 2912 * 100%);
}

.icon-email {
    left: calc(2276 / 2912 * 100%);
    top: calc(1150 / 1440 * 100%);
    width: calc(92 / 2912 * 100%);
}

.icon-phone {
    left: calc(2282 / 2912 * 100%);
    top: calc(1232 / 1440 * 100%);
    width: calc(82 / 2912 * 100%);
}

.icon-address {
    left: calc(2278 / 2912 * 100%);
    top: calc(1322 / 1440 * 100%);
    width: calc(92 / 2912 * 100%);
}

.text-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: auto;
    user-select: text;
    -webkit-user-select: text;
}

.text-layer ::selection {
    color: var(--white);
    background: rgba(9, 0, 255, 0.62);
}

.cv-copy,
.copy-web,
.cv-heading {
    position: absolute;
    color: var(--white);
    font-family: 'Exo2S', sans-serif;
    text-shadow: 0 0 5px #020716, 0 0 10px #020716;
    user-select: text;
    -webkit-user-select: text;
}

.cv-heading {
    margin: 0;
    z-index: 1;
    font-family: 'Exo2E', sans-serif;
    text-transform: uppercase;
}

.heading-main {
    left: calc(275 / 2912 * 100%);
    top: calc(40 / 1440 * 100%);
    width: calc(660 / 2912 * 100%);
}

.heading-main h1 {
    margin: 0;
    color: var(--white);
    font-family: 'Exo2E', sans-serif;
    font-size: 3.45cqw;
    line-height: 0.92;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.heading-main p {
    margin: 0.28em 0 0;
    color: var(--white);
    font-family: 'Exo2S', sans-serif;
    font-size: 1.22cqw;
    line-height: 1;
    white-space: nowrap;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.34cqw;
    line-height: 0.96;
    letter-spacing: 0.03em;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}

.section-heading a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
}

.timeline-item {
    display: contents;
}

.title-prace {
    left: calc(347 / 2912 * 100%);
    top: calc(277 / 1440 * 100%);
    width: calc((639 - 347) / 2912 * 100%);
    height: calc((407 - 277) / 1440 * 100%);
    white-space: normal;
}

.title-omne {
    left: calc(1127 / 2912 * 100%);
    top: calc(45 / 1440 * 100%);
    width: calc((1328 - 1127) / 2912 * 100%);
    height: calc((127 - 45) / 1440 * 100%);
    font-size: 1.12cqw;
}

.title-vzdel {
    left: calc(2375 / 2912 * 100%);
    top: calc(278 / 1440 * 100%);
    width: calc((2651 - 2375) / 2912 * 100%);
    height: calc((361 - 278) / 1440 * 100%);
}

.title-jazyky {
    left: calc(124 / 2912 * 100%);
    top: calc(752 / 1440 * 100%);
    width: calc((624 - 124) / 2912 * 100%);
    height: calc((829 - 752) / 1440 * 100%);
    font-size: 1.12cqw;
}

.title-certif {
    left: calc(2303 / 2912 * 100%);
    top: calc(622 / 1440 * 100%);
    width: calc((2657 - 2303) / 2912 * 100%);
    height: calc((700 - 622) / 1440 * 100%);
}

.title-technika {
    left: calc(344 / 2912 * 100%);
    top: calc(1040 / 1440 * 100%);
    width: calc((754 - 344) / 2912 * 100%);
    height: calc((1122 - 1040) / 1440 * 100%);
}

.title-zajmy {
    left: calc(1476 / 2912 * 100%);
    top: calc(1026 / 1440 * 100%);
    width: calc((1684 - 1476) / 2912 * 100%);
    height: calc((1094 - 1026) / 1440 * 100%);
    font-size: 1.11cqw;
}

.title-kontakty {
    left: calc(2354 / 2912 * 100%);
    top: calc(1052 / 1440 * 100%);
    width: calc((2584 - 2354) / 2912 * 100%);
    height: calc((1127 - 1052) / 1440 * 100%);
}

.cv-copy {
    padding: calc(4 / 2912 * 100%) calc(8 / 2912 * 100%);
    font-size: 0.82cqw;
    line-height: 1.16;
}

.cv-copy p {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0 0 0.38em;
}

.cv-copy p:last-child {
    margin-bottom: 0;
}

.cv-copy ol {
    margin: 0;
    padding-left: 1.18em;
}

.cv-copy li {
    margin: 0 0 0.08em;
}

.cv-copy .strong {
    color: var(--lbl);
    font-family: 'Exo2E', sans-serif;
}

.copy-omne {
    left: calc(1248 / 2912 * 100%);
    top: calc(150 / 1440 * 100%);
    width: calc(1110 / 2912 * 100%);
}

.copy-prace {
    left: calc(288 / 2912 * 100%);
    top: calc(432 / 1440 * 100%);
    width: calc(900 / 2912 * 100%);
}

.copy-jazyky {
    left: calc(195 / 2912 * 100%);
    top: calc(852 / 1440 * 100%);
    width: calc(790 / 2912 * 100%);
}

.copy-technika {
    left: calc(245 / 2912 * 100%);
    top: calc(1135 / 1440 * 100%);
    width: calc(990 / 2912 * 100%);
}

.copy-vzdel {
    left: calc(2040 / 2912 * 100%);
    top: calc(410 / 1440 * 100%);
    width: calc(790 / 2912 * 100%);
}

.copy-certif {
    left: calc(2110 / 2912 * 100%);
    top: calc(706 / 1440 * 100%);
    width: calc(730 / 2912 * 100%);
}

.copy-zajmy {
    left: calc(1408 / 2912 * 100%);
    top: calc(1158 / 1440 * 100%);
    width: calc(760 / 2912 * 100%);
}

.copy-web {
    left: calc(2180 / 2912 * 100%);
    top: calc(910 / 1440 * 100%);
    width: calc(500 / 2912 * 100%);
    color: #0900ff;
    font-family: 'Exo2E', sans-serif;
    font-size: 1.95cqw;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
}

.copy-kontakty {
    left: calc(2390 / 2912 * 100%);
    top: calc(1162 / 1440 * 100%);
    width: calc(380 / 2912 * 100%);
    line-height: 1.35;
}

.copy-kontakty p {
    min-height: calc(72 / 1440 * 100vh);
    margin-bottom: calc(8 / 1440 * 100vh);
    display: flex;
    align-items: center;
}

/* Nudge the single-line email & phone up so they sit on the vertical center of
   their icons. position:relative keeps the multi-line address (already aligned)
   from shifting. */
.copy-kontakty p:nth-child(1) { position: relative; top: -1cqh; }   /* kontakt@jan-rek.cz */
.copy-kontakty p:nth-child(2) { position: relative; top: -1.1cqh; } /* +420 733 454 009 */

/* ===== KONTAKT ===== */
.website-url {
    font-family: 'Exo2E', sans-serif;
    font-size: 1.45em;
    color: var(--cyan);
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border: 1px solid var(--cyan);
    background: rgba(0, 204, 232, 0.06);
    flex-shrink: 0;
    align-self: stretch;
    text-align: center;
    margin-bottom: 2px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.88em;
    color: var(--text);
    line-height: 1.45;
}

.c-icon {
    color: var(--cyan);
    font-size: 1em;
    width: 1.3em;
    text-align: center;
    flex-shrink: 0;
    margin-top: 1px;
}


/* ===== LAJNY ===== */
.polylines {
    z-index: 2;
    pointer-events: none;
}

.polylinesf {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    pointer-events: none;
    z-index: 2;
}

.polylinesf > div {
    position: absolute;
    inset: 0;
}

.polylines svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    filter: drop-shadow(0 0 44px #0900ff);
    stroke: #0900ff;
    stroke-width: 15.5;
}

.polylinesf svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #0900ff;
    stroke-width: 8.8;
}

.polylinesf .title-corners {
    filter: drop-shadow(0 0 14px #0900ff);
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.25s ease;
}

.polylinesf .title-corners.is-hover {
    transform: scale(1.12);
}

.polylinesf .title-corners-web {
    stroke: var(--white);
    filter: drop-shadow(0 0 14px rgba(240, 246, 255, 0.9));
}

/* Mobilní rohy se vytvoří jako skutečné SVG polyline v index/script.js. */
.mobile-title-corners {
    display: none;
}

/* ===== MOBILNÍ CV ===== */
@media (max-width: 760px) {
    html {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-behavior: smooth;
    }

    body {
        width: 100%;
        height: auto;
        min-height: 100vh;
        display: block;
        overflow-x: hidden;
        overflow-y: visible;
        background: #020716;
    }

    .cv {
        width: 100%;
        height: auto;
        min-height: 100vh;
        aspect-ratio: auto;
        overflow: visible;
        container-type: normal;
        display: flex;
        flex-direction: column;
        font-size: 16px;
    }

    .heading-main {
        position: static;
        width: 100%;
        padding: 28px 18px 24px;
        text-align: center;
        background: #020716;
    }

    .heading-main h1 {
        font-size: clamp(2.55rem, 13vw, 5.2rem);
        line-height: 0.95;
        white-space: normal;
    }

    .heading-main p {
        margin-top: 0.55rem;
        font-size: clamp(0.92rem, 4.2vw, 1.35rem);
        line-height: 1.2;
        letter-spacing: 0.055em;
        white-space: normal;
    }

    .portrait-frame {
        position: relative;
        inset: auto;
        width: 100%;
        height: min(115vw, 820px);
        overflow: hidden;
        background: #020716;
        box-shadow: inset 0 -20px 34px rgba(2, 7, 22, 0.25);
    }

    .portrait-frame img {
        width: 100%;
        height: auto;
        min-height: 0;
        object-fit: initial;
        object-position: initial;
        transform: translateY(-12.5%);
    }

    .cv > .mobile-nav-shell::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 23px;
        width: 3px;
        background: #0900ff;
        box-shadow: 0 0 12px rgba(9, 0, 255, 0.95);
        pointer-events: none;
    }

    .icon-layer,
    .polylines,
    .polylinesf,
    .copy-web {
        display: none;
    }

    .text-layer {
        position: relative;
        inset: auto;
        width: 100%;
        z-index: 1;
        pointer-events: auto;
    }

    .timeline-item {
        position: relative;
        display: block;
        width: 100%;
        min-width: 0;
        padding: 0 20px 42px 58px;
        scroll-margin-top: 22px;
    }

    .timeline-item::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 23px;
        width: 3px;
        background: #0900ff;
        box-shadow: 0 0 12px rgba(9, 0, 255, 0.95);
    }

    .timeline-item::after {
        content: '';
        position: absolute;
        top: 25px;
        left: 23px;
        width: 25px;
        height: 3px;
        background: #0900ff;
        box-shadow: 0 0 10px rgba(9, 0, 255, 0.95);
    }

    .timeline-item--last {
        padding-bottom: 30px;
    }

    .timeline-item--last::before {
        bottom: auto;
        height: 28px;
    }

    .timeline-item .section-heading {
        position: static;
        width: auto;
        height: auto;
        min-height: 50px;
        display: block;
        margin: 0 0 14px;
        font-size: clamp(1.12rem, 5.5vw, 1.55rem);
        line-height: 1.08;
        letter-spacing: 0.035em;
        text-align: left;
        white-space: normal;
    }

    .timeline-item .section-heading a {
        position: relative;
        min-height: 50px;
        width: fit-content;
        max-width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 11px 16px;
        color: var(--white);
        background:
            linear-gradient(var(--glow), var(--glow)) left top / 16px 3px no-repeat,
            linear-gradient(var(--glow), var(--glow)) left top / 3px 16px no-repeat,
            linear-gradient(var(--glow), var(--glow)) right top / 16px 3px no-repeat,
            linear-gradient(var(--glow), var(--glow)) right top / 3px 16px no-repeat,
            linear-gradient(var(--glow), var(--glow)) left bottom / 16px 3px no-repeat,
            linear-gradient(var(--glow), var(--glow)) left bottom / 3px 16px no-repeat,
            linear-gradient(var(--glow), var(--glow)) right bottom / 16px 3px no-repeat,
            linear-gradient(var(--glow), var(--glow)) right bottom / 3px 16px no-repeat;
        filter: drop-shadow(0 0 7px rgba(9, 0, 255, 0.9));
        text-shadow: 0 0 10px rgba(9, 0, 255, 0.72);
    }

    /* Jakmile jsou SVG polylines připravené, nahradí CSS rohy výše. */
    .timeline-item .section-heading a.has-mobile-title-corners {
        background: none;
    }

    .mobile-title-corners {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
        fill: none;
        stroke: var(--glow);
        stroke-width: 3px;
        filter: drop-shadow(0 0 7px rgba(9, 0, 255, 0.9));
        pointer-events: none;
        transform-box: fill-box;
        transform-origin: center;
        transition: transform 0.25s ease;
    }

    .mobile-title-corners polyline {
        vector-effect: non-scaling-stroke;
        stroke-linecap: square;
        stroke-linejoin: miter;
    }

    .timeline-item .section-heading a:hover .mobile-title-corners,
    .timeline-item .section-heading a:focus-visible .mobile-title-corners {
        transform: scale(1.08);
    }

    .timeline-item .section-heading a:hover,
    .timeline-item .section-heading a:focus-visible {
        color: var(--cyan);
    }

    .timeline-item .section-heading a:focus-visible {
        outline: 2px solid var(--cyan);
        outline-offset: 4px;
    }

    .timeline-item .cv-copy {
        position: static;
        width: auto;
        padding: 0;
        font-size: clamp(0.95rem, 4vw, 1.08rem);
        line-height: 1.52;
        text-shadow: 0 0 7px #020716;
    }

    .timeline-item .cv-copy p {
        margin-bottom: 0.72em;
    }

    .timeline-item .cv-copy ol {
        padding-left: 1.25em;
    }

    .timeline-item .cv-copy li {
        margin-bottom: 0.38em;
    }

    .timeline-item .copy-kontakty p {
        min-height: 0;
        margin: 0 0 0.65em;
        display: block;
    }

    .timeline-item .copy-kontakty p:nth-child(1),
    .timeline-item .copy-kontakty p:nth-child(2) {
        position: static;
        top: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}