/* Базовые стили и переменные */

:root {
--table-border: 1px solid #e0e0e0;
--cell-padding: 30px 0px;
--header-bg: #f5f5f5;
--hover-bg: #ffffff;

/* Цвета для разных колонок */
--date-color:   #333F48;
--position-color: #333F48;
--company-color: #333f48;
    
/* Ширина колонок для десктопа */
--date-width: 26%;
--position-width: 52%;
--company-width: 22%;
--letter-width: 38%;
--tools-width: 33%;
--skills-width: 28%;
--awards-year-width: 13%;

--row-gap: 20px;
--col-gap: 15px;
}

.fira-sans-thin {
    font-family: "Fira Sans", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .fira-sans-extralight {
    font-family: "Fira Sans", sans-serif;
    font-weight: 200;
    font-style: normal;
  }
  
  .fira-sans-light {
    font-family: "Fira Sans", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .fira-sans-regular {
    font-family: "Fira Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .fira-sans-medium {
    font-family: "Fira Sans", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .fira-sans-semibold {
    font-family: "Fira Sans", sans-serif;
    font-weight: 600;
    font-style: normal;
  }
  
  .fira-sans-bold {
    font-family: "Fira Sans", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .fira-sans-extrabold {
    font-family: "Fira Sans", sans-serif;
    font-weight: 800;
    font-style: normal;
  }
  
  .fira-sans-black {
    font-family: "Fira Sans", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .fira-sans-thin-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .fira-sans-extralight-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 200;
    font-style: italic;
  }
  
  .fira-sans-light-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .fira-sans-regular-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .fira-sans-medium-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 500;
    font-style: italic;
  }
  
  .fira-sans-semibold-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 600;
    font-style: italic;
  }
  
  .fira-sans-bold-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .fira-sans-extrabold-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 800;
    font-style: italic;
  }
  
  .fira-sans-black-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 900;
    font-style: italic;
  }
  
  
/* Применяем шрифт */
body {
    font-family: 'Fira Sans','Inter', 'Roboto Flex', -apple-system, BlinkMacSystemFont,  sans-serif;
  }

/* Горизонтальное меню для home */
.bio-header {
position: relative;
max-width: 1128px;
margin: 20px auto;
width: 100%;
height: 160px;
z-index: 1000;
transition: var(--transition);
}  

.logo {
font-family: 'Fira Sans';
font-weight: 500;
margin: 20px auto;
z-index: 1001;
color: var(--date-color);
text-decoration: none;
}



/* Интро таблица */
.grid-intro-table {
display: grid;
grid-template-columns: 26% 74%; /* Соотношение колонок */
width: 100%;
max-width: 1128px;
margin: 20px auto;
font-family: "Fira Sans", sans-serif;
font-weight: 400;
font-style: normal;
margin-bottom: 160px;
}  
.grid-intro-row {
display: contents; /* Позволяет элементам ряда участвовать в grid */
}  
.grid-intro-cell {
padding: 12px;
}
.intro-first {
display: flex;
flex-direction: column;
justify-content: flex-end;
font-size: 1rem;
font-weight: 400;
padding-left: 0;
padding-bottom: 13%;
color: var(--date-color);
}

.self-container {
    display: flex;
    z-index: -1;
}
  
.self-container img {
    display: block; /* Убирает лишние отступы у изображения */
    margin-left: -30px;
    padding-bottom: 30px;
}

