/* ==========================================================================
   Pagrindiniai nustatymai ir kintamieji (su apsauga)
   ========================================================================== */
:root {
  --background-dark: #1e1e28;
  --background-light: #20202a;
  --background-element: #242430;
  --primary-accent: #f7c32e;
  --primary-accent-darker: #f9c800;
  --text-primary: #fafafc;
  --text-secondary: #8c8c8e;
  --text-body: #bbbbbb;
  --border-color: #444444;
  --shadow-color: rgba(0, 0, 0, 0.25);
}

/* -------------------------------------------------------------------------- */
/* PATAISYMAS Nr. 1: Paslepiame slinkties juostą BODY elementui (veiks mobiliojoje versijoje) */
/* -------------------------------------------------------------------------- */
body {
  height: 100vh;
  overflow: hidden;
  background-color: #1e1e28; /* Apsauga */
  background-image: linear-gradient(135deg, var(--background-dark) 0%, #111115 100%);
  font-family: 'Poppins', sans-serif;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE ir Edge */
}
body::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

h5 { margin: 10px 0; font-size: 14px; font-weight: bold; line-height: 20px; }

/* ==========================================================================
   Pagrindinė Struktūra
   ========================================================================== */
.art-app-wrapper { display: flex; justify-content: center; width: 100%; height: 100vh; margin: 0 auto; position: relative; }
.art-app-container { display: flex; position: relative; width: 100%; max-width: 1320px; height: 100%; box-shadow: 0 5px 20px var(--shadow-color); overflow: hidden; }

/* ==========================================================================
   Kairė Informacijos Juosta (Desktop)
   ========================================================================== */
.art-info-bar { z-index: 10; background-color: var(--background-light); display: flex; flex-flow: column; justify-content: space-between; align-items: center; width: 290px; min-width: 290px; height: 100%; padding: 15px; position: relative; border-right: 1px solid var(--border-color); }
.art-info-bar-frame { display: flex; flex-flow: column; flex: 1; width: 100%; overflow: hidden; }
.art-header { text-align: center; background-color: var(--background-element); display: flex; flex-flow: column; justify-content: center; align-items: center; padding: 30px; margin-bottom: 20px; border-radius: 5px; }
.art-avatar { border-radius: 50%; width: 90px; height: 90px; margin-bottom: 20px; overflow: hidden; box-shadow: 0 0 0 4px var(--background-element), 0 0 0 6px var(--primary-accent); }
.art-name { color: var(--text-primary); margin-bottom: 5px; font-size: 17px; font-weight: 600; }
.art-sm-text { color: var(--text-secondary); font-size: 13px; }
.art-social-links { display: flex; gap: 20px; align-items: center; justify-content: center; padding: 15px 0; }
.art-social-links.mobile { display: none; }
a.social-icon { color: var(--text-secondary); font-size: 16px; transition: color 0.3s ease, transform 0.3s ease; }
a.social-icon:hover { color: var(--primary-accent); transform: translateY(-3px); }
.art-scroll-frame { flex: 1; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.art-scroll-frame::-webkit-scrollbar { display: none; }
.art-table { display: flex; flex-direction: column; gap: 12px; padding: 15px; margin-bottom: 15px; }
.table-row { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.table-row h6 { color: var(--text-primary); margin: 0; font-size: 14px; font-weight: 600; }
.table-row div { color: var(--text-secondary); font-weight: 400; text-align: right; }
.art-ls-divider { background-color: var(--border-color); height: 1px; margin: 20px 0; width: 100%; display: block; }
.art-lang-skills { display: flex; justify-content: center; align-items: center; gap: 20px; padding: 5px 15px; margin-bottom: 10px; }
.lang-skill { display: flex; flex-direction: column; align-items: center; width: 80px; }
.progress-circle { width: 70px; height: 70px; transition: transform 0.3s ease; }
.lang-skill:hover .progress-circle { transform: scale(1.1); }
.progress-bg { fill: none; stroke: var(--background-element); stroke-width: 2; }
.progress-bar { fill: none; stroke: url(#progress-gradient); stroke-width: 2.5; stroke-linecap: round; }
.progress-text { font-size: 14px; font-weight: 600; fill: var(--text-primary); }
.lang-name { color: var(--text-secondary); font-size: 13px; margin-top: 8px; }
.art-hard-skills { display: flex; flex-flow: column; gap: 15px; padding: 0 15px; margin-bottom: 20px; }
.skill-label { font-size: 14px; color: var(--text-primary); margin-bottom: 6px; display: flex; justify-content: space-between; }
.skill-bar { width: 100%; height: 6px; background-color: var(--background-element); border-radius: 20px; overflow: hidden; }
.skill-fill { height: 100%; width: 0; background-image: linear-gradient(to right, var(--primary-accent), #ffd966); border-radius: 20px; transition: width 1.2s ease-in-out; }
.art-knowledge-list { padding: 5px 15px; margin: 0 0 10px 0; list-style: none; }
.art-knowledge-list li { color: var(--text-secondary); font-size: 14px; margin-bottom: 8px; transition: color 0.3s ease; }
.art-knowledge-list li:hover { color: var(--primary-accent); }
.art-links-frame { padding: 15px; text-align: center; }
.art-link { color: var(--text-secondary); text-decoration: none; font-weight: 600; padding: 10px 15px; border: 1px solid var(--border-color); border-radius: 20px; display: inline-block; transition: all 0.3s ease; }
.art-link:hover { color: var(--background-dark); background-color: var(--primary-accent); border-color: var(--primary-accent); }

/* ==========================================================================
   Pagrindinis Turinys
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* PATAISYMAS Nr. 2: Paslepiame slinkties juostą .art-content (veiks desktop versijoje) */
/* -------------------------------------------------------------------------- */
.art-content {
  flex: 1;
  height: 100%;
  background-color: var(--background-dark);
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE ir Edge */
}
.art-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.art-scroll-frame.main { overflow: visible; }
.post-214 { padding: 0 30px; }
.elementor-section { padding: 30px 0; }
.art-banner { background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/bg.jpg'); background-position: 50%; background-size: cover; margin: 30px 0; position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 10px 30px var(--shadow-color); }
.art-banner-overlay { padding: 60px; }
.art-banner-title-h { color: var(--text-primary); margin-bottom: 15px; font-size: 52px; font-weight: 700; text-shadow: 0 2px 5px rgba(0,0,0,0.5); }
.art-lg-text.art-code { font-size: 18px; font-family: "Courier Prime", monospace; color: var(--text-primary); margin-bottom: 25px; }
.txt-rotate > .wrap { border-right: 0.08em solid var(--primary-accent); }
.art-timeline-columns { display: flex; flex-flow: wrap; justify-content: space-between; gap: 40px; width: 100%; padding: 0 15px; }
.art-timeline-column { display: flex; flex-flow: column; flex: 1 1 45%; min-width: 300px; }
.art-section-title-heading { color: var(--text-primary); font-size: 24px; font-weight: 600; margin-bottom: 30px; padding-left: 20px; border-left: 3px solid var(--primary-accent); }
.art-timeline { border-right: 1px solid var(--border-color); margin-right: 40px; padding-right: 30px; position: relative; }
.art-timeline-item { background-color: var(--background-element); border-radius: 10px; margin-bottom: 40px; padding: 25px 30px; position: relative; box-shadow: 0 5px 15px var(--shadow-color); transition: all 0.3s ease; }
.art-timeline-item:hover { transform: translateY(-5px); box-shadow: 0 12px 25px var(--shadow-color); }
.art-timeline-mark-light { z-index: 0; background-color: #ffc10733; border-radius: 50%; width: 24px; height: 24px; position: absolute; top: 25px; right: -50px; box-shadow: 0 0 10px #ffc10799; }
.art-timeline-mark { z-index: 1; background-color: #ffc107; border-radius: 50%; width: 14px; height: 14px; position: absolute; top: 30px; right: -45px; box-shadow: 0 0 10px #ffc10799; }
.art-timeline-content { display: flex; flex-flow: column; }
.art-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 20px; }
.art-h5 { color: var(--primary-accent-darker); margin: 0; font-size: 16px; font-weight: 700; }
.art-el-suptitle { color: var(--text-secondary); font-size: 13px; margin-top: 5px; }
.art-date { color: var(--text-primary); background-color: #333; border-radius: 20px; padding: 4px 12px; font-size: 12px; }
.art-timeline-content p, .text-block { color: var(--text-body); margin: 10px 0 0 0; line-height: 1.7; }

/* SVG ir animacijos */
svg#progress-gradient-def { position: absolute; width: 0; height: 0; }
@keyframes pulse { 0% { box-shadow: 0 0 4px rgba(255,193,7,0.3); transform: scale(1); } 50% { box-shadow: 0 0 8px rgba(255,193,7,0.5); transform: scale(1.05); } 100% { box-shadow: 0 0 4px rgba(255,193,7,0.3); transform: scale(1); } }
.art-timeline-mark, .art-timeline-mark-light { animation: pulse 2s infinite ease-in-out; }

/* Paslepiame elementus, kurie bus rodomi tik mobiliojoje versijoje */
.art-top-panel { display: none; }

/* ==========================================================================
   RESPONSIVE DIZAINAS IR MOBILI NAVIGACIJA
   ========================================================================== */
@media screen and (max-width: 1024px) {
  body, .art-app-wrapper { height: auto; overflow-x: hidden; overflow-y: auto; }
  body.is-menu-open { overflow: hidden; }
  .art-app-container { flex-direction: column; height: auto; overflow: visible; }

  .art-top-panel { display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 70px; background-color: var(--background-dark); z-index: 1001; justify-content: flex-start; align-items: center; padding: 0 25px; border-bottom: 1px solid var(--border-color); }
  .burger { display: flex; flex-direction: column; justify-content: space-around; width: 28px; height: 24px; cursor: pointer; z-index: 1002; }
  .burger-line { width: 100%; height: 3px; background-color: var(--text-primary); border-radius: 2px; }

  .art-info-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 290px;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    z-index: 1002;
    overflow-y: auto;
  }
  .art-info-bar.is-open {
    transform: translateX(0);
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2);
  }
  .art-social-links.mobile { display: flex; }

  .art-content { width: 100%; height: auto; padding-top: 70px; }
  .post-214 { padding: 0 20px; }
  .art-banner-overlay { padding: 40px 30px; }
  .art-banner-title-h { font-size: 38px; }
  .art-timeline { margin-right: 0; padding-right: 25px; }
  .art-timeline-mark, .art-timeline-mark-light { right: -25px; }
  .art-timeline-mark-light { right: -29px; }

  .art-curtain { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; opacity: 0; transition: opacity 0.4s ease; }
  .art-curtain.is-active { display: block; opacity: 1; }
}