/********** Schede portfolio progetti — AgriZapp **********/

@font-face{
  font-family:'Satoshi-regular';
  font-style:normal; font-weight:400;
  src:url('../fonts/Satoshi-Regular.woff2') format('woff2'),
      url('../fonts/Satoshi-Regular.woff') format('woff');
  font-display:swap;
}
@font-face{
  font-family:'Satoshi-medium';
  font-style:normal; font-weight:500;
  src:url('../fonts/Satoshi-Medium.woff2') format('woff2'),
      url('../fonts/Satoshi-Medium.woff') format('woff');
  font-display:swap;
}
@font-face{
  font-family:'Satoshi-bold';
  font-style:normal; font-weight:700;
  src:url('../fonts/Satoshi-Bold.woff2') format('woff2'),
      url('../fonts/Satoshi-Bold.woff') format('woff');
  font-display:swap;
}

/*** Barra dei portfoli (sotto la navbar del sito) ***/
.portfolio-nav{
  background:#fff;
  border-bottom:1px solid rgba(15,66,41,0.16);
  display:flex; align-items:baseline; flex-wrap:wrap;
  gap:4mm 8mm;
  padding:14px 5%;
}
.portfolio-nav-title{
  font-family:"Satoshi-bold", sans-serif;
  font-size:1.15rem; letter-spacing:-0.5px;
  color:#0F4229;
}
.portfolio-nav-links{ display:flex; flex-wrap:wrap; gap:6mm; }
.portfolio-nav-links a{
  font-family:"Satoshi-medium", sans-serif;
  font-size:0.95rem; text-decoration:none;
  color:#525368; transition:color .3s;
}
.portfolio-nav-links a:hover{ color:#348E38; }
.portfolio-nav-links a.current{
  color:#348E38; font-family:"Satoshi-bold", sans-serif;
  border-bottom:2px solid #348E38;
}

/*** Pagina scheda ***/
.portfolio-page{
  /* palette del sito: primary #348E38, dark #0F4229, light #E8F5E9, secondary #525368 */
  --ground:#EDF3EC;
  --surface:#FFFFFF;
  --surface-2:#E8F5E9;
  --ink:#0F4229;
  --ink-soft:#525368;
  --ink-faint:#7D8A80;
  --accent:#348E38;
  --accent-soft:#9EBD13;
  --accent2:#008552;
  --accent2-soft:#4FA97C;
  --line:rgba(15,66,41,0.16);
  --weight-fill:rgba(52,142,56,0.16);
  --hum-fill:rgba(0,133,82,0.14);

  background:var(--ground);
  color:var(--ink);
  font-family:"Satoshi-regular", "Open Sans", sans-serif;
  display:flex; justify-content:center;
  padding:10mm 3mm 16mm;
}
.portfolio-page *{ box-sizing:border-box; }
.portfolio-page svg text{ font-family:"Satoshi-medium", sans-serif; }

.portfolio-page .sheet{
  width:210mm; max-width:100%;
  background:var(--surface);
  border-radius:20px;
  box-shadow:0 1px 3px rgba(15,66,41,0.10), 0 12px 32px rgba(15,66,41,0.14);
  padding:15mm 16mm 12mm;
  display:flex; flex-direction:column; gap:6.5mm;
}

.portfolio-page .eyebrow{
  font-family:"Satoshi-medium", sans-serif;
  font-size:8.4pt; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-faint);
  display:flex; justify-content:space-between; gap:4mm;
}

.portfolio-page .titleblock{
  display:flex; align-items:flex-start; justify-content:space-between; gap:6mm;
}
/* la colonna del testo prende lo spazio residuo e può restringersi */
.portfolio-page .titleblock > div{ flex:1 1 auto; min-width:0; }
/* dentro il titleblock la larghezza la detta il flex, non il max-width della tagline */
.portfolio-page .titleblock .tagline{ max-width:none; }
.portfolio-page .sheet-logo{
  flex:0 0 auto; width:26mm; max-width:26mm; height:auto;
  border-radius:4px; margin-top:2mm;
}

