/* --- ZÁKLADNÉ NASTAVENIA A PREMENNÉ --- */
:root {
    /* Tu definujeme "globálne premenné", aby sme farby a fonty menili na jednom mieste */
    --bg-color: #ffffff;          /* Biela farba pozadia */
    --text-main: #262730;         /* Hlavná farba textu (tmavošedá, príjemnejšia ako čierna) */
    --text-light: #555;           /* Svetlejšia farba pre menej dôležitý text */
    --accent: #ff4b4b;            /* Akcentová farba (červená) pre tlačidlá a zvýraznenia */
    --gray-bg: #f0f2f6;           /* Svetlošedé pozadie pre karty a bloky */
    --font-main: 'Roboto', sans-serif;      /* Hlavný font stránky */
    --font-code: 'Source Code Pro', monospace; /* Font pre ukážky kódu */
}

* {
    box-sizing: border-box;       /* Kľúčové: Padding a rámčeky nezväčšujú šírku elementu */
    margin: 0; padding: 0;        /* Vynulovanie predvolených odsadení prehliadača (tzv. Reset) */
}

body {
    font-family: var(--font-main); /* Použije font z premennej */
    color: var(--text-main);       /* Nastaví základnú farbu textu */
    line-height: 1.6;              /* Výška riadku (1.6x veľkosť písma) pre lepšiu čitateľnosť */
    background-color: var(--bg-color); /* Farba pozadia celej stránky */
}

.main-container {
    max-width: 750px;             /* Obsah bude široký max 750px (dizajn úzkeho stĺpca) */
    margin: 0 auto;               /* 0 hore/dole, AUTO vľavo/vpravo = vycentruje obsah na stred */
    padding: 3rem 1.5rem;         /* Vnútorné odsadenie: hore/dole viac, po bokoch menej */
}

/* --- TYPOGRAFIA (Nadpisy a Text) --- */
h1 {
    font-size: 2.5rem;            /* Veľký hlavný nadpis */
    font-weight: 700;             /* Tučné písmo */
    margin-bottom: 0.5rem;        /* Medzera pod nadpisom */
}
h2 {
    font-size: 1.75rem;
    color: var(--text-main);
    margin-bottom: 1.5rem;
    margin-top: 1rem;             /* Medzera nad nadpisom, aby nebol nalepený na predošlý text */
}
h3 {
    font-size: 1.1rem;
    font-weight: 600;             /* Polotučné písmo */
    margin-bottom: 1rem;
}
p {
    margin-bottom: 1rem;          /* Odstavce majú pod sebou medzeru */
    color: var(--text-light);     /* Text odstavcov je jemne svetlejší */
}
a {
    text-decoration: none;        /* Odstráni podčiarknutie z odkazov */
}

/* --- HLAVIČKA PROFILU --- */
.profile-header {
    display: flex;                /* Uloží fotku a text vedľa seba (flexbox) */
    align-items: center;          /* Zarovná ich vertikálne na stred */
    gap: 2rem;                    /* Medzera medzi fotkou a textom */
    margin-bottom: 2rem;          /* Odsadenie celej hlavičky od zvyšku stránky */
}
.avatar {
    width: 160px;
    height: 160px;                /* Fixná veľkosť obrázka */
    border-radius: 50%;           /* Zmení štvorec na kruh */
    object-fit: cover;            /* Oreže obrázok tak, aby vyplnil kruh bez deformácie */
    border: 3px solid var(--gray-bg); /* Jemný šedý rámik okolo fotky */
}
.tags {
    font-weight: bold;
    color: var(--text-main);
    margin-bottom: 1rem;
}

/* --- TLAČIDLÁ --- */
.btn {
    display: inline-block;        /* Aby tlačidlo rešpektovalo padding a margin */
    padding: 0.6rem 1.2rem;       /* Veľkosť tlačidla (vnútorná) */
    background-color: white;
    border: 1px solid #d1d5db;    /* Tenký šedý rámik */
    border-radius: 8px;           /* Zaoblené rohy */
    color: var(--text-main);
    font-weight: 500;
    transition: all 0.2s;         /* Plynulá animácia pri zmene farby (hover) */
}
.btn:hover {                      /* Štýl pri nabehnutí myšou */
    border-color: var(--accent);  /* Rámik sčervenie */
    color: var(--accent);         /* Text sčervenie */
    background-color: #fff5f5;    /* Pozadie sa zmení na jemne ružovú */
}

