/* ============================================================
   Engicam – KTouch Platform Stack
   stack.css
   ============================================================ */

/* ---- Custom properties ---- */
:root {
  --primitive-black: #222222;
  --primitive-grey-dark: #50535a;
  --primitive-grey-mid: #666666;
  --primitive-grey-light: #b0b0b0;
  --primitive-grey-pale: #ededed;
  --primitive-grey-ghost: #f5f5f5;
  --primitive-white: #ffffff;
  --primitive-border: #e6e6e6;
  --primitive-blue: #0071b8;
  --primitive-blue-dark: #005fa3;
  --primitive-blue-light: #f7fbfd;

  --text-primary: var(--primitive-black);
  --text-secondary: var(--primitive-grey-mid);
  --text-disabled: var(--primitive-grey-light);
  --text-inverse: var(--primitive-white);
  --text-inverse-muted: rgba(237, 237, 237, 0.6);
  --text-accent: var(--primitive-blue);
  --text-accent-hover: var(--primitive-blue-dark);
  --text-accent-light: var(--primitive-blue-light);

  --layer-offset: 60px;        /* vertical gap between layers (expanded state) */
  --layer-offset-mobile: 40px; /* compact offset on mobile */
  --layer-scale: 0.70;         /* layers rendered at 70% of canvas width */
  --layer-scale-mobile: 0.85;  /* layers rendered at 85% of canvas width on mobile */
  --stack-transition: 400ms;   /* expand/collapse duration */
  --transition-speed: 300ms;   /* UI element transitions */
  --connector-draw: 350ms;     /* SVG line draw duration */
  --transition-ease: ease;
}

/* ---- Reset minimale ---- */
/*
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--primitive-white);
}
*/

/* ============================================================
   Sezione – griglia a tre colonne, due righe
   ============================================================ */

.section-ktouch {
  background-color: var(--primitive-white);
  padding: 80px 120px 0px;
}

.section-ktouch__inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative; /* contesto per SVG connector e posizionamenti assoluti */
  display: grid;
  grid-template-columns: 5fr 2fr 5fr;
  grid-template-areas: "hardware nav content";
  column-gap: 24px;
  align-items: start;
}

/* ============================================================
   SVG connector
   Sovrapposto all'intero inner container via position:absolute.
   Visibile solo quando la stack è espansa (is-visible).
   ============================================================ */

.stack-connector {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 20;
  opacity: 0;
  transition: opacity 200ms ease; /* fade-out al collasso */
}

/* Appare istantaneamente (transition: none) — la reveal è affidata
   al stroke-dashoffset della linea e all'animazione dei dot */
.stack-connector.is-visible {
  opacity: 1;
  transition: none;
}

/* La linea si ridisegna via stroke-dashoffset (dasharray/offset settati in JS) */
.stack-connector__line {
  stroke: var(--text-accent);
  stroke-width: 1.5;
  fill: none;
  transition: stroke-dashoffset var(--connector-draw) ease;
}

/* Dot filled – entrambe le estremità */
.stack-connector__dot {
  fill: var(--text-accent);
}

/* Cerchio pulsante (layer side) — scala e sfuma in loop */
.stack-connector__pulse {
  fill: var(--text-accent);
  transform-box: fill-box;
  transform-origin: center;
  animation: stack-connector-pulse 1.8s ease-out infinite;
}