.portfolio-page h1{
  font-family:"Satoshi-bold", sans-serif;
  font-size:40pt; line-height:1; margin:1mm 0 0;
  letter-spacing:-1.5px; color:var(--ink); text-wrap:balance;
}
.portfolio-page .tagline{
  font-size:12.5pt; color:var(--ink-soft);
  max-width:150mm; line-height:1.35; margin-top:1mm;
}

.portfolio-page .rule{ color:var(--accent); height:11px; margin-top:1mm; }
.portfolio-page .rule svg{ display:block; width:100%; height:100%; }

.portfolio-page .lede{
  font-size:10.6pt; line-height:1.55; color:var(--ink); max-width:168mm; margin:0;
}
.portfolio-page .lede b{ color:var(--accent); font-weight:600; }

.portfolio-page h2{
  font-family:"Satoshi-bold", sans-serif;
  font-size:15pt; letter-spacing:-1px; color:var(--ink);
  margin:0 0 2.5mm; display:flex; align-items:baseline; gap:2.5mm;
}
.portfolio-page h2::before{
  content:""; width:7px; height:7px; flex:none;
  background:var(--accent); display:inline-block;
}
.portfolio-page .hex h2::before,
.portfolio-page .hex .built div::before{
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
}
.portfolio-page .topo h2::before,
.portfolio-page .topo .built div::before{
  clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
}

.portfolio-page .built{
  display:grid; grid-template-columns:1fr 1fr; gap:2.5mm 8mm;
  font-size:9.6pt; line-height:1.4; color:var(--ink-soft);
}
.portfolio-page .built div{ padding-left:3.5mm; position:relative; }
.portfolio-page .built div::before{
  content:""; position:absolute; left:0; top:0.55em;
  width:5px; height:5px; background:var(--accent2);
}
.portfolio-page .built b{ color:var(--ink); font-weight:700; }

.portfolio-page .prose{
  font-size:9.6pt; line-height:1.5; color:var(--ink-soft); margin:0; max-width:170mm;
}
.portfolio-page .prose b{ color:var(--ink); font-weight:700; }
.portfolio-page .prose .funding{
  display:block; margin-top:2.5mm; font-size:8.4pt; color:var(--ink-faint);
}

.portfolio-page figure{ margin:0; }
.portfolio-page figcaption{
  font-size:8.4pt; line-height:1.4; color:var(--ink-faint);
  margin-top:2mm; max-width:170mm;
}
.portfolio-page figcaption b{ color:var(--ink-soft); }

.portfolio-page .chartpanel{ background:var(--surface-2); border-radius:14px; padding:4mm 5mm 3mm; }
.portfolio-page .chart-legend{
  display:flex; gap:6mm; font-size:7.8pt; color:var(--ink-soft); margin-bottom:1.5mm;
}
.portfolio-page .chart-legend span{ display:flex; align-items:center; gap:1.5mm; }
.portfolio-page .swatch{ width:9px; height:9px; border-radius:2px; display:inline-block; }

.portfolio-page .diagram{ background:var(--surface-2); border-radius:14px; padding:5mm; }

.portfolio-page .videopanel{ background:var(--surface-2); border-radius:14px; padding:4mm; }
.portfolio-page .videopanel video{ width:100%; display:block; border-radius:10px; background:#000; }

.portfolio-page footer{
  margin-top:auto; padding-top:4mm; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:3mm;
  font-size:8pt; color:var(--ink-faint);
}
.portfolio-page .stack{ display:flex; gap:2.5mm; flex-wrap:wrap; }
.portfolio-page .stack span{
  font-family:"Satoshi-medium", sans-serif;
  background:var(--surface-2); color:var(--ink);
  border-radius:8px; padding:1mm 2.5mm; font-size:7.8pt;
}

@media (max-width: 700px){
  .portfolio-page{ padding:5mm 0 10mm; }
  .portfolio-page .sheet{ border-radius:0; padding:8mm 6mm 6mm; }
  .portfolio-page h1{ font-size:30pt; }
  .portfolio-page .built{ grid-template-columns:1fr; }
  .portfolio-page .sheet-logo{ width:20mm; }
}

@media print{
  @page{ size:210mm auto; margin:0; }
  .portfolio-nav{ display:none; }
  .portfolio-page{ padding:0; background:#fff; }
  .portfolio-page .sheet{ box-shadow:none; border-radius:0; }
}