/*
 * RESULT CARD STYLES
 *
 * Created 2026-09-12 (America/Toronto).
 * Extracted only from the known-working pre-Step-06 main.css.
 * Parent/results wrappers intentionally remain in main.css.
 */

.card-results {
/* Add shadows to create the "card" effect */
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	transition: 0.3s;
	display: inline-block;
	max-width: 290px;
	height: 310px;
	/*margin: 10px;*/
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 10px;
	margin-top: 0;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	color: #688c8c;
	line-height: normal;
}

/*
 * CHANGE 2026-09-12 (America/Toronto): v23 Step 09 mobile portrait card width.
 * Match the known-working test-site behavior on screens 600px and narrower.
 * Desktop/default card dimensions above remain unchanged.
 */
@media (max-width: 600px) {
	.card-results {
		width: auto;
		max-width: none;
		display: block;
		margin-left: 2px;
		margin-right: 2px;
	}
}

/* On mouse-over, add a deeper shadow */
.card-results:hover {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
	color: #69707a;
}



.card-results .image {
	width:290px;
	height:200px;
	border-radius: 8px;
	/*object-fit: cover;*/
	/*background-color: lightgrey;*/
	background-image: url('../images/photo_unavail.jpg');
}

/* Match the known-working test-site mobile portrait image width. */
@media (max-width: 600px) {
	.card-results .image {
		width: auto;
	}
}

/*
 * CHANGE 2026-09-27 16:57 (America/Toronto): v26 Step 12a.
 * Step 11 widened result cards/photos to 320px for desktop, but those widths
 * were placed in the base rules and therefore also affected 601-900px mobile
 * landscape. Restore the prior 290px base width and apply 320px only on
 * desktop (901px and wider). Existing <=600px portrait rules remain unchanged.
 */
@media (min-width: 901px) {
	.card-results {
		max-width: 320px;
	}

	.card-results .image {
		width: 320px;
	}
}

.card-results .image img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	/*max-width: 290px;*/
	width: 100%;
	/*height: 200px;*/
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
	vertical-align: middle !important;
}

/*img {
	background: #3A6F9A;
	vertical-align: bottom !important;
	height: 250px;
	max-width: 300px;
}*/

/* Add some padding inside the card container */
.card-results .container {
	padding: 2px 16px 2px 5px;
	/*width:280px;
	height:230px;
	display:inline-block;
	max-width: 190px;
	min-width:100px;*/
	  /*vertical-align: bottom;*/
	/*text-overflow: ellipsis;
	overflow: hidden;*/
}

.card-results .address {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1; /* number of lines to show */
	/*line-clamp: 1;*/ 
	-webkit-box-orient: vertical;
}

.card-results .remarks {
	overflow: clip;
	display: -webkit-box;
	-webkit-line-clamp: 3; /* number of lines to show */
	/*line-clamp: 3;*/
	-webkit-box-orient: vertical;
	font-size: 11px;
}

.card-results .summary {
/* in template - no changes yet	
}