/* ==========================================================
   IIT Bhubaneswar Central Library – inner pages (loaded from commonhead after iit-base.css)
   The app shell itself is the theme3 "modern" layer (resources-modern.css / pages-modern.css),
   re-coloured to the emblem slate + sky. This file adds:
   - IIT touches on that shell (mono labels, sky markers, hero grid)
   - the Library catalogue (Koha) panel on /resources
   ========================================================== */

/* ---------- Shell touches ---------- */

.res-modern,
.pg-modern {
	font-family: var(--iit-sans);
}

.res-modern .res-eyebrow,
.res-modern .res-side-label {
	font-family: var(--iit-mono) !important;
	letter-spacing: 0.12em !important;
}

/* the resources hero gets the same blueprint grid as the home page */
.res-modern .res-hero {
	position: relative;
	background:
		radial-gradient(700px 300px at 85% 0%, rgba(0, 147, 221, 0.22), transparent 65%),
		linear-gradient(180deg, var(--iit-slate-deep), var(--iit-slate)) !important;
}

.res-modern .res-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--iit-grid);
	background-size: 28px 28px;
	-webkit-mask-image: linear-gradient(180deg, #000, transparent);
	mask-image: linear-gradient(180deg, #000, transparent);
	pointer-events: none;
}

.res-modern .res-hero-inner {
	position: relative;
}

.res-modern .res-hero-title span {
	color: var(--iit-sky) !important;
}

/* ---------- Library catalogue (Koha) panel ---------- */

.iit-cat {
	margin: 24px 24px 8px;
	padding: 22px 24px 20px;
	background: #fff;
	border: 1px solid var(--iit-line);
	border-top: 3px solid var(--iit-sky);
	border-radius: 10px;
	font-family: var(--iit-sans);
	scroll-margin-top: 90px;
}

.iit-cat-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: 24px;
	align-items: end;
}

.iit-cat-kicker {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: var(--iit-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--iit-sky-ink);
}

.iit-cat-kicker::before {
	content: "";
	width: 7px;
	height: 7px;
	background: var(--iit-sky);
}

.iit-cat-head h2 {
	margin: 8px 0 0;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--iit-ink);
}

.iit-cat-head > p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--iit-muted);
}

.iit-cat-form {
	display: flex;
	gap: 0;
	margin-top: 16px;
	border: 1.5px solid #cfd8e3;
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.iit-cat-form:focus-within {
	border-color: var(--iit-sky);
	box-shadow: 0 0 0 4px rgba(0, 147, 221, 0.18);
}

.iit-cat-form select {
	flex: 0 0 auto;
	width: 150px;
	height: 48px;
	padding: 0 12px;
	border: 0;
	border-right: 1px solid var(--iit-line);
	background: var(--iit-paper);
	font-family: var(--iit-sans);
	font-size: 14px;
	color: var(--iit-ink);
	outline: 0;
}

.iit-cat-form input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 16px;
	border: 0;
	outline: 0;
	font-family: var(--iit-sans);
	font-size: 15px;
	color: var(--iit-ink);
	background: transparent;
}

.iit-cat-form button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 22px;
	border: 0;
	background: var(--iit-slate);
	color: #fff;
	font-family: var(--iit-sans);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.iit-cat-form button:hover {
	background: var(--iit-sky-dark);
}

.iit-cat-results:empty {
	display: none;
}

.iit-cat-results {
	margin-top: 18px;
}

.iit-cat-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--iit-line);
}

.iit-cat-bar p {
	margin: 0;
	font-size: 14px;
	color: var(--iit-ink);
}

.iit-cat-bar p b {
	font-family: var(--iit-mono);
}

.iit-cat-bar p span {
	color: var(--iit-subtle);
}

.iit-cat-bar a,
.iit-cat-msg a {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--iit-sky-ink) !important;
}

.iit-cat-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.iit-cat-list li {
	border-bottom: 1px solid var(--iit-line);
}

.iit-cat-book {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	padding: 12px 6px;
	color: var(--iit-ink) !important;
	text-decoration: none !important;
	transition: background-color 0.15s ease;
}

a.iit-cat-book:hover {
	background: var(--iit-sky-soft);
}

.iit-cat-spine {
	display: grid;
	place-items: center;
	width: 38px;
	height: 50px;
	border-radius: 3px 6px 6px 3px;
	background: linear-gradient(90deg, var(--iit-slate-deep) 0 5px, var(--iit-slate) 5px);
	color: #8fd3f7;
	font-family: var(--iit-mono);
	font-size: 15px;
	font-weight: 600;
}

.iit-cat-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.iit-cat-title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.iit-cat-by {
	font-size: 13.5px;
	color: var(--iit-muted);
}

.iit-cat-meta {
	font-size: 12.5px;
	color: var(--iit-subtle);
}

.iit-cat-side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 5px;
	text-align: right;
}