@keyframes stack-connector-pulse {
  0%   { transform: scale(1);   opacity: 0.25; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ============================================================
   Intestazione sezione
   ============================================================ */

.section-ktouch__header {
  max-width: 1200px;
  margin: 0 auto 48px;
  text-align: center;
}

.section-ktouch__title {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.section-ktouch__subtitle {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ============================================================
   Colonna 1 – stack hardware
   ============================================================ */

.stack-hardware {
  grid-area: hardware;
  min-width: 0;
  position: relative; /* contesto per il toggle button */

  /* ── Fine-tuning posizione layer nello stato espanso ────────────────
     Valori positivi spostano il layer VERSO IL BASSO, negativi verso l'alto.
     La posizione base di ogni layer è: moltiplicatore × --layer-offset.
     Questi offset si sommano alla posizione base.
     Modificare solo questi valori per aggiustare la posizione di ogni layer. */
  --layer-adj-consultancy: 0px;   /* Consultancy– base: offset × 0 */
  --layer-adj-enclosure:   0px;  /* Enclosure  – base: offset × 1 */
  --layer-adj-heatsink:   30px;  /* Heatsink   – base: offset × 2 */
  --layer-adj-som:        20px;  /* SoM        – base: offset × 3 */
  --layer-adj-carrier:    10px;  /* Carrier    – base: offset × 4 */
  --layer-adj-display:    20px;  /* HMI Display– base: offset × 5 */
}

/* ---- Toggle button ---- */

.stack-toggle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 15;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primitive-white);
  border: 1px solid var(--primitive-border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-secondary);
  transition:
    color var(--transition-speed) var(--transition-ease),
    border-color var(--transition-speed) var(--transition-ease);
}

.stack-toggle:hover {
  color: var(--text-primary);
  border-color: var(--primitive-grey-dark);
}

.stack-toggle__icon {
  width: 13px;
  height: 13px;
  display: block;
}

/* Mostra expand icon quando collassato, compress icon quando espanso */
.stack-toggle__path--collapse {
  display: none;
}

.stack-hardware.is-expanded .stack-toggle__path--expand {
  display: none;
}

.stack-hardware.is-expanded .stack-toggle__path--collapse {
  display: block;
}

/* Canvas: contesto per i layer in position:absolute.
   L'altezza è calcolata in JS (--canvas-computed-height) dopo
   il caricamento delle immagini. */
.stack-canvas {
  position: relative;
  width: 100%;
  height: var(--canvas-computed-height, 640px);
}

/* ---- Layer base comune ---- */
.stack-layer {
  position: absolute;
  /* layer al 70% della larghezza canvas, centrati */
  width: calc(var(--layer-scale) * 100%);
  left: calc((1 - var(--layer-scale)) / 2 * 100%);
  pointer-events: none; /* tutti gli eventi mouse vanno al canvas; hit-test in JS */
  /* stato riposo: tutti sovrapposti, centrati verticalmente nel canvas */
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  transition:
    top       var(--stack-transition) var(--transition-ease),
    transform var(--stack-transition) var(--transition-ease),
    opacity   var(--stack-transition) var(--transition-ease);
}

.stack-layer img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

/* z-index fissi — invariati tra i due stati */
.stack-layer--display      { z-index: 1; }
.stack-layer--carrier      { z-index: 2; }
.stack-layer--som          { z-index: 3; }
.stack-layer--heatsink     { z-index: 4; }
.stack-layer--enclosure    { z-index: 5; }
.stack-layer--consultancy  { z-index: 6; }

/* ── Stato espanso: posizioni finali = --vert-offset (JS) + base + --layer-adj-* ──
   --vert-offset è calcolato in JS per centrare verticalmente il gruppo espanso. */
.stack-hardware.is-expanded .stack-layer--consultancy { top: calc(var(--vert-offset, 0px) + var(--layer-adj-consultancy)); }
.stack-hardware.is-expanded .stack-layer--enclosure   { top: calc(var(--vert-offset, 0px) + var(--layer-offset) * 1 + var(--layer-adj-enclosure)); }
.stack-hardware.is-expanded .stack-layer--heatsink    { top: calc(var(--vert-offset, 0px) + var(--layer-offset) * 2 + var(--layer-adj-heatsink)); }
.stack-hardware.is-expanded .stack-layer--som         { top: calc(var(--vert-offset, 0px) + var(--layer-offset) * 3 + var(--layer-adj-som)); }
.stack-hardware.is-expanded .stack-layer--carrier     { top: calc(var(--vert-offset, 0px) + var(--layer-offset) * 4 + var(--layer-adj-carrier)); }
.stack-hardware.is-expanded .stack-layer--display     { top: calc(var(--vert-offset, 0px) + var(--layer-offset) * 5 + var(--layer-adj-display)); }

/* Espanso: reset del translateY(-50%) del collasso + opacity */
.stack-hardware.is-expanded .stack-layer           { transform: none; opacity: 0.75; }
.stack-hardware.is-expanded .stack-layer.is-active { opacity: 1; }

/* Rotazione al momento della selezione — triggered via classe .is-selecting in JS */
@keyframes layer-select-rotate {
  0%   { transform: rotate(0deg); }
  35%  { transform: rotate(2.5deg); }
  100% { transform: rotate(0deg); }
}

/* Applicata sull'img per non interferire con il transform del layer (translateY/none) */
.stack-layer.is-selecting img {
  animation: layer-select-rotate 380ms ease-out forwards;
}

/* ============================================================
   Colonna 2 – lista layer
   ============================================================ */

.stack-nav-col {
  grid-area: nav;
  min-width: 0;
  align-self: start;
}

.stack-nav {
  list-style: none;
}

.stack-nav__item {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  padding: 18px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--primitive-border);
  user-select: none;
  transition: color var(--transition-speed) var(--transition-ease);
}

.stack-nav__item:first-child {
  border-top: 1px solid var(--primitive-border);
}

.stack-nav__item:hover {
  color: var(--text-primary);
}

.stack-nav__item.is-active {
  color: var(--text-accent);
  font-weight: 700;
}

/* ============================================================
   Colonna 3 – pannello contenuto
   CSS grid sovrappone tutti i pannelli nella stessa cella;
   l'altezza del col è determinata dal pannello più alto.
   ============================================================ */

.stack-content-col {
  grid-area: content;
  min-width: 0;
  display: grid;
}

.stack-content-panel {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  visibility: hidden;
  /* delay su visibility: aspetta la fine del fade prima di nascondere */
  transition:
    opacity var(--transition-speed) var(--transition-ease),
    visibility 0s linear var(--transition-speed);
}

.stack-content-panel.is-active {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--transition-speed) var(--transition-ease),
    visibility 0s linear 0s;
}

