/*
 * Portfolio page styles — reuses design tokens (colors, radii, spacing) from
 * the :root variables defined/rendered via css/styles.css. Loaded as an
 * extra stylesheet on the /portfolio page (see Router/index.php).
 */

/* List of project cards: image carousel + text, alternating sides */
.port-list{display:flex;flex-direction:column;gap:28px;max-width:var(--maxw);margin:0 auto}
.port-card{display:grid;grid-template-columns:1.1fr 1fr;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
.port-card:nth-child(even) .port-carousel{order:2}
.port-card:nth-child(even) .port-info{order:1}

/* Carousel */
.port-carousel{position:relative;aspect-ratio:4/3;background:var(--card2);overflow:hidden}
.port-track{display:flex;direction:ltr;height:100%;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.port-slide{flex:0 0 100%;height:100%}
.port-slide img{width:100%;height:100%;object-fit:cover;display:block}
.port-nav{position:absolute;top:50%;translate:0 -50%;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:rgba(4,8,16,.55);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);transition:border-color .2s,color .2s}
.port-nav:hover{border-color:var(--cyan);color:var(--cyan)}
.port-nav svg{width:18px;height:18px}
.port-nav.prev{left:14px}
.port-nav.next{right:14px}
.port-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:8px}
.port-dots .dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--border);background:rgba(4,8,16,.5);cursor:pointer;padding:0;transition:background .2s,border-color .2s}
.port-dots .dot.active{background:var(--cyan);border-color:var(--cyan)}

/* Text beside the carousel */
.port-info{padding:34px;display:flex;flex-direction:column;justify-content:center}
.port-info .kick{font-size:.78rem;font-weight:500;letter-spacing:1.5px;color:var(--purple);direction:ltr}
.port-info h3{font-size:1.3rem;font-weight:700;margin-top:10px;letter-spacing:-.2px}
.port-info p{font-size:.94rem;color:var(--muted);font-weight:300;line-height:1.8;margin-top:12px}
.port-tags{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap}
.port-tags .tag{font-size:.74rem;color:var(--cyan);border:1px solid var(--border);border-radius:999px;padding:4px 12px;direction:ltr}

/* TABLET / MOBILE: stack carousel above text */
@media(max-width:860px){
  .port-card{grid-template-columns:1fr}
  .port-card:nth-child(even) .port-carousel{order:1}
  .port-card:nth-child(even) .port-info{order:2}
  .port-carousel{aspect-ratio:16/10}
}