/* START: PORTFOLIO HERO (In action) — Sessione Portfolio Step 1 */




/* ===========================================================
   Portfolio Hero (In action) — Sessione Portfolio Step 1
   Fascione full-bleed a fine pagina prodotto, filtrato per prodotto/range.
   =========================================================== */

.portfolio-hero{
  padding: 0;
  /* Surface tier 1 (sess.25 task #3 step7) — coerenza con specs/dmx/downloads */
  background: var(--ds-surface-1-bg);
  border: 1px solid var(--ds-surface-1-border);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow:
    inset 3px 0 0 rgba(244,181,50,.48),
    var(--ds-surface-1-shadow);
  border-radius: 22px;
  color: var(--ds-c-text);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Barra accent: ph-title::before (32px centrata, identica a pm-h3::before)
   La barra container full-height (top:0→bottom:0) è stata rimossa perché produceva
   un gradiente molto giallo/lime in fondo, diverso dagli altri widget.
   La barra 32px centrata sul titolo è coerente con Fotometrie / Specs / DMX. */

.portfolio-hero .ph-wrap{
  /* NON centrare: deve rimanere full-width flush-left come specs/accessories.
     Il centering via max-width + margin:auto spostava il titolo a destra a viewport >1240px.
     Usa --card-pad per allineamento top uniforme agli altri widget. */
  padding: var(--card-pad, 16px) 20px 28px;
}

.portfolio-hero .ph-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.portfolio-hero .ph-sub{
  margin-top: 6px;
  padding-left: 14px; /* allinea al testo del titolo, non alla barra gialla */
  color: rgba(0,0,0,.64);
  font-family: "Oswald", system-ui, sans-serif;
  font-weight: 400;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  max-width: 72ch;
}

/* CTA standard brand: background giallo segnale + testo nero, coerente con
   tutte le CTA del sito (es. "CONFIGURA F7 VW" nella right rail). */
.portfolio-hero .ph-cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #C9A800;
  background: #F4B532;
  color: rgba(0,0,0,.88);
  text-decoration: none;
  white-space: nowrap;
  font-family: "Oswald", system-ui, sans-serif;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(201,168,0,.28), inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
@media (hover: hover){
  .portfolio-hero .ph-cta:hover{
    transform: translateY(-1px);
    background: #ffe032;
    box-shadow: 0 8px 18px rgba(201,168,0,.40), inset 0 1px 0 rgba(255,255,255,.70);
  }
}

.portfolio-hero .ph-strip{
  display: grid;
  grid-auto-flow: column;
  /* JS imposta --ph-col-px per mostrare solo schede intere (nessuna parziale).
     Fallback: larghezza minima card (JS interviene sempre dopo il primo paint). */
  grid-auto-columns: var(--ph-col-px, clamp(260px, 28vw, 360px));
  gap: 18px;

  overflow-x: auto;
  padding: 10px 16px 12px;
  scroll-snap-type: x mandatory;
  scroll-padding: 16px;
  -webkit-overflow-scrolling: touch;
}
/* Quando tutte le card stanno senza overflow → centra la riga.
   JS in portfolio-hero.js (syncButtons) toggla .ph-centered se scrollWidth ≈ clientWidth.
   Senza questa regola il grid-auto-flow:column accumula le card a sinistra. */
.portfolio-hero .ph-strip.ph-centered{
  justify-content: center;
}

/* hide scrollbar (we will use arrows) */
.ph-strip {
  -ms-overflow-style: none;  /* IE/Edge legacy */
  scrollbar-width: none;     /* Firefox */
}
.ph-strip::-webkit-scrollbar {
  display: none;             /* Chrome/Safari */
}

.portfolio-hero .ph-item{
  scroll-snap-align: start;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.82);
  box-shadow: 0 6px 20px rgba(0,0,0,.10), inset 0 1px rgba(255,255,255,.90);
  text-decoration: none;
  color: rgba(0,0,0,.88);
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  min-height: 220px;
}

/* Badge nascosta su richiesta utente */
.portfolio-hero .ph-media .ph-badge{
  display: none;
}

/* ph-media deve avere position:relative per contenere eventuali badge/overlay assoluti */
.portfolio-hero .ph-media{
  position: relative;
}

