/* ==========================================================================
   Tack System — Pagina settore (Figma "Settore Navale" 52:9239)
   Quattro sezioni: hero con foto, applicazioni, refit prima/dopo, fascia
   finale. Vale per tutte le otto pagine settore: nessun testo e nessuna
   foto qui dentro, solo forma.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */

.tk-sethero {
  position: relative;
  background: var(--tk-black);
  color: var(--tk-on-dark);
  isolation: isolate;
}

.tk-sethero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.tk-sethero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Senza velatura il titolo bianco finisce sul cielo chiaro e sparisce. */
.tk-sethero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tk-hero-veil);
}

/* Testo centrato come nella Home (24/09/2026). Il padding in cima somma
   l'altezza della testata, perche' da oggi la barra e' sovrapposta e non
   spinge piu' il contenuto verso il basso. */
.tk-sethero__inner {
  padding-block: calc(96px + var(--tk-header-h)) 112px;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.tk-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
  font-size: var(--tk-fs-sm);
  line-height: var(--tk-lh-ui);
  color: var(--tk-on-dark-50);
}
.tk-breadcrumb a { color: var(--tk-on-dark-70); }
.tk-breadcrumb a:hover { color: var(--tk-white); }
.tk-breadcrumb [aria-current="page"] { color: var(--tk-white); }
.tk-breadcrumb__sep { color: var(--tk-on-dark-40); }

.tk-sethero__body { max-width: 760px; }
.tk-sethero__eyebrow { margin: 0 0 20px; }
.tk-sethero__title { margin: 0 0 24px; color: var(--tk-white); }
.tk-sethero__lead { margin: 0 auto 16px; max-width: 640px; color: var(--tk-on-dark-70); }
.tk-sethero__text { margin: 0 auto; max-width: 560px; color: var(--tk-on-dark-50); }
.tk-sethero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; justify-content: center; }

/* --- Applicazioni -------------------------------------------------------- */

.tk-apps { background: var(--tk-light); padding-block: 112px; }
.tk-apps__eyebrow { margin: 0 0 16px; }
.tk-apps__title { margin: 0; color: var(--tk-ink); }

.tk-apps__grid {
  margin-top: 48px;
  display: grid;
  /* Al massimo 3 per riga, righe bilanciate (21/10/2026). */
  grid-template-columns: repeat(var(--tk-colonne, 3), minmax(0, 1fr));
  gap: 20px;
}

