/* =====================================================
   Crainox – Pagina "Azienda" (stili specifici)
   Questo foglio integra style.css: aggiunge componenti
   non presenti nello sheet globale (timeline, tech-card…)
   ===================================================== */

.intro-section{background-color: var(--cl-stone);}

.timeline { 
    position: relative;
    list-style: none;
    display: inline-flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    height: 400px; }  /* set here the height of the timeline */


/* middle line */
.timeline:before {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    width: 100%;
    height: 1px;
    background: var(--cl-stone); }


.timeline li { 
    margin: 1rem auto;
    min-width: calc(100% / 6);
    align-self: flex-start; 
    }


/*  event in even position are bottom-aligned */
.timeline li:nth-child(2n) { align-self: flex-end;  }


.timeline div {
    position: relative;
    padding: 0.5rem;
    text-align: center;}


/* style for the dot over the timeline */
.timeline li:before {
    content: "";
    position: absolute;
    top: 50%;
    margin-left: 100px;
    transform: translate(-50%, -50%);
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: #004D4E;      
}

    time{
    color: #0c1618;
    text-decoration: none;
    transition: color 0.2s;
    font-size: clamp(1.3rem, /* min: +0.05rem rispetto alla versione precedente */ calc(1.3rem + 0.45vw), /* slope leggermente più ripida */ 1.75rem /* max: ≈ 28 px a 1366 px+ */);}

/* === BENTO GRID ======================================= */
.bento-grid{
  --gap:12px;
  display:grid;
  grid-template-columns: 301px 205px 403px 301px; /* 4 colonne */
  grid-template-rows: auto auto auto;             /* 3 righe  */
  gap:var(--gap);

  /* aree leggibili */
  grid-template-areas:
    "laser laser   bending revenue"
    "otd   numbers numbers revenue"
    "otd   collaborators collaborators collaborators";
}

/* === AREE (con span implicito dalle aree) =========== */
.laser          { grid-area: laser; }
.bending        { grid-area: bending; }
.revenue        { grid-area: revenue; }
.otd            { grid-area: otd; }
.numbers        { grid-area: numbers; }
.collaborators  { grid-area: collaborators; }

/* === CARD BASE (come avevi) ========================= */
.card-stat{
  --ratio:4/2;                    /* default 2:1 */
  aspect-ratio:var(--ratio);
  position:relative;
  overflow:hidden;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:clamp(1rem,2vw,2rem);
  color:#fff;
  font-family:"Aeonik",sans-serif;
}

/* proporzioni particolari ---------------------------- */
.revenue,
.otd, .bending          { --ratio:auto; }    /* quadrate verticali */
.collaborators{ --ratio:4/1; }    /* larga e bassa      */


/* Layer immagine/tinta --------------------------------- */
.card-stat::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:
    linear-gradient(180deg,rgba(0,77,78,.35) 0%,rgba(0,0,0,.55) 100%),
    var(--img);
  background-size:cover;
  background-position:center;
  transition:transform .4s ease;
}
.card-stat:hover::before{ transform:scale(1.05); }

/* Testo sopra ------------------------------------------ */
.card-stat>*{ position:relative; z-index:1; }

/* Card centrale senza immagine ------------------------- */
.bg-gradient::before{
  background:radial-gradient(circle at center,#003537 0%,#001a1b 100%);
}

/* TYPO -------------------------------------------------- */
.card-stat small {
    font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
    line-height: 1.2em;
    margin-top: 0.5rem;
    opacity: 0.8;
    margin-bottom: 0.25rem;
    display: block;
    color: rgb(242, 242, 236);
}
.card-stat h2, .card-stat h3 {
    font-size: clamp(1.25rem, 1.2rem + 1.1vw, 1.75rem);
    margin: 0px;
    
}
.card-stat p  { font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem); max-width:28ch; margin-top:.75rem; color: rgb(242, 242, 236);}

/* SECTION ---------------------------------------------- */
.numbers-section{ padding-block:clamp(3rem,6vw,6rem);}
.bg-light{ background:#F2F2EC; }

/* MOBILE: colonna singola ------------------------------ */
@media (max-width:960px){
  .bento-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    grid-template-areas:
      "laser"
      "bending"
      "revenue"
      "otd"
      "numbers"
      "collaborators";
  }
  .card-stat{ aspect-ratio:16/9; }    /* tutte uguali in verticale */
}



