@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');

/* ==============================================
   ZÁKLADNÉ NASTAVENIA
   ============================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { 
    font-family: 'DM Sans', Arial, sans-serif; 
    line-height: 1.6; 
    color: #5d5e60; 
    background-color: #f4f4f4; 
}
.container { 
    max-width: 1300px; 
    margin: 0 auto; 
    padding: 0 40px; 
}

/* ==============================================
   HLAVIČKA
   ============================================== */
header {
    position: relative; 
    background: linear-gradient(135deg, #eb6d25 0%, #c14d10 100%);
    padding: 40px 0; 
    text-align: left; 
    color: #f7f7f7;
    overflow: hidden;
}

header::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.35; 
    mix-blend-mode: overlay; 
    pointer-events: none;
}

header .header-content {
    position: relative;
    z-index: 1;
    padding: 0 50px; 
}

header h1 { 
    font-size: 2.2rem; 
    text-transform: uppercase; 
    margin: 0; 
    line-height: 1.25;
}

header .accent-text { 
    color: #333333; 
    font-family: 'Fraunces', serif; 
    font-size: 2.1rem; 
    font-weight: 500; 
    font-style: italic; 
    text-transform: uppercase;
}

.thesis-label { 
    display: inline-block; 
    background: rgba(0, 0, 0, 0.15); 
    padding: 4px 14px; 
    border-radius: 30px; 
    font-size: 0.9rem; 
    font-weight: 700; 
    margin-bottom: 15px; 
}

.english-title { 
    font-size: 1.1rem; 
    color: rgba(255, 255, 255, 0.85); 
    margin-top: 10px; 
    text-transform: uppercase; 
}

