/**
 * Специальные стили
 * @since 2022-03
 */
.hidden { display: none !important; }
.align-center { text-align: center; }
.rtl .float-right { float: left; }
.rtl .float-left  { float: right; }
.rtl aside.float-left { margin-left: 2rem; margin-right: 0; }

/**
 * Общая структура
 * @since 2022-03
 */
main.wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.main-area { flex: 1; }

/**
 * Сквозные элементы
 * @since 2022-03
 */
body { font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; letter-spacing: 0px; }
.width-auto { width: auto; }
.page-title { margin: 4rem 0 4rem; }
.large-text { font-size: 2.4rem; }
.absent     { opacity: 0.5; }
.absent:hover { opacity: 1; }
ul.inline { display: flex; align-items: baseline; margin: 0; list-style-type: none; }
ul.inline > li { margin: 0 0.5rem; }
.stat-button { height: auto; max-width: 90vw; overflow: hidden; padding: 1rem 0 0.5rem 0; white-space: normal; line-height: 1.5; }
.form-as-link { height: 100%; width: 100%; margin: 0; padding: 0; font: inherit; }
.form-as-link button,
.form-as-link button:hover { height: 100%; width: 100%; margin: 0; padding: 0; border: none; background: none; font: inherit; text-align: inherit; text-transform: inherit; }
/* a { text-decoration: underline; } */
.insertion { margin: 4rem auto; }
.insertion:first-child { margin-top: 0; }
.ads { margin: 0; padding: 1rem; background: turquoise; color: white; font-size: 4rem; text-align: center; text-transform: uppercase; }

