.portfolio-hero-section {
position: relative;
width: 100%; padding-top: clamp(140px, 18vh, 180px);
padding-bottom: 4rem;
overflow: hidden;
} .command-bar-wrapper { width: 100%; max-width: 900px; padding: 0 1rem; }
.command-bar { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1.2rem; border-radius: 100px; flex-wrap: nowrap; gap: 1rem; }
.command-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: rgba(0, 180, 216, 0.1); border-radius: 50%; flex-shrink: 0; }
.command-segment-group { display: flex; align-items: center; gap: 1rem; flex-wrap: nowrap; }
.command-label { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; }
.segmented-control { display: flex; background: rgba(0,0,0,0.5); padding: 4px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.05); flex-wrap: nowrap; }
.segment-btn { 
background: transparent; border: none; color: var(--text-muted); font-weight: 600; 
font-size: 0.9rem; padding: 0.6rem 1.2rem; border-radius: 100px; cursor: pointer; 
transition: all 0.3s ease; font-family: inherit; white-space: nowrap !important; flex-shrink: 0;
}
.segment-btn:hover { color: var(--text-main); }
.segment-btn.active { background: linear-gradient(90deg, var(--secondary-cyan), var(--primary-blue)); color: #fff; box-shadow: 0 4px 15px rgba(0, 180, 216, 0.3); }
.command-divider { width: 1px; height: 30px; background: rgba(255,255,255,0.1); margin: 0 0.5rem; flex-shrink: 0; } .portfolio-catalog-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 2.5rem;
width: 100%;
}
.portfolio-card {
display: flex;
flex-direction: column;
padding: 0; overflow: hidden;
transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.portfolio-card:hover {
transform: translateY(-8px);
border-color: rgba(0, 180, 216, 0.4);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 180, 216, 0.1);
}
.card-link-wrapper {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
}
.card-img-wrap {
position: relative;
width: 100%;
height: 240px;
overflow: hidden;
border-bottom: 1px solid var(--glass-border);
}
.p-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.portfolio-card:hover .p-img {
transform: scale(1.08);
}
.p-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
font-weight: 900;
background: #0a0c10;
}
.card-badge-top {
position: absolute;
top: 15px;
left: 15px;
display: flex;
align-items: center;
gap: 6px;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(10px);
padding: 6px 12px;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
border: 1px solid rgba(255,255,255,0.1);
color: #fff;
}
.card-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.card-title {
font-size: 1.4rem;
font-weight: 800;
color: #fff;
margin: 0 0 1rem 0;
line-height: 1.2;
}
.card-meta-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: auto; }
.m-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
font-size: 0.8rem;
color: var(--text-muted);
}
.m-pill svg { width: 14px; height: 14px; }
.border-cyan-light { border-color: rgba(0, 180, 216, 0.3); background: rgba(0, 180, 216, 0.05); }
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
border-top: 1px solid rgba(255,255,255,0.05);
background: rgba(0,0,0,0.2);
}
.read-more {
font-size: 0.9rem;
font-weight: 700;
color: #fff;
transition: color 0.3s;
}
.portfolio-card:hover .read-more { color: var(--secondary-cyan); }
.metric-highlight {
font-size: 0.85rem;
font-weight: 800;
background: rgba(0, 180, 216, 0.1);
padding: 4px 10px;
border-radius: 50px;
} .edge-pagination a, .edge-pagination span {
display: inline-block;
padding: 10px 20px;
margin: 0 5px;
border-radius: 8px;
font-weight: bold;
color: var(--text-main);
text-decoration: none;
transition: all 0.3s;
}
.edge-pagination a:hover { background: rgba(0, 180, 216, 0.1); color: var(--secondary-cyan); }
.edge-pagination .current { background: var(--secondary-cyan); color: #000; } @media (max-width: 1024px) {
.command-bar-wrapper { padding: 0; width: 100%; } .command-bar { 
padding: 1.2rem; 
border-radius: 20px; 
gap: 1rem; 
flex-wrap: wrap; 
justify-content: center; 
}
.command-icon, .command-divider { display: none; }
.portfolio-catalog-grid { 
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
gap: 1.5rem; 
}
}
@media (max-width: 768px) {
.portfolio-hero-section { padding-top: 140px; padding-bottom: 2rem; } .command-bar { 
background: transparent; 
border: none; 
padding: 0; 
margin-bottom: 1rem;
}
.command-label { display: none; } .command-segment-group { 
display: flex !important; 
flex-direction: row !important; 
width: 100%; 
overflow-x: auto !important; 
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin-left: -1.2rem; 
margin-right: -1.2rem;
padding-left: 1.2rem; 
padding-right: 1.2rem;
gap: 8px;
}
.command-segment-group::-webkit-scrollbar { display: none; }
.segmented-control { background: transparent; border: none; padding: 0; gap: 8px; }
.segment-btn { 
background: rgba(255, 255, 255, 0.05); 
border: 1px solid rgba(255, 255, 255, 0.1); 
scroll-snap-align: start; 
} .segment-btn.active { background: var(--secondary-cyan); color: #000; box-shadow: none; } .portfolio-catalog-grid { 
display: flex; 
overflow-x: auto; 
scroll-snap-type: x mandatory; 
-webkit-overflow-scrolling: touch; 
gap: 1.2rem; 
padding-bottom: 2rem;
scrollbar-width: none;
margin-left: -1.2rem;
margin-right: -1.2rem;
padding-left: 1.2rem;
padding-right: 1.2rem;
}
.portfolio-catalog-grid::-webkit-scrollbar { display: none; }
.portfolio-card { 
flex: 0 0 85%; scroll-snap-align: center; 
}
.card-img-wrap { height: 200px; } .card-title { font-size: 1.25rem; }
}
@media (max-width: 480px) { .card-body { padding: 1.2rem; }
.card-footer { padding: 1rem 1.2rem; }
.card-meta-pills { gap: 6px; }
.m-pill { font-size: 0.75rem; padding: 4px 8px; }
.edge-pagination a, .edge-pagination span {
padding: 8px 16px;
margin: 0 3px;
font-size: 0.9rem;
}
}