/* ============================================================
   Portfolio pubblico (portfolio.php) — estensioni su
   services-public.css: ticker dei progetti, filtri, card con
   anteprima live del sito in un mockup "finestra browser".
   ============================================================ */

/* ---------- ticker orizzontale dei domini (sempre "vivo") ---------- */
.port-ticker{
  overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--surface-2);
}
.port-ticker-track{
  display:flex; align-items:center; gap:16px; white-space:nowrap; width:max-content;
  padding:13px 0; animation:port-marquee 30s linear infinite;
}
.port-ticker-track span{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.03em; color:var(--text-mute); }
.port-ticker-dot{ color:var(--accent); font-size:6px; }
@keyframes port-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .port-ticker-track{ animation:none; } }

/* ---------- filtri per settore ---------- */
.port-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:34px; }
.port-pill{
  flex:none; padding:8px 16px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer;
  color:var(--text-dim); background:var(--surface); border:1px solid var(--border-2);
  transition:all .2s ease; font-family:inherit;
}
.port-pill:hover{ color:var(--text); border-color:var(--accent); }
.port-pill.active{ color:#fff; background:var(--accent); border-color:var(--accent); box-shadow:0 4px 16px rgba(255,117,26,.35); }

/* ---------- showcase per progetto: palco con monitor + telefono ---------- */
.port-showcases{ display:flex; flex-direction:column; gap:76px; }

.port-showcase{ display:flex; align-items:center; gap:56px; }
.port-showcase:nth-child(even){ flex-direction:row-reverse; }
.port-showcase.reveal{ transition-duration:.8s; }

.port-showcase-text{ flex:1 1 38%; min-width:0; }
.port-showcase-text .cat-label{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--cat);
}
.port-showcase-text h3{ font-size:clamp(22px,2.6vw,30px); margin:8px 0 12px; color:var(--text); }
.port-showcase-text p{ color:var(--text-dim); font-size:15.5px; line-height:1.65; margin:0 0 22px; max-width:420px; }
.port-showcase-cta{ border-color:var(--cat); color:var(--cat); }
.port-showcase-cta:hover{ background:color-mix(in srgb, var(--cat) 10%, transparent); border-color:var(--cat); }

/* Il "palco": sfondo con luce soffusa nel colore del progetto */
.port-stage{
  position:relative; flex:1 1 55%; min-width:0; min-height:300px;
  display:flex; align-items:flex-end; justify-content:center;
  padding:44px 26px 0;
  border-radius:28px; overflow:visible;
  background:
    radial-gradient(ellipse 120% 90% at 50% 8%, color-mix(in srgb, var(--cat) 16%, transparent), transparent 70%),
    linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); box-shadow:var(--shadow);
}

/* Monitor inclinato con lo screenshot desktop */
.port-monitor{
  position:relative; width:78%; max-width:380px;
  transform:perspective(1000px) rotateX(9deg) rotateY(-11deg);
  transform-style:preserve-3d;
  filter:drop-shadow(0 26px 34px rgba(20,20,40,.24));
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.port-showcase:hover .port-monitor{ transform:perspective(1000px) rotateX(5deg) rotateY(-5deg) translateY(-4px); }
.port-monitor-screen{
  position:relative; aspect-ratio:500/348; overflow:hidden; border-radius:9px;
  background:#0d0f14; border:7px solid #191c22; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.port-monitor-screen img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.port-monitor-stand{
  width:16%; height:22px; margin:0 auto; background:linear-gradient(#20232b,#14161b);
}
.port-monitor-base{
  width:46%; height:8px; margin:0 auto; border-radius:4px;
  background:linear-gradient(#22252d,#15171c);
}

/* Telefono sovrapposto, con lo screenshot mobile */
.port-phone{
  position:absolute; right:6%; bottom:-6%; width:88px;
  transform:perspective(1000px) rotateY(-9deg) rotateX(3deg);
  filter:drop-shadow(0 18px 22px rgba(20,20,40,.3));
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.port-showcase:hover .port-phone{ transform:perspective(1000px) rotateY(-4deg) rotateX(1deg) translateY(-4px); }
.port-phone-notch{
  position:absolute; top:5px; left:50%; transform:translateX(-50%); width:34%; height:7px;
  background:#191c22; border-radius:0 0 8px 8px; z-index:2;
}
.port-phone-screen{
  position:relative; aspect-ratio:250/498; overflow:hidden; border-radius:16px;
  background:#0d0f14; border:5px solid #191c22; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.port-phone-screen img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }

/* Ripiego se manca lo screenshot (es. sito che blocca il crawler): niente immagine
   rotta, solo un'icona e il dominio dentro il palco. */
.port-stage-empty{ justify-content:center; align-items:center; padding-bottom:44px; }
.port-stage-fallback{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.port-stage-fallback-icon{ font-size:40px; opacity:.5; }
.port-stage-fallback-label{ font-family:var(--font-mono); font-size:13px; color:var(--text-mute); }

@media (max-width:860px){
  .port-showcase, .port-showcase:nth-child(even){ flex-direction:column; }
  .port-stage{ width:100%; }
  .port-showcase-text{ text-align:center; }
  .port-showcase-text p{ margin-left:auto; margin-right:auto; }
  .port-phone{ width:72px; right:8%; }
}
@media (max-width:480px){
  .port-monitor{ width:88%; }
}

/* ---------- "resto del portfolio": griglia a effetto mansory ---------- */
.port-masonry{
  column-count:2; column-gap:14px;
}
@media (min-width:640px){ .port-masonry{ column-count:3; } }
@media (min-width:1000px){ .port-masonry{ column-count:4; } }

.port-chip{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  break-inside:avoid; margin:0 0 14px; padding:16px 18px;
  border-radius:12px; background:var(--surface); border:1px solid var(--border);
  border-left:3px solid var(--c); color:var(--text); text-decoration:none;
  font-size:13.5px; font-weight:600; line-height:1.35; word-break:break-word;
  box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.port-chip:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 28px -14px color-mix(in srgb, var(--c) 55%, transparent);
  border-color:color-mix(in srgb, var(--c) 50%, var(--border-2));
}
.port-chip-arrow{ flex:none; color:var(--c); opacity:.7; transition:transform .2s ease; }
.port-chip:hover .port-chip-arrow{ transform:translate(2px,-2px); opacity:1; }

/* qualche mattonella più "alta" per rompere la griglia e renderla viva */
.port-chip:nth-child(5n+2){ padding-top:26px; padding-bottom:26px; }
.port-chip:nth-child(7n+4){ font-size:15px; }