/* ---- Header del pannello ---- */

.stack-panel__header {
  margin-bottom: 6px;
}

/* Thumbnail: float right fuori dall'header, allineata al bordo destro del panel */
.stack-panel__thumb {
  float: right;
  max-width: 150px;
  width: auto;
  height: auto;
  border-radius: 4px;
  margin-left: 16px;
  margin-bottom: 8px;
  display: block;
}

/* ---- Elementi del pannello ---- */

.stack-panel__category {
  display: block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-disabled);
  margin-bottom: 4px;
}

.stack-panel__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

.stack-panel__description {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

/* ---- Tags ---- */

.stack-panel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

/* ---- Explore link (ultimo elemento del pannello) ---- */

.stack-panel__link {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-accent);
  text-decoration: none;
  transition: color var(--transition-speed) var(--transition-ease);
}

.stack-panel__link:hover {
  color: var(--text-accent-hover);
  text-decoration: underline;
}

.stack-panel__tag {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  background-color: var(--primitive-grey-ghost);
  border: 1px solid var(--primitive-border);
  border-radius: 4px;
  padding: 4px 10px;
}

/* ---- Lista verticale card nel pannello Consultancy ---- */

.consultancy-panel-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

/* ---- Card (stato di riposo) ---- */

.consultancy-card {
  position: relative;
  padding: 14px 38px 14px 18px; /* right: spazio per icon-plus */
  border: 1px solid var(--primitive-border);
  border-left: 3px solid var(--text-accent); /* accent costante */
  border-radius: 8px;
  background-color: var(--text-accent-light);
  cursor: pointer;
  transition:
    background-color 200ms var(--transition-ease),
    border-bottom-left-radius var(--transition-speed) var(--transition-ease),
    border-bottom-right-radius var(--transition-speed) var(--transition-ease);
}

/* ---- Icona "+" — persistente, top-right ---- */

.consultancy-card__icon-plus {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  pointer-events: none;
  transition:
    color 200ms var(--transition-ease),
    transform 200ms var(--transition-ease);
}

.consultancy-card:hover .consultancy-card__icon-plus,
.consultancy-card.is-open .consultancy-card__icon-plus {
  color: var(--text-accent);
  transform: rotate(45deg);
}

/* ---- Riga titolo: icona categoria + titolo ---- */

.consultancy-card__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

/* ---- Icona di categoria ---- */

.consultancy-card__icon-cat {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--text-accent);
}

.consultancy-card__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

