/*! wmui-osproject.css */

.wm-osproject-heading {
	position: sticky;
	top: 0;
	background: var( --background-color-base );
}

.wm-osproject-grid {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin-right: -1rem;
}

.wm-osproject-tile {
	background: var( --wmci-background-color-neutral-subtle );
	border: 1px solid var( --wmci-border-color-soft );
	padding: 2.4rem;
	border-radius: var( --border-radius-base );
	margin: 0 1rem 1rem 0;
	box-sizing: border-box;
	flex: 1;
	min-width: 250px;
	/* Make each tile a flex container so that we can control where the growth goes
	 * in this case, make the growth to the the tagline so that the links are always
	 * aligned at the bottom of each row's tiles. */
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
}
.wm-osproject-tile-logo {
	width: 3rem;
	height: 3rem;
	margin-right: 0.8rem;
	vertical-align: middle;
}

.wm-osproject-tile:focus-within,
.wm-osproject-tile:target {
	border-color: var( --border-color-progressive );
	outline: none;
	box-shadow: 0 1px 4px 0 rgba( 0, 0, 0, 0.25 );
}
.wm-osproject-tile:target {
	/* To have the tile below the sticky heading */
	scroll-margin-top: 4.5rem;
}
.wm-osproject-tile:not(:focus-within):not(:target) {
	cursor: pointer;
}
.wm-osproject-tile-title {
	margin: 0;
	line-height: 3rem;
}
.wm-osproject-tile-title small {
	float: right;
	line-height: 1.6rem;
	color: var( --color-subtle );
	font-weight: var( --font-weight-normal );
	font-style: normal;
	font-size: small;
	-webkit-user-select: none; /* Safari, https://bugs.webkit.org/show_bug.cgi?id=208677 */
	user-select: none; /* FF 69+, Chrome 54+ */
}
.wm-osproject-tile-title small:before {
	content: ' (';
}
.wm-osproject-tile-title small:after {
	content: ')';
}
.wm-osproject-tile-title small:empty {
	display: none;
}
.wm-osproject-tile:not(:focus-within):not(:target) .wm-osproject-tile-title {
	font-size: inherit;
}

.wm-osproject-tile-tagline {
	margin: 0.8rem 0 1rem 0;
	flex-grow: 2;
}

/* On focused tiles, grow title and optional logo to 4rem. */
.wm-osproject-tile:focus-within .wm-osproject-tile-logo,
.wm-osproject-tile:target .wm-osproject-tile-logo {
	width: 4rem;
	height: 4rem;
}

h2:not(#featured) + .wm-osproject-grid .wm-osproject-tile:not(:focus-within):not(:target) .wm-osproject-tile-tagline {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	flex-grow: 0;
	overflow: hidden;
}

.wm-osproject-tile-links {
	margin: 0;
}
.wm-osproject-tile-links li {
	list-style-position: inside;
	margin: 0 0 0.2rem 0;
}

/* We use :not(:focus-within) instead of making this appear always and then
   hiding from a :focus-within rule so that in browsers without :focus-within
   support the list is simply expanded by default without toggle button. */
.wm-osproject-tile:not(:focus-within):not(:target) .wm-osproject-tile-links:not(:empty):before {
	display: block;
	content: "More information…";
	color: var( --color-subtle );
	cursor: pointer;
	list-style: none;
	/* Ensure text aligns vertically, whilst also having a padding
	   on the hover background. */
	margin: 0 -4px;
	padding: 0 4px;
}
.wm-osproject-tile:not(:focus-within):not(:target) .wm-osproject-tile-links:hover:before {
	text-decoration: underline;
	outline: 2px solid var( --wmci-border-color-soft );
	background-color: var( --wmci-background-color-neutral );
	color: var( --color-subtle );
}
.wm-osproject-tile:not(:focus-within):not(:target) .wm-osproject-tile-links li {
	display: none;
}