/* ============================ PROJECTS ============================ */

/* Flagship panel */
.pj-flagship {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr);
  padding: clamp(28px, 3.4vw, 56px); padding-inline-end: 40%;
  min-height: clamp(400px, 38vw, 540px);
  background: var(--basalt-2); border-top: 2px solid var(--oxide-light);
}
.pj-flagship__body { position: relative; z-index: 2; display: grid; gap: 16px; align-content: center; }
.pj-flagship__tower { position: absolute; bottom: 0; inset-inline-end: 4%; width: 32%; height: 104%; display: flex; align-items: flex-end; justify-content: center; }
.pj-flagship__tower img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.pj-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--line); }
.pj-facts > div { display: grid; gap: 2px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.pj-facts dt { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: var(--tt-label); font-weight: var(--fw-label); color: var(--muted); }
.pj-facts dd { font-weight: 600; font-size: var(--fs-small); }

/* Filters */
.pj-count { align-self: end; }
.pj-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: clamp(28px, 3vw, 44px); padding-bottom: clamp(18px, 2vw, 26px); border-bottom: 1px solid var(--line); }
.pj-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; min-width: 0; }
.pj-filter > .t-label { min-width: 64px; }
.pj-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 40px; padding: 0 16px;
  border: 1px solid var(--line); color: var(--fg); background: transparent;
  font-size: .9rem; font-weight: 600; white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s;
}
html[lang="en"] .chip { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.chip:hover { border-color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--basalt); color: var(--limewash); border-color: var(--basalt); }

/* Grid */
.pj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(20px, 2vw, 28px); align-items: start; }
.pj-grid .project-card__media { --ratio: 4 / 3; }
.pj-empty { padding-block: 48px; text-align: center; }

/* Drawer internals */
.drawer__hero { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--basalt-3); }
.drawer__hero img { width: 100%; height: 100%; object-fit: cover; }
.drawer__body .eyebrow .illus { margin-inline-start: 10px; }
.drawer__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.drawer__gallery img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--basalt-3); }

@media (max-width: 1100px) {
  .pj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .pj-flagship { padding-inline-end: clamp(28px, 3.4vw, 56px); padding-bottom: 0; min-height: 0; }
  .pj-flagship__tower { position: relative; inset: auto; width: 56%; max-width: 260px; height: auto; margin: 16px auto 0; }
  .pj-flagship__tower img { height: auto; }
}
@media (max-width: 620px) {
  .pj-grid { grid-template-columns: 1fr; }
  .pj-facts { grid-template-columns: 1fr; }
  .pj-filter { align-items: flex-start; flex-direction: column; }
  .pj-chips { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 4px; scrollbar-width: none; }
  .pj-chips::-webkit-scrollbar { display: none; }
  .drawer__gallery { grid-template-columns: 1fr; }
}