/* ---- Tokeny (paleta uživatele + doplněné čitelné odstíny textu) ---- */
.tl{
  --tl-line:      #C4D6E8;   /* světlá linka spojující kroky */
  --tl-accent:    #8FA4BE;   /* akcent: ikona, vodoznak (nejtmavší z palety) */
  --tl-icon-bg:   #FAFBFC;   /* pozadí kolečka s ikonou */
  --tl-card:      #FAFBFC;   /* pozadí karet */
  --tl-border:    #CED4DF;   /* jemný okraj karet a kolečka ikony */
  --tl-title:     #2E3B4B;   /* nadpisy – tmavý odstín pro WCAG kontrast */
  --tl-text:      #4A5666;   /* popisky */
  --tl-watermark: #C4D6E8;   /* barva čísla-vodoznaku (potlačená) */
 
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1rem;
  font-family: inherit;   /* převezme písmo webu */
  box-sizing: border-box;
}
.tl *,
.tl *::before,
.tl *::after{ box-sizing: border-box; }
 
/* .tl__head{
  text-align: center;
  margin-bottom: 2.5rem;
} */
/* .tl__head h2{
  margin: 0 0 .4rem;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: var(--tl-title);
} */
.tl__head p{
  margin: 0;
  color: var(--tl-text);
}
 
/* ---- Seznam kroků: svislý (mobil first) ---- */
.tl__steps{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.75rem;
  counter-reset: tl;   /* číslování pro vodoznak z CSS */
}
 
.tl__step{
  position: relative;
  counter-increment: tl;
}
 
/* Kolečko pro ikonu / obrázek */
.tl__icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: var(--tl-icon-bg);
  border: 1px solid var(--tl-border);
  overflow: hidden;
}
.tl__icon svg,
.tl__icon img{
  width: 55%;
  height: 55%;
  object-fit: contain;
  display: block;
}
.tl__icon svg{ stroke: var(--tl-accent); }
 
/* Karta s číslem-vodoznakem */
.tl__card{
  position: relative;
  overflow: hidden;
  margin-top: .85rem;
  background: var(--tl-card);
  border: 1px solid var(--tl-border);
  border-radius: 10px;
  padding: 1rem 1.15rem;
}
/* Velké potlačené číslo na pozadí karty */
.tl__card::before{
  content: counter(tl);
  position: absolute;
  right: .35rem;
  bottom: -.9rem;
  font-size: 6.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--tl-watermark);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
/* Obsah karty nad vodoznakem */
.tl__card h3,
.tl__card p{ position: relative; z-index: 1; }
 
.tl__card h3{
  margin: 0 0 .35rem;
  font-size: 1.1rem;
  color: var(--tl-title);
}
.tl__card p{
  margin: 0;
  color: var(--tl-text);
  line-height: 1.55;
}
 
/* Svislá spojnice mezi ikonami (mobil) */
.tl__step:not(:last-child) .tl__icon::after{
  content: "";
  position: absolute;
  left: 1.875rem;          /* střed ikony (3.75rem/2) */
  top: 3.75rem;
  width: 2px;
  height: calc(100% - 3.75rem);
  background: var(--tl-line);
  transform: translateX(-1px);
  z-index: -1;
}
 
/* ---- Desktop: vodorovná osa ---- */
@media (min-width: 760px){
  .tl__steps{
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    padding-top: 1rem;
  }
  .tl__step{
    text-align: center;
    padding-top: 4.75rem;   /* místo pro ikonu nad kartou */
  }
  .tl__icon{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  /* Vodorovná spojnice ve výšce středu ikony */
  .tl__step:not(:last-child)::before{
    content: "";
    position: absolute;
    top: 1.875rem;                    /* střed ikony */
    left: calc(50% + 1.875rem);       /* od okraje ikony */
    width: calc(100% - 3.75rem + 1rem);
    height: 2px;
    background: var(--tl-line);
    z-index: -1;
  }
  .tl__card{ margin-top: 0; height: 100%; }
}
 
/* Přístupnost */
.tl a:focus-visible{ outline: 2px solid var(--tl-title); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
  .tl *{ transition: none !important; animation: none !important; }
}