/* ==========================================================================
   Journey Section Block
   ========================================================================== */

/* --- Section --- */
.jrny-section {
  padding: 60px 0 80px;
  overflow: hidden;
}

/* --- Header: title pill + subtitle --- */
.jrny-header {
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 60px;
}

.jrny-title-wrap {
  background-color: #b9ff66;
  border-radius: 7px;
  padding: 0 7px;
  flex-shrink: 0;
}

.jrny-title {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: #000000;
  margin: 0;
}

.jrny-subtitle {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: #000000;
  margin: 0;
  max-width: 640px;
}

/* ==========================================================================
   Timeline
   Snake SVG is absolutely centered; items stack in a flex column, each on
   its own row, alternating to the left half or right half.
   ========================================================================== */

.jrny-timeline {
  position: relative;
}

/* Snake connector — centered strip spanning full timeline height */
.jrny-snake-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  /* 465 / 1240 ≈ 37.5% — matches SVG viewBox proportions at standard content width */
  width: clamp(200px, 37.5%, 465px);
  pointer-events: none;
  z-index: 0;
}

.jrny-snake {
  display: block;
  width: 100%;
  height: 100%;
}

/* Oval decorations */
.jrny-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.jrny-deco--left {
  left: -80px;
  top: 30%;
  transform: translateY(-50%);
}

.jrny-deco--right {
  right: -80px;
  top: 70%;
  transform: translateY(-50%);
}

.jrny-deco-img {
  display: block;
  width: 313px;
  height: auto;
}

/* ==========================================================================
   Items — flex column so every item gets its own row.
   Left items anchor to the left half; right items anchor to the right half.
   Width ≈ 47 % matches the original Figma card widths (600 / 1240 ≈ 48 %).
   ========================================================================== */

.jrny-items {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.jrny-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 47%;
  min-height: 240px;    /* CARD_H — must match PHP constant */
  padding-bottom: 70px; /* GAP_H  — must match PHP constant */
}

.jrny-item--left {
  flex-direction: row;
  margin-right: auto; /* anchor left */
}

.jrny-item--right {
  flex-direction: row;
  margin-left: auto;  /* anchor right */
}

/* Year label */
.jrny-year {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000000;
  flex-shrink: 0;
  min-width: 90px;
  padding-top: 8px;
}

/* Dark card */
.jrny-card {
  background-color: #191a23;
  border-radius: 45px;
  border: 1px solid #191a23;
  border-bottom: 5px solid #191a23;
  padding: 40px 48px;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 0;
}

/* Star icon — hidden on desktop, shown on mobile inside the card */
.jrny-card-icon {
  display: none;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.jrny-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.jrny-card-title {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 16px;
  line-height: 1.3;
}

.jrny-card-desc {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
}

/* ==========================================================================
   Responsive — desktop tweaks
   ========================================================================== */

@media (max-width: 1279px) {
  .jrny-title { font-size: 2.25rem; }
  .jrny-card  { padding: 32px 36px; }
  .jrny-year  { font-size: 3rem; min-width: 76px; }
}

@media (max-width: 1023px) {
  .jrny-header { gap: 28px; margin-bottom: 48px; }
  .jrny-item   { width: 50%; }
  .jrny-card   { padding: 28px 30px; border-radius: 32px; }
  .jrny-year   { font-size: 2.5rem; min-width: 68px; }
  .jrny-deco   { display: none; }
}

/* ==========================================================================
   Mobile — single column with vertical green line + star dot markers
   ========================================================================== */

@media (max-width: 767px) {
  .jrny-section {
    padding: 40px 0 60px;
  }

  /* Header stacks vertically */
  .jrny-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 36px;
  }

  .jrny-subtitle { max-width: 100%; }

  /* Hide snake SVG — replaced by vertical CSS line */
  .jrny-snake-wrap { display: none; }

  /* Vertical green line running down the left side of the items */
  .jrny-timeline::before {
    content: '';
    position: absolute;
    left: calc(28px - 1px); /* center on the 18px star dot */
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--jrny-line-color, #b9ff66);
    z-index: 0;
  }

  /* Indent items to make room for the line + dot */
  .jrny-items {
    padding-left: 56px;
  }

  /* Reset desktop width / margin; each item is full width, stacked */
  .jrny-item,
  .jrny-item--left,
  .jrny-item--right {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    flex-direction: column; /* year on top, card below */
    gap: 10px;
    padding-bottom: 28px;
    min-height: auto;
    position: relative;
  }

  /* Star dot marker on the vertical line, aligned to each item */
  .jrny-item::before {
    content: '';
    position: absolute;
    /* center on the line: line at left=27px relative to .jrny-timeline,
       item starts at left=56px, so offset = 27 - 56 = -29px; star is 18px wide → -29 - 9 = -38px */
    left: -38px;
    top: 4px;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.651 5.1856L35.2521 0L30.1163 17.651L35.2521 35.2521L17.651 30.1163L0 35.2521L5.1856 17.651L0 0L17.651 5.1856Z' fill='%23B9FF66'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
  }

  /* Year: above the card, normal text size */
  .jrny-year {
    font-size: 2rem;
    min-width: auto;
    padding-top: 0;
  }

  /* Card: row layout — star icon left, title+desc right */
  .jrny-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    padding: 32px 28px;
    border-radius: 28px;
    width: 100%;
  }

  /* Show the green star icon inside the card */
  .jrny-card-icon {
    display: block;
    margin-top: 2px;
  }

  .jrny-card-title {
    font-size: 1.1rem;
    margin-bottom: 12px;
  }

  .jrny-card-desc { font-size: 0.95rem; }

  .jrny-title { font-size: 1.75rem; }
}

@media (max-width: 575px) {
  .jrny-items  { padding-left: 48px; }
  .jrny-year   { font-size: 1.75rem; }
  .jrny-card   { padding: 24px 20px; border-radius: 24px; gap: 16px; }
  .jrny-title  { font-size: 1.5rem; }

  .jrny-item::before {
    left: -29px;
  }
}