/* File: custom-elements/cgm-timeline/cgm-timeline.css */

/* --- Variables --- */
:root {
  /* YOUR BRAND COLORS */
  --cgm-orange: #ffac40;
  --cgm-pink: #e7818f;
  --cgm-blue: #6271a3;

  --cgm-bg-light: #fff;
  --cgm-line-inactive: #f0f0f0;
}

.cgm-timeline-wrapper {
  position: relative;
  max-width: 1200px;
  margin: 100px auto;
  padding: 0 30px;
  font-family: inherit;
  box-sizing: border-box;
}

/* --- THE SCROLLING LINE --- */
.cgm-line-container {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 250px; /* Stop before CTA */
  width: 6px;
  transform: translateX(-50%);
  z-index: 0;
}

.cgm-line-track {
  width: 100%;
  height: 100%;
  background: var(--cgm-line-inactive);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.cgm-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(to bottom, var(--cgm-pink), var(--cgm-orange));
  transition: height 0.1s linear;
}

/* --- THE ROW --- */
.cgm-timeline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 150px;
  position: relative;
  z-index: 1;

  /* ANIMATION SETUP */
  opacity: 0.2;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

/* ACTIVE STATE */
.cgm-timeline-row.active {
  opacity: 1;
  transform: translateY(0);
}

.cgm-timeline-content,
.cgm-timeline-image {
  width: 44%;
  position: relative;
}

/* NEW: Image Container Alignment 
   This ensures the narrow 50% image sticks to the center line 
*/
.cgm-timeline-image {
  display: flex;
  justify-content: flex-start; /* Default: Align Left (Towards center on Odd rows) */
}

/* Image Styling */
.cgm-img-box {
  /* UPDATED DIMENSIONS */
  width: 50%; /* Narrower */
  height: 350px; /* Taller/Fixed Height */

  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: transform 0.5s ease;
}

.cgm-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cgm-timeline-row:hover .cgm-img-box {
  transform: scale(1.03);
}

/* Text Content */
.cgm-timeline-content {
  padding: 20px;
}

.cgm-t-number {
  display: block;
  font-size: 6rem;
  font-weight: 900;
  color: var(--cgm-orange);
  opacity: 0.3;
  line-height: 0.8;
  margin-bottom: -25px;
  margin-left: -5px;
  font-family: serif;
}

.cgm-timeline-content h3 {
  font-size: 2.2rem;
  color: var(--cgm-blue);
  margin: 0 0 10px 0;
  font-weight: 700;
  line-height: 1.2;
}

.cgm-timeline-content h4 {
  font-size: 1rem;
  color: var(--cgm-orange);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 0 0 25px 0;
  font-weight: 600;
}

/* Apply styles to paragraphs, unordered lists (bullets), and ordered lists (numbers) */
.cgm-timeline-content p,
.cgm-timeline-content ul,
.cgm-timeline-content ol {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #666;
}

/* Give the lists some breathing room and proper indentation */
.cgm-timeline-content ul,
.cgm-timeline-content ol {
  margin-top: 0;
  margin-bottom: 20px;
  padding-left: 20px;
}

/* Space out the individual bullet points */
.cgm-timeline-content li {
  margin-bottom: 10px;
}

/* --- THE MARKER DOT --- */
.cgm-timeline-marker {
  position: absolute;
  left: 50%;
  width: 24px;
  height: 24px;
  background: #fff;
  border: 2px solid var(--cgm-line-inactive);
  border-radius: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
}

.cgm-marker-inner {
  width: 10px;
  height: 10px;
  background: var(--cgm-line-inactive);
  border-radius: 50%;
  transition: all 0.5s ease;
}

/* Active Dot State */
.cgm-timeline-row.active .cgm-timeline-marker {
  border-color: var(--cgm-pink);
  box-shadow: 0 0 0 6px rgba(231, 129, 143, 0.15);
  transform: translateX(-50%) scale(1.2);
}

.cgm-timeline-row.active .cgm-marker-inner {
  background: var(--cgm-pink);
}

/* --- ZIG ZAG LOGIC --- */
.cgm-timeline-items .cgm-timeline-row:nth-child(even) {
  flex-direction: row-reverse;
}

