.facility { width:100%; }


/* section hide up if no content */
/*
.facility_description:has(p:empty),
.facility_expertise:has(p:empty){
  display: none;
} */
/* section : projects */
.facility_projects .header{ font-weight: bold; margin-bottom: 10px; }

.css-stack:has(div + div) {
	/* columns: 2 220px; /* mean 2 column min width 300 px */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
	gap: 30px 20px;
}

.css-stack-narrow:has(div) {
	max-width: 560px;
	 columns: 1 220px; /* mean 2 column min width 300 px */
	 gap: 30px 20px;
	 
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
	
}

.css-stack .css-stack-narrow ul { 
	columns: 4 244px; /* mean 4 column min width 244 px */    
}
.css-stack .css-stack-narrow > div { break-inside: avoid; }

.css-stack{
	margin-bottom: 3rem;    
	background-color: var(--sfu-colour-s3);
	padding: clamp( 20px, 20px + 0.03703703704 * (100vw - 900px), 30px );
}

.css-stack-narrow{
	margin-bottom: 3 rem;    
	background-color: var(--sfu-colour-s3);
	padding: clamp( 20px, 20px + 0.03703703704 * (100vw - 900px), 30px );
	margin-bottom: 30px;
}

.css-stack .css-stack-narrow h3 { margin-bottom: 1.5rem; }
.css-stack .css-stack-narrow ul { margin-bottom: 0; }

.contact{
	margin-bottom: 30px;    
	background-color: var(--sfu-colour-s3);
	padding: 20px;
	text-align: center;
	
}


/* Right floating Photo ablum */
.facility-photos { 
	float:right;    max-width:100%;    margin:0 auto 0 3rem; 
	width: clamp(250px, calc(154.425px + 16.593vw), 400px);
}
.facility-photos input[type="radio"] { display:none; }
.main-image { 
	width:100%; aspect-ratio: 4 / 3; 
	outline:1px solid #efefef; margin-bottom: 1rem; 
}
.main-image img{ 
	width:100%; height:100%;  max-height:100%; 
	object-fit: cover; display: none;
}
#p1:checked ~ .main-image #img1,
#p2:checked ~ .main-image #img2,
#p3:checked ~ .main-image #img3,
#p4:checked ~ .main-image #img4,
#p5:checked ~ .main-image #img5,
#p6:checked ~ .main-image #img6,
#p7:checked ~ .main-image #img7,
#p8:checked ~ .main-image #img8,
#p9:checked ~ .main-image #img9,
#p10:checked ~ .main-image #img10,
#p11:checked ~ .main-image #img11,
#p12:checked ~ .main-image #img12{
	display: block;
}

.thumbnails {
	width: 100%; min-height:44px;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
}
.thumbnails > label { 
	margin:0 1rem 1rem 0; padding: 0; 
	width: calc((100% - 30px) / 4); 
}
.thumbnails > label:nth-child(4), 
.thumbnails > label:nth-child(8), 
.thumbnails > label:nth-child(12) { margin-right: 0; }
.thumbnails img  {
	width:100%; height:100%;
	min-width:44px; min-height:44px; 
	aspect-ratio: 4 / 3;  object-fit: cover;
	margin:0;   cursor: pointer;
}
/* When only 1 thumbnails is not make sense to show thumbnails to let it click */
.thumbnails:has(> *:only-child) { display: none; } 

/* Equipment Table */
.table.equipment table { min-width:unset; }
.table.equipment table thead {
	background: #a6192e; color: var(--sfu-colour-p4);
	text-transform: uppercase;
}
.table.equipment table th { 
	font-stretch: 83%;    font-size: 1.5rem;
	border-bottom: none;    padding:10px 15px !important;
}
.table.equipment table td {     
	font-size: 1.6rem;
	padding:10px 15px !important;
	vertical-align: top;
}
.table.equipment table tr:nth-child(even) {
	background-color: var(--sfu-colour-s3);
}
.table.equipment table tr:nth-child(odd):last-child {
	border-bottom: 1px solid var(--sfu-colour-s9);
}
.equipment_header {
	background-color: #fff !important;
	border-bottom: 1px solid #444;
	border-top: 1px solid #444;
}


/* Facility Profile table filter */
.filter-section { display: grid; flex-wrap: wrap; gap: 15px; margin-bottom: 3rem; 
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr) 120px);
	align-items: end;
}
.filter-section label, .filter-section select { /* display: initial; */ }
#typeFilter, #categoryFilter, #search { width: 100%; max-width: unset; }
#container { height: auto; } /* Fix after filter page no able to auto adjust height */
.main__content .filter-section div.button.alt.reset p { margin-bottom: 0;}
.main__content .filter-section div.button.alt.reset a { 
	padding: 0.6rem 4rem; background-color:#000; border-color: #000;
}

/* Facility Profile table - change to list item style */
.table table#profiles { min-width:unset; }
table#profiles, table#profiles tbody, table#profiles tr:not([hidden]) {
  display: block; /* Reset table default displays */
}
table#profiles thead { display: none; }
table#profiles tr:not([hidden]) { display: flex; flex-wrap: wrap; padding: 20px 15px; }
table#profiles td { flex: 1 0 100%; height: unset; box-sizing: border-box;}
table#profiles tr td:nth-child(3) {order: 1;  padding-bottom: 10px;}
table#profiles tr td:nth-child(4) {order: 2; }
table#profiles tr td:nth-child(1) {order: 3; }
table#profiles tr td:nth-child(2) {order: 4; }
table#profiles tr:not(#noResultsRow) td:nth-child(1), table#profiles tr:not(#noResultsRow) td:nth-child(2){
	flex: 1 0 50%; padding-top: 30px; display: none;
}

.alternate table tr:nth-child(even) { background-color: unset; }
.alternate table#profiles tr:nth-child(odd of :not([hidden])) {
	background-color: var(--sfu-colour-s3);
}
.alternate table#profiles th { border-bottom: unset; }
.alternate table#profiles { border-bottom: .1rem solid var(--sfu-colour-s9); }

table#profiles h4 {
	margin-bottom: 1.5rem;
	text-decoration: none;
	text-decoration-thickness: 1px; text-underline-offset: 0.3ch;
	text-transform: unset;
}
table#profiles tr:hover { cursor: pointer; }
table#profiles tr:hover h4 { color: #CC0633; text-decoration: underline;  }

a.backlink { display: block; margin-bottom: 3rem; }
a.backlink:before {
	font-family: var(--sfu-font-icon-1);
	content: "\f104 ";
	display: inline;
}

/* Responsive layout adjustment for mobile */
@media (max-width: 575px) {
	.facility-photos { 
		float: none;
		width: 100%;
		margin:0 auto 3rem;
	}
	
	/* Hide Contact column */
	/* 
	table#profiles tr th:nth-child(4),
	table#profiles tr td:nth-child(4) { display: none; }
	table#profiles tr th:nth-child(3) { width: 70%; }
	*/
}