/* Table */

	table {
		width: 100%;
	}

		table.default tbody tr {
			border-bottom: solid 1px #f4f4f4;
		}

		table.default td {
			padding: 0.5em 1em 0.5em 1em;
		}

		table.default th {
			text-align: left;
			font-weight: 400;
			padding: 0.5em 1em 0.5em 1em;
		}

		table.default thead {
			border-bottom: solid 2px #f4f4f4;
		}

/* Form */

	form label {
		display: block;
		font-weight: 400;
		color: #363636;
		margin: 0 0 1em 0;
	}

	form input[type="text"],
	form input[type="email"],
	form input[type="password"],
	form select,
	form textarea {
		-webkit-appearance: none;
		border: 0;
		background: #f4f4f4;
		padding: 0.75em;
		width: 100%;
		-moz-transition: background-color .25s ease-in-out;
		-webkit-transition: background-color .25s ease-in-out;
		-ms-transition: background-color .25s ease-in-out;
		transition: background-color .25s ease-in-out;
	}

		form input[type="text"]:focus,
		form input[type="email"]:focus,
		form input[type="password"]:focus,
		form select:focus,
		form textarea:focus {
			background: #f8f8f8;
		}

	form input[type="text"],
	form input[type="email"],
	form input[type="password"],
	form select {
		line-height: 1.35em;
	}

	form ::-webkit-input-placeholder {
		color: #999;
	}

	form :-moz-placeholder {
		color: #999;
	}

	form ::-moz-placeholder {
		color: #999;
	}

	form :-ms-input-placeholder {
		color: #999;
	}

/* Section/Article */

	section, article {
		margin-bottom: 3em;
	}

		section > :last-child, section:last-child, article > :last-child, article:last-child {
			margin-bottom: 0;
		}

	header {
		margin: 0 0 1.5em 0;
	}

		header > p {
			margin: 0.5em 0 0 0;
			color: #aaa;
		}

		@media screen and (max-width: 736px) {

			header {
				margin: 0 0 1em 0;
			}

		}

/* Image */

	.image {
		display: inline-block;
	}

		.image img {
			display: block;
			width: 100%;
		}

		.image.fit {
			display: block;
			width: 100%;
		}

		.image.featured {
			display: block;
			width: 100%;
			margin: 0 0 2em 0;
		}

		.image.left {
			float: left;
			margin: 0 2em 2em 0;
		}

		.image.centered {
			display: block;
			margin: 0 0 2em 0;
		}

			.image.centered img {
				margin: 0 auto;
				width: auto;
			}

/* Button */

	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	button,
	.button {
		-moz-transition: background-color .25s ease-in-out;
		-webkit-transition: background-color .25s ease-in-out;
		-ms-transition: background-color .25s ease-in-out;
		transition: background-color .25s ease-in-out;
		-webkit-appearance: none;
		display: inline-block;
		background-color: #222222;
		color: #ffffff;
		border: 0;
		cursor: pointer;
		outline: 0;
		padding: 0.7em 1.5em 0.7em 1.5em;
	}

		input[type="button"]:hover,
		input[type="submit"]:hover,
		input[type="reset"]:hover,
		button:hover,
		.button:hover {
			background-color: #333333;
		}

		input[type="button"]:active,
		input[type="submit"]:active,
		input[type="reset"]:active,
		button:active,
		.button:active {
			background-color: #444444;
		}

		input[type="button"].alt,
		input[type="submit"].alt,
		input[type="reset"].alt,
		button.alt,
		.button.alt {
			background-color: #777777;
		}

			input[type="button"].alt:hover,
			input[type="submit"].alt:hover,
			input[type="reset"].alt:hover,
			button.alt:hover,
			.button.alt:hover {
				background-color: #888888;
			}

			input[type="button"].alt:active,
			input[type="submit"].alt:active,
			input[type="reset"].alt:active,
			button.alt:active,
			.button.alt:active {
				background-color: #999999;
			}

		input[type="button"].small,
		input[type="submit"].small,
		input[type="reset"].small,
		button.small,
		.button.small {
			font-size: 0.75em;
		}

		input[type="button"].large,
		input[type="submit"].large,
		input[type="reset"].large,
		button.large,
		.button.large {
			font-size: 1.25em;
			padding: 0.5em 1.25em 0.5em 1.25em;
		}

		input[type="button"].xlarge,
		input[type="submit"].xlarge,
		input[type="reset"].xlarge,
		button.xlarge,
		.button.xlarge {
			font-size: 1.5em;
			padding: 0.5em 1.25em 0.5em 1.25em;
		}

		@media screen and (max-width: 736px) {

			input[type="button"],
			input[type="submit"],
			input[type="reset"],
			button,
			.button {
				width: 100%;
			}

		}

