/* ==========================================================================
   Tack System — Progetti (15/10/2026)
   Scheda di un progetto (single-tk_progetto.php), pagina Progetti
   (template-progetti.php) e "Progetti correlati" nelle pagine settore.

   Accodato solo li' (tk_e_progetti). L'hero, le pillole e il confronto
   prima/dopo della scheda sono quelli di settore.css; la card e' la .tk-card
   di home.css con una variante. Nessun testo e nessuna foto qui: solo forma,
   e ogni colore viene da tokens.css.

   Regola che vale doppio: ogni elemento cliccabile e' vestito anche in
   :hover e :focus, colore compreso — il reset del padre colora di #336 ogni
   link al passaggio e di rosa ogni <button>.
   ========================================================================== */

/* --- Sezioni della scheda ------------------------------------------------- */

.tk-prgsez { position: relative; padding-block: 96px; }
.tk-prgsez--light { background: var(--tk-light); }
.tk-prgsez__eyebrow { margin: 0 0 24px; }

/* Hero: la riga sotto il titolo e' piu' corta del lead di settore. */
.tk-prghero .tk-sethero__lead { max-width: 620px; }

/* --- Numeri ---------------------------------------------------------------- */

.tk-prgnum { background: var(--tk-white); border-bottom: 1px solid var(--tk-border-06); padding-block: 48px 24px; }
.tk-prgnum__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--tk-colonne, 4), minmax(0, 1fr));
}
.tk-prgnum__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding-inline: 8px;
  border-left: 1px solid var(--tk-border-12);
}
.tk-prgnum__item:first-child { border-left: 0; }
.tk-prgnum__valore {
  /* Su una riga sola, come nel mockup: a 36px "1 IMBARCAZIONE" non ci sta
     in un quarto di contenitore, quindi il corpo scende con la larghezza. */
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.1;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tk-ink);
}
.tk-prgnum__etichetta {
  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-ink-400);
}
.tk-prgnum__nota { margin: 24px 0 0; text-align: right; font-size: var(--tk-fs-xs); line-height: var(--tk-lh-xs); color: var(--tk-ink-300); }

/* --- L'esigenza ------------------------------------------------------------ */

.tk-prgesig__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.tk-prgesig__grid--solo-testo { grid-template-columns: minmax(0, 760px); }
.tk-prgesig__titolo { margin: 0 0 24px; color: var(--tk-ink); }
.tk-prgesig__testo { margin: 0; max-width: 520px; color: var(--tk-ink-500); }
.tk-prgesig__media {
  border-radius: var(--tk-r-media);
  overflow: hidden;
  background: var(--tk-media);
  box-shadow: var(--tk-sh-panel);
  aspect-ratio: 4 / 3;
}
.tk-prgesig__media img { width: 100%; height: 100%; object-fit: cover; }

/* --- La soluzione: le fasi ------------------------------------------------ */

.tk-prgfasi { background: var(--tk-white); }
.tk-prgfasi__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.tk-prgfase {
  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-prgfase__media { aspect-ratio: 390 / 220; background: var(--tk-media); }
.tk-prgfase__media img { width: 100%; height: 100%; object-fit: cover; }
.tk-prgfase__body { padding: 24px; }
.tk-prgfase__num {
  display: block;
  font-size: var(--tk-fs-eyebrow);
  line-height: var(--tk-lh-eyebrow);
  letter-spacing: var(--tk-ls-eyebrow);
  font-weight: 700;
  color: var(--tk-accento);
  margin-bottom: 8px;
}
.tk-prgfase__titolo { margin: 0 0 6px; color: var(--tk-ink); text-transform: uppercase; }
.tk-prgfase__testo { margin: 0; color: var(--tk-ink-500); }

/* --- Il progetto per immagini --------------------------------------------- */

.tk-prggal__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tk-prgfoto { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.tk-prgfoto__media {
  aspect-ratio: 390 / 220;
  border-radius: var(--tk-r-card);
  overflow: hidden;
  background: var(--tk-media);
}
.tk-prgfoto__media img { width: 100%; height: 100%; object-fit: cover; }
.tk-prgfoto__etichetta {
  font-style: normal;          /* il reset del padre mette le didascalie in corsivo */
  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-ink);
}

/* --- Prima e dopo + chiusura ----------------------------------------------- */

.tk-prgcfr { background: var(--tk-white); }
.tk-prgcfr .tk-compare { margin-top: 0; }
.tk-prgcfr__item + .tk-prgcfr__item { margin-top: 48px; }
.tk-prgcfr__chiusura { text-align: center; margin-top: 56px; }
.tk-prgcfr__titolo { margin: 0 auto; max-width: 760px; color: var(--tk-ink); }
.tk-prgcfr__testo { margin: 16px auto 0; max-width: 620px; color: var(--tk-ink-500); }

/* --- Fascia finale: come quella di settore, con un bottone solo ----------- */

.tk-prgcta.tk-setcta { padding-block: 96px; }

/* --- Card dei progetti ----------------------------------------------------- */

.tk-prgcards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 20px;
}
.tk-prgcards--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tk-card--progetto .tk-card__media { height: 192px; }
.tk-prgcards--tre .tk-card--progetto .tk-card__media { height: 220px; }