/* Индивидуальные стили для каждой строки */
.contact-name-last {
padding-top: 0;
margin-top: 0;
margin-bottom: 35px;
font-weight: 700;
color: #333F48;
/* Другие стили для фамилии */ 
}
.contact-name-first {
padding-bottom: 5px;
margin-bottom: 0;    
font-weight: 700;
color: #333F48;
/* Другие стили для имени */
}    
.contact-phone {
margin-bottom: 5px;
text-decoration: none;
color: #333F48;
/* Другие стили для телефона */
}    
.contact-email {
padding-top: 10px;
margin-bottom: 5px;
color: #333F48;
text-decoration: none;
/* Другие стили для email */
}    
.contact-telegram {
padding-top: 10px;
color: #333F48;
text-decoration: none;
/* Другие стили для Telegram */
}
.intro-second {
flex: 0 0 var(--date-width);
font-size: 1.4rem;
font-weight: 300;
padding-left: 0;
color: var(--date-color);
line-height: 1.5;
}
.intro-container-inline-link {
    color: #333F48;
    text-decoration: none;
    font-size: 20px;
    font-weight: 400; /* обычное начертание */
    border-bottom: 2px dashed #333F48;
}
.intro-container-inline-link:hover {
    text-decoration: none;
    border-bottom: 2px solid #333F48; /* при наведении - сплошная линия */
}
/* Стили для выделения ссылки */
.anchor-link {
background-color: #e1e1e1;
color: #333F48;
text-decoration: none;
padding: 4px 8px;
transition: background-color 0.3s ease;
}
.anchor-link:hover {
background-color: #ffee58;
}   
/* Стиль ссылки с выделением фона */
.highlight {
background-color: #e1e1e1; /* Светло-желтый фон */
color: #333F48; /* Цвет текста */
text-decoration: none; /* Убираем подчеркивание */
padding: 4px 8px; /* Отступы вокруг текста */
border-radius: 0px; /* Скругленные углы */
transition: background-color 0.3s ease; /* Плавное изменение цвета */
box-decoration-break: clone; /* Важно для переноса строк */
-webkit-box-decoration-break: clone;
}



/* Таймлайн таблица */
.adaptive-table {
width: 100%;
max-width: 1128px;
margin: 20px auto;
font-family: 'Fira Sans';
}
/* Десктоп версия (горизонтальные ячейки) */
.table-row {
display: flex;
border-bottom: var(--table-border);
align-items: top;
}
.table-cell {
padding: var(--cell-padding);
text-align: left;
position: relative;
}



/* Индивидуальные стили колонок для десктопа */
/* Стиль первой колонки (даты) */
.date-cell {
flex: 0 0 var(--date-width);
font-size: 1rem;
font-weight: 500;
padding-left: 0;
color: var(--date-color);
letter-spacing: 0.25px;
}
/* Стиль второй колонки (должность) */
.position-cell {
flex: 0 0 var(--position-width);
font-size: 0.85rem;
font-weight: 400;
color: var(--position-color);
padding-left: 0;
padding-top: 28px;
line-height: 1.4
}
.recommendation-link {
 margin-top: 10px;
}  
.recommendation-link a {
font-size: 12px;
color: #0066cc;
text-decoration: none;
font-weight: normal;
border-bottom: 1px dashed
}  
.recommendation-link a:hover {
text-decoration: none;
border-bottom: 1px solid
}
/* Стили для кнопки раскрытия */
.position-content {
position: relative;
width: 80%;
padding-right: 140px; /* Оставляем место для кнопки */
}        
.expand-button {
position: absolute;
top: 0;
right: 10%;
background: none;
border: none;
cursor: pointer;
padding: 2px;
outline: none;
}        
.arrow-circle {
display: inline-flex;
justify-content: center;
padding-left: 1px;
padding-top: 2px;
width: 24px;
height: 24px;
background-color: #ffee58;
color: #333F48;
border-radius: 50%;
font-family: 'Fira Sans'; /* Добавляем шрифт */
font-size: 17px; /* Увеличиваем размер для лучшего отображения символа */
font-weight: 500; /* Делаем немного жирнее */
transition: transform 0.3s ease;
transform: rotate(0deg)  /* Начальный угол (135 = вниз) */
}        
.expand-button.active .arrow-circle {
transform: rotate(90deg); /* Поворачиваем на 90 градусов при активации */
}       
/* Микро-анимация при наведении */
.expand-button:hover .arrow-circle {
background-color: #ffd558;
transition: all 0.2s ease;
}    
.expanded-content {
display: none;
width: 100%;
padding-top: 40px;
box-sizing: border-box;
}          
.position-cell.expanded .expanded-content {
display: block;
}        
.expanded-content-inline-link {
color: #0066cc;
text-decoration: none;
font-size: 14px;
font-weight: 400; /* обычное начертание */
border-bottom: 1px dashed #0066cc;
}    
.expanded-content-inline-link:hover {
text-decoration: none;
border-bottom: 1px solid #0066cc; /* при наведении - сплошная линия */
}
/* Стиль третьей колонки (место работы) */
.company-cell {
flex: 0 0 var(--company-width);
font-size: 0.85rem;
font-weight: 400;
color: var(--company-color);
text-align: left;
}
/* Дополнительная строка в третьей колонке */
.company-secondary {
display: block;
margin-top: 10px;
font-size: 10px;  /* Меньший размер шрифта */
font-weight: 400; /* Обычное начертание */
color: #333F48;  /* Серый цвет */
line-height: 1.3;
}