/* List */

	ul {
		list-style: disc;
		padding-left: 1em;
	}

		ul li {
			padding-left: 0.5em;
		}

	ol {
		list-style: decimal;
		padding-left: 1.25em;
	}

		ol li {
			padding-left: 0.25em;
		}

/* Actions */

	ul.actions {
		list-style: none;
		padding-left: 0;
	}

		ul.actions li {
			display: inline-block;
			padding-left: 0;
			margin: 0 0 0 0.5em;
		}

			ul.actions li:first-child {
				margin-left: 0;
			}

		@media screen and (max-width: 736px) {

			ul.actions li {
				display: block;
				margin: 0.75em 0 0 0;
			}

				ul.actions li:first-child {
					margin-top: 0;
				}

		}

/* Project card thumbnails */
.project-card .image.fit {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	background: var(--bg-primary, #ffffff);
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5em;
}

.project-card .image.fit img {
	width: 100%;
	height: 100%; /* Changed from auto to 100% to fill container */
	max-height: 100%;
	object-fit: cover; /* Changed from contain to cover for consistent sizing */
	object-position: center;
	transition: transform .3s ease-in-out;
	display: block; /* Remove inline spacing */
}

.project-card .image.fit:hover img {
	transform: scale(1.05);
}

@media screen and (max-width: 980px) {
	.project-card .image.fit {
		height: 220px;
		padding: 0.5em;
	}
}

@media screen and (max-width: 736px) {
	.project-card .image.fit {
		height: 200px !important; /* Fixed height for mobile */
		max-height: 200px !important;
		min-height: 200px !important;
		padding: 0; /* Remove padding that causes auto-adjustment */
		overflow: hidden; /* Prevent content overflow */
	}
	
	.project-card .image.fit img {
		height: 200px !important; /* Fixed height - no auto */
		max-height: 200px !important;
		min-height: 200px !important;
		object-fit: cover !important;
	}
}

/* Project filter styles */
.project-filters {
  text-align: center;
  margin: 2em 0 0.5em 0;
}

.filter-btn {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  padding: 0.5em 1em;
  margin: 0.25em;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--text-primary);
  color: var(--bg-primary);
}

.search-box {
  width: 60%;
  max-width: 300px;
  margin: 0.5em auto;
  padding: 0.5em 0.75em;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
  display: block;
}

.search-box:focus {
  background: var(--bg-primary);
  outline: 2px solid #007acc;
  outline-offset: 2px;
}

/* Project grid symmetry */
.project-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.project-card .image {
  flex-shrink: 0;
  height: 250px;
  overflow: hidden;
  margin-bottom: 0; /* Remove default margin */
}

.project-card .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; /* Remove inline spacing */
}

.project-card h2 {
  flex-shrink: 0;
  margin: 0.5em 0 0.25em 0;
  min-height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;   /* ensure horizontal centering */
  text-align: center;        /* center multiline text */
}