.portfolio-hero .ph-meta{
  padding: 14px 14px 16px;
  display: grid;
  gap: 6px;
}
.portfolio-hero .ph-name{
  font-family: var(--ds-font-heading, var(--ds-font-sans, system-ui));
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: .98rem;
  line-height: 1.1;
  color: rgba(0,0,0,.88);
}
.portfolio-hero .ph-line{
  color: rgba(0,0,0,.48);
  font-size: .85rem;
}

.portfolio-hero[hidden]{ display:none !important; }

/* sess.33 Step 3 — breakpoint canonico 640→1099.98 + body.ds-vp-app */
@media (max-width: 1399.98px){
  body.ds-vp-app .portfolio-hero .ph-head{ flex-direction: column; align-items: flex-start; }
  body.ds-vp-app .portfolio-hero .ph-strip{ grid-auto-columns: minmax(220px, 80vw); }
}
/* END: PORTFOLIO HERO (In action) — Sessione Portfolio Step 1 */

/* evita che il titolo cambi l’altezza delle card */
.portfolio-hero .ph-name{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- FIX: Portfolio hero preview uniformi (frame fisso + cover crop) --- */
.portfolio-hero .ph-media{
  /* frame fisso: cambia solo questi valori se vuoi più alto/basso */
  height: clamp(170px, 18vw, 240px);
  aspect-ratio: auto;      /* disattiva “altezza da rapporto” */
  border-radius: 14px;
  overflow: hidden;        /* fondamentale per il crop */
}

.portfolio-hero .ph-media > img,
.portfolio-hero .ph-media > video{
  width: 100%;
  height: 100%;
  object-fit: cover;       /* zoom + ritaglio */
  object-position: center;
  display: block;
}





/* (full-bleed rimosso — il widget ora si comporta come gli altri container) */

/* ph-strip-outer: ancora di posizionamento per le frecce nav */
.ph-strip-outer{
  position: relative;
  /* overflow: visible (default) — le frecce possono sbucare nei margini del ph-wrap */
  /* transform: translateZ(0) → promuove ph-strip-outer al proprio layer compositor.
     La mask-image sul ph-strip interno non si propaga verso widget vicini (Accessories),
     eliminando la riga overlay visibile quando .ph-item fa hover. */
  transform: translateZ(0);
}

/* Fade laterale rimossa: JS mostra sempre N schede complete (nessuna parziale),
   quindi la mask non serve più e non può interferire con la barra accent. */

/* NAV overlay: centrata sull'area strip */
.ph-nav{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  pointer-events: none;
  padding-inline: 0; /* frecce ai bordi assoluti dello strip-outer */
}

/* Desktop: frecce dentro al carousel, distanziate dal bordo accent (3px sx/dx).
   margin positivo le sposta verso il centro: 16px = clearance comoda dal bordo.
   sess.33 Step 3 — breakpoint canonico 641→1100. */
@media (min-width: 1100px){
  .ph-prev{ margin-left: 16px; }
  .ph-next{ margin-right: 16px; }
}

/* Mobile: restano dentro con piccolo rientro — sess.33 Step 3 breakpoint canonico */
@media (max-width: 1399.98px){
  body.ds-vp-app .ph-nav{ padding-inline: max(6px, env(safe-area-inset-left)); }
}

/* Frecce nav — stile brand amber 3D identico a kf-rail-btn e kf-g-prev/next */
.ph-nav-btn{
  pointer-events: auto;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: #F4B532;
  /* Sess.25 flat-ten: niente 3D drop. Microelevation + glow on hover. */
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  color: #1a1a1a;
  /* hover-reveal: compaiono al passaggio sul carousel */
  opacity: 0;
  transition:
    opacity .22s ease,
    background 180ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1)),
    box-shadow 200ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1)),
    transform  120ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1));
}

/* Mostrale sull'hover del carousel (o col focus da tastiera) — desktop only */
@media (hover: hover){
  .ph-strip-outer:hover .ph-nav-btn,
  .ph-nav-btn:focus-visible{
    opacity: 1;
  }
}

