:root{
  --text:#111;
  --muted:#777;
  --line:#1a1a1a;
  --bg:#fff;
  --max: 1180px;
  --pad: 28px;
  --radius: 10px;
}

*{box-sizing:border-box}
.workapp{background:var(--bg); color:var(--text); font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;}
.workapp a{color:inherit; text-decoration:none}
.workapp .wrap{max-width:var(--max); margin:0 auto; padding: 40px var(--pad) 80px;}
.workapp .topRow{display:flex; align-items:flex-end; justify-content:space-between; gap:16px;}
.workapp h1{font-size:96px; line-height:0.95; margin: 10px 0 10px; font-weight:500; letter-spacing:-0.03em;}

.workapp .shareNote{
  margin-top: 12px;
  font-size: 21px;
  letter-spacing: 0.2px;
  color: #32CD32;
  font-weight: 500;
}


.workapp .rule{height:1px; background:var(--line); margin: 8px 0 18px;}
.workapp .subRow{display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 18px 0 10px;}
.workapp .tabs{display:flex; gap:26px; font-size:16px;}
.workapp .tab{padding: 10px 0; color:var(--text); border-bottom:1px solid transparent;}
.workapp .tab.active{border-bottom:1px solid var(--line);}
.workapp .filterBar{display:flex; align-items:center; gap:22px; font-size:14px; color:var(--muted);}
.workapp .filterBar button{
  background:transparent; border:0; padding:8px 0; cursor:pointer; color:inherit; font:inherit;
}
.workapp .filterBar .filterBtn{color:var(--text); font-weight:500;}
.workapp .grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:22px; padding-top:18px;}
.workapp .card{display:block;}
.workapp .thumb{
  width:100%; aspect-ratio: 4 / 2.35;
  border-radius: var(--radius);
  overflow:hidden;
  background:#eee;
}
.workapp .thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.workapp .meta{padding-top:10px;}
.workapp .client{font-size:14px; color:var(--text); font-weight:500; margin:0;}
.workapp .title{font-size:13px; color:var(--muted); margin:4px 0 0;}

.workapp .empty{padding:40px 0; color:var(--muted);}