/* Il badge del settore sulla foto: testo, non icona. Stesso posto del
   badge della card settore. */
.tk-card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 6px 12px 5px;
  border-radius: var(--tk-r-pill);
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tk-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.tk-card__tag--orange { background: var(--tk-orange); }
.tk-card__tag--green  { background: var(--tk-green); }
.tk-card__tag--yellow { background: var(--tk-yellow); color: var(--tk-ink); }
.tk-card__tag--purple { background: var(--tk-purple); }

/* Il link colorato in fondo alla card ripete il colore al passaggio: senza,
   il reset del padre lo fa blu. */
.tk-card--progetto:hover .tk-card__link.tk-accent,
.tk-card--progetto:focus .tk-card__link.tk-accent               { color: var(--tk-orange); }
.tk-card--progetto:hover .tk-card__link.tk-accent-green,
.tk-card--progetto:focus .tk-card__link.tk-accent-green         { color: var(--tk-green); }
.tk-card--progetto:hover .tk-card__link.tk-accent-yellow,
.tk-card--progetto:focus .tk-card__link.tk-accent-yellow        { color: var(--tk-yellow); }
.tk-card--progetto:hover .tk-card__link.tk-accent-purple,
.tk-card--progetto:focus .tk-card__link.tk-accent-purple        { color: var(--tk-purple); }
.tk-card--progetto:focus-visible { outline: 2px solid var(--tk-accento, var(--tk-orange)); outline-offset: 3px; }

/* --- Correlati nella pagina settore --------------------------------------- */

.tk-correlati__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.tk-correlati__titolo { margin: 0; color: var(--tk-ink); }
.tk-correlati__link,
.tk-correlati__link:hover,
.tk-correlati__link:focus,
.tk-correlati__link:active {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-size: var(--tk-fs-xs);
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--tk-ink);
}
.tk-correlati__link .tk-i { transition: transform var(--tk-ease); }
.tk-correlati__link:hover .tk-i { transform: translateX(3px); }

/* --- Pagina Progetti: filtri e paginazione ------------------------------- */

.tk-archivio { padding-block: 64px 96px; }
.tk-filtri { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.tk-filtro,
.tk-filtro:hover,
.tk-filtro:focus,
.tk-filtro:active {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid var(--tk-border-ink-12);
  border-radius: var(--tk-r-pill);
  background: var(--tk-white);
  font-size: var(--tk-fs-ui);
  line-height: var(--tk-lh-ui);
  font-weight: 600;
  color: var(--tk-ink);
  transition: background var(--tk-ease), border-color var(--tk-ease), color var(--tk-ease);
}
.tk-filtro:hover,
.tk-filtro:focus { border-color: var(--tk-ink); }
.tk-filtro:focus-visible { outline: 2px solid var(--tk-orange); outline-offset: 3px; }
.tk-filtro.is-attivo,
.tk-filtro.is-attivo:hover,
.tk-filtro.is-attivo:focus { background: var(--tk-ink); border-color: var(--tk-ink); color: var(--tk-white); }

.tk-archivio__vuoto { color: var(--tk-ink-400); }

.tk-paginazione { margin-top: 48px; }
.tk-paginazione .page-numbers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.tk-paginazione .page-numbers li { margin: 0; }
.tk-paginazione a.page-numbers,
.tk-paginazione a.page-numbers:hover,
.tk-paginazione a.page-numbers:focus,
.tk-paginazione a.page-numbers:active,
.tk-paginazione span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: 12px;
  border: 1px solid var(--tk-border-ink-12);
  border-radius: var(--tk-r-pill);
  background: var(--tk-white);
  font-size: var(--tk-fs-ui);
  font-weight: 600;
  color: var(--tk-ink);
}
.tk-paginazione a.page-numbers:hover,
.tk-paginazione a.page-numbers:focus { border-color: var(--tk-ink); }
.tk-paginazione .page-numbers.current { background: var(--tk-ink); border-color: var(--tk-ink); color: var(--tk-white); }
.tk-paginazione .page-numbers.dots { border-color: transparent; background: transparent; }