.consultancy-card__keywords {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ---- Corpo espanso: overlay assoluto (desktop) ---- */

.consultancy-card__body {
  position: absolute;
  top: 100%;
  margin-top: -1px;       /* copre il bordo inferiore della card */
  left: -1px;
  right: -1px;
  z-index: 20;
  background: var(--text-accent-light);
  border: 1px solid var(--text-accent);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    max-height 280ms ease,
    opacity 200ms ease,
    padding-top 280ms ease,
    padding-bottom 280ms ease;
}

/* Angoli inferiori piatti sulla card hovered/open (per la giunzione con l'overlay) */
.consultancy-card:hover,
.consultancy-card.is-open {
  background-color: rgba(0, 113, 184, 0.06);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Apre il corpo espanso */
.consultancy-card:hover .consultancy-card__body,
.consultancy-card.is-open .consultancy-card__body {
  max-height: 160px;
  opacity: 1;
  padding-top: 14px;
  padding-bottom: 16px;
  pointer-events: auto;
}

/* ---- Accordion inline nel pannello Consultancy (desktop) ----
   Sovrascrive il posizionamento assoluto con flusso inline,
   così le card si espandono verso il basso senza sovrapporsi.
   Il :hover CSS garantisce già "uno alla volta" (solo un elemento
   può essere in hover contemporaneamente). */

.consultancy-panel-cards .consultancy-card__body {
  position: static;
  border: none;
  border-radius: 0;
  background: transparent;
  margin-top: 0;
}

.consultancy-panel-cards .consultancy-card:hover,
.consultancy-panel-cards .consultancy-card.is-open {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.consultancy-card__desc {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.consultancy-card__link {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-accent);
  text-decoration: none;
  transition: color var(--transition-speed) var(--transition-ease);
}

.consultancy-card__link:hover {
  color: var(--text-accent-hover);
  text-decoration: underline;
}

/* ============================================================
   Intro entrance animation
   .intro-hidden is added in HTML so elements are invisible before
   the first paint — no flash before JS runs. !important is required
   to beat the higher-specificity .is-expanded rules.
   .is-entering is added by JS to each element just before
   .intro-hidden is removed, so the browser transitions from 0 to
   the target opacity / transform in one smooth animation.
   ============================================================ */

/* Pre-paint hidden states — class present in HTML, removed by JS per element */
.stack-layer.intro-hidden,
.stack-hardware.is-expanded .stack-layer.intro-hidden       { opacity: 0 !important; }
.stack-nav__item.intro-hidden                               { opacity: 0 !important; }
.stack-content-panel.intro-hidden                           { opacity: 0 !important; }

.stack-layer.is-entering {
  transition:
    opacity   500ms ease-out,
    transform 500ms ease-out !important;
}

.stack-nav__item.is-entering {
  transition: opacity 400ms ease-out !important;
}

.stack-content-panel.is-entering {
  transition: opacity 300ms ease-out !important;
}

/* ============================================================
   Mobile layout – max-width: 768px
   ============================================================ */

@media (max-width: 768px) {

  .section-ktouch {
    padding: 48px 20px;
  }

  /* Single-column vertical stack: hardware → nav → content */
  .section-ktouch__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hardware"
      "nav"
      "content";
    column-gap: 0;
  }

  /* Override layer offset and scale for mobile */
  .stack-hardware {
    --layer-offset: var(--layer-offset-mobile);
    --layer-scale: var(--layer-scale-mobile);
  }

  /* SVG connector hidden on mobile */
  .stack-connector {
    display: none;
  }

  /* Toggle button hidden on mobile */
  .stack-toggle {
    display: none;
  }

  /* Layers are tappable on mobile (pointer-events: none removed) */
  .stack-layer {
    pointer-events: auto;
    cursor: pointer;
  }

  /* Nav list: sits directly below the stack canvas */
  .stack-nav-col {
    padding-top: 0;
    margin-top: 32px;
  }

  /* Content column: block flow, no grid overlap */
  .stack-content-col {
    display: block;
    padding-top: 0;
    margin-top: 24px;
  }

  /* Panels: display:none / display:block — no cross-fade on mobile */
  .stack-content-panel {
    display: none;
    opacity: 1;
    visibility: visible;
    transition: none;
    /* Reset desktop grid-placement so panels don't overlap */
    grid-column: unset;
    grid-row: unset;
  }

  .stack-content-panel.is-active {
    display: block;
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  /* Thumbnail: full-row block above the header, 70% wide, proportional height */
  .stack-panel__thumb {
    float: none;
    max-width: 150px;
    width: 100%;
    height: auto;
    margin-left: 0;
    margin-bottom: 16px;
  }

  /* Accordion inline su mobile: body torna nel flusso */
  .consultancy-card__body {
    position: static;
    border: none;
    border-radius: 0;
    background: transparent;
    margin-top: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
      max-height 280ms ease,
      opacity 200ms ease,
      padding-top 280ms ease;
  }

  /* Solo .is-open apre l'accordion su mobile (no :hover) */
  .consultancy-card:hover .consultancy-card__body {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    pointer-events: none;
  }

  .consultancy-card.is-open .consultancy-card__body {
    max-height: 200px;
    opacity: 1;
    padding-top: 12px;
    pointer-events: auto;
  }

  /* Su mobile la card espansa è inline: no angoli piatti, no overlay */
  .consultancy-card:hover,
  .consultancy-card.is-open {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

  /* Nav: horizontal pills, wrapping */
  .stack-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .stack-nav__item {
    padding: 0 16px;
    min-height: 44px;           /* touch-friendly tap target */
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--primitive-border);
    border-radius: 100px;       /* pill shape */
    background-color: var(--primitive-grey-ghost);
    font-size: 13px;
    /* reset column dividers */
    border-bottom: 1.5px solid var(--primitive-border);
  }

  .stack-nav__item:first-child {
    border-top: 1.5px solid var(--primitive-border);
  }

  .stack-nav__item:hover {
    border-color: var(--primitive-grey-dark);
    color: var(--text-primary);
    background-color: var(--primitive-white);
  }

  .stack-nav__item.is-active {
    background-color: var(--text-accent);
    border-color: var(--text-accent);
    color: var(--text-inverse);
    font-weight: 500;
  }
}