/* ========== PROCESS SECTION ============================== */
.process-section{position:relative;overflow-x:clip;padding-block:8rem;background:var(--cl-ivory)}
.process-section::before{content:"";position:absolute;top:-8rem;right:-10rem;width:32rem;height:32rem;border-radius:50%;border:2px dotted rgba(12,22,24,.15);z-index:1}
.process-section::after{right: calc(22rem - 5px);content:"";position:absolute;top:8rem;right:calc(22rem-5px);width:10px;height:10px;border-radius:50%;background:var(--cl-petrol);box-shadow:0 0 0 2px var(--cl-ivory);z-index:1}
.section-eyebrow{font:600 1rem/1.2;color:var(--cl-petrol);margin-bottom:1.5rem;letter-spacing:.08em}
.process-title{max-width:42ch;margin-bottom:2rem}
.process-intro{max-width:54ch;margin-bottom:4rem;color:var(--cl-dark)}
.process-grid{--gap:clamp(2rem,5vw,3rem);display:grid;gap:var(--gap);grid-template-columns:repeat(3,1fr);list-style:none;padding:0;margin:0}
.process-card__link{display:block;position:absolute;inset:0;text-decoration:none;color:inherit;z-index:1}
.process-card>*{position:relative;z-index:2}
.process-num{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--cl-petrol);color:#fff;font:600 .75rem/1;margin-bottom:1rem}
.process-card h3{margin-bottom:.65rem}
.process-card p{max-width:38ch;color:var(--cl-dark);line-height:1.5}
.process-card{position:relative;padding-block:2rem 2.5rem;border-top:1px solid var(--cl-stone);background-color:var(--cl-ivory);overflow:hidden;transition:transform 350ms cubic-bezier(0.4,0,0.2,1),filter 350ms cubic-bezier(0.4,0,0.2,1)}
.process-card::before{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(45deg,rgba(255,255,255,0) 0,rgba(255,255,255,.25) 50%,rgba(255,255,255,0) 100%);transform:skewX(-25deg);transition:left 800ms ease-in-out;pointer-events:none}
@media(hover:hover){.process-card:hover::before,.process-card:focus-within::before{left:125%}.process-card:hover,.process-card:focus-within{transform:translateY(-4px) scale(1.005);border-top:2px solid var(--cl-ottanio)}}

/* ===== Territorio & Impegno (Azienda) ============================ */
.bg-light{ background: var(--cl-ivory); }

.territorio-section{ position: relative; }
.territorio-grid{
  display: grid;
  grid-template-columns: 1.6fr .8fr;
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
}

.territorio-main .h2{ margin-bottom: .75rem; }
.territorio-main .p + .p{ margin-top: .5rem; }

/* Card laterale coerente col tema */
.card{
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
}
.card--soft{
  background: var(--cl-stone);
  padding: clamp(18px, 2.2vw, 24px);
}

/* Aside “sticky” su desktop, naturale su mobile */
.territorio-aside{
  position: sticky;
  top: clamp(72px, 9vh, 120px);
}
body.admin-bar .territorio-aside{ top: calc(clamp(72px, 9vh, 120px) + 32px); }
@media (max-width: 782px){
  body.admin-bar .territorio-aside{ top: calc(clamp(72px, 9vh, 120px) + 46px); }
}

