@charset "UTF-8";
@font-face { 
    font-family: 'Pushkin';
    src: url('fonts/Pushkin.woff2') format('woff2'),
         url('fonts/Pushkin.woff') format('woff');
}
:root {
    --primary-color: #009b77;
    --accent-color: #9b7700;
    --text-color: #222;
    --border-color: #ccc;
}
html { 
	height:100%;
	background: url(../images/cows.jpg) no-repeat bottom center fixed;
	background-size: cover;
	font-family: Georgia, serif;
	font-size: 18px;
	font-size: calc(1rem + 0.2vw);
	line-height: 1.5;
}
body {
	margin: 0;
	word-wrap: break-word;
	color: var(--text-color); 
	counter-reset: sidenote-counter;
}
a {  
	text-decoration: none; 
 	transition-duration: 0.3s;
}
.brand-name {
	white-space: nowrap;
}

/* HEADER STYLES */

header {
	height: 100vh;
	text-align: center;
}
header nav {
	position: absolute;
	bottom: 0;
	width: 100%;
	margin: 0;
}
nav ul {
	display: flex;
	flex-flow: row wrap;
 	justify-content: space-around;
}
h1 { 
	font-family: 'Pushkin';
	font-size: calc(1.2em + 1vw);
	font-weight: 400; 
	color: #f9f9f9;
	padding-top: 20vh;
	padding-left: 8rem;
	height: 0;
	width: 60vw;
	margin: 0 auto;
}
h1::before {
	content: '';
	display: block;
	margin-bottom: -1.8rem;
	margin-left: -8rem;
	height: calc(8vh + 10vw); 
	background: url(../images/ovi-bovi-logo-light.svg) center center no-repeat;
	background-size: contain;
	opacity: 0.9; 
}

/* MAIN STYLES */

main { display: block;
	padding-left: 10%;
	width: 90%; 
	background-color: white; 
}
section {
	margin: 0;
}
h2{ 
	color: var(--primary-color);
}
h2,h3 { font-style: italic;
	font-weight: 400; 
	margin: 0; 
	padding-top: 1rem; 
}	
header a {
	padding: 2vh 2vw;
	font-variant: small-caps;
	display: block;
	color: white;
	font-weight: bold;
	letter-spacing: 0.1rem;
	text-shadow: 0px 0px 1px black, 0px 1px 2px black, 1px 1px 3px black;
}
a.change-lang {
	position: absolute;
	top: 0;
	right: 0;
	padding: 2vh 5px;
}
a.change-lang:lang(ru)::before {
	content: "\2192\A0 en";
}
a.change-lang:lang(en)::before {
	content: "\2192\A0 ru";
}
a.change-lang:hover {
	padding: 2vh 10px;
}

nav a:hover, .active {
	position: relative;
}
nav a:hover::after, .active::after {
	position: absolute;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	border-color: rgba(255, 255, 255, 0);
	border-width: 10px;
	margin-left: -10px;
}
nav a:hover::after, a.active::after {
	bottom: 0;
	border-bottom-color: white;
	margin-top: -20px;
}

ul, ol {
	margin: 0;
    padding: 0;
    list-style: none;
}
li { 
	padding: 0.4rem 0;
} 
ul li {
	margin: 0;
	padding: 0;
}
ol li { counter-increment: step-counter; }
ol li::before {
    content: counter(step-counter);
    color: white;
    font-weight: bold;
	text-align: center;
	display: inline-block;
	height: 1.4em;
	width: 1.4em;
    margin-right: 0.4em;
    background-color: var(--primary-color); 
    border-radius: 50%;
}
main a {	
	color: var(--accent-color);
}
main a:hover {
    text-decoration: underline;
}
.downloads a[href$=".pdf"]::before { 
	content: "\1F5BA\A0\A0";
}

p, ol, table { 
	margin-top: 0.8rem; 
	margin-bottom: 0.8rem; 
	padding-right: 0; 
	vertical-align: baseline; 
}	
table { 
	font-size: 0.85rem;
	border-collapse: collapse;
  table-layout: auto;
}
th, td{
	width: 20%;
	border: none;
	padding: 4px 4px 4px 8px;
	text-align: left;
}
.twocol td:not(:first-child) {
	font-style: italic;
}
tr:not(:first-child) {
	border-top: 1px solid var(--border-color);
}
sub, sup {
	line-height: 100%;
}
.sidenote, 
.marginnote { float: right; 
	clear: right; 
	width: 55%; 
	margin: 0 -64% 3rem 0; 
	font-size: 0.85rem; 
	vertical-align: baseline; 
	position: relative; } 

.sidenote-number { 
	counter-increment: sidenote-counter; } 

.sidenote-number::after { 
	content: counter(sidenote-counter); 
	position: relative; 
	vertical-align: baseline;
	font-size: 0.7rem; 
	top: -0.4rem; 
	left: 0.1rem; } 

.sidenote::before { 
	content: counter(sidenote-counter) " "; 
	position: relative; 
	vertical-align: baseline;
	font-size: 0.7rem; 
	top: -0.4rem; } 

