// Specific styles for Universal Item List Widget and Recent Posts Widget:
// DEPRECATED: These styles are used when PHP code is used for formatting instead of templates
// This moule is kept for backwards compatibility in case of upgrade and 3rd part skins but this will be dropped in the future.

// Default values
@tile_background_color: #fafafa;
@img_placeholder_bg_color: #f0f0f0; // Background color of the Placeholder
@img_placeholder_icon_color: #dcdcdc; // Color of the icon inside the Placeholder element


// Replacing previous
// widget_core_coll_item_list
// widget_core_coll_page_list
// widget_core_coll_post_list
// widget_core_coll_featured_posts
// widget_core_coll_related_post_list
// widget_core_coll_flagged
div.widget_uil_autotemp {   // ALL Universal Item List Widgets (when using Auto Template instead of Quick Templates)

	// Flow layout
	&.evo_layout_flow {
		.widget_flow_blocks {
			// Important for centering inner blocks
			display: inline-block;
			text-align: center;
			width: 100%;
			
			// Inner blocks div style (should be the same as .widget_rwd_content)
			> div {
				padding: 8px;
				margin: 14px;
				overflow: hidden;
				background-color: @tile_background_color;
				border-radius: 4px;
				text-align: left;
				width: 250px; // Fixed widget for flowing blocks

				display: inline-block;
				float: none; // We removed default bootstrap's style here because of the issue with floated divs with uneven heights in multiple rows
				vertical-align: top;
			}
		}
		
		// With teaser or with excerpt
		&.evo_withteaser,
		&.evo_withexcerpt {
			.widget_flow_blocks > div {
				.item_title {
					font-size: 16px;
					font-weight: 700;
					line-height: 1.5em;
					margin: 10px 0 5px;
				}
			}
		}
	}
	
	// RWD layout
	&.evo_layout_rwd {

		.widget_rwd_content {
			padding: 8px;
			margin: 14px 0;
			overflow: hidden;
			background-color: @tile_background_color;
			border-radius: 4px;
		}
		// With teaser or with excerpt
		&.evo_withteaser, &.evo_withexcerpt {
			// Wrapper div
			.widget_rwd_blocks {
				//
				> div {
					display: inline-block;
					float: none; // We removed default bootstrap's style here because of the issue with floated divs with uneven heights in multiple rows
					vertical-align: top;
				}

				.widget_rwd_content {

					// Important for limiting the max image size to it's parent's max width
					.item_first_image img {
						width: 100%;
						height: 240px;
						object-fit: cover;
						margin: auto;
					}
					.item_title {
						font-size: 16px;
						font-weight: 700;
						line-height: 1.5em;
						margin: 10px 0 5px;
					}
					.item_content { // Teaser or excerpt... we want to align the [...] button in the bottom right
						> p:last-of-type { // this is not perfect but makes things a little more coherent if we have a teaser with multiple paragraphs
							min-height: 60px;
							margin-bottom: 0px;
						}
						a {
							margin: -20px 0 0;
						}
					}
				}
			}
		}
	}

	// If "Display first picture" and "Special treatment"
	&.evo_1pic__special {
		// Widget title font-size when special placement on Main Collection.
		// On other collections, we use h3 element for Widget titles with default layout.
		h2 {
		   font-size: 30px;
		}
		ul {
			padding: 0;
			margin-left: 0;
			li {
				list-style: none;
				height: auto;
				// display: table; - testing if this can be replaced with display: block;
				display: inline-block;
				width: 100%;
				clear: both;
				margin: 5px 0;
				padding: 0;
				vertical-align: middle;
				// Placeholder when "Display first picture" selected, but no picture to show
				.item_first_image_placeholder {
					display: table;
					float: left;
					// height: 80px;
					// width: 80px;
					max-width: 380px;
					max-height: 380px;
					background: @img_placeholder_bg_color;
					margin-right: 6px;
					-webkit-border-radius: 3px;
					-moz-border-radius: 3px;
					-ms-border-radius: 3px;
					-o-border-radius: 3px;
					border-radius: 3px;
					&::before {
						font-family: FontAwesome;
						display: table-cell;
						content: '\f0f6';
						color: @img_placeholder_icon_color;
						font-size: 40px;
						vertical-align: middle;
						text-align: center;
					}
				}
				// Post title (when special placement selected)
				div.item_title {
					vertical-align: middle;
					height: 80px;
					// Multiple ellipis lines - for Safari
					display: -webkit-box;
					display: table-cell; // Overrides -webkit-box on Mozilla & Chrome
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
		// If special placement, without teaser, without excerpt
		&.evo_noexcerpt.evo_noteaser {
			div.item_title a {
				font-size: 22px;
			}
		}
	}
	
	// First image when selected "Display first image"
	&.evo_layout_list div.item_first_image {
		float: left;
		margin-right: 6px;
	}

	// If "Display all pictures" and "No special treatment"
	&.evo_pics {
		div.item_images {
			display: inline-block;
			//margin-top: 6px;
			img {
				margin: 6px 6px 0 0;
			}
		}
	}
	// If "Display all pictures" and "Special treatment"
	&.evo_pics.evo_1pic__special {
		li {
			display: block;
			width: 100%;
		}
		div.item_images {
			float: left;
			//margin: 6px 6px 6px 0;
		}
	}
	// With excerpt or with teaser
	&.evo_withexcerpt, &.evo_withteaser {
		// Special treatment - remove bullets
		&.evo_1pic__special ul li {
			list-style: none;
			display: table;
			div.item_title a {
				text-decoration: underline;
			}
			div.item_content {
				blockquote {
					margin-left: 86px;
				}
			}
			div.item_excerpt {
				margin-top: -2px;
			}
			// We need this code to convert the last line of <p> into "inline", so that the "..." button can be IN LINE with the last <p>
			div.item_content,
			div.item_excerpt {
				p {
					margin: 0;
					&:last-of-type {
						display: inline;
					}
				}
			}
		}
		ul li {
			height: auto;
			width: 100%;
			clear: both;
			margin: 15px 0;
			padding: 0;
			vertical-align: middle;
			div.item_title {
				vertical-align: middle;
				display: inline;
				height: auto !important;
				width: 100%;
				font-size: 16px;
				a {
					text-decoration: underline;
				}
			}
		}
		// Special blockquote style for teaser layout
		blockquote {
			display: block;
			margin: 0;
			padding: 5px 15px;
		}
		a.btn {
			// In v6.8.9+ we are using a real bootstrap button but we want the bg to be transparent.
			background-color: transparent;
			float: right;
			height: 22px;
			line-height: 13px;
			padding: 0px 4px 0px 4px;
			&:hover {
				// We need this because .btn.btn-default from Bootstraps' CSS can't override the overly precise "background-color: transparent" stated above
				background-color: #e6e6e6;
			}
		}
	}
	
	img {
		border-radius: 3px;
		// Preventing images to exceed the parent's width
		max-width: 100%;
		max-height: 380px;
		width:auto;
		height:auto;
		margin: auto;
	}
	// If grouped, bigger group title
	&.evo_withgroup > ul > li {
		font-size: 17px;
	}

	div.item_first_image {
		text-align: center;
	}
}

// Only when in Sidebar or Sidebar 2
div.evo_container__sidebar,
div.evo_container__sidebar_2 {
	div.widget_uil_autotemp {
		// If special placement, without teaser, without excerpt
		&.evo_1pic__special.evo_noexcerpt.evo_noteaser {
			div.item_title a {
				font-size: 16px;
			}
		}
	}
}

// No bullets modifier for Advertisement widget
div.widget_uil_autotemp.nobullets ul,
div.widget_uil_autotemp.nobullets ul li,
li.widget_uil_autotemp.nobullets ul,
li.widget_uil_autotemp.nobullets ul li {
	background: none;
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}
div.widget_uil_autotemp.nobullets ul li:before,
ul li.widget_uil_autotemp.nobullets ul li:before {
	content: none;
}


// Responsive layout of the post title when no teaser, no excerpt and special placement
@media (max-width: 1599px) {
	div.widget_uil_autotemp {
		&.evo_1pic__special.evo_noexcerpt.evo_noteaser div.item_title a {
			font-size: 20px;
		}
	}
}
@media (max-width: 1199px) {
	div.widget_uil_autotemp {
		&.evo_1pic__special.evo_noexcerpt.evo_noteaser div.item_title a {
			font-size: 18px;
		}
	}
}
// Here placeholder's max-width is set to 290px (plus bootstraps 15px paddings each side = 320px, which is min size we want to target), 
// because we want to prevent placeholders from exceeding the parent div
@media (max-width: 414px) {
	div.widget_uil_autotemp {
		&.evo_1pic__special ul li .item_first_image_placeholder {
			max-width: 290px;
			max-height: 290px;
		}
	}
}