.project-page { padding: 150px 20px 80px; background: #f7f7fb; min-height: 70vh; }
.project-page__inner { max-width: 1170px; margin: 0 auto; }
.project-page__header { max-width: 760px; margin-bottom: 45px; }
.project-page__eyebrow { color: #a13dd7; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.project-page__title { color: #222; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.1; margin: 8px 0 15px; }
.project-page__intro { color: #666; font-size: 1.05rem; line-height: 1.7; }
.content-section { margin-top: 50px; }
.content-section__title { font-size: 1.8rem; color: #222; margin-bottom: 22px; }
.content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.content-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(30, 20, 50, .09); }
.content-card__image { width: 100%; height: 220px; object-fit: contain; box-sizing: border-box; padding: 10px; background: #f5f1f8; }
.content-card__placeholder { height: 220px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #a13dd7, #29dec0); font-size: 3rem; font-weight: 700; }
.content-card__body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.content-card__tag { align-self: flex-start; background: #f0e5f7; color: #7d2da9; border-radius: 999px; padding: 5px 11px; font-size: .78rem; font-weight: 700; }
.content-card__title { color: #222; font-size: 1.25rem; margin: 14px 0 8px; }
.content-card__meta { color: #777; font-size: .9rem; margin-bottom: 10px; }
.content-card__text { color: #666; line-height: 1.65; flex: 1; white-space: pre-line; }
.content-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.project-button { display: inline-block; border-radius: 999px; padding: 10px 18px; background: #a13dd7; color: #fff !important; text-decoration: none; font-weight: 600; }
.project-button--secondary { background: #219b88; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }
.filter-bar a { padding: 9px 18px; border-radius: 999px; background: #fff; color: #555; text-decoration: none; box-shadow: 0 3px 12px rgba(0,0,0,.08); }
.filter-bar a.is-active { background: #a13dd7; color: #fff; }
.empty-state { padding: 28px; border: 1px dashed #bbb; border-radius: 14px; color: #777; background: #fff; }
.detail-hero { min-height: 440px; display: grid; place-items: end start; padding: 160px max(20px, calc((100% - 1170px) / 2)) 55px; background: #463253; background-size: cover; background-position: center; color: #fff; position: relative; }
.detail-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,.12)); }
.detail-hero__content { position: relative; max-width: 850px; }
.detail-hero__title { color: #fff; font-size: clamp(2rem, 5vw, 3.5rem); }
.detail-content { max-width: 900px; margin: 45px auto; padding: 0 20px; color: #555; font-size: 1.05rem; line-height: 1.8; }
.detail-gallery { max-width: 1170px; margin: 45px auto 80px; padding: 0 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.detail-gallery img { width: 100%; height: 250px; object-fit: contain; box-sizing: border-box; padding: 8px; background: #f5f1f8; border-radius: 12px; }
@media (max-width: 900px) { .content-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .project-page { padding-top: 120px; } .content-grid, .detail-gallery { grid-template-columns: 1fr; } .content-card__image, .content-card__placeholder { height: 190px; } }