.header-divider { width: 60px; height: 3px; background: #f7f7f7; margin: 25px 0; opacity: 0.4; }

.thesis-authors .author-name { font-size: 1.25rem; font-weight: 700; margin-bottom: 2px; }
.thesis-authors .supervisor-name { font-size: 1rem; opacity: 0.9; }

/* ==============================================
   NAVIGÁCIA
   ============================================== */
nav { 
    background: rgba(255, 255, 255, 0.9); 
    backdrop-filter: blur(10px);
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    border-bottom: 1px solid rgba(235, 109, 37, 0.1); 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
}
.nav-list { list-style: none; display: flex; justify-content: center; }
.nav-list a { 
    display: block; 
    padding: 18px 25px; 
    text-decoration: none; 
    color: #5d5e60; 
    font-weight: 700; 
    font-size: 1.05rem; 
    text-transform: uppercase; 
    transition: 0.3s; 
}
.nav-list a:hover { color: #eb6d25; }

/* ==============================================
   KARTY (SEKCIE)
   ============================================== */
.stack-container { padding: 60px 0; }
.stack-card {
    background: #f7f7f7;
    border-radius: 24px;
    padding: 50px;
    margin-bottom: 40px; 
    border: 1px solid rgba(235, 109, 37, 0.15);
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.03); 
    scroll-margin-top: 60px;
}

section h2 { 
    font-size: 2rem; 
    color: #5d5e60; 
    margin-bottom: 30px; 
    text-transform: uppercase; 
}

section h3 { 
    color: #eb6d25; 
    font-size: 1.25rem; 
    margin-bottom: 20px; 
    text-transform: uppercase; 
    font-weight: 700; 
} 

.card-content { 
    flex-grow: 1; 
    font-size: 1.15rem; 
}

/* ==============================================
   ZOZNAMY A ODRÁŽKY
   ============================================== */
.custom-bullets { list-style: none; padding-left: 0; margin: 20px 0; }
.custom-bullets li { display: flex; align-items: center; margin-bottom: 15px; }
.custom-bullets li::before {
    content: "•"; color: #eb6d25; font-size: 2.2rem; margin-right: 15px; line-height: 0; 
}

/* ==============================================
   TIMELINE (POSTUP PRÁCE)
   ============================================== */
.modern-timeline { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; position: relative; }
.modern-timeline::before {
    content: ''; position: absolute; top: 35px; left: 0; width: 100%; height: 2px; background: rgba(235, 109, 37, 0.3);
}
.mt-item { flex: 1; position: relative; padding-top: 65px; display: flex; flex-direction: column; }
.mt-dot {
    position: absolute; top: 28px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; background: #eb6d25; border-radius: 50%; box-shadow: 0 0 0 5px rgba(235, 109, 37, 0.15);
}
.mt-label {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%); color: #eb6d25; font-size: 1rem; font-weight: 700; text-transform: uppercase;
}
.mt-card { 
    background: #f7f7f7; 
    border: 1px solid #fde6d9; 
    border-radius: 12px; 
    padding: 15px; 
    text-align: center; 
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.mt-card:hover {
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); 
    border-color: #eb6d25; 
}
.mt-card h3 { color: #5d5e60; font-size: 1.05rem; } 
.mt-card p { font-size: 0.95rem; }

/* ==============================================
   ŠTATISTIKY A TAGY
   ============================================== */
.stats-row { display: flex; gap: 40px; margin-bottom: 25px; }
.stat-num { 
    font-family: 'Fraunces', serif; 
    font-size: 2.1rem; 
    font-weight: 700; 
    color: #eb6d25; 
    line-height: 1;
    margin-bottom: 8px;
}
.stat-text { font-size: 1rem; font-weight: 700; text-transform: uppercase; color: #5d5e60; }
.tools-tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.tool-tag { background: #fbe6da; color: #d45b1a; padding: 6px 16px; border-radius: 30px; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; }

/* ==============================================
   ODKAZY V TEXTE
   ============================================== */
.card-content p a {
    color: #eb6d25;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    padding: 0 2px;
    border-radius: 3px;
}

.card-content p a:hover {
    color: #d45b1a;
    background: #fbe6da;
}

.card-content p a:visited {
    color: #c14d10;
    background: #fbe6da;
}

.card-content p a:visited:hover {
    color: #d45b1a;
    border-bottom-color: #d45b1a;
    background: #fbe6da;
}

.access-note {
    display: block;
    margin-top: 10px;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 1rem;
    color: #8a8b8d;
}

/* ==============================================
   PREPÍNAČ JAZYKOV
   ============================================== */
.card-header-toggle { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.lang-toggle { display: flex; background: #f4f4f4; border-radius: 30px; padding: 4px; border: 1px solid #e0e0e0; }
.toggle-btn { background: transparent; border: none; padding: 6px 18px; border-radius: 20px; font-size: 0.9rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.toggle-btn.active { background: #eb6d25; color: #f7f7f7; }
.lang-content { display: none; animation: fadeInLang 0.4s forwards; }
.lang-content.active { display: block; }

@keyframes fadeInLang { 
    from { opacity: 0; transform: translateY(5px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* ==============================================
   DÁTA A PROGRAMY
   ============================================== */
.data-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; }
.data-group h3, .software-group h3 { font-size: 1.25rem; color: #eb6d25; text-transform: uppercase; font-weight: 700; margin-bottom: 20px; }
.software-group .tool-tag { background: #f7f7f7; border: 1px solid #5d5e60; color: #5d5e60; transition: 0.3s; font-size: 0.9rem; }
.software-group .tool-tag:hover { background: #5d5e60; color: #f7f7f7; }

/* ==============================================
   TLAČIDLÁ NA STIAHNUTIE
   ============================================== */
.links-grid { display: flex; gap: 40px; justify-content: flex-start; margin-top: 20px; }
.link-button-wrapper { display: flex; flex-direction: column; align-items: flex-start; }
.btn-download { 
    display: inline-block; 
    padding: 14px 28px; 
    background: #eb6d25; 
    color: #f7f7f7; 
    text-decoration: none; 
    border-radius: 8px; 
    font-weight: 700; 
    font-size: 1.05rem; 
    text-transform: uppercase; 
    transition: 0.2s; 
}
.btn-download:hover { background: #d45b1a; transform: translateY(-3px); }
.link-label { display: block; font-size: 0.9rem; font-weight: 700; margin-bottom: 10px; color: #5d5e60; }

/* ==============================================
   PÄTIČKA
   ============================================== */
footer { 
    background: #5d5e60; 
    color: #f7f7f7; 
    text-align: center; 
    padding: 40px 0; 
    border-top: 4px solid #eb6d25; 
    text-transform: uppercase; 
    font-size: 1rem; 
}
footer p { margin-bottom: 8px; }
.footer-email a { color: #eb6d25; text-decoration: none; font-weight: 700; }

/* ==============================================
   RESPONZIVITA
   ============================================== */
@media (max-width: 768px) {
    .container { padding: 0 15px; }
    .stack-container { padding: 30px 0; }
    .stack-card { padding: 30px 20px; margin-bottom: 25px; border-radius: 16px; word-wrap: break-word; scroll-margin-top: 350px; }
    header .header-content { padding: 0 20px; }
    header h1 { font-size: 1.65rem; }
    header .accent-text { font-size: 1.5rem; }

    /* Navigácia v mriežke pre mobily */
    .nav-list { display: grid; grid-template-columns: 1fr 1fr; background: #f7f7f7; }
    .nav-list li { border: 0.5px solid rgba(235, 109, 37, 0.1); }
    .nav-list a { padding: 15px 5px; font-size: 0.9rem; text-align: center; }

    /* Vertikálna časová os pre mobily */
    .modern-timeline { flex-direction: column; gap: 30px; padding-left: 5px; }
    .modern-timeline::before { display: none; } 
    .mt-item { padding-top: 0; padding-left: 35px; flex-direction: column; }
    .mt-dot { top: 12px; left: 0; transform: none; }
    .mt-label { position: relative; transform: none; left: 0; text-align: left; margin-bottom: 5px; font-size: 1.05rem; }
    .mt-card { text-align: left; width: 100%; }

    /* Úprava rozloženia sekcií */
    .stats-row { flex-direction: column; gap: 20px; }
    .card-header-toggle { flex-direction: column; align-items: flex-start; gap: 15px; }
    .links-grid { flex-direction: column; gap: 20px; }
    .btn-download { width: 100%; text-align: center; }
}

@media (max-width: 480px) {
    .nav-list { grid-template-columns: 1fr; }
    header h1 { font-size: 1.4rem; }
    .stat-num { font-size: 1.8rem; }
}