/* --- Scorrimento orizzontale sul telefono (fasi, galleria) ---------------- */
/* Sopra i 640px .tk-scorri e' una griglia normale e i comandi non esistono.
   Sotto, diventa una riga che scorre di lato con lo scatto sugli elementi,
   e scorri.js aggiunge frecce e pallini. Senza JavaScript resta scorrevole
   col dito: i comandi sono un aiuto, non un requisito. */

.tk-scorri__nav { display: none; }

@media (max-width: 640px) {
  .tk-scorri {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* la riga sfora il contenitore fino al bordo dello schermo, cosi' si
       intuisce che continua */
    margin-inline: calc(-1 * var(--tk-gutter));
    padding-inline: var(--tk-gutter);
    scroll-padding-inline: var(--tk-gutter);
  }
  .tk-scorri::-webkit-scrollbar { display: none; }
  .tk-scorri__item { flex: 0 0 82%; scroll-snap-align: start; }

  .tk-scorri__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
  }
  .tk-scorri__dots { display: flex; gap: 8px; }
  .tk-scorri__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tk-border-ink-25);
    transition: background var(--tk-ease), transform var(--tk-ease);
  }
  .tk-scorri__dot.is-attivo { background: var(--tk-accento, var(--tk-orange)); transform: scale(1.25); }
  .tk-scorri__frecce { display: flex; gap: 8px; }
  .tk-scorri__freccia,
  .tk-scorri__freccia:hover,
  .tk-scorri__freccia:focus,
  .tk-scorri__freccia:active {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--tk-border-ink-25);
    border-radius: 50%;
    background: var(--tk-white);
    color: var(--tk-ink);
    cursor: pointer;
    font: inherit;
  }
  .tk-scorri__freccia:hover,
  .tk-scorri__freccia:focus { border-color: var(--tk-ink); }
  .tk-scorri__freccia:focus-visible { outline: 2px solid var(--tk-accento, var(--tk-orange)); outline-offset: 2px; }
  .tk-scorri__freccia[disabled] { opacity: 0.35; cursor: default; }
  .tk-scorri__freccia svg { width: 16px; height: 16px; }
  .tk-scorri__freccia--prev svg { transform: rotate(180deg); }
}

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

@media (max-width: 1024px) {
  .tk-prgsez { padding-block: 80px; }
  .tk-prgcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-prgcards--tre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-prgcards--tre .tk-card--progetto .tk-card__media { height: 192px; }
  .tk-prgesig__grid { gap: 40px; }
  .tk-prgfasi__grid, .tk-prggal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-prgnum__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .tk-prgnum__item:nth-child(odd) { border-left: 0; }
}

@media (max-width: 640px) {
  .tk-prgsez { padding-block: 64px; }
  .tk-prgsez__eyebrow { margin-bottom: 20px; }
  .tk-prgnum { padding-block: 40px 20px; }
  .tk-prgnum__grid { row-gap: 24px; }
  /* Due colonne da ~155px: "1 IMBARCAZIONE" in grassetto maiuscolo ci sta
     fino a 17px circa, e sotto va a capo invece di sforare. */
  .tk-prgnum__valore { font-size: clamp(15px, 4.4vw, 20px); line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
  .tk-prgnum__etichetta { font-size: 10px; letter-spacing: 0.8px; }
  .tk-prgnum__nota { text-align: left; margin-top: 20px; }
  .tk-prgesig__grid { grid-template-columns: 1fr; gap: 28px; }
  .tk-prgesig__media { aspect-ratio: 3 / 2; }
  .tk-prgcfr__item + .tk-prgcfr__item { margin-top: 32px; }
  .tk-prgcfr__chiusura { margin-top: 40px; }
  .tk-prgcta.tk-setcta { padding-block: 72px; }
  .tk-prgcards, .tk-prgcards--tre { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .tk-card--progetto .tk-card__media,
  .tk-prgcards--tre .tk-card--progetto .tk-card__media { height: 104px; }
  .tk-card__tag { top: 8px; left: 8px; padding: 4px 8px 3px; font-size: 9px; letter-spacing: 0.6px; }
  .tk-correlati__head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
  .tk-archivio { padding-block: 40px 64px; }
  .tk-filtri { gap: 8px; margin-bottom: 28px; }
  .tk-filtro { padding: 8px 14px; font-size: 13px; }
  .tk-paginazione { margin-top: 32px; }
}