/* ═══════════════════════════════════════════════
   TEODORA TIMELINE  –  teodora-timeline.css
═══════════════════════════════════════════════ */

#tw, #tw * { box-sizing: border-box; margin: 0; padding: 0; }

#tw {
  width: 720px;
  max-width: 96vw;
  margin: 0 auto;
  padding: 0 0 0px;
}

/* ── HEADER ── */
.tw-hdr {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  flex-wrap: wrap;
  padding: 60px 20px 80px;
}
.tw-hdr__name h1 {
  font-size: 26px;
  color: #567472;
  font-weight: 700;
  letter-spacing: -0.3px;
  border-bottom: 2.5px solid #567472;
  padding-bottom: 5px;
  display: inline-block;
}
.tw-hdr__name h1 em { font-weight: 400; font-style: italic; color: #567472; }
.tw-hdr__li { margin-top: 14px; }
.tw-hdr__li a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #567472;
  color: #fff;
  border-radius: 6px;
  font-size: 19px;
  padding: 4px 12px;
  text-decoration: none;
  font-weight: 700;
  transition: background 200ms;
}
.tw-hdr__li a:hover { background: #3a5251; }
.tw-hdr__photo { text-align: center; }
.tw-hdr__photo img { border-radius: 12px; display: block; max-width: 260px; width: 100%; }
.tw-hdr__photo figcaption { font-size: 11.5px; font-style: italic; color: #a8b8b7; margin-top: 5px; }

/* ── FLOW ── */
.tw-flow { position: relative; }

.tw-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

/* ── ROWS  (spatiere in pixeli) ── */
.tw-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 360px;
  padding: 0 8px;
  margin-bottom: 280px;
  position: relative;
  z-index: 2;
}
.tw-row:last-child { margin-bottom: 0; }

/* ── CARD ── */
.tw-card {
  background: rgb(255 255 255 / 80%);
  border: 1.5px solid #c4d8d7;
  border-radius: 18px;
  padding: 26px 28px !important;
  font-size: 15px;
  line-height: 1.8;
  color: #3d4e4d;
  box-shadow: 0 6px 32px rgba(86,116,114,.09);
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms ease, transform 700ms ease;
  position: relative;
  backdrop-filter: blur(2px);
  top: 20px;
}
.tw-card.vis { opacity: 1; transform: none; }
.tw-card:hover { box-shadow: 0 12px 40px rgba(86,116,114,.18); }

/* ── ICON WRAPPER ── */
.tw-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 500ms ease 100ms;
}
.tw-icon.vis { opacity: 1; }

/* ── ICON GROUP
   Toate iconitele — singulare SI grupuri —
   acelasi background frosted glass ── */
.tw-ig {
  background: #dff2f1;
  /* backdrop-filter: blur(2px); */
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(154, 189, 188, 0.55);
  border-radius: 18px;
  padding: 18px 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.tw-ig img {
  display: block;
  object-fit: contain;
  filter: invert(38%) sepia(18%) saturate(600%) hue-rotate(140deg) brightness(82%);
}

/* single icon */
.tw-ig > img { width: 80px; height: 80px; }

/* cluster */
.tw-cluster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 118px;
  justify-items: center;
  align-items: center;
  gap: 4px;
}
.tw-cluster img { width: 46px; height: 46px; }
.tw-cluster img:nth-child(2) { margin-top: 6px; }
.tw-cluster img:nth-child(3) { margin-top: -4px; }
.tw-cluster img:nth-child(5) { grid-column: 1 / -1; margin-top: -10px; }

/* maze */
.tw-maze img { width: 92px; height: 92px; }

/* dual */
.tw-dual { display: flex; gap: 14px; align-items: flex-end; }
.tw-dual img { width: 58px; height: 58px; }

/* ── SVG ── */
.tw-path {
  fill: none;
  stroke: #9bbdbc;
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tw-head { fill: #9bbdbc; opacity: 0; transition: opacity 300ms; }
.tw-head.vis { opacity: 1; }

/* ── MOBILE ── */
@media (max-width: 520px) {
  .tw-row {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
    margin-bottom: 56px;
    min-height: unset;
  }
  .tw-card, .tw-icon {opacity: 1 !important;transform: none !important;margin-top: 30px !important;}
  .tw-svg {/* display: none; */}
  .tw-card {
    position: static;
}

}

.tw-icon:not(#twI3) img {
    padding: 5px !important;
}