// Styles for "evo Tiles" module
// This module is designed to be used in many templates and any widgets 

// Default values
// Modifier: Size SM:
@tile_height__sm: 272px;
@tile_image_height__sm: 150px;
// Modifier:ize MD: (Default)
@tile_height__md: 342px;
@tile_image_height__md: 200px;
// Modifier:Size LG:
@tile_height__lg: 402px;
@tile_image_height__lg: 240px;
// Modifier: grey Bbackground:
@tile_bg_level: 250; // 0-255 ()
// Placeholder images:
@img_placeholder_bg_color: #f0f0f0; // Background color of the Placeholder
@img_placeholder_icon_color: #dcdcdc; // Color of the icon inside the Placeholder element

// ------------------------------------------

// TILE: (can be embedded in a bootstrap col-*-*)
.evo_tile {
	margin: 15px 0;
	padding-bottom: 10px;
	height: @tile_height__md;	// Tile height but also Note: We need some defined height for the embeded elements to correctly position
	border-radius: 10px;
	overflow: hidden;
	position: relative;  	// This Allows absolute positionning of children relative to this div
	> div.hide_overflow {	// hide overflow, within desired padding
		height: 100%;			// This is the only place where we can use height 100% to avoid overflow at the bottom
		overflow: hidden;
		position: relative;  // This Allows absolute positionning of children relative to this div
									// BUT this also positions realtive in the parent, so we need an individual wrapper around each
	}
	> a { // This is for making a link that overlaps the whole tile, making everything clickable:
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
	}
}
// Modifiers:
.evo_tile__sm
{
	height: @tile_height__sm;	// Height of tile
	.evo_tile_image .evo_image_block {
		height: @tile_image_height__sm;	// Height of image

	}	
}
.evo_tile__lg
{
	height: @tile_height__lg;	// Height of tile
	.evo_tile_image .evo_image_block {
		height: @tile_image_height__lg;	// Height of image

	}	
}
.evo_tile__grey_bg {
	background-color: rgba(@tile_bg_level,@tile_bg_level,@tile_bg_level,255);
	.evo_tile_text__gradient::after { 
		// Override the "faedout gradient" (see further below) using correct color:
		background: linear-gradient(rgba(@tile_bg_level,@tile_bg_level,@tile_bg_level,0), rgba(@tile_bg_level,@tile_bg_level,@tile_bg_level,255));
	}
}
.evo_tile__square {
	border-radius: 0;
	.evo_tile_image__margin {  // IF combined with modifier for image margins... (see below)
		.evo_image_block { 
			border-radius: 0; // images must also be squared
		}
	}
}
.evo_tile__shadow {
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.evo_tile__hoverglow:hover {
	box-shadow: 0px 0px 10px rgba(51, 122, 183, 0.8);
	transition: box-shadow .3s ease;
}

// ------------------------------------------

// Tile > COVER (used with background image):
.evo_tile_cover { 
	height: @tile_image_height__md;
	background-color: @img_placeholder_bg_color;
	background-size: cover;
	background-position: center;
	color: #FFF;
	text-shadow: 0px 0px 2px #000;
	overflow: hidden;
}

// ------------------------------------------

// Tile > IMAGE:
.evo_tile_image { // .evo_tile_image contains <img> tag inside and we do NOT need 10px padding around <img> tag
	position: relative;  // Used for placing overlay on top of image
	.evo_image_block { // this is generated by Teaser images
		height: @tile_image_height__md;	// Height of image
		margin: 0;
		background-color: @img_placeholder_bg_color; // Has a darker background, needed for placeholders
		a { // clickable area (including the image)
			display: block;
			width: 100%;
			height: 100%;
		}
		img { // not necessarily inside <a>, there may be no link
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		&.evo_img_placeholder {
			width: 100%;
			display: table;
			> a {
				display: table-cell;
				text-align: center; 
				vertical-align: middle;
				font-size: 100px;   // Warning: if too big, placeholder will grow heigher than desired
				color:@img_placeholder_icon_color;				 
			}
		}
	}
}
// Modifiers:
.evo_tile_image__margin {
	padding: 10px 10px 0;
	.evo_image_block { 
		border-radius: 4px; // adapt to tile radius & margin
	}
	.evo_tile_overlay { // override overlay position to account for image padding:
		right: 18px;
		top: 15px;
	}
}

// ------------------------------------------

// Tile > OVERLAY (put text over image; "could" be used in other places too)
.evo_tile_overlay {
	position: absolute;
	right: 8px;
	top: 5px;
	color: #FFF;
	text-shadow: 0px 0px 2px #000;
}

// ------------------------------------------

// Tile > BODY: (contains title, text, button)
.evo_tile_body {
	padding: 10px; // always pas to avoid text touching image and borders
	h2, h3 {
		margin-top: 0;
		font-size: 20px;
	}
}

// ------------------------------------------

// Tile > TEXT
// Modifiers:
.evo_tile_text__gradient::after { // Make a fadeout gradient on the text
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    height:60px;
    width:100%;
    background: linear-gradient(rgba(255,255,255,0), #fff); // This is for white bg
}

// Tile > MORE link / button:
.evo_tile_more {
	position: absolute;  // position "absolute" IN first "relative" parent
	right: 10px;
	bottom: 0;
	margin: 0 !important; // we need to override a rule like .evo_widget .btn
}

// ------------------------------------------