.tk-app {
  background: var(--tk-white);
  border: 1px solid var(--tk-border-light);
  border-radius: var(--tk-r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tk-app__media {
  position: relative;
  aspect-ratio: 390 / 176;
  background: var(--tk-light-alt);
}
.tk-app__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tk-app__body { padding: 20px; }
.tk-app__title { margin: 0 0 6px; color: var(--tk-ink); }
.tk-app__text { margin: 0; color: var(--tk-ink-500); }

/* Scheda senza foto ed etichetta (21/10/2026): la fascia del colore del
   settore in cima prende il posto della foto. */
.tk-app--testo { border-top: 4px solid var(--tk-accento, var(--tk-orange)); }
.tk-app--testo .tk-app__body { padding: 28px; }
.tk-app__etichetta {
  margin: 0 0 10px;
  font-size: var(--tk-fs-xs);
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--tk-accento-deep, var(--tk-orange-deep));
}
.tk-app--testo .tk-app__title { font-size: 20px; line-height: 28px; margin-bottom: 10px; }

/* --- Refit: prima / dopo -------------------------------------------------- */

.tk-refit { background: var(--tk-white); padding-block: 112px; }
.tk-refit__eyebrow { margin: 0 0 20px; }
.tk-refit__title { margin: 0 0 20px; color: var(--tk-ink); }
.tk-refit__text { margin: 0; max-width: 620px; color: var(--tk-ink-500); }

.tk-compare {
  --tk-pos: 50%;
  margin-top: 48px;
}

.tk-compare__frame {
  position: relative;
  border-radius: var(--tk-r-panel);
  overflow: hidden;
  box-shadow: var(--tk-sh-panel);
  aspect-ratio: 1216 / 620;
  background: var(--tk-light-alt);
  touch-action: pan-y;          /* trascinando in orizzontale non scorre la pagina */
  user-select: none;
}

.tk-compare__layer { position: absolute; inset: 0; }
.tk-compare__layer img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* I due strati si dividono il riquadro: il "prima" tenuto da sinistra fino al
   cursore, il "dopo" da li' in poi. Un clip-path invece di una larghezza,
   cosi' le foto non si deformano mentre il cursore si muove — e, siccome il
   taglio vale anche per quello che sta dentro, ogni targhetta sparisce da
   sola quando il cursore le passa sopra.
   Il "dopo" comincia un pixel prima per non lasciare una cucitura chiara fra
   i due ritagli; tanto li' sopra c'e' la riga bianca. */
.tk-compare__layer--prima { clip-path: inset(0 calc(100% - var(--tk-pos)) 0 0); }
.tk-compare__layer--dopo  { clip-path: inset(0 0 0 calc(var(--tk-pos) - 1px)); }

/* Etichette: pillole in alto, come nel riferimento. */
.tk-compare__tag {
  position: absolute;
  top: 16px;
  z-index: 3;
  padding: 7px 16px 6px;
  border-radius: var(--tk-r-pill);
  font-size: var(--tk-fs-label);
  line-height: var(--tk-lh-label);
  letter-spacing: var(--tk-ls-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tk-white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}
.tk-compare__tag--prima { left: 16px; background: rgba(8, 8, 8, 0.88); }
.tk-compare__tag--dopo  { right: 16px; background: var(--tk-accento); color: var(--tk-accento-su); }

/* Riga e maniglia: decorazione. Il comando vero e' il range qui sotto. */
.tk-compare__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--tk-pos);
  z-index: 4;
  width: 3px;
  margin-left: -1.5px;
  background: var(--tk-white);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.tk-compare__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--tk-white);
  color: var(--tk-ink);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Il cursore vero: trasparente, steso su tutta la foto. Il "pollice" e'
   largo 2px apposta: il browser mappa il valore sulla larghezza della pista
   MENO il pollice, quindi un pollice largo come la maniglia faceva restare
   la riga indietro di una ventina di pixel rispetto al dito. Non serve che
   sia grande per afferrarlo: premendo in un punto qualsiasi il cursore salta
   li' e continua a seguire il puntatore. */
.tk-compare__range {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: ew-resize;
}
.tk-compare__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 2px;
  height: 100vh;              /* piu' alto della foto: tagliato da overflow */
  background: transparent;
  cursor: ew-resize;
}
.tk-compare__range::-moz-range-thumb {
  width: 2px;
  height: 100vh;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: ew-resize;
}
.tk-compare__range::-moz-range-track { background: none; border: 0; }
.tk-compare__range:focus-visible { outline: none; }
.tk-compare__range:focus-visible ~ .tk-compare__line .tk-compare__handle {
  outline: 3px solid var(--tk-accento);
  outline-offset: 3px;
}

/* Targhette descrittive in basso, una per lato. Seguono il taglio: quella di
   sinistra sparisce quando il cursore la supera. */
.tk-compare__badge {
  position: absolute;
  bottom: 20px;
  z-index: 3;
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--tk-white);
  max-width: calc(50% - 32px);
}
.tk-compare__badge--prima { left: 20px; background: rgba(8, 8, 8, 0.85); }
.tk-compare__badge--dopo { right: 20px; background: var(--tk-green); }

.tk-compare__badge-label {
  display: block;
  font-size: var(--tk-fs-label);
  line-height: var(--tk-lh-label);
  letter-spacing: var(--tk-ls-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--tk-on-dark-70);
}
.tk-compare__badge--dopo .tk-compare__badge-label { color: rgba(255, 255, 255, 0.8); }
.tk-compare__badge-title { display: block; font-weight: 700; font-size: var(--tk-fs-ui); line-height: var(--tk-lh-ui); }

.tk-compare__hint {
  margin: 16px 0 0;
  text-align: center;
  font-size: var(--tk-fs-sm);
  line-height: var(--tk-lh-ui);
  color: var(--tk-ink-400);
}

@media (prefers-reduced-motion: reduce) {
  .tk-compare__layer--prima { transition: none; }
}

/* --- Fascia finale -------------------------------------------------------- */

