/* ============================================================
   NEW MONDAY — leistungen.css
   Stili specifici della pagina Leistungen (Figma 368:2634).
   Token, typography, header, footer, sistema icone e bottoni
   stanno in main.css.

   REGOLA DEI CLAMP DIMENSIONALI
   ------------------------------------------------------------
   Come in home.css e agentur.css: il valore del frame Figma a
   1920 è il massimo, il minimo è quello a 1280 (Laptop). Dove
   Mobile == Laptop la formula si riduce a:
     clamp( V*2/3 px , V/19.2 vw , V px )

   BLOCCHI RIPRESI DALLA HOME
   ------------------------------------------------------------
   Il blocco servizio, lo scroll orizzontale agganciato del
   processo, portfolio-item e l'accordion della FAQ sono gli
   stessi componenti già codificati in home.css: le regole sono
   duplicate qui perché ogni pagina carica solo main.css più il
   proprio file. Gli id usati dal JS (#scrollPinWrapper,
   #scrollContainer, #scrollItems) sono gli stessi della home,
   così lo script funziona senza modifiche.
   ============================================================ */

prozess-card,
accordion-item{ display:block; }

/* ============================================================
   HERO — titolo e sommario centrati, bottone tondo che scrolla
   alla sezione servizi (Figma 368:3380)
   ============================================================ */
.hero{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding:var(--space-240) var(--space-page-margin) var(--space-128);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-64);
}
.hero-intro{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-32);
  text-align:center;
}
.hero-subhead{
  font-family:var(--font-sans);
  font-size:var(--font-size-paragraph-sm);
  line-height:1.5;
  max-width:1013px;
}
/* la freccia del componente punta a destra: qui guarda in giù */
.hero-scroll .icon{ transform:rotate(90deg); }

/* ============================================================
   SERVIZI — sezione scura, cinque blocchi (Figma 368:2597).
   Stesso blocco della home, con in più il button-secondary-dark
   al posto del bottone-icona tondo.
   ============================================================ */
.services{
  background:var(--color-black);
  color:var(--color-white);
  padding:var(--space-128) 0 var(--space-240);
  display:flex;
  flex-direction:column;
  gap:var(--space-128);
}
.services-intro{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding-inline:var(--space-page-margin);
  box-sizing:border-box;
}

.cases{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding:var(--space-240) var(--space-page-margin) var(--space-128);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:var(--space-128);
}
.cases-head{
  width:100%;
  max-width:840px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-64);
  text-align:center;
}
/* intestazione larga quanto la pagina, 1700 a 1920 (Figma 3202:9614),
   su /leistungen/ e /experten/ */
.cases-head--full{ max-width:none; }
.cases-head-title{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:var(--space-24);
}
.cases-text{
  font-family:var(--font-base);
  font-weight:400;
  font-size:var(--font-size-paragraph-md);
  line-height:1.4;
  letter-spacing:-0.01em;
}

.portfolio-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-16);
}
.portfolio-item{
  display:flex;
  gap:var(--space-16);
  height:clamp(500px, 39.06vw, 750px);
  width:100%;
  overflow:hidden;
  cursor:pointer;
}
/* variante hover del componente: solo il blocco titoli e il bordo
   del bottone-icona passano a teal */
.portfolio-item:hover .portfolio-item-titles{ color:var(--color-primary); }
.portfolio-item:hover .btn-icon-secondary{ box-shadow:inset 0 0 0 2px var(--color-primary); }
.portfolio-item-media{
  flex:0 0 49.53%;
  background:var(--color-gray-60);
  border-radius:var(--radius-24);
  overflow:hidden;
}
.portfolio-item-media img{
  width:100%; height:100%; object-fit:cover;
  /* variante hover del componente: l'immagine sale al 105% dentro
     al riquadro, che ha già overflow:hidden */
  transition:transform .6s var(--ease-out);
}
.portfolio-item:hover .portfolio-item-media img{ transform:scale(1.05); }
.portfolio-item-content{
  flex:1 1 50.47%;
  background:var(--color-gray-15);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-24);
  padding:var(--space-32);
  border-radius:var(--radius-24);
}
.portfolio-item-industry{
  width:100%;
  font-size:var(--font-size-paragraph-xs);
  line-height:1.5;
}
.portfolio-item-titles{
  width:100%;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  color:var(--color-black);
  transition:color .3s var(--ease-out);
}
.portfolio-item-accent{
  font-family:var(--font-base);
  font-weight:600;
  font-size:var(--font-size-headings-xl);
  line-height:1.04;
  letter-spacing:-0.01em;
  text-transform:uppercase;
}
.portfolio-item-title{
  font-family:var(--font-base);
  font-weight:600;
  font-size:var(--font-size-headings-sm);
  line-height:1.2;
  letter-spacing:-0.01em;
  max-width:732px;
}
.portfolio-item-text{
  width:100%;
  font-size:var(--font-size-paragraph-sm);
  line-height:1.5;
  max-width:732px;
}

