/* Project catalogue: fixed type scale and compact, image-led cards. */
.listing-page .listing-intro,
.listing-page .listing-content {
 width:100%;
 max-width:1600px;
 margin-inline:auto;
 padding-inline:clamp(24px,4vw,56px);
}
.listing-page .listing-intro { padding-top:56px; padding-bottom:32px; }
.listing-page .listing-content { padding-bottom:64px; }
.listing-page .listing-intro h1 { font-size:44px; line-height:1.15; margin:12px 0 28px; }
.listing-page .project-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 24px; }
.portfolio-card {
 display:flex;
 flex-direction:column;
 min-width:0;
 background:#0a1b27;
 border:1px solid #ffffff12;
 border-radius:3px;
 overflow:hidden;
 font-family:'Manrope',Arial,sans-serif;
 transition:border-color .2s;
}
.portfolio-card:hover { border-color:#ffffff2e; }
.portfolio-card .project-cover { display:block; position:relative; aspect-ratio:16/10; overflow:hidden; }
.portfolio-card .project-cover>img,
.portfolio-card .project-cover>.media-slot { width:100%; height:100%; object-fit:cover; }
.portfolio-card .project-cover>img { transition:transform .45s ease; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
 .portfolio-card .project-cover:hover>img { transform:scale(1.025); }
}
.portfolio-availability {
 position:absolute;
 top:16px;
 left:16px;
 display:inline-flex;
 align-items:center;
 min-height:28px;
 padding:4px 10px;
 background:#06131fe6;
 border:1px solid #ffffff2b;
 border-radius:2px;
 color:#f1e7d7;
 font-size:11px;
 font-weight:500;
 line-height:18px;
 letter-spacing:.02em;
}
.portfolio-card>.favorite-button {
 top:14px;
 right:14px;
 width:36px;
 height:36px;
 padding:8px;
 background:#06131fd9;
 color:#fff;
 border:1px solid #ffffff40;
 transition:background .2s,border-color .2s;
}
.portfolio-card>.favorite-button:hover { background:#06131f; border-color:#d9bd8b; }
.portfolio-card>.favorite-button .icon { width:18px; height:18px; }
.portfolio-card>.favorite-button[aria-pressed=true] { background:#d9bd8b; border-color:#d9bd8b; }
.portfolio-card>.favorite-button[aria-pressed=true] .icon { fill:#13202a; stroke:#13202a; }
.portfolio-card>.portfolio-body { display:flex; flex:1; flex-direction:column; padding:20px 22px 10px; }
.portfolio-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; min-height:20px; }
.portfolio-location { display:inline-flex; align-items:center; gap:6px; font-size:12px; line-height:20px; color:#bac3c9; }
.portfolio-location .icon { width:14px; height:14px; color:#c8af83; }
.portfolio-phase { font-size:11px; line-height:20px; color:#a5b2bc; }
.portfolio-card h2 { font:500 24px/1.3 'Manrope',Arial,sans-serif; letter-spacing:-.025em; margin:10px 0 7px; overflow-wrap:anywhere; }
.portfolio-card h2 a { color:#f6f4f0; }
.portfolio-card h2 a:hover { color:#fff; }
.portfolio-card .portfolio-description { font:400 13px/1.65 'Manrope',Arial,sans-serif; color:#acb8c1; margin:0 0 20px; }
.portfolio-card .portfolio-role { font:400 12px/1.6 'Manrope',Arial,sans-serif; color:#acb8c1; margin:0 0 14px; }
.portfolio-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid #ffffff14; margin-top:auto; padding-top:8px; }
.portfolio-detail,.portfolio-compare { display:inline-flex; align-items:center; min-height:42px; padding:0; gap:8px; white-space:nowrap; }
.portfolio-detail { color:#f4f1eb; font:500 13px/20px 'Manrope',Arial,sans-serif; }
.portfolio-detail .icon { width:18px; height:18px; color:#d9bd8b; transition:transform .2s; }
.portfolio-detail:hover .icon { transform:translateX(3px); }
.portfolio-compare { color:#abb7c0; font:400 12px/20px 'Manrope',Arial,sans-serif; }
.portfolio-compare .icon { width:15px; height:15px; }
.portfolio-compare:hover { color:#fff; }
.portfolio-compare[aria-pressed=true] { color:#dfc69d; }
@media(max-width:1100px) {
 .listing-page .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
 .listing-page .listing-intro,.listing-page .listing-content { padding-inline:20px; }
 .listing-page .listing-intro { padding-top:32px; padding-bottom:24px; }
 .listing-page .listing-intro h1 { font-size:34px; }
 .listing-page .project-grid { grid-template-columns:minmax(0,1fr); gap:24px; }
 .portfolio-card>.portfolio-body { padding:18px 18px 8px; }
 .portfolio-card h2 { font-size:23px; }
}