/* Mobile: 2 columns, larger thumbnails, smaller titles */
@media screen and (max-width: 736px) {
  /* Change from 3 columns (col-4) to 2 columns (col-6) */
  #projects-grid .col-4 {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  
  /* Reduce thumbnail size on mobile to reduce spacing - fix height to prevent auto-adjustment */
  .project-card .image {
    height: 200px !important; /* Fixed height - no auto adjustment */
    max-height: 200px !important;
    min-height: 200px !important;
    overflow: hidden !important; /* Ensure content doesn't overflow */
  }
  
  .project-card .image.fit {
    height: 200px !important; /* Fixed height */
    max-height: 200px !important;
    min-height: 200px !important;
    overflow: hidden !important;
  }
  
  /* Ensure image inside doesn't auto-adjust */
  .project-card .image img,
  .project-card .image.fit img {
    height: 200px !important; /* Fixed height - override any auto */
    max-height: 200px !important;
    min-height: 200px !important;
    width: 100% !important;
    object-fit: cover !important; /* Maintain aspect ratio while filling container */
    display: block !important;
  }
  
  /* Reduce title size on mobile - add small margins for spacing */
  .project-card h2 {
    font-size: 1.1em !important;
    min-height: 2em;
    margin-top: 0.4em !important; /* Small margin from thumbnail */
    margin-bottom: 0.3em !important; /* Small margin to badges */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Reduce spacing in project-meta (badges) - add small margins */
  .project-card .project-meta {
    margin-top: 0.2em !important; /* Small margin from title */
    margin-bottom: 0.3em !important; /* Small margin to description */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 1.5em !important;
  }
  
  /* Reduce padding on image container - be aggressive, override main.css padding: 0.5em */
  .project-card .image.fit {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important; /* Override main.css padding: 0.5em */
  }
  
  /* Small margin between image and title */
  .project-card a.image {
    margin-bottom: 0 !important; /* Let h2 margin-top handle spacing */
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    display: block;
  }
  
  /* Remove extra spacing from image wrapper */
  .project-card .image {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Override inline styles that add spacing */
  .project-card .project-meta[style*="margin-bottom"] {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  
  /* Remove line-height spacing that might add gaps */
  .project-card h2 a {
    line-height: 1.2 !important; /* Tight line height */
    display: block;
  }
  
  /* Adjust summary text size with small margin */
  .project-card p {
    font-size: 0.9em;
    margin-top: 0.3em !important; /* Small margin from badges */
    margin-bottom: 0 !important;
  }
}

.project-card p {
  flex-grow: 1;
  margin: 0;
  padding-bottom: 0.5em;
}

/* Modern Dropdown Filter Styles */
.project-filters-modern {
  background: transparent; /* remove grey background */
  padding: 0.75em 0;       /* slimmer padding */
  border-radius: 0;
  margin: 1.5em auto;
  max-width: 900px;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  align-items: center;
  justify-content: center;
}

.filter-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 200px;
  flex: 1;
}

.filter-group label {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.4em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.filter-dropdown {
  width: 100%;
  padding: 0.6em 0.8em;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-secondary);
  border-radius: 6px;
  font-size: 0.95em;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-dropdown:hover {
  border-color: var(--text-secondary);
}

.filter-dropdown:focus {
  background: var(--bg-primary);
  outline: 2px solid #007acc;
  outline-offset: 2px;
  border-color: #007acc;
}

.search-box {
  width: 100%;
  max-width: 450px;
  flex: 2;
  margin: 0;
  padding: 0.45em 0.8em;   /* decreased height */
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-secondary);
  border-radius: 6px;
  font-size: 0.9em;
  text-align: center;       /* center text and caret */
}

.search-box::placeholder { text-align: center; }
.search-box::-webkit-input-placeholder { text-align: center; }
.search-box::-moz-placeholder { text-align: center; }
.search-box:-ms-input-placeholder { text-align: center; }

.reset-btn {
  padding: 0.6em 1.2em;
  background: var(--text-primary);
  color: var(--bg-primary);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 600;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.reset-btn:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}

/* Project Badges */
.project-badge {
  display: inline-block;
  padding: 0.25em 0.6em;
  margin: 0.2em;
  border-radius: 4px;
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-xr {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.badge-domain {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.project-meta {
  min-height: 2em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 0.25em; /* Small top margin */
  margin-bottom: 0.25em; /* Small bottom margin */
}

/* Featured Badge */
.featured-badge {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
  color: #1a1a1a;
  padding: 0.4em 0.8em;
  border-radius: 4px;
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.project-card a.image {
  position: relative;
}

/* Responsive Design */
@media screen and (max-width: 736px) {
  .filter-row {
    flex-direction: column;
    gap: 0.8em;
  }
  
  .filter-group {
    width: 100%;
    min-width: auto;
  }
  
  .search-box {
    max-width: 100%;
  }
  
  .reset-btn {
    width: 100%;
    margin-left: 0 !important;
  }
  
  .project-filters-modern {
    padding: 1em;
  }
  
  #filter-results-count {
    font-size: 0.85em;
    padding: 0 1em;
  }
}

/* Project Badges */
.project-badge {
  display: inline-block;
  padding: 0.25em 0.6em;
  margin: 0.2em;
  border-radius: 4px;
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-xr {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.badge-domain {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.project-meta {
  min-height: 2em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 0.25em; /* Small top margin */
  margin-bottom: 0.25em; /* Small bottom margin */
}

/* Featured Badge */
.featured-badge {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
  color: #1a1a1a;
  padding: 0.4em 0.8em;
  border-radius: 4px;
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.project-card a.image {
  position: relative;
}

/* Responsive Design */
@media screen and (max-width: 736px) {
  .filter-row {
    flex-direction: column;
    gap: 0.8em;
  }
  
  .filter-group {
    width: 100%;
    min-width: auto;
  }
  
  .search-box {
    max-width: 100%;
  }
  
  .reset-btn {
    width: 100%;
    margin-left: 0 !important;
  }
  
  .project-filters-modern {
    padding: 1em;
  }
  
  #filter-results-count {
    font-size: 0.85em;
    padding: 0 1em;
  }
}

/* Project detail enhancements */
.panel .col-8 {
	max-width: 100%;
	width: 100%;
}

.panel section {
	max-width: 1100px;
	margin: 0 auto;
}

.panel section h1 {
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

.panel section h1:first-child {
	margin-top: 0;
}

.panel section h6 {
	margin-bottom: 1.5em;
	line-height: 1.6em;
}

.gallery {
	margin-top: 2em;
	margin-bottom: 1em;
}
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0.75em;
}
.gallery-grid a {
	display: block;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0,0,0,0.12);
	transition: box-shadow .2s ease-in-out;
}
.gallery-grid a:hover {
	box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.gallery-grid img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	transition: transform .2s ease-in-out;
	display: block;
}
.gallery-grid a:hover img { transform: scale(1.03); }

/* Lightbox */
.lightbox-overlay {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.85);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 99999;
}
.lightbox-overlay.active { display: flex; }
.lightbox-content {
	position: relative;
	max-width: 90vw;
	max-height: 85vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lightbox-overlay img {
	max-width: 90vw;
	max-height: 85vh;
	box-shadow: 0 2px 12px rgba(0,0,0,0.5);
	border-radius: 8px;
}
.lightbox-close {
	position: absolute;
	top: 20px; 
	right: 24px;
	color: #fff;
	font-size: 32px;
	cursor: pointer;
	z-index: 100000;
	background: rgba(0,0,0,0.5);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: background .2s ease-in-out;
}
.lightbox-close:hover {
	background: rgba(0,0,0,0.8);
}

/* Lightbox Navigation Arrows */
.lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: #fff;
	font-size: 36px;
	cursor: pointer;
	z-index: 100000;
	background: rgba(0,0,0,0.5);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: background .2s ease-in-out, opacity .2s ease-in-out;
	user-select: none;
}
.lightbox-nav:hover {
	background: rgba(0,0,0,0.8);
}
.lightbox-nav.disabled {
	opacity: 0.3;
	cursor: not-allowed;
}
.lightbox-prev {
	left: 20px;
}
.lightbox-next {
	right: 20px;
}

@media screen and (max-width: 736px) {
	.lightbox-nav {
		width: 44px;
		height: 44px;
		font-size: 28px;
	}
	.lightbox-prev {
		left: 10px;
	}
	.lightbox-next {
		right: 10px;
	}
}