/* =============================================================
   SVIGRAD — "Kako nastaje kvalitetna termofasada?"
   Premium educational process timeline (6 steps).
   Self-contained; white bg, subtle grey accents, brand blue.
   ============================================================= */

.tf-section {
   background: #ffffff;
   color: #222222;
   padding: 110px 0 120px;
   position: relative;
}

.tf-inner {
   max-width: 1180px;
   margin-inline: auto;
   padding-inline: 2rem;
}

/* ---------- Section header ---------- */
.tf-head {
   max-width: 760px;
   margin: 0 auto 84px;
   text-align: center;
}

.tf-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 0.55rem;
   font-size: 0.76rem;
   font-weight: 700;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: #1E6FA8;
   margin-bottom: 1.25rem;
}

.tf-eyebrow::before,
.tf-eyebrow::after {
   content: "";
   width: 26px;
   height: 1px;
   background: #cdd3d0;
}

.tf-title {
   font-size: clamp(2rem, 4vw, 3rem);
   font-weight: 700;
   line-height: 1.1;
   letter-spacing: -0.015em;
   color: #1a1a1a;
   margin-bottom: 1.4rem;
   text-wrap: balance;
}

.tf-intro {
   font-size: 1.15rem;
   line-height: 1.7;
   color: #5f6562;
   text-wrap: pretty;
}

/* ---------- Timeline ---------- */
.tf-timeline {
   position: relative;
}

/* central spine (desktop) */
.tf-timeline::before {
   content: "";
   position: absolute;
   top: 12px;
   bottom: 12px;
   left: 50%;
   width: 1px;
   background: linear-gradient(180deg, transparent, #e2e5e3 8%, #e2e5e3 92%, transparent);
   transform: translateX(-50%);
}

/* ---------- Step row ---------- */
.tf-step {
   position: relative;
   display: grid;
   grid-template-columns: 1fr 88px 1fr;
   align-items: start;
   column-gap: 0;
   margin-bottom: 96px;
}

.tf-step:last-child {
   margin-bottom: 0;
}

/* node on the spine */
.tf-node {
   grid-column: 2;
   grid-row: 1;
   justify-self: center;
   width: 56px;
   height: 56px;
   border-radius: 9999px;
   background: #ffffff;
   border: 1px solid #e2e5e3;
   box-shadow: 0 8px 24px -12px rgba(34, 34, 34, .25);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #1E6FA8;
   z-index: 2;
}

.tf-node svg {
   width: 24px;
   height: 24px;
   stroke: currentColor;
   stroke-width: 1.7;
   fill: none;
   stroke-linecap: round;
   stroke-linejoin: round;
}

/* photo + content cells */
.tf-photo {
   position: relative;
   border-radius: 0.75rem;
   overflow: hidden;
   background: #f1f2f1;
   box-shadow: 0 30px 60px -34px rgba(34, 34, 34, .45);
   aspect-ratio: 4 / 3;
}

.tf-photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.tf-step:hover .tf-photo img {
   transform: scale(1.04);
}

.tf-photo__num {
   position: absolute;
   top: 14px;
   left: 16px;
   font-family: Georgia, "Times New Roman", serif;
   font-size: 1rem;
   font-weight: 700;
   letter-spacing: 0.08em;
   color: #ffffff;
   background: rgba(30, 111, 168, .92);
   padding: 0.3rem 0.7rem;
   border-radius: 0.3rem;
   backdrop-filter: blur(2px);
}

.tf-content {
   padding-block: 0;
}

.tf-kicker {
   font-size: 0.78rem;
   font-weight: 700;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: #9aa19d;
   margin-bottom: 0.6rem;
}

.tf-step__title {
   font-size: 1.6rem;
   font-weight: 600;
   line-height: 1.2;
   color: #1a1a1a;
   margin-bottom: 0.8rem;
   letter-spacing: -0.01em;
}

.tf-step__desc {
   font-size: 1.0625rem;
   line-height: 1.75;
   color: #5f6562;
   text-wrap: pretty;
   max-width: 42ch;
}

/* ---------- Alternating sides (desktop) ---------- */
.tf-step:nth-child(odd) .tf-photo {
   grid-column: 1;
   grid-row: 1;
}

.tf-step:nth-child(odd) .tf-content {
   grid-column: 3;
   grid-row: 1;
   padding-left: 3.5rem;
}

.tf-step:nth-child(even) .tf-photo {
   grid-column: 3;
   grid-row: 1;
}

.tf-step:nth-child(even) .tf-content {
   grid-column: 1;
   grid-row: 1;
   text-align: right;
   padding-right: 3.5rem;
   justify-self: end;
}

.tf-step:nth-child(even) .tf-step__desc {
   margin-left: auto;
}

/* ---------- Entrance animation ---------- */
@media (prefers-reduced-motion: no-preference) {
   .tf-step {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .7s ease, transform .7s ease;
   }

   .tf-step.is-visible {
      opacity: 1;
      transform: none;
   }
}

/* ---------- Footer note / CTA strip ---------- */
.tf-foot {
   margin-top: 96px;
   padding-top: 40px;
   border-top: 1px solid #ececec;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 1.5rem;
}

.tf-foot__text {
   font-size: 1.05rem;
   color: #5f6562;
   max-width: 46ch;
   line-height: 1.6;
}

.tf-foot__text strong {
   color: #1a1a1a;
   font-weight: 600;
}

.tf-cta {
   display: inline-flex;
   align-items: center;
   gap: 0.6rem;
   padding: 0.95rem 1.7rem;
   border-radius: 0.4rem;
   background: #1E6FA8;
   color: #ffffff;
   font-weight: 600;
   font-size: 1rem;
   white-space: nowrap;
   box-shadow: 0 14px 26px -12px rgba(30, 111, 168, .6);
   transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.tf-cta:hover {
   background: #165C8C;
   transform: translateY(-2px);
   box-shadow: 0 18px 30px -12px rgba(30, 111, 168, .7);
}

.tf-cta svg {
   width: 1.05rem;
   height: 1.05rem;
   stroke: currentColor;
   stroke-width: 2;
   fill: none;
   stroke-linecap: round;
   stroke-linejoin: round;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
   .tf-section {
      padding: 80px 0 90px;
   }

   .tf-head {
      margin-bottom: 56px;
   }

   /* spine moves to the left */
   .tf-timeline::before {
      left: 27px;
      transform: none;
   }

   .tf-step {
      grid-template-columns: 56px 1fr;
      column-gap: 1.5rem;
      row-gap: 1.25rem;
      margin-bottom: 56px;
   }

   .tf-node {
      grid-column: 1;
      grid-row: 1;
      width: 54px;
      height: 54px;
      align-self: start;
   }

   /* reset alternating: everything in the right column, photo above text */
   .tf-step:nth-child(odd) .tf-photo,
   .tf-step:nth-child(even) .tf-photo {
      grid-column: 2;
      grid-row: 1;
   }

   .tf-step:nth-child(odd) .tf-content,
   .tf-step:nth-child(even) .tf-content {
      grid-column: 2;
      grid-row: 2;
      text-align: left;
      padding: 0;
      justify-self: stretch;
   }

   .tf-step:nth-child(even) .tf-step__desc {
      margin-left: 0;
   }

   .tf-step__desc {
      max-width: none;
   }

   .tf-foot {
      flex-direction: column;
      align-items: flex-start;
   }
}