/*
	Publication list styling for publications.html.

	Background
	----------
	The .publications / .pub-entry / .venue / .paper-details rules were originally
	hand-added directly to the compiled assets/css/main.css (they are NOT in
	assets/sass/, so a Sass rebuild would silently delete them), and were tuned for one
	specific spot: the dark, full-screen banner on index.html.

	publications.html is `wrapper style2 invert color1` — a raised dark-gray content card
	on the near-black gradient that `#wrapper > .color1` defines — so the dark-background
	chip treatment is correct again. What also has to be overridden here is the *geometry*:
	the originals used `margin-left: -10em; width: 60vw` and `left: 17em`, offsets that
	only made sense against the old left-oriented banner. Inside a centred wrapper they
	drag the list off-axis and out of its container.

	This file loads AFTER main.css and overrides those. Treat it as the authoritative
	source for publication styling — it survives a Sass rebuild, main.css does not.
*/

/* The card itself (dark gray, raised) is shared with projects.html — see card.css. */

/* Undo the index.html-specific offsets; fill the wrapper instead. */
.publications {
	margin-top: 0;
	margin-left: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.pub-entry {
	display: flex;
	align-items: baseline;
	gap: 1.5rem;
	margin-left: 0;
	width: 100%;
	padding-top: 0;
}

.venue-container {
	flex: 0 0 9.5rem;
	width: auto;
	display: flex;
}

/* Chip on the gray card. Carries the same top-highlight/bottom-shade bevel as the card
   so the two read as one material, just at different elevations. */
.venue {
	flex: 0 0 auto;
	width: 100%;
	font-weight: 600;
	padding: 0.3em 0.8em;
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 4px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.16),
		0 1px 2px rgba(0, 0, 0, 0.18);
	text-align: center;
	font-size: 0.8em;
	letter-spacing: 0.05rem;
	white-space: nowrap;
	line-height: 1.4;
	height: auto;
}

.paper-details {
	left: auto;
	flex: 1;
	width: auto;
	margin-top: 0;
	height: auto;
	line-height: 1.6;
}

/*
	Paper links.

	`#wrapper > .invert a` in main.css paints every link in an inverted section plain
	white, which makes paper titles indistinguishable from the author lines around them.
	These selectors carry an extra class so they outrank it (1,2,1 vs 1,1,1) and restore
	the site's teal accent — the one spot of colour left after the background went
	neutral. #47D3E5 on the #2E3337 card is 7.1:1, comfortably past WCAG AA.
*/
#wrapper .invert .paper-details a {
	color: #47D3E5;
}

#wrapper .invert .paper-details a:hover {
	color: #ffffff;
}

@media screen and (max-width: 736px) {

	/* Stack the chip above the citation; 9.5rem of gutter is too much on a phone. */
	.pub-entry {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.venue-container {
		flex: 0 0 auto;
	}

	.publications {
		gap: 1.5rem;
	}

}