.divider {
    height: 1px;                  /* Výška deliacej čiary */
    background-color: #e5e7eb;    /* Farba čiary */
    margin: 3rem 0;               /* Veľká medzera hore a dole okolo čiary */
}

/* --- METRIKY (GRID SYSTÉM) --- */
.metrics-grid {
    display: grid;                /* Zapne mriežkový layout */
    /* Magický riadok pre responzivitu: vytvorí toľko stĺpcov, koľko sa zmestí (min 150px) */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;                    /* Medzery medzi kartami */
    margin-bottom: 2rem;
}
.metric-card {
    background-color: var(--gray-bg); /* Šedé pozadie karty */
    padding: 1.2rem;
    border-radius: 10px;          /* Zaoblené rohy karty */
}
.metric-card .label {
    font-size: 0.85rem;           /* Menšie písmo pre popis */
    color: #666;
    display: block;               /* Aby bol popis na vlastnom riadku */
}
.metric-card .value {
    font-size: 1.8rem;            /* Veľké číslo hodnoty */
    font-weight: 700;
    display: block;
    margin: 0.2rem 0;
}
.metric-card .delta {
    font-size: 0.8rem;
    color: #666;
}
.metric-card .delta.up {
    color: #09ab3b;               /* Zelená farba pre pozitívnu zmenu */
}

.chart-wrapper {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.5rem;
}

.chart-container {
    position: relative;           /* Potrebné pre správne vykreslenie grafov knižnicami */
    height: 300px;                /* Fixná výška grafu, aby neskákal */
    width: 100%;
}

/* --- SEKCIA STĹPCOV (KALISTENIKA) --- */
.two-column {
    display: flex;                /* Flexbox pre stĺpce vedľa seba */
    gap: 2rem;                    /* Medzera medzi stĺpcami */
}
.text-col { flex: 2; }            /* Text zaberie 2/3 šírky (viac miesta) */
.img-col { flex: 1; }             /* Obrázok zaberie 1/3 šírky */
.img-col img {
    width: 100%;                  /* Obrázok sa prispôsobí šírke stĺpca */
    border-radius: 10px;
    object-fit: cover;
}

.skill-box {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Jemný tieň pod boxom */
}
.skill-box ul {
    list-style: none;             /* Odstráni predvolené bodky zoznamu */
    padding-left: 0;
}
.skill-box li {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;         /* Odsadenie textu pre vlastnú odrážku */
    position: relative;
}
/* Vlastná odrážka (fajka) */
.skill-box li::before {
    content: "✓";                 /* Znak fajky */
    color: var(--accent);         /* Červená farba fajky */
    position: absolute;           /* Umiestnenie na absolútnu pozíciu vľavo */
    left: 0;
    font-weight: bold;
}

/* --- CODE BLOCK (EDITOR VZHĽAD) --- */
.code-editor {
    background-color: #0e1117;    /* Tmavé pozadie ako v IDE */
    border-radius: 10px;
    overflow: hidden;             /* Oreže obsah, ktorý prečnieva cez zaoblené rohy */
    margin-top: 1rem;
    color: #c9d1d9;               /* Svetlý text kódu */
    font-family: var(--font-code); /* Monospace písmo */
}
.code-header {
    background-color: #161b22;    /* Tmavšia lišta hore */
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #30363d;
}
/* Farebné bodky (Mac štýl) */
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.red { background: #ff5f56; }
.yellow { background: #ffbd2e; }
.green { background: #27c93f; }

.filename {
    margin-left: 10px;
    font-size: 0.8rem;
    color: #8b949e;
}

pre {
    padding: 20px;
    overflow-x: auto;             /* Ak je kód dlhý, zobrazí sa posuvník (scroll) */
    font-size: 0.9rem;
}
code { font-family: var(--font-code); }

/* --- PÄTIČKA --- */
footer {
    text-align: center;           /* Zarovnanie textu na stred */
    margin-top: 4rem;
    font-size: 0.8rem;
    color: #888;
}

/* --- RESPONZIVITA (MOBIL) --- */
@media (max-width: 768px) {       /* Pravidlá platia len pre obrazovky užšie ako 768px */
    .profile-header {
        flex-direction: column;   /* Zmení smer z riadku na stĺpec (pod seba) */
        text-align: center;       /* Vycentruje text */
    }
    .two-column {
        flex-direction: column-reverse; /* Obrázok pôjde HORE, text DOLE (prehodené poradie) */
    }
    .main-container {
        padding: 2rem 1rem;       /* Menšie odsadenie na malých displejoch */
    }
}