/* =========================================================
   Featured Publications — Album / Gallery Layout
   ========================================================= */

.featured-publications {
	width: 92vw;
	max-width: 1500px;

	margin-left: 50%;
	transform: translateX(-50%);

	display: grid;

	/*
	 * SphereEdit's third column is deliberately wider.
	 *
	 * Columns:
	 * ACL / AAE       ChartBias       SphereEdit / Taarof
	 */
	grid-template-columns:
		minmax(0, 1fr)
		minmax(0, 1fr)
		minmax(0, 1.30fr);

	gap: 34px;

	align-items: start;
}


/* =========================================================
   Publication Columns
   ========================================================= */

.publication-column {
	display: flex;
	flex-direction: column;

	gap: 34px;

	min-width: 0;
}


/* =========================================================
   Publication Cards
   ========================================================= */

.featured-publication {
	width: 100%;
	margin: 0;

	min-width: 0;
}


/*
 * Taarof is portrait-oriented and doesn't need the full width
 * of SphereEdit's enlarged column.
 */
.taarof-card {
	width: 82%;
	align-self: center;
}


/* Entire publication card is clickable */
.featured-publication-link {
	display: block;
	width: 100%;

	color: inherit;
	text-decoration: none;

	border-radius: 10px;
}


/* Card body */
.featured-publication .feature-wrap {
	width: 100%;

	padding: 18px;

	background-color: transparent;

	border: 1px solid transparent;
	border-radius: 10px;

	text-align: center;

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		background-color 0.25s ease,
		border-color 0.25s ease;
}


/* =========================================================
   Images — Natural Aspect Ratio
   ========================================================= */

.featured-publication-image {
	width: 100%;

	margin-bottom: 18px;

	overflow: hidden;
	border-radius: 4px;
}


/*
 * No fixed image height.
 *
 * Portrait figures remain portrait.
 * Landscape figures remain landscape.
 */
.featured-publication-image img {
	display: block;

	width: 100%;
	height: auto;

	max-width: 100%;

	transition: transform 0.3s ease;
}


/* =========================================================
   SphereEdit
   ========================================================= */

/*
 * SphereEdit gets the full enlarged third column.
 * No overflowing or negative margins are necessary.
 */
.sphereedit-card {
	width: 100%;
}


/* =========================================================
   Venue / Date
   ========================================================= */

.featured-publication h2 {
	margin-top: 0;
	margin-bottom: 14px;

	line-height: 1.35;
}


/* =========================================================
   Paper Title
   ========================================================= */

.featured-publication h3 {
	margin: 0 auto;

	max-width: 95%;

	line-height: 1.5;
}


/* =========================================================
   Link Styling
   ========================================================= */

.featured-publication-link,
.featured-publication-link:hover,
.featured-publication-link:focus,
.featured-publication-link:visited {
	color: inherit;
	text-decoration: none;
}


/* =========================================================
   Hover Effect
   ========================================================= */

.featured-publication-link:hover .feature-wrap {
	transform: translateY(-6px);

	background-color: #ffffff;

	border-color: #dddddd;

	box-shadow:
		0 10px 30px rgba(0, 0, 0, 0.12);
}


/* Slight image zoom on hover */
.featured-publication-link:hover .featured-publication-image img {
	transform: scale(1.025);
}


/* =========================================================
   Keyboard Accessibility
   ========================================================= */

.featured-publication-link:focus-visible {
	outline: none;
}


.featured-publication-link:focus-visible .feature-wrap {
	outline: 3px solid rgba(0, 0, 0, 0.25);
	outline-offset: 4px;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1000px) {

	.featured-publications {
		width: 94vw;

		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 28px;
	}

	.publication-column {
		gap: 28px;
	}

	/*
	 * Return Taarof to normal card width on smaller screens.
	 */
	.taarof-card {
		width: 100%;
	}

	.featured-publication .feature-wrap {
		padding: 16px;
	}

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 650px) {

	.featured-publications {
		width: 92vw;

		grid-template-columns: 1fr;

		gap: 28px;
	}

	.publication-column {
		gap: 28px;
	}

	.taarof-card {
		width: 100%;
	}

	.featured-publication .feature-wrap {
		padding: 14px;
	}

}


/* =========================================================
   Reduced Motion Accessibility
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.featured-publication .feature-wrap,
	.featured-publication-image img {
		transition: none;
	}

	.featured-publication-link:hover .feature-wrap,
	.featured-publication-link:hover .featured-publication-image img {
		transform: none;
	}

}