/* ============================================================
   PROZESS — scroll orizzontale agganciato (Figma 368:3428).
   Meccanismo identico a "kompetenzen" della home: il wrapper
   alto dà la corsa di scroll durante la quale la sezione resta
   pinnata, e main.js traduce .scroll-items in orizzontale in
   proporzione a quanto è stato consumato in verticale.
   ============================================================ */
.prozess{
  padding:var(--space-128) 0;
  display:flex;
  flex-direction:column;
  gap:var(--space-128);
}
.scroll-pin-wrapper{ position:relative; }
.scroll-pin-sticky{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--space-128);
  overflow:hidden;
}
.prozess-intro{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding:0 var(--space-page-margin);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:var(--space-24);
}
.prozess-heading{ max-width:985px; }

.scroll-container{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding:0 var(--space-page-margin);
  box-sizing:border-box;
}
.scroll-items{
  display:flex;
  gap:var(--space-16);
  will-change:transform;
}
prozess-card{
  flex-shrink:0;
  width:clamp(370.667px, 28.9583vw, 556px);
  height:clamp(260px, 20.3125vw, 390px);
  background:var(--color-white);
  border:2px solid var(--color-gray-40);
  border-radius:var(--radius-24);
  padding:var(--space-48);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
}
.prozess-card-title{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:clamp(21.333px, 1.667vw, 32px);
  line-height:1.08;
  color:var(--color-black);
}
.prozess-card-text{
  font-family:var(--font-base);
  font-weight:400;
  font-size:var(--font-size-paragraph-sm);
  line-height:1.3;
  color:var(--color-gray-60);
}

/* ============================================================
   FAQ — accordion (Figma 368:3586). L'icona +/- sta in main.css
   perché è condivisa con le altre pagine.
   ============================================================ */
.faq{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding:var(--space-128) var(--space-page-margin) var(--space-240);
  box-sizing:border-box;
  row-gap:var(--space-128);
}
.faq-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-24);
  text-align:center;
  width:100%;
}
.faq-heading{
  font-family:var(--font-base);
  font-weight:600;
  font-size:var(--font-size-headings-md);
  line-height:1.08;
  letter-spacing:-0.01em;
}
/* 10 colonne su 12, centrata: era max-width:1414px, che sono 10
   colonne solo a 1920 (vedi .page-grid in main.css) */
.faq-list{
  --grid-col: 2 / span 10;
  display:flex;
  flex-direction:column;
  gap:var(--space-12);
}
accordion-item{
  background:var(--color-gray-15);
  border-radius:var(--radius-24);
  overflow:hidden;
}
.accordion-header{
  display:flex;
  align-items:center;
  gap:var(--space-48);
  width:100%;
  padding:var(--space-32);
  text-align:left;
}
.accordion-question{ flex:1 1 auto; color:var(--color-black); }
.accordion-panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .4s var(--ease-out);
}
accordion-item.is-open .accordion-panel{ grid-template-rows:1fr; }
.accordion-panel-inner{ overflow:hidden; }
.accordion-answer{
  padding:0 var(--space-32) var(--space-48);
  font-family:var(--font-base);
  font-weight:400;
  font-size:var(--font-size-paragraph-md);
  line-height:1.3;
  color:var(--color-gray-60);
  max-width:1200px;
}

/* ============================================================
   BREAKPOINT TABLET/MOBILE
   ============================================================ */
@media (max-width: 1023px){
  .hero{ padding-top:30px; gap:40px; }
  .hero-heading{ font-size:clamp(32px, 10.5vw, 68px); overflow-wrap:break-word; hyphens:auto; }

  .services{ padding-bottom:120px; gap:80px; }

  /* in colonna il flex-basis diventa altezza: va azzerato */

  .cases{ padding-top:120px; gap:64px; }
  .portfolio-item{ flex-direction:column; height:auto; }
  .portfolio-item-media{ flex:0 0 auto; height:60vw; }
  .portfolio-item-content{ padding:24px; }
  .portfolio-item-accent{ font-size:clamp(48px,14vw,80px); }

  /* niente pin né scroll orizzontale su mobile: card impilate */
  .scroll-pin-sticky{ position:static; height:auto; }
  .scroll-container{ overflow:visible; }
  .scroll-items{ transform:none !important; flex-direction:column; }
  prozess-card{ width:100%; height:auto; min-height:0; gap:32px; }

  .faq{ padding-bottom:120px; row-gap:64px; }
}