/* Su touch/mobile: sempre visibili */
@media (hover: none){
  .ph-nav-btn{ opacity: 1; }
}
@media (hover: hover){
  .ph-nav-btn:hover{
    background: #E8C000;
    box-shadow:
      0 0 0 1px rgba(201,168,0,.45),
      0 5px 18px rgba(255,209,0,.40);
    transform: translateY(-1px);
  }
}
.ph-nav-btn:active{
  transform: translateY(0) scale(0.95);
  box-shadow: 0 1px 4px rgba(0,0,0,.14);
}
.ph-nav-btn:disabled{
  opacity: .30;  /* visibile solo durante l'hover sul carousel */
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.10);
}
/* Quando il mouse esce dal carousel, le frecce (anche se :disabled) scompaiono.
   Evita che la freccia agli estremi resti visibile a opacità ridotta dopo il click. */
@media (hover: hover){
  .ph-strip-outer:not(:hover) .ph-nav-btn:disabled{
    opacity: 0;
  }
}
.ph-nav-btn svg{
  width: 18px; height: 18px;
  display: block;
  stroke: #1a1a1a;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* sess.33 Step 3 — rimosso override .ph-nav-btn 32×32 (no-op contro
   _mobile-touch.css universale body.ds-vp-app .ph-nav-btn min-width:44 + min-height:44).
   Lascio solo svg 16×16 per leggibilità icona dentro pulsante 44×44. */
@media (max-width: 1399.98px){
  body.ds-vp-app .ph-nav-btn svg{ width: 18px; height: 18px; }
}

/* ── DARK MODE ──────────────────────────────────────────────────────────── */
/* Sess.25 task #3 step7: bg + backdrop-filter rimossi (surface-1 tokens
   auto-reattivi). Resta override accent (alpha .32 in dark) + color. */
body.ds-dark .portfolio-hero{
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow:
    inset 3px 0 0 rgba(244,181,50,.32),
    var(--ds-surface-1-shadow);
  color: rgba(255,255,255,.92);
}
body.ds-dark .portfolio-hero .ph-title{
  color: rgba(255,255,255,.92);
}
body.ds-dark .portfolio-hero .ph-sub{
  color: rgba(255,255,255,.58);
}
/* Dark mode: la CTA brand resta gialla + nera per coerenza con tutte le CTA del sito */
body.ds-dark .portfolio-hero .ph-cta{
  border-color: #C9A800;
  background: #F4B532;
  color: rgba(0,0,0,.88);
  box-shadow: 0 4px 12px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.45);
}
@media (hover: hover){
  body.ds-dark .portfolio-hero .ph-cta:hover{
    background: #ffe032;
    box-shadow: 0 8px 18px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.55);
  }
}
body.ds-dark .portfolio-hero .ph-item{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.88);
}
@media (hover: hover){
  body.ds-dark .portfolio-hero .ph-item:hover{
    background: rgba(255,255,255,.10);
    border-color: rgba(255,209,0,.55);
  }
}
body.ds-dark .portfolio-hero .ph-name{
  color: rgba(255,255,255,.90);
}
body.ds-dark .portfolio-hero .ph-line{
  color: rgba(255,255,255,.45);
}

/* ════════════════════════════════════════════════════════
   PORTFOLIO HERO — AESTHETIC V2
   Allineato al design system: Oswald, #FFD100, frosted glass
   ════════════════════════════════════════════════════════ */

/* ── Title: Oswald uppercase + accent bar ───────────────── */
.portfolio-hero .ph-title{
  /* Proprietà separate per sicurezza di parsing + allineamento al token standard widget.
     Font-size: clamp(.88rem, 1vw+.5rem, 1.05rem) = identico a specs-title / dl-title / pm-h3. */
  font-family: "Oswald", var(--ds-font-heading, system-ui), sans-serif;
  font-weight: 600;
  font-size: clamp(.88rem, 1vw + .5rem, 1.05rem);
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(0,0,0,.88);
  padding-left: 14px;
  position: relative;
}
.portfolio-hero .ph-title::before{
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  height: 32px; /* uguale a specs-title / dl-title / pm-h3 */
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #F4B532, #F3E955);
}

