/* ==========================================================================
   Mesosphere — projects.css
   Projects archive (filter bar, grid, load more, empty state) + single project
   (meta bar, hero, overview, gallery, next project). Loads on project views
   (and events, which share the gallery/next components).
   ========================================================================== */

/* ---- Filter bar ---- */
.meso-projects{padding-block-start:48px}
.meso-pover{padding-block:clamp(56px,7vw,96px)}
.meso-filter{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px;border-radius:999px;background:var(--meso-bg-soft);margin-block-end:48px}
.meso-seg{display:inline-flex;gap:4px;padding:0}
.meso-seg__b{display:inline-flex;align-items:center;block-size:44px;padding-inline:20px;border-radius:999px;font-size:.875rem;font-weight:600;color:var(--meso-body);transition:background-color var(--meso-t-c) var(--meso-ease-s),color var(--meso-t-c) var(--meso-ease-s),box-shadow var(--meso-t-c) var(--meso-ease-s)}
.meso-seg__b:hover{color:var(--meso-ink)}
.meso-seg__b.is-on{background:#fff;color:var(--meso-ink);box-shadow:var(--meso-sh-s)}
.meso-filter__chips{display:flex;gap:8px;flex-wrap:wrap}
.meso-filter__chips .meso-chip b{font-size:.75rem;font-weight:600;color:var(--meso-muted)}
.meso-filter__chips .meso-chip.is-on b{color:var(--meso-accent)}
.meso-filter__count{padding-inline:16px;font-size:.875rem;font-weight:600;color:var(--meso-ink);white-space:nowrap}
.meso-filter.is-hide-chips .meso-filter__chips{visibility:hidden}
@media (max-width:1024px){.meso-filter{border-radius:24px}.meso-filter__count{inline-size:100%;padding-inline:8px}}
@media (max-width:640px){.meso-seg{inline-size:100%;overflow-x:auto}.meso-seg__b{padding-inline:14px;white-space:nowrap}}

/* ---- Grid + loading state ---- */
.meso-projects__stage{position:relative;min-block-size:200px}
.meso-projects__grid{gap:56px 24px;transition:opacity .45s var(--meso-ease-s)}
.meso-projects.is-loading .meso-projects__grid{opacity:.35;pointer-events:none}
.meso-projects__grid:empty{display:none}
.meso-projects__more{display:flex;justify-content:center;margin-block-start:64px}
.meso-projects__more[hidden]{display:none}
.meso-projects.is-loading [data-meso-more]{opacity:.6;pointer-events:none}

/* Project card extras */
.meso-pcard .meso-card__media{aspect-ratio:1/1.05}
.meso-pcard__row{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.meso-pcard__n{font-size:.875rem;font-weight:600;color:var(--meso-ink)}
.meso-card__ph{flex-direction:column;gap:16px;background:var(--meso-bg-soft)}
.meso-card__logo{max-inline-size:56%;max-block-size:40%;object-fit:contain;position:static!important}
.meso-card__soon{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--meso-muted)}
.meso-pcard.is-new{animation:meso-card-in .9s var(--meso-ease) both;animation-delay:var(--meso-delay,0ms)}
@keyframes meso-card-in{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}

/* ---- Empty division ---- */
.meso-pempty{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;padding:clamp(48px,7vw,90px) 24px;border-radius:var(--meso-frame);background:var(--meso-bg-soft)}
.meso-pempty[hidden]{display:none}
.meso-pempty__dome{color:rgba(var(--meso-ink-rgb),.5)}
.meso-pempty .meso-lead{max-inline-size:560px}
.meso-pempty .meso-gold{color:var(--meso-ink);background:linear-gradient(transparent 62%,var(--meso-accent) 62%,var(--meso-accent) 92%,transparent 92%)}

/* ==========================================================================
   Single project
   ========================================================================== */
.meso-pover__in{display:grid;grid-template-columns:5fr 7fr;gap:96px}
.meso-pover__head{display:flex;flex-direction:column;gap:28px}
.meso-pscope{padding:26px 28px;border-radius:var(--meso-radius);background:var(--meso-accent-soft)}
.meso-pscope__l{display:block;margin-block-end:8px;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--meso-muted)}
.meso-pscope p{font-size:1.0625rem;font-weight:600;line-height:1.6;color:var(--meso-ink)}
.meso-pover__body>p:first-child{font-size:1.2rem;line-height:1.7;color:var(--meso-ink)}
@media (max-width:900px){.meso-pover__in{grid-template-columns:1fr;gap:32px}}

/* Gallery */
.meso-pgal__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-block-end:40px}
.meso-pgal__head .meso-eyebrow{margin-block-end:16px}
.meso-pgal__nav{display:flex;align-items:center;gap:12px}
.meso-pgal__count{font-size:.875rem;color:var(--meso-muted)}
.meso-pgal__count b{color:var(--meso-ink)}
.meso-pgal__main{aspect-ratio:16/8.6;border-radius:var(--meso-frame);cursor:grab}
.meso-pgal__slide{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--meso-ease-s)}
.meso-pgal__slide.is-on{opacity:1}
.meso-pgal__slide img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.6s var(--meso-ease)}
.meso-pgal__slide.is-on img{transform:none}
.meso-pgal__thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(120px,1fr);gap:14px;margin-block-start:18px;overflow-x:auto;padding:6px;scrollbar-width:thin}
.meso-pgal__th{position:relative;block-size:96px;border:0;padding:0;border-radius:var(--meso-radius-sm);overflow:hidden;background:var(--meso-bg-soft-2);opacity:.5;cursor:pointer;transition:opacity var(--meso-t-c) var(--meso-ease-s),box-shadow var(--meso-t-c) var(--meso-ease-s)}
.meso-pgal__th img{inline-size:100%;block-size:100%;object-fit:cover}
.meso-pgal__th:hover{opacity:.85}
.meso-pgal__th.is-on{opacity:1;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--meso-ink)}
@media (max-width:640px){.meso-pgal__main{aspect-ratio:1/1}.meso-pgal__th{block-size:72px}}

/* Next project */
.meso-pnext-wrap{padding-block-start:0}
.meso-pnext{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--meso-frame);overflow:hidden;background:var(--meso-bg-soft)}
.meso-pnext__body{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:clamp(32px,5vw,64px)}
.meso-pnext__t{font-size:var(--meso-h4);font-weight:600;line-height:1.2;letter-spacing:-.025em;color:var(--meso-ink)}
.meso-pnext__body .meso-btn{margin-block-start:auto}
.meso-pnext__media{border-radius:0;min-block-size:360px}
.meso-pnext:hover .meso-pnext__media{transform:none}
.meso-pnext:hover .meso-pnext__media>img{transform:scale(1.045)}
@media (max-width:760px){.meso-pnext{grid-template-columns:1fr}.meso-pnext__media{min-block-size:260px;order:-1}}
.meso-pempty__v{display:flex;flex-direction:column;align-items:center;gap:18px}
.meso-pempty__v[hidden],.meso-filter__chips .meso-chip[hidden]{display:none}
.meso-filter__chips .meso-chip{animation:meso-chip-in .45s var(--meso-ease) both}
@keyframes meso-chip-in{from{opacity:0;transform:scale(.94)}}
.meso-filter__count{transition:opacity .3s}
.meso-projects.is-loading .meso-filter__count{opacity:.4}