/*
 * local/css/wp-look-local.css - personal tweaks, loaded after the WordPress Look
 * plugin's own CSS. Survives plugin updates.
 */

/* ---- Thumbnails: 3 equal square columns filling the page (2 on phones) ----
   Works with Modus set to square thumbnails for albums and photos
   (Admin > Themes > Modus > Configuration). Change the 3 below for more or fewer
   columns. */

body.wplook #rv-at,
body.wplook #thumbnails {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px 10px;
	margin: 0 !important;
	padding: 12px !important;
	list-style: none;
	text-align: left;
}
body.wplook #rv-at > LI,
body.wplook #thumbnails > LI {
	display: block !important;
	float: none !important;
	position: relative;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
}

/* Album covers: square, with the album name over the picture (as before) */
body.wplook #rv-at > LI {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
body.wplook #rv-at > LI > A {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}
body.wplook #rv-at .albImg {
	display: block;
	position: static !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover;
}

/* Photos: square picture, title underneath */
body.wplook #thumbnails .wrap1 {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}
body.wplook #thumbnails .wrap2 {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}
body.wplook #thumbnails .wrap2 A {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}
body.wplook #thumbnails .wrap2 IMG {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover;
	border: 0 !important;
}
body.wplook #thumbnails .thumbLegend {
	display: block !important;
	position: static !important;
	height: auto !important;
	min-height: 0 !important;
	overflow: hidden;
	margin: 6px 2px 0;
	padding: 0;
	background: none !important;
	color: #444 !important;
	font-size: 14px !important;
	line-height: 1.35;
	text-align: center;
	text-shadow: none !important;
	/* at most two lines; longer titles end in "..." */
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
/* Only the title: hide visit counts, comment counts and descriptions */
body.wplook #thumbnails .thumbLegend .nb-hits,
body.wplook #thumbnails .thumbLegend .nb-comments,
body.wplook #thumbnails .thumbLegend .thumbDesc {
	display: none !important;
}
/* Piwigo's small "recent photo" marker next to the title */
body.wplook #thumbnails .thumbLegend IMG {
	display: inline !important;
	width: auto !important;
	height: 1em !important;
	vertical-align: baseline;
}

@media (max-width: 600px) {
	body.wplook #rv-at,
	body.wplook #thumbnails {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px 6px;
		padding: 6px !important;
	}
	body.wplook #thumbnails .thumbLegend {
		font-size: 13px !important;
	}
}