/* STATUS WRAPPER */
.status-wrapper { 
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  padding: 40px 20px;
  background: transparent;
}

/* STATUS GRID 2x2 */
#status-steps {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px 80px;
  justify-items: center;

  position: relative; /* pro absolutní linky */
  z-index: 1;
}

/* RESPONSIVE – 1 sloupec */
@media (max-width: 768px) {
  #status-steps {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* Jednotlivý krok */
.status-step {
  text-align: center;
  max-width: 340px;
  margin: 0 auto;

  position: relative;
  z-index: 8; /* nad linkami */
}

.status-figure {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;

  position: relative;
  z-index: 10;
}

.status-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.status-date,
.status-desc {
  font-size: 0.9rem;
  color: #666;
}

.status-date {
  margin-bottom: 6px;
}

/* Rámeček kolem celé timeline */
.bordered-status {
  width: 100%;
  max-width: 1100px;
  margin: 20px auto;
  padding: 35px 40px;

  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 16px;

  box-shadow: 
    0 2px 4px rgba(0,0,0,0.06),
    inset 0 0 20px rgba(0,0,0,0.03);
}

/* ============================================
   LINKY TIMELINE
   ============================================ */

#status-steps .line-top-left,
#status-steps .line-top-right,
#status-steps .line-bottom-left,
#status-steps .line-bottom-right {
  position: absolute;
  height: 2px;
  background: #d0d0d0;
  opacity: 0;
  transition: opacity .15s ease-out;
  pointer-events: none;
  z-index: 5;
}

/* Horní linky */
#status-steps .line-top-left,
#status-steps .line-top-right {
  top: 36px;
}

#status-steps .line-top-left  { left: 0;  width: 50%; }
#status-steps .line-top-right { right: 0; width: 50%; }

/* Spodní linky */
#status-steps .line-bottom-left,
#status-steps .line-bottom-right {
  top: 268px;
}

#status-steps .line-bottom-left  { left: 0;  width: 50%; }
#status-steps .line-bottom-right { right: 0; width: 50%; }

/* Aktivace JS */
.line-visible {
  opacity: 1 !important;
}



/* ======================================
   PŘEPÍNÁNÍ DESKTOP / MOBIL STATUS BOXŮ
   ====================================== */

/* výchozí stav – desktop */
.status-mobile {
    display: none;
}

/* mobil */
@media (max-width: 768px) {
    .status-desktop {
        display: none;
    }

    .status-mobile {
        display: block;
    }
}

/* ======================================
   MOBILNÍ STATUS TIMELINE – LAYOUT
   ====================================== */

@media (max-width: 768px) {

    /* kontejner kroků */
    #status-steps-mobile {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding-left: 48px; /* místo pro čáru + ikony */
    }


    /* MOBIL – jeden krok */
    .status-step-mobile {
        display: grid;
        grid-template-columns:36px 1fr auto;
        column-gap: 16px;

        width: 100%;
        align-items: start;
        box-sizing: border-box;
    }

    /* ikona */
    .status-step-mobile .status-figure {
        grid-column: 1;
        justify-self: center;

        transform: translateX(-50%);

        position: relative;
        z-index: 3;
    }

    /* prostřední sloupec – TEXT */
    .status-step-mobile .status-content {
        grid-column: 2;
        text-align: left;
        width: 100%;
    }

    /* title */
    .status-step-mobile .status-title {
        font-weight: 600;
        margin-bottom: 4px;
    }

    /* desc */
    .status-step-mobile .status-desc {
        font-size: 0.9rem;
        color: #6b7280;
        line-height: 1.3;
    }

    /* datum – VŽDY doprava */
    .status-step-mobile .status-date {
        grid-column: 3;
        text-align: right;
        white-space: nowrap;
        justify-self: end;
        font-size: 0.85rem;
        color: #6b7280;
    }

    /* svislá timeline čára – mobil */
    #status-steps-mobile .status-line {
        position: absolute;
        left: 48px;              /* ✔ ověřená hodnota */
        width: 2px;
        background: #c8c8c8;
        border-radius: 2px;

        top: 0;
        height: 0;               /* nastaví JS */
        opacity: 0;
        transition: opacity .2s ease;
        z-index: 1;
    }
}