/* ===== ОСНОВА ===== */

body{
    margin:0;
    font-family:Arial,sans-serif;
    background:#f4f7fb;
    color:#203b72;
}

.catalog-container{
    max-width:1400px;
    margin:0 auto;
}

/* ===== ЗАГОЛОВОК ===== */

.catalog-title{
    text-align:center;
    margin-bottom:15px;
    font-size:42px;
    color:#1b6ca8;
}

.catalog-description{
    max-width:850px;
    margin:0 auto 35px auto;
    text-align:center;
    line-height:1.5;
    color:#4b5d7a;
    font-size:14px;
}

/* ===== ПОИСК ===== */

.search-box{
    margin-bottom:25px;
}

#tableSearch{
    width:100%;
    padding:16px 20px;
    font-size:16px;
    border:none;
    border-radius:14px;
    outline:none;
    box-shadow:0 4px 15px rgba(0,0,0,0.08);
    box-sizing:border-box;
}

/* ===== ТАБЛИЦА ===== */

.table-wrapper{
    max-width: 1200px;
    margin: 0 auto;
}

table{
    width:100%;
    border-collapse:collapse;
    border-spacing:0;
    min-width:1200px;
}

#gmoTable th:nth-child(2),
#gmoTable td:nth-child(2) {
    width: 180px;
    max-width: 140px;
}

/* ===== ШАПКА ===== */

thead{
    position:sticky;
    top:0;
    z-index:30;

    background:#1b6ca8;
    color:white;
}

th{
    padding:18px 15px;
    text-align:left;
    font-size:13px;
    white-space:nowrap;
    border-right:1px solid rgba(255,255,255,0.2);
    background:#1b6ca8;
    color:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,0.08);
}

th:last-child{
    border-right:none;
}
	
td:nth-child(3),
th:nth-child(3){
    max-width:200px;
    width:200px;
    word-break:break-word;
    white-space:normal;
}

/* ===== ЯЧЕЙКИ ===== */

td{
    padding:16px 15px;
    border-bottom:1px solid #dbe7f3;
    border-right:1px solid #dbe7f3;
    font-size:13px;
    vertical-align:top;
    text-align:left;
}

td:last-child{
    border-right:none;
}

/* ===== ЧЕРЕДОВАНИЕ СТРОК ===== */

tbody tr:nth-child(even){
    background:#f4f9ff;
}

tbody tr:nth-child(odd){
    background:#ffffff;
}

/* ===== HOVER ===== */

tbody tr{
    transition:0.2s;
}

tbody tr:hover{
    background:#dfefff;
}

/* ===== СТИЛИ КОЛОНОК ===== */

.culture{
    font-weight:700;
    color:#1b6ca8;
}

.event{
    font-weight:600;
}

.marker{
    color:#0f7a4a;
    font-weight:600;
}

/* ===== МОБИЛЬНАЯ ВЕРСИЯ ===== */

@media (max-width:768px){

    body{
        padding:20px 10px;
    }

    .catalog-title{
        font-size:30px;
    }

    .catalog-description{
        font-size:15px;
    }

    th,td{
        padding:12px 10px;
        font-size:14px;
    }

    #tableSearch{
        padding:14px 16px;
    }

    .table-wrapper{
        overflow-x:auto;
    }
}

.sortable{
    cursor:pointer;
    user-select:none;
}

.sortable:hover{
    background:#165b8f;
}

#sortArrow{
    font-size:12px;
    margin-left:6px;
}

.highlight{
    background:yellow;
    padding:2px 4px;
    border-radius:4px;
    font-weight:600;
}

.table-controls{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    gap:20px;
}

.left-control input{
    width:280px;
    padding:12px 14px;
    font-size:15px;
    border:none;
    border-radius:10px;
    box-shadow:0 3px 12px rgba(0,0,0,0.08);
    outline:none;
}

.right-control{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
}

.right-control select{
    padding:10px 12px;
    border:none;
    border-radius:10px;
    box-shadow:0 3px 12px rgba(0,0,0,0.08);
    outline:none;
    cursor:pointer;
}

#pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    padding: 10px 0;
}

#pagination button {
    padding: 6px 10px;
    border: none;
    background: #e6eef8;
    color: #1b6ca8;
    border-radius: 6px;
    cursor: pointer;
}

#pagination button.active {
    background: #1b6ca8;
    color: white;
}

.pagination button:hover{
    background:#cfe2ff;
}




