/* ==========================================================================
   PPLT Image List (custom Enfold ALB element)
   These are the "Use Default" values. Anything set in the element's Styling
   tab is written by Enfold's styling engine with a more specific selector
   (#top .pplt-image-list.av-xxxx ...), so it always wins over this file.
   ========================================================================== */

.pplt-image-list {
	--pil-thumb: 100px;
	--pil-thumb-mobile: 80px;
	--pil-title-color: #8C491A;   /* terracotta 700 */
	--pil-title-hover: #643312;   /* terracotta 800 */
	--pil-desc-color: #4A4438;    /* ink 700 */
	--pil-rule: rgba(77, 61, 43, .2);
	--pil-focus: #643312;
}

#top .pplt-image-list__items {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

#top .pplt-image-list__item {
	position: relative;
	display: grid;
	grid-template-columns: var(--pil-thumb) minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	margin: 0;
	padding: 20px 0;
	border: 0;
	list-style: none;
}
/* Divider lines only BETWEEN rows: none above the first, none below the last */
#top .pplt-image-list__item + .pplt-image-list__item { border-top: 1px solid var(--pil-rule); }
#top .pplt-image-list--no-dividers .pplt-image-list__item + .pplt-image-list__item { border-top: 0; }
/* The list sits flush with the content above and below it
   (#wrap_all so this also beats a custom "Space Between Rows") */
#top #wrap_all .pplt-image-list .pplt-image-list__item:first-child { padding-top: 0; }
#top #wrap_all .pplt-image-list .pplt-image-list__item:last-child { padding-bottom: 0; }
#top .pplt-image-list--top .pplt-image-list__item { align-items: start; }
#top .pplt-image-list .pplt-image-list__item--no-image { grid-template-columns: minmax(0, 1fr); }

#top .pplt-image-list__thumb {
	display: block;
	width: var(--pil-thumb);
	height: var(--pil-thumb);
	max-width: none;
	margin: 0;
	object-fit: cover;
	border-radius: 20px;
	filter: saturate(.86) contrast(.95) brightness(1.03);   /* the site's "washed" photo look */
}
#top .pplt-image-list--circle .pplt-image-list__thumb { border-radius: 50%; }
#top .pplt-image-list--square .pplt-image-list__thumb { border-radius: 0; }
#top .pplt-image-list--unwashed .pplt-image-list__thumb { filter: none; }

#top .pplt-image-list__title {
	font-family: 'noto-serif', Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
	text-transform: none;
	color: var(--pil-title-color);
	margin: 0 0 4px;
	padding: 0;
}
/* The link takes the title's color, so a custom title color also colors the link */
#top .pplt-image-list__link,
#top .pplt-image-list__link:hover {
	color: inherit;
	text-decoration: none;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
/* The whole row is the click target */
#top .pplt-image-list__link::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
#top .pplt-image-list__item--linked:hover .pplt-image-list__title { color: var(--pil-title-hover); }
#top .pplt-image-list__item--linked:hover .pplt-image-list__link { text-decoration: underline; }
#top .pplt-image-list__link:focus-visible { outline: none; }
#top .pplt-image-list__link:focus-visible::after { outline: 3px solid var(--pil-focus); outline-offset: 2px; }

#top .pplt-image-list__desc {
	font-family: 'figtree', Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--pil-desc-color);
}
/* Paragraphs inside the description follow the description's size and color */
#top .pplt-image-list__desc p {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0;
	padding: 0;
}
#top .pplt-image-list__desc p + p { margin-top: .5em; }

/* Mobile (theme breakpoint 767px). The extra #wrap_all lets the mobile
   thumbnail size beat a custom desktop size set in the element. */
@media only screen and (max-width: 767px) {
	#top #wrap_all .pplt-image-list .pplt-image-list__item {
		grid-template-columns: var(--pil-thumb-mobile) minmax(0, 1fr);
		gap: 16px;
	}
	#top #wrap_all .pplt-image-list .pplt-image-list__item--no-image { grid-template-columns: minmax(0, 1fr); }
	#top #wrap_all .pplt-image-list .pplt-image-list__thumb { width: var(--pil-thumb-mobile); height: var(--pil-thumb-mobile); }
}