@import "../common.css";
@import "../fontawesome.min.css";


.container {
  background-color:#fff;
}	




img.articleImage{
  width:100%;
  max-width:400px;
  height:auto;
  
  
}

header.all-pages {
  top:0; 
}


/* Навигация по областям */
div.city-navigator a{
    font-family: "Noto Sans Display", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5rem;
    font-style: normal;
    cursor: pointer;
    display: inline-block;
    border-radius: 5px;
    padding: 3px 10px;
    text-decoration: none;
    margin-right: 15px;
    margin-bottom: 10px;
    background-color: unset;
    border: 1px solid #426b83;
    color: #426b83;
}

div.city-navigator a:hover{
  border: 1px solid #e19f4e;
  color: #e19f4e;
}

/* Квадраты-ссылки для списков статей/объектов */
div.square-wrapper{
  display:none;
}

div.square-wrapper.active{
  display:block;
}

div.square-wrapper span.square-link{
  display:block;
  background-color: #fcfcfc;
  text-decoration:none;
  box-shadow: 0 0 20px #dfdfdf;
  transition: box-shadow 0.3s ease-in-out;
}

div.square-wrapper span.square-link:hover{
  box-shadow: 0 0 20px #d6eafe;
}

div.square-wrapper span.square-link a.square-link-img:hover + a ins,
div.square-wrapper span.square-link a.pagetitle:hover ins,
div.line-wrapper .square-link a.square-link-img:hover ~ div a.pagetitle ins, 
div.line-wrapper .square-link a.pagetitle:hover ins{
  border-bottom:1px solid var(--hover-white);
}


div.square-wrapper span.square-link a.square-link-img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  background-size:cover;
}

div.square-wrapper span.square-link a.pagetitle{
  font-family: "Noto Sans Display", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 1.2rem;
  line-height:2.0rem;  
  font-style: normal;
  text-decoration:none;
}

div.square-wrapper span.square-link .signature{
  color: #808080;
  font-style: italic;
}

div.square-wrapper span.square-link a.category, div.line-wrapper div.square-link a.category{
  text-decoration:none;
  border-radius:4px;
  display:inline-block;
  padding:2px 5px;
  font-size:0.75em;
  background:#0873b3;
  color:#fff;
}


div.square-wrapper span.square-link a.tag{
  display:inline-block;
  font-family: "Noto Sans Display", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 1rem;
  line-height:1.5rem;  
  font-style: italic;
}



div.square-wrapper span.square-link span.introtext{
  color:#000;
  text-decoration:none;
}

div.square-wrapper span.square-link span.tags a, .line-wrapper .tags a{
  color:#426b83;
  text-decoration:none;
  font-style:Italic;
  font-size:0.75rem;
}



div.square-wrapper span.square-link a.square-link-img-wrapper{
  border:none;
}

div.square-wrapper span.square-link a.square-link-img-wrapper img{
  height:150px;
}


/* Ссылки для списка */
div.line-wrapper {
    display:none;

    align-items: flex-start; /* Выравниваем элементы по верху */
    gap: 20px; /* Отступ между колонками */
}

div.line-wrapper.active {
    display: flex; 
}

.line-wrapper .square-link {
    display: flex; /* Включаем flex внутри ссылки */
    width: 100%; /* Занимаем всю ширину родителя */
    text-decoration: none; /* Убираем подчеркивание ссылки */
    color: inherit; /* Наследуем цвет текста */
}

.line-wrapper .square-link-img {
    width: 150px; /* Фиксированная ширина */
    height: 150px; /* Фиксированная высота */
    background-size: cover; /* Заполняем блок изображением */
    background-position: center; /* Центрируем изображение */
    flex-shrink: 0; /* Запрещаем сжатие */
}

/* Правая часть (текстовый контент) */
.line-wrapper .square-link-content {
    flex: 1; /* Занимает всё оставшееся пространство */
  padding-left:20px;
}


.line-wrapper .pagetitle {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 8px;
}

.line-wrapper .signature {
    font-size: 0.9rem;
    color: #666;
    display: block;
    margin-bottom: 12px;
}

.line-wrapper .introtext {
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 12px;
}


/* VIEW TOGGLER */
.view-toggler {margin: 10px 0 30px 0!important;}

#view-mode-toggler .middle-column .image-text-container img.square-wrapper-on {display:none;}
#view-mode-toggler .middle-column .image-text-container img.square-wrapper-off {display:inline;}
#view-mode-toggler .middle-column.active .image-text-container  img.square-wrapper-on {display:inline;}
#view-mode-toggler .middle-column.active .image-text-container  img.square-wrapper-off {display:none;}

#view-mode-toggler .right-column .image-text-container img.line-wrapper-on {display:none;}
#view-mode-toggler .right-column .image-text-container img.line-wrapper-off {display:inline;}
#view-mode-toggler .right-column.active .image-text-container img.line-wrapper-on {display:inline;}
#view-mode-toggler .right-column.active .image-text-container img.line-wrapper-off {display:none;}

#view-mode-toggler img {
  margin-right: 10px;
  height: 1rem; /* Ограничение высоты изображения */
  display:inline;
}


        #view-mode-toggler {
            display: flex;
            align-items: stretch; /* Колонки одинаковой высоты */
            padding: 0px;
        }
        
        #view-mode-toggler .column {
            display: flex;
            flex-direction: column;
            justify-content: left; /* Выравнивание по вертикали по центру */
            padding:5px 10px;
            white-space: nowrap; /* Запрет переноса строк */
        }
        
        #view-mode-toggler .left-column {
        }

        #view-mode-toggler .middle-column, #view-mode-toggler .right-column {
	  cursor:pointer;
	  background-color:#eeebeb;
	}
        
        #view-mode-toggler .middle-column.active, #view-mode-toggler .right-column.active {
	  background-color: #27718a;
    	  cursor: text;
	  color: #fff;
        }


        #view-mode-toggler .middle-column{
	  border-radius: 4px 0 0 4px;
	}

  #view-mode-toggler .right-column{
	  border-radius: 0 4px 4px 0;

  }

      
        #view-mode-toggler .image-text-container {
            display: flex;
            align-items: center; /* Выравнивание изображения и текста по центру */
        }
        

/* first-letter */
a.first-letter {
  display:inline-block;
}