/* Accordion */
.accordion .acc-heading { position: relative; display: block; }
.accordion .acc-heading.active { color: #404040; font-weight: 600; }
.accordion .acc-heading.used::after { content: ""; display: block; margin-left: auto; margin-right: 0.5rem; height: 6px; width: 6px; background: #404040; border-radius: 4px; }
.accordion .acc-content { overflow: hidden; transition: all 0.3s; }
.rtl .accordion .acc-heading.used::after { right: auto; left: 1rem; }

/* Мерцание */
.blink-success, .blink-error, .afterblink-success, .afterblink-error { transition: 0.5s; }
.blink-success { background-color: rgba(0,128,255,0.5); border-color: #004080; }
.blink-error   { background-color: rgba(192,0,0,0.5); border-color: #b82020; }
.afterblink-success { box-shadow: inset 0 0 1px 1px #4080c0; }
.afterblink-error   { box-shadow: inset 0 0 1px 1px #c02020; }

/**
 * Верхний колонтитул
 * @since 2022-03
 */
.site-header .container { display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.site-header .container > * { margin-bottom: 1rem; }
.site-header .navigation-list { display: flex; margin: 1rem auto 2rem; list-style-type: none; line-height: 1.2; }
.site-header .navigation-item { margin: 0 1rem; padding: 0; }

/* Поиск */
.site-search form { display: flex; margin: 0; }
.site-search .search-query { margin: 0; }
.site-search .search-button { margin: 0; }

.ltr .site-search .search-query  { border-radius: .4rem 0 0 .4rem; border-right: none; }
.ltr .site-search .search-button { border-radius: 0 .4rem .4rem 0; }
.rtl .site-search .search-query  { border-radius: 0 .4rem .4rem 0; border-left: none; }
.rtl .site-search .search-button { border-radius: .4rem 0 0 .4rem; }

/**
 * Нижний колонтитул
 * @since 2022-03
 */
.site-footer { margin-top: 4rem; padding: 2rem 0; border-top: 2px solid; }
.site-footer nav.menu-languages { display: grid; grid-template-columns: repeat(auto-fill,minmax(10em,1fr)); column-gap: 2rem; row-gap: 2rem; margin-top: 2rem; margin-bottom: 4rem; text-align: center; }


/**
 * Макеты страниц
 * @since 2022-03
 */
.page-root .persons { justify-content: center; margin-bottom: 5rem; }
.page-root .person-preview { margin: 2rem 1rem; width: 200px; border-radius: 4px; }
/* .page-root .person-preview:hover { box-shadow: 0 0 0 2px white, 0 0 0 4px wheat, inset 0 0 100px wheat; } */
.page-root .person-preview .portrait {  }
.page-root .person-preview .portrait img { height: 300px; width: 200px; border-radius: 4px; object-fit: cover; }
.page-root .person-preview .name { box-sizing: border-box; padding: 0 0.5rem; font-size: 2rem; line-height: 1.2; }
.page-root .person-preview .job { box-sizing: border-box; padding: 0 0.5rem; font-size: 1.5rem; }

.page-root nav.languages { column-count: 2; column-gap: 2rem; font-size: 150%; line-height: 2; margin-bottom: 4rem; text-align: center; }
.page-root nav.languages span { color: black; }
.page-root nav.languages a { display: block; }

/*
 * Локальная домашняя страница
 * @since 2022-07
 */
.page-home .home-section { margin-bottom: 4rem; }
.page-home .grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); grid-template-rows: 340px; grid-column-gap: 1rem; }
.page-home .grid .cell { margin: 0.5rem; }

.page-home .popular-tags { display: grid; grid-template-columns: repeat(auto-fit,minmax(20em,1fr)); gap: 2rem; }
.home-section.popular-tags a { display: block; padding: 2rem; background: #d22d7a; color: white; transition: 0.15s; }
.home-section.popular-tags a:hover { background: #f00080; color: white; }

.grid.anniversary { grid-template-columns: repeat(2,1fr); grid-auto-rows: auto; grid-column-gap: 2rem; grid-row-gap: 2rem; }
.grid.anniversary .cell { height: 240px; padding: 8px; text-align: center; border: 0.1rem solid #d1d1d1; }
.grid.anniversary .cell:hover { box-shadow: none; }
.grid.anniversary .cell img { height: 120px; width: 120px; border-radius: 60px; }
.grid.anniversary .cell img:hover { box-shadow: 0 0 0 2px white, 0 0 1px 4px #9b4dca; }
.grid.anniversary .cell .title { position: static; }
.grid.anniversary .cell .title .name { font-size: 18px; font-weight: 300; margin-top: 6px; }
.grid.anniversary .cell .title .name a { color: #9b4dca; }


/*
 * Подбор персон
 * @since 2022-06
 */
.page-filter {  }
.page-filter .sort-order { display: flex; justify-content: flex-end; align-items: baseline; margin: 0 0.5rem 1.5rem 0; }
.page-filter .sort-order a { padding: 2px; border-radius: 0.25rem; text-decoration: none; }
.page-filter .pagination { margin: 0 0.5rem 0.5rem 0; justify-content: flex-end; }

.filter-sidebar { max-width: 100%; }
.filter-sidebar .side-nav { border: 1px solid #e1e1e1; border-radius: 0.5rem; margin-bottom: 2rem; }
.filter-sidebar .sidebar-header { display: flex; justify-content: space-between; padding: 1rem 0.5rem; border-bottom: 1px solid #e1e1e1; }
.filter-sidebar h3 { margin: 0; color: #808080; font-weight: 300; }
.filter-sidebar ul { margin: 0; max-height: 80vh; overflow: auto; padding: 0 1rem; }
.filter-sidebar li { list-style-type: none; margin-bottom: 0.5rem; }
.filter-sidebar .group-title { margin: 0; padding: 0.5rem; font-size: 1.6rem; font-weight: 400; }
.filter-sidebar .acc-heading { display: flex; align-items: center; text-decoration: none; }
.filter-sidebar .acc-content { border-bottom: 1px solid #e1e1e1; }
.filter-sidebar .input-filter { margin: 1rem; margin-top: 0; }
.filter-sidebar .input { margin-right: 0.5rem; }
.filter-sidebar input { margin: 0; }
.filter-sidebar input[type="checkbox"] { margin-right: 0.5rem; }
.filter-sidebar .apply { display: block; box-sizing: border-box; height: auto; line-height: 1.5; margin: 2rem auto 1rem auto; max-width: 90%; padding: 0.75rem 1.5rem 0.5rem; white-space: normal; }

.grid { display: grid; grid-template-columns: 1fr; grid-column-gap: 2rem; grid-row-gap: 4rem; }
.grid .grid-row { grid-column-start: 1; grid-column-end: -1; }
.grid .cell { position: relative; height: 340px; overflow: hidden; border-radius: 0.5rem; transition: 0.1s; }
.grid .cell:hover { box-shadow: 0 0 0 2px white, 0 0 1px 4px #9b4dca; }
.grid .cell .portrait { margin: 0; height: 100%; width: 100%; }
.grid .cell img { height: 100%; width: 100%; object-fit: cover; }
.grid .cell .overlay { position: absolute; left: 0; bottom: 0; height: 50%; padding: 1rem; width: 100%; background: linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(21,21,21,.75) 100%); color: white; transition: .25s ease-in-out; pointer-events: none; }
.grid .cell .title { position: absolute; bottom: 1rem; width: 100%; line-height: 1.2; }
.grid .cell .title .name { font-size: 2rem; font-weight: 500; line-height: 1.2; margin-bottom: 0.5rem; color: #ebadeb; text-shadow: 0px 0px 3px black; }
.grid .cell .title .name a { color: white; }
.grid .cell .title .name b { color: yellow; }
.grid .cell .title .occupation,
.grid .cell .title .birthplace { margin-bottom: 0; }
.page-filter .grid { grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); grid-auto-rows: 360px; }

/*
 * Индесная страница
 * @since 2022-06
 */
.site .pagination { display: flex; align-items: center; justify-content: flex-end; padding: 1ex 0; list-style: none; }
.site .pagination span, .pagination button { margin: 0 1px; padding: 0.5rem 1.5rem; background: none; border: none; border-radius: 3px; color: black; font-size: 1.5rem; font-weight: normal; line-height: 1; text-decoration: none; }
.site .pagination span { opacity: 0.25; }
.site .pagination button:hover { box-shadow: inset 0 0 1px 1px; text-decoration: none; }
.site .pagination .current { background: #2e3436; color: white; opacity: 1; }

/* Страница персоны */
.section-general { display: flex; flex-direction: column; gap: 2rem; }
.photo-face { flex: 0 0 280px; }
.photo-face img { height: auto; }
.person-title { margin-bottom: 1rem; font-size: 1.6rem; }
.person-title .person-name { display: block; font-size: 3.6rem; font-weight: 300; }
.person-section { margin-bottom: 4rem; }
.person-links ul { margin-left: 0; }
.person-links li { list-style-type: none; margin: 2rem 0; }

.person-main { display: flex; gap: 2rem; flex-direction: column-reverse; }
.person-similar { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.similar-item { margin-bottom: 2rem; border-radius: 0.5rem; transition: 0.15s; }
.similar-item:hover { background: #ff0078; box-shadow: 0 0 0 2px white, 0 0 0 5px #ff0078; }
.similar-item img { height: 20rem; width: 20rem; border-radius: 0.5rem 0.5rem 0 0; }
.similar-name  { margin-bottom: 0; padding: 0 0.5rem; font-size: 1.6rem; line-height: 1; }
.similar-field { margin-bottom: 0; padding: 0 0.5rem; color: #606c76; font-size: 1.4rem; }
.similar-item:hover .similar-name,
.similar-item:hover .similar-field { color: white; }

.person-height .photo-full img { height: auto; max-width: 100%; max-height: 80vh; width: auto; }

.person-links { display: grid; grid-template-columns: repeat(auto-fit,6em); gap: 2rem 1rem; text-align: center; }
.person-links .person-link {  }
.person-links .link-icon  { height: 4rem; width: 4rem; object-fit: contain; }
.person-links .link-caption { display: block; }

.person-photos { display: flex; flex-direction: column; gap: 4rem; }
.person-photos img { height: auto; max-height: 540px;  width: 100%; object-fit: contain; }


/**
 * Страница добавления персоны
 */
.page-append table input,
.page-append table select { margin: 0; }
.page-append th + td { padding-left: 0; }
.page-append .single-line { display: flex; }
.page-append .section-brief { display: flex; flex-wrap: wrap; margin-bottom: 2rem; }
.page-append .photo-face { margin-bottom: 2rem; }
.page-append .photo-face img { height: auto; width: 100vw; border-radius: 4px; object-fit: cover; }
.page-append .person-about textarea { height: 10em; }

/**
 * Персона не найдена
 */
.page-person-not-found table input,
.page-person-not-found table select { margin: 0; }
.page-person-not-found th + td { padding-left: 0; }
.page-person-not-found .single-line { display: flex; }
.page-person-not-found [name="biography"] { height: 10em; }


/**
 * Адаптивная верстка
 */

/* Media sizes */
.sm { display: none !important; }
.lg { display: none !important; }
.md { display: none !important; }

/* Larger than mobile screen >= 576 */
@media (min-width: 576px) {
	.sm { display: block !important; }
	.person-title { font-size: 1.8rem; }
	.person-title .person-name { font-size: 5.4rem; }
	.person-video > img { height: 480px; }
	.person-yearphoto { height: 40rem; width: 24.5%; }
	.kin-side { flex: 1 0 140px; }
	.kin-main { flex: 1 0 560px; }
	.kin-siblings { justify-content: center; }
	.kin-siblings .kin-person { flex-direction: column; }
	.person-relationships td { padding-left: 1.2rem; padding-right: 1.2rem; }
	nav.languages { column-count: 4; }
	.grid { grid-template-columns: repeat(auto-fill,250px); }
	.grid.anniversary { grid-template-columns: repeat(3,1fr); }
	/* .grid { grid-template-columns: repeat(2,1fr); } */
	/* .grid .grid-row { grid-column-start: 1; grid-column-end: 3; } */

	.page-append .photo-face { margin-right: 2rem; }
	.page-append .photo-face img { width: auto; }
}

/* Larger than mobile screen >= 768 */
@media (min-width: 768px) {
	.md { display: block !important; }
	.site-header .container { flex-direction: row; padding-top: 1rem; }
	.site-header .navigation-list { display: block; margin: 0; }
	.site-footer nav.languages { column-count: 5; }
	.page-root nav.languages { column-count: 4; }
	.filter-sidebar { float: left; max-width: 100%; margin-right: 2rem; width: 20rem; }
	/* .grid { grid-template-columns: repeat(2,1fr); grid-auto-rows: 240px; } */
	/* .grid .grid-row { grid-column-start: 1; grid-column-end: 4; } */
	.page-home .grid { grid-template-columns: repeat(auto-fill,260px); }
	.grid.anniversary { grid-template-columns: repeat(4,1fr); }
	.grid.latest { grid-template-columns: repeat(auto-fill,260px); }

	.zodiak-list { grid-template-columns: repeat(6,minmax(128px,1fr)); }
	.zodiak-image { font-size: 10rem; line-height: 1; }

	.section-general { flex-direction: row; }
	.person-main { flex-direction: row; }
	.person-main .person-similar { padding-top: 4rem; width: 280px; }
}

/* Larger than tablet screen >= 1024 */
@media (min-width: 1024px) {
	.lg { display: block !important; }
	.site-header .navigation-list { display: flex; }
	.grid.anniversary { grid-template-columns: repeat(6,1fr); }
	/* .grid { grid-template-columns: repeat(3,1fr); grid-auto-rows: 360px; } */
}

/**
 * Темная тема (по-умолчанию Светлая)
 */
body { background: white; color: #606c76; font-weight: 400; }
.site-header { box-shadow: 0 0 2px rgba(0,0,0,0.5); }
/* a { color: #48ab88; } */
a { color: #ff0078; }
a:focus, a:hover { color: #80003c; }
button { background-color: #d22d7a; border: 0.1rem solid #d22d7a; }
button:hover { background-color: #80003c; }
h1, h2, h3, h4, h5 { color: #802080; }
.darker { background: #eaebec; }

@media (prefers-color-scheme: dark) {
	body { background:  #202020; color: #d0cbc8; font-weight: 400; }
	.site-header { box-shadow: 0 0 2px rgba(255,255,255,0.5); }
	a { color: #f0a0c0; }
	button { color: #f0c0e0; }
	input[type="text"] { color: #f0f2f4; }
	a:focus, a:hover, button:hover { color: #ffe6f3; }
	button, input[type="text"], input[type="number"], input[type="text"]:focus, input[type="number"]:focus { border: 1px solid #a06080; }
	button:hover { border: 1px solid #a06080; }
	h1, h2, h3, h4, h5 { color: #d070ff; }
	.darker { background: black; color: #d0cbc8; }
	.similar-field { color: #b8b0b8; }
	.similar-item:hover { box-shadow: 0 0 0 3px #202020, 0 0 0 5px #ff0078;
}

	.filter-sidebar .side-nav,
	.filter-sidebar .sidebar-header,
	.filter-sidebar .acc-content { border-color: #606060; }
	.accordion .acc-heading:hover h5 { color: white; }
	.accordion .acc-heading.active { color: #d0cbc8; }
	.accordion .acc-heading.used::after { background: #f0a0c0; }
	.accordion .acc-content input { color: #d0cbc8; }
}
































/* EoF */