.tk-setcta { background: var(--tk-black); color: var(--tk-on-dark); padding-block: 128px; text-align: center; }
.tk-setcta__title { margin: 0 auto; max-width: 920px; color: var(--tk-white); }
.tk-setcta__kicker { margin: 24px 0 0; }
.tk-setcta__testo { margin: 24px auto 0; max-width: 680px; color: var(--tk-on-dark-70); }
.tk-setcta__buttons { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 40px; }

/* --- Punti di rottura ----------------------------------------------------- */

@media (max-width: 1024px) {
  .tk-sethero__inner { padding-block: calc(72px + var(--tk-header-h)) 88px; min-height: 520px; }
  .tk-apps, .tk-refit { padding-block: 80px; }
  .tk-setcta { padding-block: 96px; }
  .tk-apps__grid { grid-template-columns: repeat(var(--tk-colonne-t, 2), minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  /* Le due foto restano sovrapposte anche sullo stretto — e' il senso del
     cursore — ma il riquadro si alza, altrimenti su un telefono resterebbe
     una striscia. */
  .tk-compare__frame { aspect-ratio: 4 / 3; }
}

@media (max-width: 640px) {
  .tk-sethero::before { background: var(--tk-hero-veil-mob); }
  .tk-sethero__inner { padding-block: calc(56px + var(--tk-header-h-mob)) 64px; min-height: 0; }
  .tk-breadcrumb { margin-bottom: 28px; }
  .tk-sethero__cta { margin-top: 32px; }
  .tk-sethero__cta .tk-btn { width: 100%; }
  .tk-apps, .tk-refit { padding-block: 64px; }
  .tk-setcta { padding-block: 72px; }
  .tk-apps__grid { grid-template-columns: 1fr; margin-top: 32px; }
  .tk-compare { margin-top: 32px; }
  .tk-compare__frame { aspect-ratio: 3 / 4; }
  .tk-compare__tag { top: 12px; font-size: 10px; padding: 6px 12px 5px; }
  .tk-compare__tag--prima { left: 12px; }
  .tk-compare__tag--dopo { right: 12px; }
  .tk-compare__badge { bottom: 12px; padding: 6px 10px; max-width: calc(50% - 20px); }
  .tk-compare__badge--prima { left: 12px; }
  .tk-compare__badge--dopo { right: 12px; }
  .tk-compare__handle { width: 38px; height: 38px; }
  .tk-setcta__buttons .tk-btn { width: 100%; }
}

/* --- Il colore del settore (23/09/2026) -----------------------------------
   Le pillole e il bottone principale prendono il colore del settore
   (--tk-accento, da tokens.css) invece dell'arancione fisso. Solo dentro
   <main>: testata e footer restano del colore di marca, come su tutto il sito.
   Hover e focus ripetono il colore, come ogni bottone del tema: il reset di
   Hello Elementor colora di #336 ogni link al passaggio. */
.tk-main .tk-pill { background: var(--tk-accento); color: var(--tk-accento-su); }

.tk-main .tk-btn--primary { background: var(--tk-accento); color: var(--tk-accento-su); box-shadow: 0 8px 16px var(--tk-accento-ombra); }
.tk-main .tk-btn--primary:hover,
.tk-main .tk-btn--primary:focus,
.tk-main .tk-btn--primary:active { background: var(--tk-accento-deep); color: var(--tk-accento-su); }
.tk-main .tk-btn:focus-visible,
.tk-main a:focus-visible { outline-color: var(--tk-accento); }


/* ==========================================================================
   Applicazioni: l'ultima riga incompleta va al centro (30/10/2026, 1.8.3).
   Con 5 card (3 + 2) le due della seconda riga restavano a sinistra. La
   griglia diventa una riga flessibile che va a capo: stesse colonne
   (--tk-colonne dal template, --tk-colonne-t sotto i 1024px), stessi spazi,
   ma le card che avanzano si centrano. Larghezza di una card =
   (riga - spazi) / colonne.
   ========================================================================== */
.tk-apps__grid {
  --tk-n: var(--tk-colonne, 3);
  --tk-g: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tk-g);
}
.tk-apps__grid > * {
  flex: 0 0 calc((100% - (var(--tk-n) - 1) * var(--tk-g)) / var(--tk-n));
  min-width: 0;
}
@media (max-width: 1024px) { .tk-apps__grid { --tk-n: var(--tk-colonne-t, 2); } }
@media (max-width: 640px)  { .tk-apps__grid { --tk-n: 1; } }