/* ===================== L'APPROCCIO — page-specific ===================== */

/* shared headings / leads / bullets */
.appr-title{font-size:52px;font-weight:800;color:#fff;line-height:1.06;letter-spacing:-.01em;margin-bottom:42px;text-wrap:balance;}
.appr-h2{font-size:44px;font-weight:800;color:#fff;line-height:1.08;letter-spacing:-.01em;}
.appr-lead p{color:var(--body);margin-bottom:22px;max-width:760px;}
.appr-lead p:last-child{margin-bottom:0;}

.col-copy p{color:var(--body);margin-bottom:20px;max-width:560px;}
.col-copy .appr-h2{margin-bottom:34px;}

.appr-list{list-style:none;display:flex;flex-direction:column;gap:24px;margin:34px 0;}
.appr-list li{display:grid;grid-template-columns:13px 1fr;gap:24px;align-items:start;
  color:var(--body);font-size:14.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;}
.appr-list li::before{content:"";width:13px;height:13px;background:var(--red);margin-top:3px;flex:none;}
.appr-list.cols2{display:grid;grid-template-columns:1fr 1fr;gap:32px 56px;}

.appr-close{color:var(--body);max-width:600px;margin-top:8px;}

/* generic two-col media block */
.appr-two{display:grid;grid-template-columns:1fr 1fr;gap:74px;align-items:center;}
.appr-two.start{align-items:start;}
.appr-media{align-self:stretch;min-height:440px;}
.appr-media img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---- HERO INTRO ---- */
.appr-intro{padding-top:230px;}
.appr-hero-render{margin-top:64px;background:#000;}
.appr-hero-render img{width:100%;height:auto;display:block;}

/* interactive plant hotspots */
.render-stage{position:relative;display:block;line-height:0;}
.hot{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;padding:0;border:none;background:none;cursor:pointer;z-index:2;}
.hot .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(237,28,36,.55);transition:transform .25s ease,box-shadow .25s ease;}
@media (prefers-reduced-motion:no-preference){
  .hot .pin{animation:hotPulse 2.4s ease-out infinite;}
  @keyframes hotPulse{0%{box-shadow:0 0 0 0 rgba(237,28,36,.5);}70%{box-shadow:0 0 0 14px rgba(237,28,36,0);}100%{box-shadow:0 0 0 0 rgba(237,28,36,0);}}
}
.hot:hover .pin,.hot:focus-visible .pin{transform:translate(-50%,-50%) scale(1.35);box-shadow:0 0 0 6px rgba(237,28,36,.22);animation:none;}
.hot .tip{
  position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%) translateY(6px);
  background:#fff;color:#161616;font-family:var(--text);font-size:14px;line-height:1.3;letter-spacing:0;
  white-space:nowrap;padding:10px 16px;border-radius:4px;box-shadow:0 14px 36px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,transform .22s ease;z-index:5;
}
.hot .tip::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#fff;}
.hot.below .tip{bottom:auto;top:calc(100% + 14px);transform:translateX(-50%) translateY(-6px);}
.hot.below .tip::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#fff;}
.hot:hover .tip,.hot:focus-visible .tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}