@media (max-width: 1100px){
  .workapp .grid{grid-template-columns: repeat(3, 1fr);}
}
@media (max-width: 860px){
  .workapp h1{font-size:72px;}
  .workapp .grid{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 520px){
  .workapp .wrap{padding: 28px 16px 64px;}
  .workapp h1{font-size:56px;}
  .workapp .subRow{flex-direction:column; align-items:flex-start;}
  .workapp .grid{grid-template-columns: 1fr;}
}

/* Filter popover */
.workapp .popoverWrap{position:relative;}
.workapp .popover{
  position:absolute; right:0; top: 34px;
  min-width: 220px;
  background:#fff;
  border:1px solid #e2e2e2;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  z-index: 30;
}
.workapp .popRow{display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 8px 0;}
.workapp .popRow label{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text); cursor:pointer;}
.workapp .popRow input{width:16px; height:16px;}
.workapp .popFooter{display:flex; justify-content:flex-end; gap:10px; padding-top: 10px;}
.workapp .chipBtn{
  border:1px solid #e2e2e2; background:#fff; padding:7px 10px;
  border-radius: 999px; cursor:pointer; font-size:12px;
}
.workapp .chipBtn.primary{border-color:#111;}

/* Detail */
.workapp .backRow{display:flex; align-items:center; gap:10px; color:var(--text); font-size:16px; margin-top: 6px;}
.workapp .backRow a{display:flex; align-items:center; gap:10px;}
.workapp .detailHead{
  text-align:center;
  padding: 38px 0 12px;
}
.workapp .detailClient{font-size:34px; font-weight:600; margin:0; letter-spacing:-0.02em;}
.workapp .detailTitle{font-size:24px; font-weight:500; margin:8px 0 0; color:var(--muted); letter-spacing:-0.01em;}

.workapp .mediaWrap{
  max-width: 900px;
  margin: 22px auto 0;
  border-radius: 10px;
  overflow: visible;   /* IMPORTANT: permette alle frecce esterne di vedersi */
  background: transparent;
}

.workapp video{width:100%; height:auto; display:block; background:#000;}
.workapp .sliderWrap{
  position:relative;
  width:100%;
  background: transparent;
}

.workapp .slider{
  position:relative;
  width:100%;
  background:#fff;
  aspect-ratio: 16 / 9;
  overflow:hidden;
  border-radius: 10px;
}


.workapp .slideImg{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:contain;
  opacity:0; transition: opacity 250ms ease;

  /* no selection / no drag / no callout (mobile + desktop) */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

.workapp .slideImg.active{opacity:1;}
.workapp .slider{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.workapp .navBtn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:999px;
  border:1px solid #d0d0d0;
  background: rgba(255,255,255,0.95);
  color:#111;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  user-select:none;
}


/* esterne */
.workapp .navBtn.outside.left{left:-56px}
.workapp .navBtn.outside.right{right:-56px}

.workapp .dots.outside{
  position:relative;
  display:flex; justify-content:center; gap:6px;
  padding: 12px 0 4px;
  background: transparent;
}


.workapp .dot{
  width:7px; height:7px; border-radius:99px;
  background: #cfcfcf;
}
.workapp .dot.active{background:#111;}


.workapp .detailBody{
  max-width: 900px;
  margin: 22px auto 0;
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  padding-top: 10px;
}
.workapp .detailLabel{font-weight:600; font-size:16px; margin:0;}
.workapp .detailText{font-size:14px; color:var(--text); line-height:1.6;}
.workapp .detailText p{margin:0 0 12px}
.workapp .detailText p:last-child{margin-bottom:0}

@media (max-width: 860px){
  .workapp .detailBody{grid-template-columns:1fr; gap:18px;}
  .workapp .detailHead{padding-top: 26px;}
}


@media (max-width: 520px){
  .workapp .navBtn.outside.left{left:12px}
  .workapp .navBtn.outside.right{right:12px}
  .workapp .tabs{flex-direction:column; gap:10px; align-items:flex-start;}
  .workapp .tab{padding:6px 0;}
  .workapp .navBtn.outside{display:none;}


}



/* Video: controlli esterni */
.workapp .videoWrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 16px;
  background:#fff;
}

.workapp .videoWrap video{
  display:block;
  background:#fff;
  width: min(900px, 100%);
  height:auto;
  max-width:100%;

  /* no selection / no drag / no callout (mobile + desktop) */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-user-drag: none;
  user-drag: none;
}


@media (max-width: 900px) and (orientation: landscape){
  .workapp .videoWrap video{
    width:auto;
    max-width:100%;
    height: calc(100vh - 32px - 56px);
    max-height: calc(100vh - 32px - 56px);
  }
}

.workapp .vControls{
  width: min(900px, 100%);
  max-width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  user-select:none;
}

.workapp .vBtn{
  background:none;
  border:none;
  cursor:pointer;
  color:#000;
  padding: 8px 10px;
  line-height:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 4px;
}

.workapp .vBtn:hover{ opacity: .7; }
.workapp .vBtn[disabled]{ opacity:.35; cursor:default; }

.workapp .vBig{ font-size: 24px; }
.workapp .vSmall{ font-size: 26px; }

.workapp .vLabel{
  display:block;
  margin-top:4px;
  font-size:10px;
  letter-spacing:0.6px;
  text-transform:uppercase;
  opacity:0.6;
  pointer-events:none;
}


/* vedere dentro/portfolio-frontend/work.js questo mette in display none le categorie nella pagina creata della selezione dei portafogli */
.workapp .shareMode .subRow{display:none;}
.workapp .shareMode .subRow + .rule{display:none;}

.workapp .shareBack{
  color: #32CD32;
  font-size: 21px;     /* desktop grande */
  line-height: 1.05;
  font-weight: 500;
  display:inline-block;
}

@media (max-width: 520px){
  .workapp .shareBack{
    font-size: 14px;   /* mobile un po' pił grande */
  }
}




/* WP theme reset (solo dentro il portfolio) */
.workapp, .workapp *{
  box-sizing: border-box;
  font-family: inherit;
}

.workapp{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #111;
  line-height: 1.2;
}

.workapp a{
  color: inherit;
  text-decoration: none;
}

.workapp a:hover{
  text-decoration: none;
}

.workapp p{
  margin: 0;
}

.workapp img{
  display: block;
  max-width: 100%;
  height: auto;
}