/* Инструменты таблица */
/* Общие стили */
.adaptive-tool-table {
    width: 80%;
    max-width: 840px;
    margin: 20px auto;
    padding-left: 18%;
    font-family: 'Fira Sans';
    margin-top: 160px;
}
/* Десктоп версия (горизонтальные колонки) */
.tool-table-row {
    display: flex;
    align-items: top;
}
.tool-table-col {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--date-color);
}
/* Ширины колонок */
.letter-col {
    flex: 0 1 38%;
    font-size: 0.85rem;
    font-weight: 400;
}
.tool-col {
    flex: 0 1 33%;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.4
}
.skill-col {
    flex: 0 1 28%;
    font-size: 0.85rem;
    font-weight: 400;
}
.tool-table-cell {
    padding: var(--cell-padding);
    border-bottom: var(--table-border);
    min-height: 61px;
    display: flex;
}
.tool-table-cell:last-child {
    border-bottom: none;
}
.tool-table-cell strong {
    margin-right: 8px;
}
.tools-recommendation-link a {
    font-size: 0.85rem;
    color: #0066cc;
    text-decoration: none;
    font-weight: normal;
}  
.tools-recommendation-link a:hover {
    text-decoration: underline;
}



/* Образование таблица */
.adaptive-education-table {
    width: 80%;
    max-width: 840px;
    margin: 20px auto;
    padding-left: 18%;
    font-family: 'Fira Sans';
    margin-top: 80px;
}
/* Стиль первой колонки (образование) */
.edu-first-cell {
    flex: 0 0 var(--letter-width);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--position-color);
    padding-left: 0;
    padding-top: 28px;
    line-height: 1.4;
    letter-spacing: 0.25px
}     
/* Стиль второй колонки (образование) */
.edu-second-cell {
    flex: 0 0 var(--tools-width);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--position-color);
    padding-left: 0;
    padding-top: 28px;
    line-height: 1.4
} 



/* Награда таблица */
.adaptive-awards-table {
    width: 100%;
    max-width: 1128px;
    margin: 20px auto;
    font-family: 'Fira Sans';
    margin-top: 160px;
}
/* Стиль первой колонки (Награды) */
.awards-year-cell {
    flex: 0 0 var(--awards-year-width);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--position-color);
    padding-left: 0;
    padding-top: 28px;
    letter-spacing: 0.25px
} 
.awards-content {
    position: relative;
    width: 100%;
}

.bio-footer {
width: 100%;
max-width: 1128px;
padding-top: 100px;
color: #333F48;
margin: 20px auto;
font-family: 'Fira Sans';
font-size: 12px;
}