/* ===== клик то активити ===== */
.cta-box{
	max-width:700px;
    margin:25px auto;
    padding:15px;
    background:#f0f6ff;
    border-left:4px solid #1b6ca8;
	border-right:4px solid #1b6ca8;
    border-radius:10px;
    text-align:center;
}
.cta-box a{
    color:#1b6ca8;
    font-weight:700;
}

/* ===== плавающая кнопка ===== */
.floating-cta{
    position:fixed;
    right:20px;
    bottom:20px;
    background:#1b6ca8;
    color:#fff;
    padding:12px 16px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
    box-shadow:0 5px 20px rgba(0,0,0,0.2);
    z-index:9999;
    display:inline-block;
    outline:3px solid rgb(255, 255, 255);
}
.floating-cta:hover{
    background:#155a8a;
}

.mini-header{
    display:flex;
    align-items:center;
    justify-content:center;
    height:160px;      /* фиксируем высоту */
    padding:0;         /* убираем отступы */
    margin:0;
    overflow:hidden;
}

.mini-header nav a{
    margin-left:15px;
    text-decoration:none;
    color:#1b6ca8;
    font-weight:500;
}

.mini-header{
    background-image: url("img/expan4.jpg");
    background-size: cover;
    background-position: center -30px;
    background-repeat: no-repeat;
}
	
@media (max-width: 768px){

    .mini-header{
        height:150px; /* или подгони под свой дизайн */
        display:flex;
        align-items:center;
        justify-content:center;
        padding:0px;
        box-sizing:border-box;
        overflow:hidden;
    }

    .mini-header img{
        max-width:80%;
        height:auto;
    }
}
	
@media (max-width: 768px){

    .table-wrapper{
        overflow-x:auto;
        -webkit-overflow-scrolling: touch;
    }

    table{
        min-width:900px; /* или 1000px если нужно */
    }
}
	
.table-wrapper::after{
    content:"→";
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    opacity:0.4;
    font-size:20px;
    pointer-events:none;
}
	

.top-nav{
    top:0;
    background:#1b6ba7;
    padding:10px 15px;
    display:flex;
    gap:20px;
    border-bottom:1px solid #e6eef8;
    z-index:1000;
}
.top-nav a{
    color:#ffffff;
    text-decoration:none;
    font-weight:600;
}

.table-info{
    margin-top:15px;
    text-align:center;
    color:#5b6b84;
    font-size:14px;
}
	
.stats-box{
    margin:20px 0 30px 0;
    text-align:center;
    font-size:18px;
    color:#1b6ca8;
    font-weight:700;
	display:none;
}
	
.logo{
    max-width:110px;
    height:auto;

}
	
@media (max-width:768px){

    .logo{
        max-width:120px;
    }
}
	
@media (max-width:768px){

    html, body{
        margin:0;
        padding:0, 5px;
    }

    body{
        padding-top:0;
    }

    .mini-header{
        margin:0;
        padding:10px 0;
		background-position: center;
    }

    .top-nav{
        margin:0;
    }
}
	
	
#line-cell,
.line-cell {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    word-spacing: 2px;
}

/* даём браузеру право переносить после запятой */
.line-cell {
    line-height: 1.4;
}	
	
/*контакты*/
.contacts {
  padding: 60px 20px;
  background: #e4f2ff;
}

.contacts-container {
  max-width: 1100px;
  margin: auto;
  text-align: center;
}

.contacts h2 {
  margin-bottom: 40px;
  color: #1b6ca8;
}

.contacts-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 25px;
}

.contact-item {
  background: white;
  padding: 30px 20px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.contact-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 15px auto;
}

.contact-icon svg {
  width: 100%;
  height: 100%;
}

.contact-item h3 {
  margin-bottom: 8px;
  color: #1b6ca8;
}

.contact-item p {
  margin: 0;
  font-size: 15px;
}

@media (max-width:768px){
  .contacts-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:480px){
  .contacts-grid{
    grid-template-columns:1fr;
  }
}

/* Микроанимация для карточек контактов */
.contact-item {
  background: white;
  padding: 30px 20px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform, box-shadow; /* ускоряет анимацию */
}

.contact-item:hover {
  transform: translateY(-6px) scale(1.02); /* лёгкое поднятие и увеличение */
  box-shadow: 0 15px 30px rgba(0,0,0,0.12); /* более мягкая, но заметная тень */
}

.gmo-link-element{
    color:#1b6ca8;
    text-decoration:none;
    cursor:pointer;
    transition:0.2s;
}

.gmo-link-element:hover{
    color:#0092ff;
}