/* ── Card hover: lift + amber glow ─────────────────────── */
.portfolio-hero .ph-item{
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor: pointer;
}
@media (hover: hover){
  .portfolio-hero .ph-item:hover{
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 16px 36px rgba(0,0,0,.18), 0 0 0 1.5px rgba(255,209,0,.55);
    border-color: rgba(255,209,0,.65);
  }
  .portfolio-hero .ph-item:hover .ph-name{
    color: #F4B532;
    transition: color .2s ease;
  }
}

/* ── ph-name transition base ────────────────────────────── */
.portfolio-hero .ph-name{
  transition: color .2s ease;
}

/* ── ph-sub: (defined above in light-mode context) ──── */

/* ════════════════════════════════════════════════════════
   PROJECT PREVIEW MODAL (.ph-modal)
   ════════════════════════════════════════════════════════ */

.ph-modal{
  position: fixed;
  inset: 0;
  z-index: 8900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 24px);
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s ease, visibility 0s .24s;
}
.ph-modal.is-open{
  opacity: 1;
  visibility: visible;
  transition: opacity .24s ease;
}

.ph-modal-dialog{
  position: relative;
  width: 100%;
  max-width: 900px;
  max-height: min(90vh, 620px);
  background: #111214;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 42% 58%;
  box-shadow: 0 48px 96px rgba(0,0,0,.70), 0 0 0 1px rgba(255,255,255,.05);
}

/* Close button */
.ph-modal-close{
  position: absolute;
  top: 14px; right: 14px;
  z-index: 10;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.88);
  font-size: 1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
  line-height: 1;
}
@media (hover: hover){
  .ph-modal-close:hover{
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.45);
    transform: scale(1.08);
  }
}

/* Cover panel */
.ph-modal-cover-wrap{
  position: relative;
  overflow: hidden;
}
.ph-modal-cover-wrap::after{
  /* ambient light spill from the right edge */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 60%, rgba(17,18,20,.90));
  pointer-events: none;
}
.ph-modal-cover{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Body panel */
.ph-modal-body{
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  color: rgba(255,255,255,.90);
  /* subtle inner scroll */
  max-height: min(90vh, 620px);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}

/* Kicker */
.ph-modal-kicker{
  font: 600 .70rem/1 "Oswald", system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #F4B532;
}

/* Title */
.ph-modal-title{
  margin: 0;
  font: 600 clamp(1.1rem, 1.5vw + .8rem, 1.6rem)/1.05 "Oswald", system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}

/* Subhead / type */
.ph-modal-type{
  font-size: .80rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
}

/* Excerpt */
.ph-modal-excerpt{
  margin: 0;
  font-size: .88rem;
  color: rgba(255,255,255,.72);
  line-height: 1.6;
}

/* Highlights */
.ph-modal-highlights{
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 4px;
}
.ph-modal-highlights li{
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .84rem;
  color: rgba(255,255,255,.75);
  line-height: 1.45;
}
.ph-modal-highlights li::before{
  content: '';
  flex-shrink: 0;
  width: 5px; height: 5px;
  margin-top: .42em;
  border-radius: 50%;
  background: #F4B532;
}

/* Meta line (location · year) */
.ph-modal-meta{
  font-size: .78rem;
  color: rgba(255,255,255,.40);
  letter-spacing: .04em;
  padding-top: 2px;
}

/* Footer + CTA */
.ph-modal-footer{
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ph-modal-cta{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: 999px;
  background: #F4B532;
  color: rgba(0,0,0,.88);
  font: 600 .76rem/1 "Oswald", system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
  box-shadow: 0 6px 20px rgba(255,209,0,.25);
}
@media (hover: hover){
  .ph-modal-cta:hover{
    background: #ffe032;
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(255,209,0,.35);
  }
}

/* Mobile: stack vertically — sess.33 Step 3 breakpoint canonico 640→1099.98 */
@media (max-width: 1399.98px){
  body.ds-vp-app .ph-modal-dialog{
    grid-template-columns: 1fr;
    grid-template-rows: 220px 1fr;
    max-height: 88vh;
  }
  body.ds-vp-app .ph-modal-body{
    max-height: none;
  }
}

/* ── Scrollbar inside modal body ────────────────────────── */
.ph-modal-body::-webkit-scrollbar{ width: 4px; }
.ph-modal-body::-webkit-scrollbar-track{ background: transparent; }
.ph-modal-body::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.20); border-radius: 2px; }