/* Page-specific styles for projects.html */
.page-hero { position: relative; height: 70vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.page-hero__content { position: relative; z-index: 1; text-align: center; color: var(--color-white); padding-inline: var(--space-6); }
.page-hero__title { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); margin-block-end: var(--space-6); }
.page-hero__subtitle { font-size: var(--font-size-xl); max-width: 48rem; margin-inline: auto; line-height: 1.8; color: rgba(255,255,255,0.90); }

.filter-bar { background: var(--color-white); box-shadow: 0 1px 3px rgba(0,0,0,0.1); position: sticky; inset-block-start: 0; z-index: 40; }
.filter-bar__inner { padding-block: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.filter-bar__btn { padding: 0.625rem 1.5rem; border-radius: var(--radius-lg); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); cursor: pointer; white-space: nowrap; border: none; transition: all var(--transition-base); background-color: var(--color-gray-100); color: var(--color-gray-700); }
.filter-bar__btn:hover { background-color: var(--color-gray-200); }
.filter-bar__btn.is-active { background-color: var(--color-accent); color: var(--color-white); }

.projects-page { padding-block: var(--space-20); }
.projects-page__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 768px) { .projects-page__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .projects-page__grid { grid-template-columns: repeat(3, 1fr); } }

.proj-card { background: var(--color-white); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); cursor: pointer; transition: box-shadow var(--transition-base); }
.proj-card:hover { box-shadow: var(--shadow-xl); }
.proj-card__img-wrap { position: relative; height: 18rem; overflow: hidden; }
.proj-card__img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform var(--transition-slow); }
.proj-card:hover .proj-card__img { transform: scale(1.1); }
.proj-card__location { position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; background-color: var(--color-accent); color: var(--color-white); padding: 0.375rem 1rem; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); white-space: nowrap; }
.proj-card__status { position: absolute; inset-block-end: 1rem; inset-inline-start: 1rem; background-color: rgba(255,255,255,0.95); color: var(--color-dark); padding: 0.375rem 1rem; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); white-space: nowrap; }
.proj-card__body { padding: var(--space-6); }
.proj-card__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-primary); margin-block-end: var(--space-3); transition: color var(--transition-fast); }
.proj-card:hover .proj-card__title { color: var(--color-accent); }
.proj-card__desc { font-size: var(--font-size-base); color: var(--color-gray-600); margin-block-end: var(--space-4); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.proj-card__footer { display: flex; align-items: center; justify-content: space-between; }
.proj-card__type { font-size: var(--font-size-base); color: var(--color-gray-500); }
.proj-card__more { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-accent); font-weight: var(--font-weight-medium); font-size: var(--font-size-base); white-space: nowrap; }
.proj-card__more i { width: 1rem; height: 1rem; display: flex; align-items: center; justify-content: center; }