.iit-cat-av {
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.iit-cat-av--yes {
	background: #e7f8ef;
	color: #067647;
}

.iit-cat-av--no {
	background: #fef3e7;
	color: #9a4a06;
}

.iit-cat-call {
	font-family: var(--iit-mono);
	font-size: 12px;
	color: var(--iit-slate);
	white-space: nowrap;
}

.iit-cat-open {
	font-size: 12px;
	font-weight: 600;
	color: var(--iit-sky-ink);
	opacity: 0;
	transition: opacity 0.15s ease;
}

a.iit-cat-book:hover .iit-cat-open,
a.iit-cat-book:focus-visible .iit-cat-open {
	opacity: 1;
}

.iit-cat-pager {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 14px;
	margin-top: 14px;
	font-family: var(--iit-mono);
	font-size: 12.5px;
	color: var(--iit-muted);
}

.iit-cat-pager button {
	padding: 7px 14px;
	border: 1px solid var(--iit-line);
	border-radius: 6px;
	background: #fff;
	font-family: var(--iit-sans);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--iit-slate);
	cursor: pointer;
}

.iit-cat-pager button:hover:not(:disabled) {
	border-color: var(--iit-slate);
}

.iit-cat-pager button:disabled {
	opacity: 0.4;
	cursor: default;
}

.iit-cat-msg {
	padding: 16px 4px 4px;
	font-size: 14px;
	color: var(--iit-muted);
}

.iit-cat-msg p {
	margin: 0 0 8px;
}

.iit-cat-msg-title {
	font-weight: 600;
	color: var(--iit-ink);
}

.iit-cat-msg--error p {
	color: #b42318;
}

.iit-cat-wait {
	margin: 0 0 6px;
	font-family: var(--iit-mono);
	font-size: 12px;
	color: var(--iit-subtle);
}

/* loading rows */
.iit-cat-book--skel .iit-cat-spine {
	background: #e8edf3;
}

.iit-cat-book--skel i {
	display: block;
	height: 10px;
	margin: 4px 0;
	border-radius: 4px;
	background: linear-gradient(90deg, #eef2f6 25%, #e2e8f0 50%, #eef2f6 75%);
	background-size: 200% 100%;
	animation: iit-skel 1.2s linear infinite;
}

.iit-cat-book--skel i:nth-child(1) {
	width: 60%;
}

.iit-cat-book--skel i:nth-child(2) {
	width: 35%;
}

.iit-cat-book--skel i:nth-child(3) {
	width: 22%;
}

@keyframes iit-skel {
	from {
		background-position: 200% 0;
	}

	to {
		background-position: -200% 0;
	}
}

@media (max-width: 767.98px) {
	.iit-cat {
		margin: 16px 12px 4px;
		padding: 18px 16px 16px;
	}

	.iit-cat-head {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.iit-cat-form {
		flex-wrap: wrap;
	}

	.iit-cat-form select {
		width: 100%;
		height: 42px;
		border-right: 0;
		border-bottom: 1px solid var(--iit-line);
	}

	.iit-cat-form button span {
		display: none;
	}

	.iit-cat-book {
		grid-template-columns: 32px minmax(0, 1fr);
	}

	.iit-cat-spine {
		width: 32px;
		height: 44px;
	}

	.iit-cat-side {
		grid-column: 2;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		text-align: left;
	}

	.iit-cat-open {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.iit-cat-book--skel i {
		animation: none;
	}
}

/* ---------- Catalogue as its own sidebar view on /resources ---------- */

/* hidden until "Library catalogue" is chosen in the sidebar (or the page opens at #catalogue) */
.res-modern .iit-cat {
	display: none;
}

.res-modern.iit-cat-view .iit-cat {
	display: block;
	margin-top: 24px;
	min-height: 60vh;
}

/* the collection grid, its toolbar and favourites step aside */
.res-modern.iit-cat-view .res-main {
	display: none !important;
}

.res-modern #sidebar .iit-cat-nav .res-cat-name i {
	width: 16px;
	margin-right: 4px;
	color: #8fd3f7;
}

.res-modern #sidebar .iit-cat-nav.active .res-cat-name i {
	color: var(--iit-sky-ink);
}

/* example searches and tips while the catalogue has no results */
.iit-cat-results:not(:empty) + .iit-cat-tips {
	display: none;
}

.iit-cat-tips {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px dashed var(--iit-line);
}

.iit-cat-tips p {
	margin: 0 0 10px;
	font-family: var(--iit-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--iit-subtle);
}

.iit-cat-tips div {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.iit-cat-tips button {
	padding: 6px 12px;
	border: 1px solid var(--iit-line);
	border-radius: 6px;
	background: #fff;
	font-family: var(--iit-sans);
	font-size: 13.5px;
	color: var(--iit-slate);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.iit-cat-tips button:hover {
	border-color: var(--iit-sky);
	background: var(--iit-sky-soft);
}

.iit-cat-tips ul {
	margin: 18px 0 0;
	padding-left: 18px;
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--iit-muted);
}