/* =============================================================
   gallery.css — Twin Oaks Imaginations
   Depends on CSS variables defined in styles.css
   ============================================================= */

/* ---- Filter Tab Bar ---- */

.gallery-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-bottom: 28px;
}

.filter-btn {
	background-color: transparent;
	border: 1px solid var(--tan);
	border-radius: 20px;
	color: var(--text-muted);
	cursor: pointer;
	font-family: 'Trebuchet MS', Tahoma, sans-serif;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	padding: 6px 16px;
	text-transform: uppercase;
	transition:
		background-color 150ms ease,
		color 150ms ease,
		border-color 150ms ease;
}

.filter-btn:hover {
	border-color: var(--gold);
	color: var(--gold);
}

.filter-btn.active {
	background-color: var(--gold);
	border-color: var(--gold);
	color: var(--brown-deep);
}

/* ---- Gallery Grid ---- */

.gallery-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

/* ---- Project Card ---- */

.project-card {
	background-color: var(--brown-card);
	border-radius: var(--radius);
	box-shadow: 0 4px 12px var(--shadow);
	color: var(--text-light);
	display: flex;
	flex-direction: column;
	overflow: hidden; /* keeps image corners clipped to card radius */
	transition:
		transform 200ms ease,
		box-shadow 200ms ease;
}

.project-card:hover {
	box-shadow: 0 8px 24px var(--shadow);
	transform: translateY(-3px);
}

/* ---- Card Hero Image ---- */

.card-media {
	width: 100%;
	height: 220px;
	overflow: hidden;
	background-color: var(--brown-deep);
	position: relative;
	flex-shrink: 0;
}

.card-media img,
.card-media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	cursor: pointer;
	transition:
		transform 300ms ease,
		opacity 300ms ease;
}

.card-media img:hover,
.card-media video:hover {
	opacity: 0.85;
	transform: scale(1.04);
}

/* ---- Thumbnail Strip (additional images) ---- */

.media-strip {
	display: flex;
	gap: 4px;
	padding: 4px;
	background-color: var(--brown-deep);
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--tan) transparent;
}

.media-strip img,
.media-strip video {
	width: 60px;
	height: 50px;
	object-fit: cover;
	border-radius: 4px;
	cursor: pointer;
	flex-shrink: 0;
	opacity: 0.75;
	transition:
		opacity 150ms ease,
		transform 150ms ease;
}

.media-strip img:hover,
.media-strip video:hover {
	opacity: 1;
	transform: scale(1.06);
}

/* "+N more" overflow indicator */
.media-more {
	width: 60px;
	height: 50px;
	background-color: rgba(0, 0, 0, 0.45);
	border-radius: 4px;
	color: var(--text-light);
	font-size: 0.78rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	cursor: default;
}

/* No-media placeholder */
.card-media-placeholder {
	width: 100%;
	height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--brown-deep);
	color: var(--text-muted);
	font-size: 0.85rem;
	font-style: italic;
}

/* ---- Card Body ---- */

.card-body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	flex: 1; /* fills remaining card height so cards align evenly */
	gap: 8px;
}

/* Card header: title + status badge side by side */
.card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.project-card h3 {
	color: var(--gold);
	font-size: 1rem;
	margin: 0;
	text-align: left;
	text-shadow: none;
	line-height: 1.3;
	flex: 1;
}

/* ---- Status Badges ---- */

.badge {
	border-radius: 12px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 3px 10px;
	text-transform: uppercase;
	white-space: nowrap;
	flex-shrink: 0;
	align-self: flex-start;
}

.badge-for-sale {
	background-color: var(--green);
	color: #fff;
}

.badge-portfolio {
	background-color: rgba(196, 164, 114, 0.2);
	border: 1px solid var(--tan);
	color: var(--tan);
}

/* ---- Card Description ---- */

.card-description {
	color: var(--parchment);
	font-size: 0.88rem;
	line-height: 1.5;
	margin: 0;
}

/* ---- Card Meta (date, category) ---- */

.card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 2px;
}

.card-date {
	color: var(--text-muted);
	font-family: monospace;
	font-size: 0.78rem;
}

.card-category {
	background-color: rgba(255, 215, 0, 0.12);
	border: 1px solid rgba(255, 215, 0, 0.3);
	border-radius: 10px;
	color: var(--gold);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	padding: 2px 9px;
	text-transform: uppercase;
}

/* ---- Price ---- */

.card-price {
	color: lightgreen;
	font-size: 1rem;
	font-weight: 700;
	margin-top: auto; /* pushes price to bottom of card body */
}

.card-price-contact {
	color: var(--text-muted);
	font-size: 0.82rem;
	font-style: italic;
	margin-top: auto;
}

/* ---- Tag Pills (materials, methods) ---- */

.card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 4px;
}

.tag-pill {
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 10px;
	color: var(--text-muted);
	font-size: 0.72rem;
	padding: 2px 8px;
}

/* ---- Hidden state (filter hide/show) ---- */

.project-card.hidden {
	display: none;
}

/* ---- Gallery Section wrapper ---- */

.gallery-section {
	background-color: var(--brown-page);
}

.gallery-section .container {
	text-align: center;
}

/* ---- Responsive ---- */

@media screen and (max-width: 768px) {
	.gallery-container {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		gap: 14px;
	}

	.card-media {
		height: 190px;
	}
}

@media screen and (max-width: 480px) {
	.gallery-container {
		grid-template-columns: 1fr;
	}

	.gallery-filter-bar {
		gap: 6px;
	}

	.filter-btn {
		font-size: 0.76rem;
		padding: 5px 12px;
	}
}