/* =========================================================
   LAVORAZIONI — look&feel premium
   ========================================================= */
:root{
  --wk-dark:#161616;
  --wk-gray:#666A70;
  --wk-soft:#f5f6f7;
  --wk-line:#e7e9ec;
  --wk-accent:#d31919;        /* rosso vivo */
  --wk-accent-2:#ff4a4a;      /* gradiente caldo */
  --wk-container:min(1180px, 92vw);
  --wk-radius: 16px;
}

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

/* ---------- INTRO (hero testuale) ---------- */
.wk-intro{
  padding: clamp(56px, 8vw, 104px) 0  clamp(36px, 5vw, 60px);
  background:
    radial-gradient(1000px 300px at 50% 0, #fff 20%, #fafbfc 60%, #f6f7f9 100%);
  border-bottom: 1px solid var(--wk-line);
}
.wk-intro__title{
  margin: 0 0 14px;
  text-align: center;
  font-weight: 800;
  letter-spacing: .01em;
  font-size: clamp(28px, 4.6vw, 46px);
  line-height: 1.06;
  background: linear-gradient(180deg, var(--wk-accent), var(--wk-accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wk-intro__text{
  max-width: 920px; margin: 0 auto;
  text-align: center;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.75;
  color: var(--wk-gray);
}
.wk-intro__text p{ margin: 0 0 12px; }
.wk-intro__text strong{ color: var(--wk-dark); }

/* ---------- SPLIT: immagine + testo ---------- */
.wk-split{
  background:
    linear-gradient(135deg, #f7f8fa 0, #f7f8fa 86%, #fff 58%); /* fascia morbida */
  padding: clamp(48px, 6.8vw, 110px) 0;
  position: relative;
}
.wk-split__grid{
  display: grid; align-items: center;
  gap: clamp(20px, 3.6vw, 48px);
  grid-template-columns: minmax(420px, 1.15fr) minmax(360px, 1fr);
}

/* card immagine premium */
.wk-split__media{ margin: 0; }
.wk-split__img{
  width: 100%; height: auto; display: block;
  border-radius: var(--wk-radius);
  box-shadow:
    0 28px 60px rgba(22,22,22,.12),
    0 2px 0 1px rgba(255,255,255,.7) inset;
  transform: translateZ(0);
  transition: transform .35s cubic-bezier(.2,.65,.2,1), box-shadow .35s ease;
}
.wk-split__img:hover{
  transform: translateY(-2px);
  box-shadow:
    0 36px 80px rgba(22,22,22,.16),
    0 2px 0 1px rgba(255,255,255,.7) inset;
}

/* testo */
.wk-split__title{
  margin: 0 0 8px;
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.15;
  position: relative;
}
.wk-split__title::after{
  content:""; display:block; width:64px; height:4px; margin-top:10px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--wk-accent), var(--wk-accent-2));
}
.wk-split__content p{
  margin: 0 0 12px;
  color: var(--wk-gray);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.7;
}

/* ---------- VIDEO: testo + frame ---------- */
.wk-video{ padding: clamp(42px, 6vw, 96px) 0  clamp(56px, 8vw, 110px); background:
    linear-gradient(46deg, #f7f8fa 0, #f7f8fa 86%, #fff 58%); /* fascia morbida */ }
.wk-video__grid{
  display: grid; align-items: center;
  gap: clamp(20px, 3.6vw, 48px);
  grid-template-columns: minmax(360px, 1fr) minmax(520px, 1.15fr);
}
.wk-video__title{
  margin: 0 0 10px; font-weight: 800;
  font-size: clamp(22px, 2.6vw, 30px);
}
.wk-video__text p{
  margin: 0 0 12px; color: var(--wk-gray);
  font-size: clamp(16px, 1.2vw, 18px); line-height: 1.7;
}

/* frame 16:9 con look “device” */
.wk-video__ratio{
  position: relative; width: 100%; aspect-ratio: 16/9;
  border-radius: calc(var(--wk-radius) + 2px);
  overflow: hidden;
  background: #0c0c0c;
  box-shadow:
    0 28px 70px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.06) inset;
}
.wk-video__ratio::before{
  /* puntino rosso camera-like */
  content:""; position:absolute; top:12px; left:12px;
  width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #ff7a7a, #d31919 70%);
  box-shadow: 0 0 0 3px rgba(211, 25, 25, .18);
}
.wk-video__embed{ position:absolute; inset:0; width:100%; height:100%; }

/* ---------- microinterazioni accessibili ---------- */
@media (prefers-reduced-motion:no-preference){
  .wk-intro__title{ animation: wkFadeUp .5s ease both; }
  .wk-split__img{ will-change: transform; }
}
@keyframes wkFadeUp{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1200px){
  .wk-split__grid{ grid-template-columns: minmax(380px,1fr) minmax(340px,1fr); }
  .wk-video__grid{ grid-template-columns: 1fr; }
  .wk-video__ratio{ max-width: 980px; margin-inline:auto; }
}
@media (max-width: 960px){
  .wk-split{
    background: linear-gradient(180deg, #f7f8fa 0, #f7f8fa 40%, #fff 40%);
  }
  .wk-split__grid{ grid-template-columns: 1fr; }
  .wk-split__media{ order: 1; }
  .wk-split__content{ order: 2; }
  .wk-split__img{ border-radius: 14px; }
}
@media (max-width: 768px){
  .wk-intro{ padding: 54px 0 40px; }
  .wk-intro__text{ text-align: left; }
  .wk-split{ padding: 48px 0; }
  .wk-video{ padding: 42px 0 64px; }
  .wk-split__title::after{ width: 56px; }
}