/* Project status (2026-11-03): subsidiary page groups, badges on cards and filters. Prefix ps-. */
:root {
    --ps-operating: #1f7a4d;
    --ps-under_construction: #c2410c;
    --ps-planned: #1d4ed8;
    --ps-completed: #475569;
}

.ps-dot { display: inline-block; width: .55rem; height: .55rem; flex: none; border-radius: 50%; background: currentColor; }
.ps-badge { position: absolute; left: .75rem; top: .75rem; z-index: 2; padding: .22rem .6rem; border-radius: .25rem; color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .03em; line-height: 1.4; }
.ps-badge--operating { background: var(--ps-operating); }
.ps-badge--under_construction { background: var(--ps-under_construction); }
.ps-badge--planned { background: var(--ps-planned); }
.ps-badge--completed { background: var(--ps-completed); }

.ps-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin-top: .5rem; font-size: .82rem; color: #5f6b76; }
.ps-meta b { color: #15191e; font-weight: 700; }
.ps-prog { display: flex; align-items: center; gap: .5rem; width: 100%; }
.ps-prog-bar { flex: 1; height: 6px; border-radius: 3px; background: #e5e7eb; overflow: hidden; }
.ps-prog-bar span { display: block; height: 100%; border-radius: 3px; background: var(--ps-under_construction); }
.ps-prog-n { font-weight: 700; color: var(--ps-under_construction); font-variant-numeric: tabular-nums; }

/* subsidiary page section */
.ps { padding: 5rem 0; background: #f6f3ee; }
.ps-wrap { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .ps-wrap { padding: 0 2rem; } }
.ps-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(21, 25, 30, .1); }
body.antialiased p.ps-kicker { display: flex; align-items: center; gap: .7rem; margin: 0 0 .6rem; font-size: .8rem; line-height: 1.4; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #e85520; }
.ps-kicker span { padding-right: .7rem; border-right: 2px solid #ff632a; color: #15191e; font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; line-height: 1; }
body.antialiased section h2.ps-h2 { margin: 0; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.25; font-weight: 800; color: #15191e; }

.ps-tabs { display: flex; flex-wrap: wrap; gap: .35rem; padding: .35rem; border-radius: .5rem; background: #15191e; }
.ps-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border: 0; border-radius: .35rem; background: none; color: rgba(255, 255, 255, .75); font-size: .86rem; font-weight: 600; cursor: pointer; }
.ps-tab i { font-style: normal; font-weight: 700; color: rgba(255, 255, 255, .45); }
.ps-tab:hover { color: #fff; }
.ps-tab.is-on { background: #fff; color: #15191e; }
.ps-tab.is-on i { color: #8a939c; }
.ps-tab--operating .ps-dot { color: #4ade80; }
.ps-tab--under_construction .ps-dot { color: #fb923c; }
.ps-tab--planned .ps-dot { color: #60a5fa; }
.ps-tab--completed .ps-dot { color: #cbd5e1; }
.ps-tab.is-on.ps-tab--operating .ps-dot { color: var(--ps-operating); }
.ps-tab.is-on.ps-tab--under_construction .ps-dot { color: var(--ps-under_construction); }
.ps-tab.is-on.ps-tab--planned .ps-dot { color: var(--ps-planned); }
.ps-tab.is-on.ps-tab--completed .ps-dot { color: var(--ps-completed); }

.ps-group + .ps-group { margin-top: 2.75rem; }
body.antialiased section h3.ps-gh { display: flex; align-items: center; gap: .55rem; margin: 0 0 1.1rem; font-size: 1.15rem; line-height: 1.4; font-weight: 800; color: #15191e; }
.ps-gh span { padding: 0 .45rem; border-radius: .25rem; background: rgba(21, 25, 30, .08); font-size: .8rem; color: #5f6b76; }
.ps-gh--operating .ps-dot { color: var(--ps-operating); }
.ps-gh--under_construction .ps-dot { color: var(--ps-under_construction); }
.ps-gh--planned .ps-dot { color: var(--ps-planned); }
.ps-gh--completed .ps-dot { color: var(--ps-completed); }

.ps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 1024px) { .ps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ps-grid { grid-template-columns: minmax(0, 1fr); } .ps { padding: 3.5rem 0; } }

.ps-card { display: flex; flex-direction: column; overflow: hidden; border-radius: .5rem; background: #fff; color: #15191e; text-decoration: none; box-shadow: 0 1px 0 rgba(21, 25, 30, .1), 0 4px 14px rgba(21, 25, 30, .05); transition: transform .3s, box-shadow .3s; }
.ps-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(21, 25, 30, .14); }
.ps-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #e2ddd5; }
.ps-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.ps-card:hover .ps-img img { transform: scale(1.06); }
.ps-body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.15rem 1.15rem; }
.ps-t { font-size: 1rem; line-height: 1.55; font-weight: 800; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ps-card:hover .ps-t { color: #e85520; }
.ps-loc { margin-top: .2rem; font-size: .84rem; color: #6b7280; }

/* status chips on /subsidiary cards and the /portfolio status filter */
.ps-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.ps-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; border-radius: .25rem; font-size: .74rem; font-weight: 700; line-height: 1.5; }
.ps-chip--operating { background: #dcfce7; color: var(--ps-operating); }
.ps-chip--under_construction { background: #ffedd5; color: var(--ps-under_construction); }
.ps-chip--planned { background: #dbeafe; color: var(--ps-planned); }
.ps-chip--completed { background: #f1f5f9; color: var(--ps-completed); }

.ps-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1rem; }
.ps-fbtn { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border: 1px solid rgba(21, 25, 30, .14); border-radius: 999px; background: #fff; color: #374151; font-size: .84rem; font-weight: 600; cursor: pointer; }
.ps-fbtn i { font-style: normal; color: #9ca3af; }
.ps-fbtn.is-on { border-color: #15191e; background: #15191e; color: #fff; }
.ps-fbtn--operating .ps-dot { color: var(--ps-operating); }
.ps-fbtn--under_construction .ps-dot { color: var(--ps-under_construction); }
.ps-fbtn--planned .ps-dot { color: var(--ps-planned); }
.ps-fbtn--completed .ps-dot { color: var(--ps-completed); }
.ps-fbtn.is-on .ps-dot { color: #fff; }
.pf-card .ps-meta { margin-top: .2rem; }