main p, table, ol, main ul, figure { width: 55%; }
figure { padding: 0; 
	border: 0; 
	font: inherit; 
	vertical-align: baseline; 
	margin: 0; 
} 
figcaption { float: right; 
	clear: right; 
	margin: 0.4em -60% 1em 0; 
	font-size: 0.85rem; 
	vertical-align: baseline; 
	position: relative; 
	max-width: 50%; 
} 
.fullwidth figcaption { 
	margin-right: 0;
	max-width: 33%; 
}

.fullwidth { 
	max-width: 90%; 
	clear: both;
}
div.fullwidth, table.fullwidth, figure.fullwidth, .fullwidth ul { 
	width: 100%;
} 

/* Общий контейнер-ряд для трех карточек */
.fullwidth-gallery {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start; /* Выравнивает карточки по верхней линии, если подписи разной длины */
  gap: 20px;               /* Отступ между карточками */
  width: 100%;
  max-width: 90%;          /* Сохраняем вашу пропорцию ширины */
  clear: both;
  margin: 1em 0;           /* Внешние отступы галереи */
}

/* Индивидуальная карточка (картинка + подпись) */
.fullwidth-gallery .gallery-item {
  flex: 1;                 /* Все карточки одинаковой ширины */
  min-width: 0;            /* Защита от выталкивания за край экрана на мобильных */
  display: flex;
  flex-direction: column;  /* Картинка сверху, подпись снизу */
}

/* Стили для изображений внутри галереи */
.fullwidth-gallery .gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 0;  	/* зазор между самой картинкой и текстом подписи */
}

/* Стили для индивидуальных подписей */
.fullwidth-gallery .gallery-item figcaption {
  font-size: 0.85rem;   /* Сохраняем размер шрифта */
  text-align: center;
  max-width: 100%;
}


svg {
	display: block; 
	margin: 0 auto;
}

img { 
	max-width: 100%; 
}
.marginnote img { 
    border-radius: 5px; 
    box-shadow: 0px 3px 5px grey;
    transition: 1s;
}
.marginnote img:hover {
    transform: scale(1.5);
    z-index: 9;
}

.tablet-view {
  position: relative;
  margin: 0;
  border-radius: 20px;
  box-shadow: 0 0 0 3px black;
}

.tablet-view img, .tablet-view::after {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.tablet-view::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 10px 15px rgba(255, 255, 255, 0.4), inset 0 -12px 20px rgba(0, 0, 0, 0.5);
}

label.sidenote-number { display: inline; } 
label.margin-toggle:not(.sidenote-number),
input.margin-toggle { display: none; }
  
fieldset {
	border: 0;
	padding: 0;
}
	fieldset ul , fieldset p{
		width: 90%;
	}
		fieldset li {
			padding-top: 0.5rem;
		}
		fieldset input, 
		fieldset textarea {
			-webkit-border-radius: 5px; 
			-moz-border-radius: 5px; 
			border-radius: 5px;
			border: none;
			font-family: inherit;			
			font-size: 1em;
		}
		fieldset input:not([type="submit"]), 
		fieldset textarea {
			display: block;
			width: 100%;
			margin: 5px auto;
			padding: 0.4rem;
			font-family: inherit;			
			text-align: left;
			box-shadow: inset 0 0 10px #ddd;
		}
		fieldset input[type="submit"]{
			display: block;
			margin: 0.5em auto;
			padding: 5px 25px;
			color: white;
			text-shadow: 0px 1px 2px black;
			background-color: #00b58b;
			transition: 0.3s;
		}
		fieldset input[type="submit"]:hover{
			background-color: var(--primary-color);
			cursor: pointer;
		}
		fieldset input:focus, textarea:focus {
			background-color: #eee;
		}
	
		/* FOOTER */
		
footer ul {
	width: 90%;
	margin: 0 auto;
	padding: 0.3rem 0;
	text-align: center;
}
footer ul li { 
	display: inline-block;
	margin: 0.5ch; 
}
footer ul li:not(:last-child)::after {
    content: "|";
    margin-left: 1ch;
    color: white;
    text-shadow: 1px 1px 2px black, 1px 1px 3px black; /* Тень как у ссылок */
    pointer-events: none; /* Чтобы черта не была кликабельной */
}
footer a {
	color: white;
	text-shadow: 1px 1px 2px black, 1px 1px 3px black;
}
main::after {
	clear: both;
	display: block;
	margin: 0;
	padding: .85rem 0;
	text-align: left;
	font-size: 0.85rem;
}	
	main:lang(ru)::after {
		content:"\A9\A0 2015–2026 \AB Распределённые сенсорные системы\BB";
	}
	main:lang(en)::after {
		content:"\A9\A0 2015–2026 Distributed Sensing";
	}
	
	
@media screen and (max-width: 760px) { main p, main ol, main ul , table, figure { width: 90%; } 
										figcaption, .fullwidth figcaption { margin-right: 0%; 
																		  max-width: none; }}
										
@media (max-width: 760px) { label.margin-toggle:not(.sidenote-number) { display: inline; } 
                              .sidenote, .marginnote { display: none; } 
                              .margin-toggle:checked + .sidenote, 
                              .margin-toggle:checked + .marginnote { display: block; 
                                                                     float: left; 
                                                                     clear: both; 
                                                                     width: 95%; 
                                                                     margin: 1rem 2.5%; 
                                                                     position: relative; } 
                            label { cursor: pointer; } 
                            img { max-width: 100%; } 
							html {  background-attachment: scroll; } /* Отключаем fixed для мобильных устройств */
}