.cgm-timeline-items .cgm-timeline-row:nth-child(odd) .cgm-timeline-content {
  text-align: right;
}
.cgm-timeline-items .cgm-timeline-row:nth-child(even) .cgm-timeline-content {
  text-align: left;
}

.cgm-timeline-items .cgm-timeline-row:nth-child(odd) .cgm-t-number {
  margin-right: -5px;
  margin-left: auto;
}

/* NEW: Align Even Row Images to the Right (Towards Center) 
   Because even rows are reversed (Image on Left), we need to align the image box 
   to the right side of its container to make it touch the timeline spine.
*/
.cgm-timeline-items .cgm-timeline-row:nth-child(even) .cgm-timeline-image {
  justify-content: flex-end;
}

/* --- BOTTOM CTA --- */
.cgm-timeline-cta {
  text-align: center;
  margin-top: 100px;
  background: #fff;
  padding: 80px 40px;
  border-radius: 20px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease;
}

.cgm-timeline-cta.active {
  opacity: 1;
  transform: translateY(0);
}

.cgm-timeline-cta h2 {
  color: var(--cgm-blue);
  font-size: 2.5rem;
  margin-bottom: 20px;
}
.cgm-timeline-cta p {
  margin-bottom: 40px;
  font-size: 1.25rem;
  color: #666;
}

/* --- BUTTON STYLE --- */
.cgm-timeline-btn {
  display: inline-block;
  padding: 15px 40px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}
.cgm-timeline-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
}

/* --- ANCHOR --- */
.cgm-timeline-row {
  padding-top: 180px !important;
  margin-top: -180px !important;
}

/* --- HEADER STYLES --- */
.cgm-timeline-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px auto; /* Pushes timeline down */
  padding: 0 20px;
  position: relative;
  z-index: 2; /* Ensures it sits above any timeline line */
}

.cgm-t-eye {
  display: block;
  color: var(--th-eye-c);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 15px;
}

.cgm-t-head {
  color: var(--th-head-c);
  font-size: 2.5rem;
  font-family: "Playfair Display", serif;
  margin-bottom: 20px;
  line-height: 1.2;
}

.cgm-t-desc {
  color: var(--th-desc-c);
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto 30px auto;
}

.cgm-t-divider {
  width: 60px;
  height: 3px;
  background-color: var(--th-div-c);
  margin: 0 auto;
  border-radius: 2px;
}

/* Ensure Line container doesn't overlap header */
.cgm-line-container {
  top: 0; /* Let it flow naturally relative to the item wrapper, not absolute top of parent */
  /* ... rest of your existing line styles ... */
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 900px) {
  .cgm-line-container {
    left: 20px;
    bottom: 0;
  }

  .cgm-timeline-row,
  .cgm-timeline-items .cgm-timeline-row:nth-child(even) {
    flex-direction: column !important;
    align-items: flex-start;
    padding-left: 60px;
    margin-bottom: 80px;
  }

  .cgm-timeline-content,
  .cgm-timeline-image {
    width: 100%;
    text-align: left !important;
  }

  /* Reset Image alignment on mobile */
  .cgm-timeline-image,
  .cgm-timeline-items .cgm-timeline-row:nth-child(even) .cgm-timeline-image {
    justify-content: flex-start;
  }

  .cgm-timeline-image {
    order: -1;
    margin-bottom: 30px;
  }

  .cgm-timeline-marker {
    left: 20px;
    top: 0;
    transform: translateX(-50%);
  }

  .cgm-img-box {
    width: 100%; /* Full width on mobile looks better */
    height: 250px; /* Reduced height for mobile */
  }

  .cgm-t-number {
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: 4rem;
  }

  /* Mobile CTA Fix */
  .cgm-timeline-cta {
    padding: 50px 25px;
    margin-top: 60px;
  }
  .cgm-timeline-cta h2 {
    font-size: 1.8rem;
    line-height: 1.3;
  }
  .cgm-timeline-cta p {
    font-size: 1.1rem;
    padding: 0 5px;
  }
  .cgm-timeline-btn {
    width: 100%;
    padding: 16px 20px;
    display: block;
    margin-top: 10px;
  }
}