/* Lista con check minimale, senza icone esterne */
.list-checked{
  list-style: none;
  margin: .75rem 0 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.list-checked li{
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  column-gap: .6rem;
  color: var(--cl-dark);
}
.list-checked li::before{
  content: "";
  inline-size: 14px; block-size: 14px;
  margin-top: .2rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M6.5 11.6L2.9 8l1.1-1.1 2.5 2.5 5.6-5.6L13.2 5z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M6.5 11.6L2.9 8l1.1-1.1 2.5 2.5 5.6-5.6L13.2 5z'/></svg>") no-repeat center / contain;
  opacity: .9;
}
.card--soft .list-checked li::before{ color: var(--cl-petrol); }

/* Spaziature tipiche dentro la card */
.territorio-aside .h4{ margin-bottom: .5rem; font-weight: var(--fw-medium); }

/* Responsive */
@media (max-width: 1200px){
  .territorio-grid{ grid-template-columns: 1.5fr .9fr; }
}
@media (max-width: 1024px){
  .territorio-grid{ grid-template-columns: 1fr; }
  .territorio-aside{ position: static; }
}

@media (max-width: 600px){
  .card--soft{ padding: clamp(16px, 3.5vw, 20px); }
  .list-checked{ gap: .45rem; }
}

/* ===== QUALITÀ & CERTIFICAZIONI — fascia editoriale ===== */
.quality-section{
  /* un avorio leggermente “stonato”, diverso sia da #fff sia dal bg pagina */
  --quality-bg: color-mix(in oklab, var(--cl-ivory) 82%, var(--cl-stone) 18%);
  background: var(--quality-bg);
  padding-block: clamp(3rem, 8vw, 7rem);
  position: relative;
  border-block: 0; /* niente hairline: qui non servono */
}

/* Header: titolo + link a destra */
.quality-hd{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
}
@media (max-width: 820px){
  .quality-hd{ flex-direction:column; align-items:flex-start; gap:.75rem; }
}

/* Accento minimale sotto al titolo */
.quality-hd .h2{
  display:inline-block; margin-bottom:.35rem;
}
.quality-hd .h2::after{
  content:""; display:block; width:64px; height:2px;
  margin-top:.5rem; border-radius:2px;
  background: var(--cl-petrol);
}

/* Copy: misura confortevole e, su desktop, 2 colonne */
.quality-copy{
  max-width: 88ch;
}
.quality-copy p{ margin:0 0 1rem; }
.quality-copy p:last-child{ margin-bottom:0; }

/* lead leggermente più “forte” (senza cambiare gerarchie) */
.quality-copy p:first-child{
  font-size: clamp(1.05rem, .9rem + .55vw, 1.25rem);
  line-height: 1.6;
}

/* Due colonne solo quando c'è spazio: layout diverso dal blocco Territorio */
@media (min-width: 1100px){
  .quality-copy{
    column-count: 2;
    column-gap: clamp(2rem, 4vw, 3rem);
  }
  .quality-copy p{ break-inside: avoid; }
}

/* CTA coerente */
.quality-section .link-cta{
  color: var(--cl-petrol);
}
.quality-section .link-cta:hover{ color: color-mix(in oklab, var(--cl-petrol) 86%, #000 0%); }
.quality-section .link-cta .icon-arrow{ transform:scaleX(-1); transition:transform .18s ease; }
.quality-section .link-cta:hover .icon-arrow{ transform:translate(.18em,.06em) scaleX(-1); }

/* CTA inline: minimale, leggibile dentro ai paragrafi */
.cta-inline{
  display:inline-flex; align-items:baseline; gap:.35em;
  font-weight:500;
  color:var(--cl-petrol);
  text-decoration:none;                 /* niente underline nativa */
  padding-bottom:2px;                   /* spazio per la hairline */
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1px;               /* underline appare solo on hover */
  transition:color .18s ease, background-size .18s ease;
}

/* micro freccia elegante senza cambiare l’HTML */
.cta-inline::after{
  content:"\2192";                      /* → */
  font-size:.95em;
  transform:translateX(0);
  transition:transform .18s ease;
}

/* Hover/Focus */
.cta-inline:hover{ background-size:100% 1px; }
.cta-inline:hover::after{ transform:translateX(.18em); }
.cta-inline:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}

/* Rispetto preferenze di movimento */
@media (prefers-reduced-motion: reduce){
  .cta-inline, .cta-inline::after{ transition:none; }
}

@media (max-width: 1024px) {
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .solutions-grid, .process-grid {
        grid-template-columns: 1fr;
    }
}

/* Micro-tweak coerenti con reveal.css (no override aggressivi) */
.hero .reveal-up { --rev-distance: 10px; }        /* ingresso più corto in hero */
.bento-grid .reveal-scale { --rev-distance: 12px; } /* cards più “snappy” */
/* Evita qualsiasi shift visivo su elementi numerici */
.process-num.reveal-quick { font-variant-numeric: tabular-nums; }