.scroll-to-top {
width: 100%;
max-width: 1128px;
position: fixed;
bottom: 50px;
right: 50px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color:#ffee58;
color: #333F48;
border: none;
cursor: pointer;
font-size: 20px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.scroll-to-top:hover {
    color: #ffee58;
background-color: #333F48;
}
.scroll-to-top.visible {
opacity: 1;
visibility: visible;
}



@media (max-width: 996px){
/* Стили для кнопки на мобильных */
.position-content {
    width: 90%;
    padding-right: 80px;
    }
}


@media (max-width: 768px) {
.logo {
margin: 15px 20px 0 15px;
}

.grid-intro-table {
    grid-template-columns: 1fr; /* Одна колонка на мобильных */
    width: 95%;
    max-width: 768px;
    padding: 0px;
    margin: 15px;
}

.intro-first {
font-size: 1.2rem;
font-weight: 400;
padding-bottom: 10%;
}


/* Таймлайн таблица */
.adaptive-table {
    width: 90%;
    max-width: 768px;
    font-family: 'Fira Sans';
    margin-top: 120px;
    margin: 15px;
    }
.table-row {
    display: block;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    padding: 15px;
    padding-left: 0;
}    
.table-cell {
    display: block;
    width: 100%;
    padding: 15px 0;
}
/* Сбрасываем фиксированные ширины */
.date-cell,
.position-cell,
.company-cell {
flex: 1 1 100%;
text-align: left;
}    
/* Стили для кнопки на мобильных */
.position-content {
width: 100%;
padding-right: 40px;
}
.expand-button {
right: 10px;
}
/* Индивидуальные стили для мобильной версии */
.date-cell {
font-size: 1.2rem;
padding-top: 15px;
}   
.position-cell {
font-size: 1rem;
}
.company-cell {
font-size: 1rem;
padding-bottom: 10px;
border-bottom: none;
}
/* Дополнительная строка в третьей колонке */
.company-secondary {
padding-top: 0;
}
/* Добавляем подписи через data-атрибуты */
.table-cell::before {
content: attr(data-label) "";
font-weight: 400;
color: #333f48;
}

/* Инструменты таблица */
.adaptive-tool-table {
    width: 100%;
    max-width: 768px;
    margin-left: 0;
    font-family: 'Fira Sans';
    margin-top: 180px;
    padding-left: 0%;
    margin-left: 15px;
    margin-right: 15px;
}

.tool-table-cell {
    padding: 10px 10px 10px 0px;
    border-bottom: 0;
    min-height: 84px;
    display: block;
} 


/* Образование таблица */
.adaptive-education-table {
    width: 100%;
    max-width: 768px;
    margin-left: 0px;
    font-family: 'Fira Sans';
    margin-top: 60px;
    padding-left: 0%;
    margin-left: 15px;
    margin-right: 15px;
}
/* Стиль первой колонки (образование) */
.edu-first-cell {
    font-size: 1rem;
}     
/* Стиль второй колонки (образование) */
.edu-second-cell {
    font-size: 1rem;
} 


/* Награда таблица */
.adaptive-awards-table {
    width: 95%;
    max-width: 768px;
    font-family: 'Fira Sans';
    margin-top: 120px;
    margin-left: 15px;
}
/* Стиль первой колонки (Награды) */
.awards-year-cell {
    font-size: 1rem;
} 
.bio-footer {
padding: 60px 0 0 15px;
    }
}


@media (max-width: 540px) {
.tool-table-cell {
    flex-direction: column;
    align-items: flex-start;
    min-height: auto;
    padding: 10px 10px 10px 0;
}

.tool-table-cell strong {
    margin-bottom: 2px;
    margin-right: 0;
}

.tool-table-row {
    flex-direction: column;
    gap: var(--row-gap);
}

.tool-table-col {
    width: 100%;
}

.tool-table-cell {
    min-height: 50px;
}  
}


/* Оптимизация для очень маленьких экранов */
@media (max-width: 480px) {
.table-cell {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
    
.table-cell::before {
margin-bottom: 3px;
margin-right: 0;
}
    
.date-cell {
font-size: 1rem;
}
    
.company-cell {
font-size: 1rem;
width: 100%;
}

/* Дополнительная строка в третьей колонке */
.company-secondary {
padding-top: 0px;
}

.expand-button {
left: 300px;
right: 5px;
}

.position-content {
width: 100%;
padding-right: 60px;
}
}