/* =============================
   PARCO MACCHINE — stile istituzionale
   Prefisso: pm-
   ============================= */
:root{
  --pm-dark:#161616;
  --pm-gray:#6a6f74;
  --pm-soft:#f6f8fa;
  --pm-line:#e7e9ec;
  --pm-accent:#d31919;
  --pm-accent2:#ff4a4a;
  --pm-container:min(1180px, 92vw);
  --pm-radius:22px;
}

.pm-page{ color:var(--pm-dark); overflow-x:clip; }
.pm-container{ width:var(--pm-container); margin-inline:auto; padding-inline:16px; }

/* INTRO */
.pm-intro{ padding: clamp(36px, 6vw, 64px) 0 18px; }
.pm-intro__title{
  margin:0 0 12px; text-align:center; font-weight:800;
  font-size: clamp(28px, 4vw, 40px); line-height:1.1;
  background: linear-gradient(180deg, var(--pm-accent), var(--pm-accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pm-intro__lead{
  max-width:900px; margin:0 auto; text-align:left;
  color:var(--pm-gray); line-height:1.7; font-size: clamp(16px, 1.15vw, 18px);
}

/* Titolo sezione prima della griglia */
.pm-section__title{
  margin: 0 0 16px;
  text-align: center;
  font-weight: 800;
  font-size: clamp(22px, 3.2vw, 28px);
  background: linear-gradient(180deg, var(--pm-accent), var(--pm-accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* GRID */
.pm-grid{ padding: clamp(22px, 4vw, 40px) 0; }
.pm-grid__wrap{
  display:grid; gap: clamp(18px, 2.2vw, 28px);
  grid-template-columns: repeat(4, 1fr);   /* come “Materiali” */
}
@media (max-width: 980px){
  .pm-grid__wrap{ grid-template-columns: repeat(2, 1fr); }
}

/* CARD */
.pm-card{ margin:0; }
.pm-card__media{
  display:block; position:relative; overflow:hidden; border-radius: 28px;
  aspect-ratio: 1 / 1; /* blocco quadrato */
  box-shadow: 0 18px 46px rgba(0,0,0,.12);
  transition: transform .25s cubic-bezier(.2,.65,.2,1), box-shadow .25s ease;
  background:#fff;
}
.pm-card__media:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 70px rgba(0,0,0,.16);
}
.pm-card__img{
  width:100%; height:100%; object-fit: cover; display:block;
}

/* SQUIRCLE */
.pm-shape--squircle{
  -webkit-mask:
    radial-gradient(100% 100% at 0 0,#0000 28%,#000 29%) top left,
    radial-gradient(100% 100% at 100% 0,#0000 28%,#000 29%) top right,
    radial-gradient(100% 100% at 100% 100%,#0000 28%,#000 29%) bottom right,
    radial-gradient(100% 100% at 0 100%,#0000 28%,#000 29%) bottom left;
  -webkit-mask-size:52% 52%; -webkit-mask-repeat:no-repeat;
          mask:
    radial-gradient(100% 100% at 0 0,#0000 28%,#000 29%) top left,
    radial-gradient(100% 100% at 100% 0,#0000 28%,#000 29%) top right,
    radial-gradient(100% 100% at 100% 100%,#0000 28%,#000 29%) bottom right,
    radial-gradient(100% 100% at 0 100%,#0000 28%,#000 29%) bottom left;
  mask-size:52% 52%; mask-repeat:no-repeat;
}

/* didascalia */
.pm-card__caption{
  margin:12px 0 0; padding:10px 0 0;
  text-align:center; font-size:15px; color:var(--pm-dark);
  border-top:1px solid var(--pm-line);
}

/* CTA finale */
.pm-cta{
  padding: clamp(30px, 5vw, 54px) 0 clamp(46px, 6vw, 72px);
  background: linear-gradient(180deg, #fff 0, var(--pm-soft) 100%);
  border-top:1px solid var(--pm-line);
}
.pm-cta__title{
  margin:0; text-align:center; font-weight:800;
  font-size: clamp(22px, 3vw, 30px);
}

.pm-card__placeholder{
  width:100%; height:100%;
  background: repeating-linear-gradient(45deg,#f1f3f5 0 10px,#e9ecef 10px 20px);
}