/*
 * 130909 edit Jannis - add tiles grid behavior
 */

/**************************************************************************
 * This is a boilerplate for customizing each display of a responsive
 * layout.  These will only work properly using the theme's default media
 * queries.  If you've made changes to the default settings, replace the
 * media queries found in this file with the ones generated inside of
 * sites/default/files/fusion/[theme-name].responsive.grid.css.
 * 
 **************************************************************************/

/* Desktop display. */
@media only screen and (min-width:1200px) {
}

/* iPad: landscape. */
@media only screen and (max-device-width: 1024px) and (orientation:landscape), only screen and (min-width:960px) and (max-width:1199px) and (min-device-width: 1100px) {
}

/* iPad: portrait. */
@media only screen and (max-device-width: 1024px) and (orientation:portrait), only screen and (min-width:768px) and (max-width:959px) and (min-device-width: 1100px) {
}

/* Mobile display. */
@media only screen and (max-width:759px) {
}


/* Tiles Grid */
@media screen and (max-width: 520px){
	.view-tiles .views-row .info-panel .category{ bottom:5%; }
	.view-tiles .views-row .info-panel{ opacity:1; background:rgba(255,255,255,0.55); }
	.view-tiles .views-row .info-panel h5; .view-tiles .views-row .info-panel .subhead { font-size:1.25rem; }
	.view-tiles .views-row {
		width: 100%;
		padding-top:100%;
	}
}

@media screen and (min-width: 521px) and (max-width: 767px){
	.view-tiles { padding: calc(var(--grid-space) / 4);}
	.view-tiles .views-row {
		width: 50%;
		padding-top:50%;
	}
	.view-tiles .views-row:nth-child(2n + 1) {
		clear: left;
	}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
	.view-tiles { padding: calc(var(--grid-space) / 6);}
	.view-tiles .views-row {
		width: 33%; 
		padding-top: 33%;
	}
	.view-tiles .views-row:nth-child(3n + 1) {
		clear: left;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1365px){
	.view-tiles { padding: calc(var(--grid-space) / 8);}
	.view-tiles .views-row {
		width: 25%;
		padding-top: 25%;
	}
	.view-tiles .views-row:nth-child(4n + 1) {
		clear: left;
	}
}

@media screen and (min-width: 1366px) and (max-width: 1535px) {
	.view-tiles { padding: calc(var(--grid-space) / 10);}
	.view-tiles .views-row {
		width: 20%;
		padding-top: 20%;
	}
	.view-tiles .views-row:nth-child(5n + 1) {
		clear: left;
	}
}

@media screen and (min-width: 1536px) {
	.view-tiles { padding: calc(var(--grid-space) / 12);}
	.view-tiles .views-row {
		width: 16.5%;
		padding-top: 16.5%;
	}
	.view-tiles .views-row:nth-child(6n + 1) {
		clear: left;
	}
}

/* No hover effects and overlays for touch devices */
@media screen and (hover: none) {
	.view-tiles .views-row {
		padding: .95rem !important;
	}
	.info-panel,
	.image-panel {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		height: 100%;
		overflow: visible;
	}
	.image-panel + .info-panel {
		opacity: 1;
	}
	.info-panel .head {
		padding-top: .8rem;
	}
	.info-panel .head h5 {
		margin-top: 0;
		margin-bottom: .25rem;
	}
	.info-panel .subhead {
		padding-top: 0;
	}
	.view-tiles .views-field img {
		position: static;
		height: auto;
		width: 100%;
	}
	.view-tiles .views-row .info-panel,
	.view-tiles .views-row:hover .info-panel {
		background: transparent;
	}
	.view-tiles .views-row:hover img {
		width: 100%;
		height: auto;
		left: 0;
		top: 0;
		opacity: 1;
		transform: none;
	}
	.view-tiles .views-row .info-panel .category {
        bottom: auto;
        top: -3rem;
    }
}