/**
 * plugins/generic/journalDirectory/css/directory.css
 *
 * "Все журналы" by the mockup 1640 (CPC-5027). The sizes are the sizes of the mockup, written through --u: the theme
 * ranepaJournal zooms the page by 1.1714 from 1600 px, and the mockup is already drawn at that scale.
 */
.page_journal_directory {
	--u: calc(1px / 1.1714);
	--jd-ink: #2a253e;
	--jd-bg: #f3f3f7;
	--jd-line: #e5e1f0;
	--jd-muted: #8b8a8f;
	--jd-red: #c8102e;
	box-sizing: border-box;
	width: 100%;
	max-width: calc(1300 * var(--u));
	margin: 0 auto;
	padding: calc(29 * var(--u)) 0 calc(60 * var(--u));
	color: var(--jd-ink);
	font-family: inherit;
}
.page_journal_directory *, .page_journal_directory *::before, .page_journal_directory *::after { box-sizing: border-box; }
.page_journal_directory [hidden] { display: none !important; }

@media (max-width: 1340px) { .page_journal_directory { padding-left: 16px; padding-right: 16px; } }

.page_journal_directory .jd_title {
	margin: 0 0 calc(20 * var(--u));
	font-size: calc(35 * var(--u));
	line-height: calc(48 * var(--u));
	font-weight: 600;
	color: var(--jd-ink);
}

