/* ──────────────────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.itinerary
   Classification : UI Atom | Timeline Renderer | Token-Scoped
   Version        : 1.0.0 | Genesis-Final • Layered • Token-Scoped
   File           : /tools/modules/ui.itinerary/ui.itinerary.css
   Maintainer     : DΛREΛKT_ UI TEAM
   ────────────────────────────────────────────────────────────────────────────── */

@layer atoms {

  /* ─── Tokens ───────────────────────────────────────────────────────────── */
  :root {
    --ui-itinerary-marker-size: 40px;
    --ui-itinerary-marker-bg: #F26522;
    --ui-itinerary-marker-fg: #fff;
    --ui-itinerary-marker-font-size: 1rem;
    --ui-itinerary-line-color: #ddd;
    --ui-itinerary-line-width: 2px;
    --ui-itinerary-content-gap: 1.25rem;
    --ui-itinerary-title-fs: 1.5rem;
    --ui-itinerary-title-fw: 700;
    --ui-itinerary-title-fg: inherit;
    --ui-itinerary-step-title-fs: 1.125rem;
    --ui-itinerary-step-title-fw: 600;
    --ui-itinerary-step-desc-fg: #555;
    --ui-itinerary-image-radius: 8px;
    --ui-itinerary-image-max-w: 100%;
    --ui-itinerary-step-gap: 0;
    --ui-itinerary-step-pad-bottom: 2rem;
    --ui-itinerary-reveal-duration: 0.4s;
  }

  /* ─── Wrapper ──────────────────────────────────────────────────────────── */
  .ui-itinerary__wrap {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* ─── Section Title ────────────────────────────────────────────────────── */
  .ui-itinerary__title {
    margin: 0 0 1.5rem 0;
    font-size: var(--ui-itinerary-title-fs);
    font-weight: var(--ui-itinerary-title-fw);
    color: var(--ui-itinerary-title-fg);
  }

  /* ─── Ordered List (reset) ─────────────────────────────────────────────── */
  .ui-itinerary__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ui-itinerary-step-gap);
  }

  /* ─── Step Item ────────────────────────────────────────────────────────── */
  .ui-itinerary__step {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-itinerary-content-gap);
    padding-bottom: var(--ui-itinerary-step-pad-bottom);
    position: relative;

    /* Reveal animation */
    opacity: 0;
    transform: translateY(12px);
    animation: uiItineraryReveal var(--ui-itinerary-reveal-duration) ease forwards;
  }

  /* Stagger animation per step */
  .ui-itinerary__step:nth-child(1)  { animation-delay: 0s; }
  .ui-itinerary__step:nth-child(2)  { animation-delay: 0.08s; }
  .ui-itinerary__step:nth-child(3)  { animation-delay: 0.16s; }
  .ui-itinerary__step:nth-child(4)  { animation-delay: 0.24s; }
  .ui-itinerary__step:nth-child(5)  { animation-delay: 0.32s; }
  .ui-itinerary__step:nth-child(6)  { animation-delay: 0.40s; }
  .ui-itinerary__step:nth-child(7)  { animation-delay: 0.48s; }
  .ui-itinerary__step:nth-child(8)  { animation-delay: 0.56s; }
  .ui-itinerary__step:nth-child(9)  { animation-delay: 0.64s; }
  .ui-itinerary__step:nth-child(10) { animation-delay: 0.72s; }

  @keyframes uiItineraryReveal {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ─── Timeline Variant: Connecting Line ────────────────────────────────── */
  .ui-itinerary__list[data-variant="timeline"] .ui-itinerary__step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(var(--ui-itinerary-marker-size) / 2);
    top: var(--ui-itinerary-marker-size);
    bottom: 0;
    width: var(--ui-itinerary-line-width);
    background: var(--ui-itinerary-line-color);
    transform: translateX(-50%);
  }

  /* ─── Marker (Numbered Circle) ─────────────────────────────────────────── */
  .ui-itinerary__marker {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ui-itinerary-marker-size);
    height: var(--ui-itinerary-marker-size);
    border-radius: 50%;
    background: var(--ui-itinerary-marker-bg);
    position: relative;
    z-index: 1;
  }

  .ui-itinerary__number {
    font-size: var(--ui-itinerary-marker-font-size);
    font-weight: 700;
    color: var(--ui-itinerary-marker-fg);
    line-height: 1;
    user-select: none;
  }

  /* ─── Content Area ─────────────────────────────────────────────────────── */
  .ui-itinerary__content {
    flex: 1;
    min-width: 0;
    padding-top: 0.35rem; /* Align text baseline with marker center */
  }

  .ui-itinerary__step-title {
    margin: 0 0 0.35rem 0;
    font-size: var(--ui-itinerary-step-title-fs);
    font-weight: var(--ui-itinerary-step-title-fw);
    color: inherit;
  }

  .ui-itinerary__step-desc {
    margin: 0 0 0.75rem 0;
    line-height: 1.6;
    color: var(--ui-itinerary-step-desc-fg);
  }

  .ui-itinerary__step-image {
    display: block;
    max-width: var(--ui-itinerary-image-max-w);
    height: auto;
    border-radius: var(--ui-itinerary-image-radius);
    margin-top: 0.5rem;
  }

  /* ─── Clamp / Read More ────────────────────────────────────────────────── */
  .ui-itinerary__step-desc-wrap {
    position: relative;
  }

  .ui-itinerary__step-desc-wrap[data-clamp] .ui-itinerary__step-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: var(--ui-itinerary-clamp-lines, 4);
  }

  .ui-itinerary__step-desc-wrap.is-expanded .ui-itinerary__step-desc {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  .ui-itinerary__read-more {
    display: none;
    background: none;
    border: none;
    padding: 0.25rem 0;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ui-itinerary-marker-bg, #F26522);
    opacity: 0.85;
    transition: opacity 0.2s ease;
  }
  .ui-itinerary__read-more:hover {
    opacity: 1;
  }

  /* Show button only when content is actually clamped */
  .ui-itinerary__step-desc-wrap[data-clamp] .ui-itinerary__read-more {
    display: inline-block;
  }
  .ui-itinerary__step-desc-wrap.is-expanded .ui-itinerary__read-more {
    display: inline-block;
  }
  /* Hide when not needed (JS adds .no-clamp if text fits) */
  .ui-itinerary__step-desc-wrap.no-clamp .ui-itinerary__read-more {
    display: none;
  }

  /* ─── Numbered Variant (no connecting line, simpler look) ──────────────── */
  .ui-itinerary__list[data-variant="numbered"] .ui-itinerary__step::after {
    display: none;
  }

  /* ─── Responsive: Mobile ───────────────────────────────────────────────── */
  @media (max-width: 600px) {
    :root {
      --ui-itinerary-marker-size: 32px;
      --ui-itinerary-marker-font-size: 0.875rem;
      --ui-itinerary-content-gap: 0.75rem;
      --ui-itinerary-step-pad-bottom: 1.5rem;
      --ui-itinerary-title-fs: 1.25rem;
    }
  }
}