/* Portfolio only: reuses the existing Directive theme and home-page cards. */
.portfolio-page .portfolio-intro { margin-bottom: 2em; }
.portfolio-page .portfolio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2em; }
.portfolio-page .portfolio-card, .portfolio-page .metric, .portfolio-page .technology-group {
 background: rgba(255,255,255,0.96); border: 1px solid rgba(0,0,0,0.08); border-radius: 12px;
 padding: 1.2em 1.1em; box-shadow: 0 10px 20px rgba(17,24,39,0.04);
}
.portfolio-page .portfolio-card { transition: transform 0.2s ease, box-shadow 0.2s ease; min-width: 0; }
.portfolio-page .portfolio-card:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(17,24,39,0.08); }
.portfolio-page .portfolio-card h3, .portfolio-page .technology-group h3 {
 margin: 0 0 0.8em; font-size: 1.05em; line-height: 1.5; color: #1f2937; text-transform: none; letter-spacing: 0.03em; text-align: left;
}
.portfolio-page .portfolio-card p, .portfolio-page .portfolio-card li { color: #4b5563; line-height: 1.65; font-size: 0.92em; }
.portfolio-page .portfolio-card p { margin: 0 0 1em; }
.portfolio-page .portfolio-card ul { padding-left: 1.2em; margin-bottom: 1em; }
.portfolio-page .portfolio-featured { grid-column: 1 / -1; border-top: 4px solid #4eb980; }
.portfolio-page .portfolio-featured .case-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2em; }
.portfolio-page .portfolio-label { color: #374151; font-weight: 700; font-size: 0.78em; letter-spacing: 0.08em; text-transform: uppercase; }
.portfolio-page .tech-tags { display: flex; flex-wrap: wrap; gap: 0.38em; margin-bottom: 1em; }
.portfolio-page .tech-tags span { background: #f4f6f8; color: #475569; border: 1px solid #e2e8f0; border-radius: 999px; font-size: 0.68em; padding: 0.28em 0.55em; font-weight: 600; }
.portfolio-page .metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; margin: 0 0 1em; }
.portfolio-page .metric { text-align: center; }
.portfolio-page .metric dt { font-size: 2em; line-height: 1.3; font-weight: 700; color: #1f2937; }
.portfolio-page .metric dd { margin: 0.4em 0 0; color: #4b5563; font-size: 0.85em; }
.portfolio-page .portfolio-section { margin-bottom: 3em; }
.portfolio-page .portfolio-section > h2 { margin-bottom: 1em; }
.portfolio-page details { margin: 1em 0; }
.portfolio-page summary { cursor: pointer; color: #374151; font-weight: 600; font-size: 0.9em; }
.portfolio-page details[open] summary { margin-bottom: 1em; }
.portfolio-page a:focus-visible, .portfolio-page summary:focus-visible { outline: 3px solid #374151; outline-offset: 4px; }
.portfolio-page #header a:focus-visible { outline-color: #fff; }
.portfolio-page .portfolio-cta .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8em; }
.portfolio-page .portfolio-cta .actions li { padding: 0; }
.portfolio-page .portfolio-cta .button { height: auto; white-space: normal; line-height: 1.5; padding-top: 1em; padding-bottom: 1em; }
@media (max-width: 736px) {
 .portfolio-page .portfolio-grid, .portfolio-page .portfolio-featured .case-columns { grid-template-columns: 1fr; }
 .portfolio-page .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .portfolio-page .portfolio-featured .case-columns { gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
 .portfolio-page .portfolio-card { transition: none; }
 .portfolio-page .portfolio-card:hover { transform: none; }
}