/* note markers (info) */
.hot.note .pin{display:flex;align-items:center;justify-content:center;background:var(--red);color:#fff;font-family:var(--head);font-weight:800;font-size:12px;line-height:1;font-style:italic;}
.hot.note .tip{white-space:normal;width:260px;text-align:left;}

/* ---- VIDEO CARD (Alberto / Mirco) ---- */
.appr-video{position:relative;display:block;overflow:hidden;align-self:stretch;min-height:480px;background:#0c0c0c;}
.appr-video img{width:100%;height:100%;object-fit:cover;display:block;}
.appr-video .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;pointer-events:none;
  width:84px;height:84px;border-radius:50%;background:var(--red);
  display:flex;align-items:center;justify-content:center;transition:transform .25s ease,background .25s ease;
  box-shadow:0 10px 36px rgba(0,0,0,.45);
}
.appr-video .play svg{width:30px;height:30px;margin-left:5px;}
a.appr-video:hover .play{transform:translate(-50%,-50%) scale(1.08);background:#ff2730;}

/* ---- RED BANNER (Preparazione / Controllo / Protezione) ---- */
.appr-redbanner{
  position:relative;min-height:440px;display:flex;align-items:center;
  background-image:linear-gradient(90deg,rgba(150,18,20,.55) 0%,rgba(150,18,20,.22) 55%,rgba(150,18,20,.55) 100%),url('../img/appr-redbanner-band.jpg');
  background-size:cover;background-position:center;
}
.appr-redbanner .wrap{display:flex;justify-content:center;}
.appr-redbanner .words{text-align:center;font-family:var(--head);font-weight:800;color:#fff;
  font-size:54px;line-height:1.12;letter-spacing:-.01em;}

/* ---- CTA BANNER (grandi dimensioni) ---- */
.appr-ctabanner{
  position:relative;min-height:440px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:26px;
  background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.6)),url('../img/appr-banner.jpg');
  background-size:cover;background-position:center;filter:none;
}
.appr-ctabanner h2{font-family:var(--head);font-weight:800;font-size:46px;color:#fff;letter-spacing:-.01em;text-shadow:0 2px 22px rgba(0,0,0,.5);}
.appr-ctabanner .sub{color:rgba(255,255,255,.9);font-size:18px;}
.appr-ctabanner .down{
  width:64px;height:64px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;
  transition:transform .25s ease,background .25s ease;cursor:pointer;
}
.appr-ctabanner .down svg{width:24px;height:24px;}
.appr-ctabanner .down:hover{transform:translateY(5px);background:#ff2730;}

/* big-dimension body block */
.appr-bigbody{padding-top:104px;}
.appr-bigbody p{color:var(--body);max-width:1000px;margin-bottom:22px;font-size:18px;}

/* ---- FULL-BLEED B&W ---- */
.appr-fullbleed{width:100%;line-height:0;}
.appr-fullbleed img{width:100%;height:auto;object-fit:cover;}

/* ---- CASE HISTORY ---- */
.opere-head{text-align:center;margin-bottom:80px;}
.opere-head .appr-h2{margin-bottom:40px;}
.opere-head p{color:var(--body);max-width:1040px;margin:0 auto 22px;}
.opere-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px 64px;}
.opera-card img{width:100%;height:320px;object-fit:cover;display:block;}
.opera-card h3{font-size:40px;font-weight:800;color:#fff;letter-spacing:-.01em;margin:30px 0 22px;}
.opera-card p{color:var(--body);max-width:520px;}
.opere-cta{margin-top:64px;}

/* arrow text-link variant */
.appr-arrowlink{display:inline-flex;align-items:center;gap:26px;margin-top:48px;cursor:pointer;background:none;border:none;}
.appr-arrowlink .lbl{font-family:var(--text);font-size:15px;letter-spacing:.13em;text-transform:uppercase;color:#fff;}
.appr-arrowlink .circle{width:58px;height:58px;flex:none;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;transition:transform .25s ease,background .25s ease;}
.appr-arrowlink .circle svg{width:24px;height:24px;}
.appr-arrowlink:hover .circle{transform:translateX(6px);background:#ff2730;}

@media (max-width:1100px){
  .appr-title{font-size:42px;}
  .appr-h2{font-size:34px;}
  .appr-redbanner .words{font-size:42px;}
  .appr-ctabanner h2{font-size:34px;}
}
@media (max-width:860px){
  .appr-intro{padding-top:150px;}
  /* full-bleed: the render reclaims the page gutters, which is the only extra
     width available without turning it into a horizontal scroller */
  .appr-hero-render{margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);}
  .render-stage,.appr-hero-render img{width:100%;max-width:100%;}
  /* Six points share 24% of the height: at this scale an 18px dot with its
     14px halo merges into one red bar. Smaller dots, no pulse, and a shorter
     hit box so neighbouring points stop swallowing each other's taps. */
  .hot{height:16px;}
  .hot .pin{width:10px;height:10px;animation:none;box-shadow:none;}
  .hot:hover .pin,.hot:focus-visible .pin{box-shadow:0 0 0 4px rgba(237,28,36,.25);}
  .hot.note{height:26px;}
  .hot.note .pin{width:18px;height:18px;font-size:11px;}
  .appr-two{grid-template-columns:1fr;gap:42px;}
  .appr-media{min-height:300px;}
  /* the image comes first in the DOM to sit on the left of the desktop grid;
     stacked, that put it above the title. Send it after the copy, i.e. below
     the "Scopri DMW Logistic" call to action. */
  .appr-two.media-last .appr-media{order:2;}
  .appr-two.media-last .col-copy{order:1;}
  .appr-video{min-height:340px;}
  .appr-list.cols2{grid-template-columns:1fr;gap:24px;}
  .appr-redbanner{min-height:300px;}
  .appr-redbanner .wrap{justify-content:center;}
  .appr-redbanner .words{text-align:center;font-size:34px;}
  .appr-bigbody{padding-top:70px;}
  .opere-grid{grid-template-columns:1fr;gap:50px;}
  /* tooltips: wrap, and anchor the ones near the edges so they stay on screen */
  .hot .tip,.hot.note .tip{white-space:normal;width:min(230px,66vw);}
  .hot.tip-start .tip,.hot.tip-end .tip{transform:translateY(6px);}
  .hot.tip-start.below .tip,.hot.tip-end.below .tip{transform:translateY(-6px);}
  .hot.tip-start:hover .tip,.hot.tip-start:focus-visible .tip,
  .hot.tip-end:hover .tip,.hot.tip-end:focus-visible .tip{transform:translateY(0);}
  .hot.tip-start .tip{left:-6px;}
  .hot.tip-start .tip::after{left:20px;}
  .hot.tip-end .tip{left:auto;right:-6px;}
  .hot.tip-end .tip::after{left:auto;right:20px;}
}