/* search row */
.jd_searchrow { display: flex; gap: calc(22 * var(--u)); margin: 0; align-items: center; }
.jd_search_bar {
	flex: 1 1 auto;
	display: flex;
	height: calc(40 * var(--u));
	background: var(--jd-line);
	border-radius: calc(5 * var(--u));
	overflow: hidden;
}
.jd_search_input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding: 0 calc(20 * var(--u));
	border: 0;
	background: transparent;
	font-size: calc(12 * var(--u));
	color: var(--jd-ink);
	outline: 0;
}
.jd_search_input::placeholder { color: var(--jd-ink); opacity: 1; }
.jd_search_btn {
	flex: 0 0 calc(200 * var(--u));
	height: 100%;
	border: 0;
	background: var(--jd-ink);
	color: var(--jd-line);
	font-size: calc(16 * var(--u));
	font-weight: 600;
	cursor: pointer;
}
.jd_search_btn:hover { background: #171520; }
.jd_year {
	min-width: 0;
	overflow: hidden;
	flex: 0 0 calc(200 * var(--u));
	height: calc(40 * var(--u));
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0 calc(14 * var(--u));
	border: 1px solid var(--jd-line);
	border-radius: calc(5 * var(--u));
	background: #fff;
	font-size: calc(14 * var(--u));
	font-weight: 500;
}
.jd_year span { color: var(--jd-muted); margin-right: calc(4 * var(--u)); white-space: nowrap; }
.page_journal_directory .jd_year select { flex: 1 1 auto; min-width: 0; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 calc(16 * var(--u)) 0 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background-color: transparent !important; -webkit-appearance: none; appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%232a253e' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right center; font: inherit; color: var(--jd-ink); font-weight: 700; outline: 0; cursor: pointer; }
.jd_toprow .jd_recommender { flex: 0 1 auto; margin: 0; font-size: calc(12 * var(--u)); color: var(--jd-red); text-decoration: underline; }

/* two columns */
.jd_toprow { display: flex; align-items: baseline; gap: calc(20 * var(--u)); margin-top: calc(30 * var(--u)); min-height: calc(30 * var(--u)); }
.jd_toprow .jd_side_head { flex: 0 0 calc(310 * var(--u)); }
.jd_toprow .jd_status_row { flex: 1 1 auto; margin: 0; }
.jd_layout { display: flex; align-items: flex-start; gap: calc(20 * var(--u)); margin-top: calc(17 * var(--u)); }
.jd_side { flex: 0 0 calc(310 * var(--u)); }
.jd_main { flex: 1 1 auto; min-width: 0; }

.jd_side_head { display: flex; align-items: baseline; justify-content: space-between; }
.jd_side_head h2 { margin: 0; font-size: calc(25 * var(--u)); line-height: calc(30 * var(--u)); font-weight: 600; color: var(--jd-ink); }
.jd_reset_btn { border: 0; background: none; padding: 0; font-size: calc(14 * var(--u)); font-weight: 500; color: var(--jd-muted); cursor: pointer; }
.jd_reset_btn:hover { color: var(--jd-ink); }

.jd_group { margin-bottom: calc(11 * var(--u)); background: var(--jd-bg); border-radius: calc(5 * var(--u)); overflow: hidden; }
.jd_group_head {
	position: relative;
	display: block;
	width: 100%;
	min-height: calc(44 * var(--u));
	padding: calc(10 * var(--u)) calc(34 * var(--u)) calc(10 * var(--u)) calc(16 * var(--u));
	border: 0;
	background: var(--jd-line);
	text-align: left;
	font-size: calc(16 * var(--u));
	line-height: calc(24 * var(--u));
	font-weight: 600;
	color: var(--jd-ink);
	cursor: pointer;
}
.jd_group_head::after { content: ""; position: absolute; right: calc(16 * var(--u)); top: 50%; width: calc(6 * var(--u)); height: calc(6 * var(--u)); margin-top: calc(-5 * var(--u)); border: solid var(--jd-ink); border-width: 0 calc(2 * var(--u)) calc(2 * var(--u)) 0; transform: rotate(45deg); }
.jd_group.is_open .jd_group_head { background: var(--jd-bg); }
.jd_group.is_open .jd_group_head::after { margin-top: calc(-2 * var(--u)); transform: rotate(-135deg); }
.jd_group_body { display: none; padding: 0 calc(16 * var(--u)) calc(12 * var(--u)); }
.jd_group.is_open .jd_group_body { display: block; }
.jd_check { display: flex; align-items: flex-start; gap: calc(8 * var(--u)); margin: 0; padding: calc(5 * var(--u)) 0; font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 400; cursor: pointer; }
.jd_check input { flex: 0 0 auto; width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin: calc(2 * var(--u)) 0 0; accent-color: var(--jd-red); cursor: pointer; }

/* cards */
.jd_status_row { margin: 0 0 calc(10 * var(--u)); font-size: calc(14 * var(--u)); color: var(--jd-muted); }
.page_journal_directory .jd_grid { list-style: none; margin: 0 !important; padding: 0; }
.jd_card {
	display: flex;
	gap: calc(10 * var(--u));
	min-height: calc(200 * var(--u));
	margin: 0 0 calc(20 * var(--u));
	padding: calc(10 * var(--u));
	background: var(--jd-bg);
	border-radius: calc(10 * var(--u));
}
.jd_cover {
	flex: 0 0 calc(124 * var(--u));
	height: calc(180 * var(--u));
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--jd-line);
	border-radius: calc(3 * var(--u));
	overflow: hidden;
	text-decoration: none;
}
.jd_cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jd_cover_ph { padding: calc(8 * var(--u)); text-align: center; font-size: calc(14 * var(--u)); font-weight: 600; color: var(--jd-ink); }
.jd_card_body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.page_journal_directory .jd_card_title { margin: 0; font-size: calc(18 * var(--u)); line-height: calc(25 * var(--u)); font-weight: 600; }
.jd_card_title a { color: var(--jd-ink); text-decoration: none; }
.jd_card_title a:hover { color: var(--jd-red); }
.jd_card_meta { margin-top: calc(24 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(29 * var(--u)); color: #414141; }
.jd_issn { text-decoration: underline dotted; }
.jd_card_actions { display: flex; align-items: center; gap: calc(20 * var(--u)); margin-top: auto; }
.jd_link { font-size: calc(14 * var(--u)); font-weight: 500; color: var(--jd-red); text-decoration: none; }
.jd_link:hover { text-decoration: underline; }
.jd_btn {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: calc(162 * var(--u));
	height: calc(40 * var(--u));
	padding: 0 calc(16 * var(--u));
	border-radius: calc(5 * var(--u));
	background: var(--jd-ink);
	color: #fff;
	font-size: calc(14 * var(--u));
	font-weight: 600;
	text-decoration: none;
}
.jd_btn:hover { background: #171520; color: #fff; }
.jd_no_results { padding: calc(30 * var(--u)) 0; font-size: calc(16 * var(--u)); color: var(--jd-muted); }

@media (max-width: 900px) {
	.page_journal_directory { --u: 1px; }
	.jd_searchrow { flex-direction: column; align-items: stretch; }
	.jd_year { flex: 0 0 auto; }
	.jd_toprow { flex-direction: column; align-items: stretch; gap: 8px; }
	.jd_toprow .jd_side_head { flex: 0 0 auto; width: 100%; }
	.jd_layout { flex-direction: column; }
	.jd_side { flex: 0 0 auto; width: 100%; }
	.jd_card { flex-direction: column; }
	.jd_cover { flex: 0 0 auto; width: 100%; height: 180px; }
}

/* the sub-groups of the group "Индексация" */
.jd_check--all { padding-bottom: calc(8 * var(--u)); }
.jd_sub { border-top: 1px solid var(--jd-line); }
.jd_sub_head { position: relative; display: block; width: 100%; padding: calc(9 * var(--u)) calc(22 * var(--u)) calc(9 * var(--u)) 0; border: 0; background: none; text-align: left; font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 600; color: var(--jd-ink); cursor: pointer; }
.jd_sub_head::after { content: ""; position: absolute; right: calc(4 * var(--u)); top: 50%; width: calc(5 * var(--u)); height: calc(5 * var(--u)); margin-top: calc(-4 * var(--u)); border: solid var(--jd-ink); border-width: 0 calc(2 * var(--u)) calc(2 * var(--u)) 0; transform: rotate(45deg); }
.jd_sub.is_open > .jd_sub_head::after { margin-top: calc(-1 * var(--u)); transform: rotate(-135deg); }
.jd_sub_body { display: none; padding: 0 0 calc(6 * var(--u)) calc(6 * var(--u)); }
.jd_sub.is_open > .jd_sub_body { display: block; }
.jd_sub--nested { margin-left: calc(6 * var(--u)); }

/* the check against the new Figma (16.10.2026) */
.jd_sub_head { font-size: calc(16 * var(--u)); font-weight: 600; }
.jd_check--all { font-size: calc(16 * var(--u)); font-weight: 500; }
.jd_link { font-size: calc(16 * var(--u)); font-weight: 600; color: #ca0f3e; }
.jd_btn { font-weight: 700; }

/* a phone (the mockup 551:25779): the cover on the left of the width of a thumbnail, the links in one row, the button of the whole width */
@media (max-width: 700px) {
	.page_journal_directory .jd_title { font-size: 24px; line-height: 32px; }
	.jd_cover { width: 115px; height: 165px; }
	.page_journal_directory .jd_card_title { font-weight: 500; }
	.jd_card_actions { flex-wrap: wrap; gap: 12px 20px; }
	.jd_card_actions .jd_link { white-space: nowrap; }
	.jd_card_actions .jd_btn { order: 3; width: 100%; box-sizing: border-box; }
}

/* the intro line under the title: only on a phone (the mockup 551:25779); the text is from the mockup and waits for the confirmation of the designer */
.jd_intro { display: none; }
@media (max-width: 700px) {
	.jd_intro { display: block; margin: 0 0 16px; font-size: 16px; line-height: 22px; color: #171520; }
}