/*
 * Horizontal Timeline Component Styles
 * Adapted from inspiration and integrated with project theme
 */

.timeline-container.horizontal-timeline {
  padding: var(--spacing-lg) 0 80px 0; /* Add 80px bottom padding for arrows */
  position: relative;
  /* overflow: hidden; Removed - Allow cards to overflow vertically */
  margin-top: 30px; /* Reduced from 80px to decrease space after heading */
  height: 700px; /* Increased from 600px to fit all timeline cards */
  width: 100%; /* Explicitly set width */
  box-sizing: border-box; /* Include padding in height calculation */
  overflow-y: hidden; /* Prevent vertical scrolling of the container */
  z-index: 5; /* Lower than modal, higher than base elements */
  display: flex; /* Add flex display */
  justify-content: center; /* Center horizontally */
}

/* The main timeline wrapper */
.timeline {
  white-space: nowrap;
  overflow-x: auto; /* Enable horizontal scrolling */
  overflow-y: hidden;
  position: relative;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; /* Show a thin scrollbar in Firefox */
  height: 100%;
  padding-bottom: 12px; /* Add padding for scrollbar */
  width: 100%; /* Take full width of container */
  max-width: 1600px; /* Increased from 1200px to use more screen space */
}

/* Show webkit scrollbar for better UX */
.timeline::-webkit-scrollbar {
  display: block;
  height: 8px;
  background-color: rgba(var(--border-color-rgb), 0.1);
  border-radius: 4px;
}

.timeline::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 4px;
}

/* The ordered list holding the timeline track */
.timeline ol {
  display: flex;
  justify-content: space-between; /* Changed from center to space-between to spread items */
  align-items: flex-start;
  padding: 0 20px;
  margin: 0 auto;
  list-style: none;
  height: 100%;
  flex-wrap: nowrap;
  width: 100%; /* Take full width of timeline */
  box-sizing: border-box;
}

/* Each list item represents a point on the timeline track */
.timeline ol li {
  position: relative;
  display: inline-block;
  list-style-type: none;
  width: 240px !important; /* Reduced from 280px to fit more in view */
  min-width: 240px !important;
  max-width: 240px !important;
  padding-top: 0;
  padding-bottom: 0;
  height: 100%;
  vertical-align: top;
  margin: 0 10px; /* Reduced from 15px to fit more in view */
  box-sizing: border-box;
}

/* Draw the track line in the middle using a pseudo-element */
.timeline ol li::before {
    content: '';
    position: absolute;
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for centering */
    left: 0;
  width: 100%; /* Full width of li */
  height: 4px; /* Thickness of the track */
  background: var(--border-color); /* Use border color for the track */
  z-index: 0; /* Behind content and dot */
}

/* Dark theme track */
body.dark-theme .timeline ol li::before {
  background: var(--border-color); /* Already uses variable */
}

/* Add margin between track segments */
.timeline ol li:not(:first-child) {
  margin-left: 10px !important;
}

/* Add margin to first child to match others */
.timeline ol li:first-child {
  margin-right: 10px !important;
}

/* Style the dots connecting the segments - REMOVED as per user feedback */
/* .timeline ol li:not(:last-child)::after { ... } */

/* The last empty li for spacing */
.timeline ol li:last-child {
  width: 300px; /* Same width as all other cards */
  min-width: 300px;
  max-width: 300px;
}
/* Hide track line on last item */
.timeline ol li:last-child::before {
    display: none;
}
.timeline ol li:last-child::after {
    display: none; /* No dot after the last item */
}


/* The div containing the event details */
.timeline ol li .timeline-event-content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 16px); /* Consistent width calculation for all cards */
  min-width: 260px; /* Consistent minimum width */
  max-width: 300px; /* Consistent maximum width */
  padding: var(--spacing-lg);
  font-size: var(--font-size-base); /* Reset font size */
  white-space: normal; /* Allow text wrapping */
  background: var(--card-background-color); /* Use theme card background */
  border-radius: var(--border-radius); /* Revert to standard radius */
  box-shadow: 0 4px 12px rgba(var(--shadow-color-rgb), 0.1); /* Slightly stronger shadow */
  color: var(--text-color); /* Ensure text color contrasts with card background */
  z-index: 1; /* Above track line */
  cursor: pointer; /* Add pointer cursor to indicate clickability */
  overflow-y: visible; /* Change from auto to visible for default state */
  transition: transform 0.4s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Added background and adjusted transform transition */
  border: 1px solid rgba(0, 0, 0, 0.05); /* Subtle border for definition */
}

/* Hover effect for non-active cards */
.timeline ol li:not(.active-timeline-item) .timeline-event-content:hover {
  transform: translateX(-50%) translateY(-3px); /* Subtle lift */
  box-shadow: 0 6px 16px rgba(var(--shadow-color-rgb), 0.12); /* Slightly stronger shadow on hover */
}
/* Active card hover state - maintain active styles */
.timeline ol li.active-timeline-item .timeline-event-content:hover {
  /* Keep the active shadow, no additional hover transform needed */
   transform: translateX(-50%); /* Removed scale(1.03) */
   box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.15); /* Keep active shadow */
}


/* Webkit scrollbar styling for cards */
.timeline ol li .timeline-event-content::-webkit-scrollbar {
  width: 6px;
}
.timeline ol li .timeline-event-content::-webkit-scrollbar-track {
  background: var(--secondary-background-color);
  border-radius: 3px;
}
.timeline ol li .timeline-event-content::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 3px;
}

/* The triangle connector - still use absolute positioning relative to the card */
.timeline ol li .timeline-event-content::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
/* Border mimic */
.timeline ol li .timeline-event-content::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}


/* Position odd items above the line */
.timeline ol li:nth-child(odd) .timeline-event-content {
  bottom: calc(50% + 20px); /* Position relative to center + gap */
  /* transform: translateY(calc(-50% - 70px)); Removed */
  /* margin-bottom: 40px; Removed */
}

.timeline ol li:nth-child(odd) .timeline-event-content::before {
  top: 100%; /* Pointing down */
  left: 20px; /* Position arrow near the start of the card */
  border-width: 10px 10px 0 10px; /* Triangle shape */
  border-color: var(--card-background-color) transparent transparent transparent; /* Match theme card background */
  z-index: 1;
}
/* Border mimic - REMOVED */
/* .timeline ol li:nth-child(odd) .timeline-event-content::after { ... } */


/* Position even items below the line */
.timeline ol li:nth-child(even) .timeline-event-content {
  top: calc(50% + 20px); /* Position relative to center + gap */
  /* transform: translateY(calc(50% + 70px)); Removed */
  /* margin-top: 40px; Removed */
}

.timeline ol li:nth-child(even) .timeline-event-content::before {
  bottom: 100%; /* Pointing up */
  left: 20px; /* Position arrow near the start of the card */
  border-width: 0 10px 10px 10px; /* Triangle shape */
  border-color: transparent transparent var(--card-background-color) transparent; /* Match theme card background */
  z-index: 1;
}
/* Border mimic - REMOVED */
/* .timeline ol li:nth-child(even) .timeline-event-content::after { ... } */


/* Styling within the content card */
.timeline .timeline-date { /* Using <time> or a specific class */
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: var(--spacing-xs);
}

.timeline .timeline-title { /* Using <h3> or a specific class */
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  color: var(--text-color);
}

/* Content wrapper for summary and details */
.timeline .timeline-content-wrapper {
  position: relative;
  transition: all 0.3s ease;
}

/* Summary text - always visible */
.timeline .timeline-summary {
  font-size: var(--font-size-sm);
  color: var(--text-color);
  line-height: 1.5;
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
}

/* Details container - hidden by default */
.timeline .timeline-details {
  display: none; /* Hidden by default */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show details when item is active */
.timeline ol li.active-timeline-item .timeline-details {
  display: block;
  opacity: 1;
}

/* Description text */
.timeline .timeline-description {
  font-size: var(--font-size-sm);
  color: var(--text-color);
  line-height: 1.5;
  white-space: pre-line; /* Ensure \n characters create line breaks */
  margin-bottom: var(--spacing-xs);
}

/* Duration text */
.timeline .timeline-duration {
  font-size: var(--font-size-xs);
  color: var(--text-color-secondary); /* Use variable */
  margin-top: var(--spacing-xs);
}

/* Expand indicator */
.timeline .timeline-expand-indicator {
  text-align: center;
  margin-top: var(--spacing-xs);
  color: var(--text-color-secondary); /* Use variable */
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

/* Rotate indicator when active */
.timeline ol li.active-timeline-item .timeline-expand-indicator i {
  transform: rotate(180deg);
}

/* Active Timeline Item Styling */
.timeline ol li.active-timeline-item .timeline-event-content {
  transform: translateX(-50%); /* Removed scale(1.03) */
  background-color: var(--card-background-color); /* Revert to default card background */
  box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.15); /* Enhanced shadow for active */
  border-left: 4px solid var(--accent-color); /* Add distinct left border */
  padding-left: calc(var(--spacing-lg) - 4px); /* Adjust padding to account for border and increased base padding */
  transition: transform 0.4s ease, background-color 0.3s ease, box-shadow 0.3s ease, border-left 0.3s ease, padding-left 0.3s ease; /* Removed max-height from transition */
  /* max-height: 350px; Removed - No longer needed for modal */
  /* overflow-y: auto; Removed - No longer needed for modal */
  /* scrollbar-width: thin; Removed - No longer needed for modal */
  /* scrollbar-color: var(--primary-color) var(--secondary-background-color); Removed - No longer needed for modal */
}

/* Style for the company logo within the card */
.timeline .timeline-logo {
  max-height: 40px; /* Limit logo height */
  max-width: 100px; /* Limit logo width */
  object-fit: contain; /* Scale logo while preserving aspect ratio */
  margin-bottom: var(--spacing-sm); /* Space below logo */
  display: block; /* Ensure it takes its own line */
  opacity: 0.8; /* Slightly fade logo */
}

/* Specific transforms for active items based on position - Removed as positioning is absolute */
/* .timeline ol li.active-timeline-item:nth-child(odd) .timeline-event-content { ... } */
/* .timeline ol li.active-timeline-item:nth-child(even) .timeline-event-content { ... } */

/* Adjust arrow color for active state - REMOVED border mimic */
/* .timeline ol li.active-timeline-item:nth-child(odd) .timeline-event-content::after { ... } */
/* .timeline ol li.active-timeline-item:nth-child(even) .timeline-event-content::after { ... } */

/* Add a subtle indicator on the timeline track for active item */
.timeline ol li.active-timeline-item::before {
    background: linear-gradient(to right, var(--border-color), var(--accent-color), var(--border-color));
}

/* REMOVED Timeline Arrows Styles */

/* Define missing CSS variables if they don't exist elsewhere */
/* :root { --text-muted: #6c757d; } Removed */
:root {
  --font-size-xs: 0.75rem; /* Keep font size if not defined globally */
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  /* Remove experience section padding when modal is open on mobile */
  #experience.section.modal-open-section {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Ensure section header has proper padding on mobile when modal is open */
  #experience.section.modal-open-section .section-header {
    padding-top: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
  }

  /* Reset container */
  .timeline-container.horizontal-timeline {
    padding: var(--spacing-lg) 0;
    margin-top: var(--spacing-lg);
    width: 100%;
    min-height: unset;
    height: auto;
    overflow: visible;
    display: block;
  }

  /* Hide timeline section completely when modal is open on mobile */
  .timeline-container.modal-open .timeline {
      display: none;
  }

  /* Stack vertically on smaller screens */
  .timeline {
    white-space: normal;
    overflow-x: visible;
    overflow-y: visible;
    padding: 0;
    height: auto;
    width: 100%;
    max-width: none;
  }

  .timeline ol {
    font-size: var(--font-size-base);
    padding: 0;
    margin: 0;
    list-style: none;
    display: block;
    position: relative;
    padding-left: 15px; /* Drastically reduced from 25px */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
  }

  /* Move the vertical line closer to the edge */
  .timeline ol::before {
    left: 5px; /* Reduced from 8px */
  }

  /* Adjust dot position */
  .timeline ol li::after {
    left: -12px; /* Adjusted position for smaller left padding */
    width: 12px; /* Slightly smaller dot */
    height: 12px;
  }

  /* Remove all horizontal padding on list items */
  .timeline ol li {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 0 var(--spacing-lg) 0 !important;
    display: block;
    position: relative;
    box-sizing: border-box;
    padding: 0; /* Remove side padding completely */
  }

  /* Force cards to full width on mobile */
  .timeline ol li .timeline-event-content {
    position: static;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    padding: var(--spacing-md);
    box-sizing: border-box;
    background: var(--card-background-color);
    box-shadow: 0 4px 8px rgba(var(--shadow-color-rgb), 0.1);
    overflow-wrap: break-word;
  }

  /* Removed special first-of-type override to keep all cards uniform */

  /* Remove horizontal track line */
  .timeline ol li::before {
    display: none;
  }

  /* Highlight active dot */
   .timeline ol li.active-timeline-item::after {
      background: var(--primary-color);
      border-color: var(--accent-color);
   }

  .timeline ol li:last-child {
    display: none; /* Hide spacer */
  }

  /* Remove connector triangles */
  .timeline ol li .timeline-event-content::before,
  .timeline ol li .timeline-event-content::after {
    display: none;
  }

  /* Position all items similarly */
  .timeline ol li:nth-child(odd) .timeline-event-content,
  .timeline ol li:nth-child(even) .timeline-event-content {
    top: auto;
    bottom: auto;
    transform: none;
  }

  /* Active item styling on mobile - Minimal changes */
  .timeline ol li.active-timeline-item .timeline-event-content {
    /* Inherit static position, width, transform: none, margin: 0 */
    box-shadow: 0 4px 12px rgba(var(--shadow-color-rgb), 0.08); /* Keep base shadow */
    /* No transform, border, padding-left changes needed here */
    /* max-height and overflow-y are handled by the base style now */
  }

  /* Details visibility - Hide by default on mobile */
  .timeline .timeline-details {
    display: none;
    opacity: 1; /* Opacity can stay 1, display controls visibility */
  }

  /* Show details only for active item on mobile */
  .timeline ol li.active-timeline-item .timeline-details {
      display: block;
      margin-top: var(--spacing-sm);
  }

  /* Hide expand indicator */
  .timeline .timeline-expand-indicator {
    display: none;
  }

  /* Ensure logo doesn't cause overflow issues on mobile */
  .timeline ol li .timeline-logo {
    max-width: 100%; /* Ensure logo scales within the container */
    height: auto; /* Maintain aspect ratio */
  }

  /* Target first timeline item specifically */
  .timeline ol li:first-of-type .timeline-event-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Hide arrows */
  .timeline-container .arrows {
    display: none;
  }

  /* Reduce left padding to give more space for cards */
  .timeline ol {
    padding-left: 25px; /* Slightly reduced padding */
  }

  /* Adjust vertical line position */
  .timeline ol::before {
    left: 8px;
  }

  /* Adjust dot position */
  .timeline ol li::after {
    left: -20px;
  }

  /* Reduce side padding on list items */
  .timeline ol li {
    padding: 0 2px;
  }

  /* Add horizontal padding to the timeline container */
  .timeline {
    padding: 0 16px;
  }

  /* Remove extra left padding on the list, keep room for vertical line */
  .timeline ol {
    padding-left: 0;
  }

  /* Move the vertical line to align with container padding */
  .timeline ol::before {
    left: 16px;
  }

  /* Position dots relative to new padding */
  .timeline ol li::after {
    left: 16px;
  }

  /* Make cards fill available width minus padding */
  .timeline ol li .timeline-event-content {
    width: calc(100% - 32px) !important; /* Container padding x2 */
    max-width: calc(100% - 32px) !important;
    margin: 0 auto !important;
    box-sizing: border-box;
    padding: var(--spacing-md);
  }
}

/* Final mobile override: ensure timeline cards nearly fill the screen */
@media screen and (max-width: 768px) {
  .timeline-container.horizontal-timeline,
  .timeline {
    padding: 0;
    margin: 0;
  }
  .timeline ol li .timeline-event-content {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin: 0 10px !important;
    left: auto !important;
  }
}

/* === Final Mobile Gutter Pad on Content === */
@media screen and (max-width: 768px) {
  #experience.section .timeline-event-content {
    position: relative !important;
    left: 0 !important;
    transform: none !important;
    margin: 0 16px !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* ================ Last Mobile Fixed Gutter ================ */
@media screen and (max-width: 768px) {
  /* Force side gutters on each event card */
  #experience.section .timeline ol li .timeline-event-content {
    width: calc(100% - 32px) !important; /* account for 16px gutters */
    max-width: calc(100% - 32px) !important;
    margin: 0 16px !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: auto !important;
    transform: none !important;
  }
}

/* --- Timeline Inline Modal Styles --- */

.timeline-detail-modal {
  position: fixed; /* Keep fixed positioning */
  top: 0;
  left: 0;
  width: 100%;
  /* height: 100%; */ /* Removed, relying on min-height */
  background-color: rgba(var(--background-color-rgb), 0.95); /* Semi-transparent background */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 100; /* Increase z-index to ensure it appears above everything */
  display: flex;
  align-items: flex-start; /* Keep top align for desktop */
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
  padding-top: var(--spacing-xl); /* Keep more space at top */
  padding-bottom: var(--spacing-xl); /* Keep bottom padding */
  box-sizing: border-box;
  overflow-y: auto; /* Allow scrolling if content overflows */
  min-height: 100vh; /* Explicitly set minimum viewport height */
  cursor: pointer; /* Indicate the background can be clicked to close */
}

.timeline-detail-modal.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0s linear 0s;
}

.timeline-modal-content {
  background-color: var(--card-background-color);
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(var(--shadow-color-rgb), 0.2);
  max-width: 700px;
  width: 90%;
  position: relative;
  height: auto;
  overflow-y: visible;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: translateY(10px);
  margin-top: 80px;
  cursor: default;
  border: 1px solid rgba(var(--border-color-rgb), 0.1);
}

.timeline-detail-modal.active .timeline-modal-content {
  transform: translateY(0);
}

.timeline-modal-content-inner {
  padding-top: var(--spacing-md);
}

.timeline-detail-modal.active .timeline-modal-content {
  opacity: 1; /* Fade in */
}

.timeline-modal-close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--r-0);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-14);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-step), color var(--dur-1) var(--ease-step);
  padding: 0;
  line-height: 1;
  z-index: 51;
  margin: 0;
}
.timeline-modal-close:hover {
  background: var(--mark);
  color: var(--paper);
  border-color: var(--mark);
}

/* Styles for content inside the modal */
.timeline-modal-content-inner .timeline-modal-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: var(--spacing-md);
  gap: var(--spacing-md);
}

.timeline-modal-content-inner .timeline-logo {
  max-height: 40px;
  max-width: 80px;
  object-fit: contain;
  flex-shrink: 0;
}

.timeline-modal-content-inner .timeline-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-color);
  line-height: 1.3;
  margin: 0;
}

.timeline-modal-content-inner .timeline-date {
  display: table;
  color: var(--accent-color);
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--spacing-lg);
  margin-left: 0;
  padding: 4px 12px;
  background-color: rgba(var(--accent-color-rgb, 99, 102, 241), 0.1);
  border-radius: 20px;
  letter-spacing: 0.02em;
}

.timeline-modal-content-inner .timeline-job-title-modal {
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--text-color-secondary);
  margin-bottom: var(--spacing-xs);
}

.timeline-modal-content-inner .timeline-description {
  font-size: var(--font-size-base);
  line-height: 1.7;
  margin-bottom: var(--spacing-lg);
  white-space: pre-line;
  color: var(--text-color);
}

.timeline-modal-content-inner .timeline-duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-style: normal;
  color: var(--text-color-secondary);
  font-size: var(--font-size-sm);
  padding: 6px 12px;
  background-color: rgba(var(--background-color-rgb), 0.5);
  border-radius: 6px;
}

/* Class to fade out timeline elements when modal is active */
.timeline-container.modal-open .timeline,
.timeline-container.modal-open .arrows {
  opacity: 0;
  /* visibility: hidden; */ /* Replaced with pointer-events */
  pointer-events: none; /* Make non-interactive */
  transition: opacity 0.3s ease, pointer-events 0s linear 0.3s; /* Transition opacity, switch pointer-events */
}

.timeline-container .timeline,
.timeline-container .arrows {
  opacity: 1;
  /* visibility: visible; */ /* Replaced with pointer-events */
  pointer-events: auto; /* Make interactive */
  transition: opacity 0.3s ease 0.1s, pointer-events 0s linear 0s; /* Delay fade-in slightly */
}

/* Prevent experience section from collapsing when modal is open on desktop */
#experience.section.modal-open-section {
  overflow: visible !important; /* Override .section's overflow: hidden, add !important just in case */
  /* min-height is now set dynamically via JavaScript */
  transition: min-height 0.4s ease; /* Add transition for smooth height change */
  padding-bottom: 150px; /* Add padding to bottom to ensure modal content is visible */
}

/* Reduce space between header and modal content on desktop */
#experience.section.modal-open-section .section-header {
  margin-bottom: var(--spacing-md); /* Reduced from 60px (default) */
}

/* Ensure modal styles work in dark theme */
body.dark-theme .timeline-detail-modal {
  background-color: rgba(var(--background-color-rgb), 0.95);
}
body.dark-theme .timeline-modal-content {
  background-color: var(--card-background-color);
  box-shadow: 0 8px 30px rgba(var(--shadow-color-rgb), 0.2);
}
body.dark-theme .timeline-modal-close {
  color: var(--text-color-secondary);
}
body.dark-theme .timeline-modal-close:hover {
  color: var(--primary-color);
}

/* --- Mobile Styles for Timeline Modal --- */
@media screen and (max-width: 768px) {
  .timeline-detail-modal {
    padding: 0; /* Remove padding from overlay */
    /* Ensure it covers the whole viewport */
    position: fixed; /* Use fixed to cover viewport */
    top: 0;
    left: 0;
    /* height: 100vh; Removed fixed height */
    width: 100vw; /* Full viewport width */
    z-index: 100; /* Ensure it's above everything */
    overflow-y: auto; /* Allow overlay to scroll if content overflows viewport */
    /* min-height: 100vh; Removed */
    display: flex; /* Revert to flex */
    align-items: flex-start; /* Align card to top */
    justify-content: center; /* Center card horizontally */
  }

  .timeline-detail-modal.active {
    /* Ensure visibility transition works with fixed */
    transition: opacity 0.4s ease, visibility 0s linear 0s;
  }

  .timeline-modal-content {
    width: 100%;
    /* min-height: 100%; Removed to allow natural height */
    max-width: none; /* Remove max-width */
    max-height: none; /* Remove max-height */
    border-radius: 0; /* Remove border-radius for full screen */
    padding: var(--spacing-lg); /* Consistent padding */
    margin-top: 0; /* Remove top margin on mobile */
    box-shadow: none; /* Remove shadow */
    transform: none; /* Remove scale transform */
    overflow-y: visible; /* Explicitly set to prevent internal scroll */
    box-sizing: border-box;
    display: block; /* Ensure block display */
    height: auto; /* Explicitly allow height to adjust to content */
    margin: 0 auto; /* Remove vertical margin, keep horizontal centering */
  }

  .timeline-detail-modal.active .timeline-modal-content {
    opacity: 1; /* Fade in */
  }

  .timeline-modal-close {
    /* Keep position relative to the card, adjust spacing if needed */
    top: var(--spacing-md);
    right: var(--spacing-md);
    font-size: 1.8rem; /* Slightly larger close button */
    background-color: rgba(var(--background-color-rgb), 0.5); /* Restore background for visibility */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Adjust content styles slightly for mobile modal */
  .timeline-modal-content .timeline-title {
    font-size: var(--font-size-lg); /* Slightly smaller title */
  }

  /* Ensure the background fade still works */
  .timeline-container.modal-open .timeline,
  .timeline-container.modal-open .arrows {
    /* Keep these hidden */
    opacity: 0;
    visibility: hidden;
  }
}

/* Reduce space between header and timeline on desktop */
@media screen and (min-width: 769px) {
  .section-header + .timeline-container.horizontal-timeline {
    margin-top: 20px; /* Further reduce margin on desktop */
  }

  /* Ensure the timeline container doesn't cause overflow */
  #experience .timeline-container.horizontal-timeline {
    overflow: visible; /* Allow modal to be visible */
  }
}

/* Mobile specific overrides */
@media screen and (max-width: 768px) {
  .timeline-detail-modal.active .timeline-modal-content {
    transform: none; /* Ensure no transform when active */
  }
}

.timeline-job-title {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-color-secondary);
  margin-bottom: var(--spacing-xs);
  margin-top: 2px;
}

/* Remove the bullet point under timeline cards */
.timeline ol li .timeline-event-content::after {
  display: none !important;
}

/* Remove special styling for first-of-type item that might have different margins/width */
.timeline ol li:first-of-type .timeline-event-content,
.timeline ol li:last-of-type .timeline-event-content {
  width: calc(100% - 16px); /* Same as all other cards */
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* Reset any special padding or positioning */
}

.timeline-item .timeline-content {
  position: relative;
  width: 100%;
  padding: 15px 20px;
  border-radius: 10px;
  background-color: var(--light-bg-color);
  color: var(--text-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.timeline-item .timeline-content:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Add responsive adjustments */
@media screen and (max-width: 1280px) {
  .timeline ol li {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
  }
}

@media screen and (max-width: 992px) {
  .timeline ol li {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    margin: 0 10px;
  }
}

/* Timeline scroll arrows */
.timeline-scroll-arrows {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* Allow clicking through the container */
  z-index: 10;
}

.timeline-scroll-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--card-background-color);
  color: var(--primary-color);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(var(--shadow-color-rgb), 0.15);
  transition: all 0.3s ease;
  pointer-events: auto; /* Make buttons clickable */
  opacity: 1;
}

.timeline-scroll-arrow:hover {
  background-color: var(--primary-color);
  color: white;
  transform: scale(1.1);
}

.timeline-scroll-arrow:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.3);
}

.timeline-scroll-left {
  margin-left: 10px;
}

.timeline-scroll-right {
  margin-right: 10px;
}

@media screen and (max-width: 768px) {
  .timeline-scroll-arrows {
    display: none; /* Hide on mobile */
  }
}

/* Ultimate Mobile Override: fix full-width mobile cards without overflow */
@media screen and (max-width: 768px) {
  /* Container and wrapper */
  .timeline-container.horizontal-timeline,
  .timeline {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Ordered list full width */
  .timeline ol {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Each list item full width */
  .timeline ol li {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 var(--spacing-lg) 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Event cards full width */
  .timeline ol li .timeline-event-content {
    position: relative !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: var(--spacing-md) !important;
    box-sizing: border-box !important;
  }

  /* Hide horizontal line and ensure vertical line stays in view */
  .timeline ol li::before { display: none !important; }
  .timeline ol::before { left: 16px !important; }
  .timeline ol li::after { left: 16px !important; }

  /* Remove scroll arrows on mobile */
  .timeline-scroll-arrows { display: none !important; }
}

/* ===== Final Clean Mobile Full-Width Override ===== */
@media screen and (max-width: 768px) {
  section#experience.section .timeline-container.horizontal-timeline {
    overflow-x: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  section#experience.section .timeline-container.horizontal-timeline .timeline {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  section#experience.section .timeline-container.horizontal-timeline .timeline ol {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  section#experience.section .timeline-container.horizontal-timeline .timeline ol li {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 var(--spacing-lg) 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  section#experience.section .timeline-container.horizontal-timeline .timeline ol li .timeline-event-content {
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: var(--spacing-md) !important;
    box-sizing: border-box !important;
  }

  /* Hide horizontal line and adjust dot for mobile */
  section#experience.section .timeline-container.horizontal-timeline .timeline ol li::before {
    display: none !important;
  }
  section#experience.section .timeline-container.horizontal-timeline .timeline ol::before {
    left: -9999px !important;
  }
  section#experience.section .timeline-container.horizontal-timeline .timeline ol li::after {
    left: 16px !important;
  }
}

/* == Ultimate Mobile Gutters & Full-Width Cards == */
@media screen and (max-width: 768px) {
  /* Prevent horizontal scroll */
  #experience .timeline-container.horizontal-timeline {
    overflow-x: hidden !important;
  }

  /* Wrapper padding and width */
  #experience .timeline {
    display: block !important;
    width: 100% !important;
    padding: 0 16px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* List and items reset */
  #experience .timeline ol,
  #experience .timeline ol li {
    display: block !important;
    width: 100% !important;
    margin: 0 0 var(--spacing-lg) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Full-width cards within gutters */
  #experience .timeline ol li .timeline-event-content {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: var(--spacing-md) !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: auto !important;
    transform: none !important;
  }

  /* Hide track line, adjust dots */
  #experience .timeline ol::before,
  #experience .timeline ol li::before {
    display: none !important;
  }
  #experience .timeline ol li::after {
    left: 16px !important;
  }
}

/* =============== FINAL MOBILE GUTTERS ================ */
@media screen and (max-width: 768px) {
  .timeline ol li .timeline-event-content {
    width: calc(100% - 32px) !important; /* side gutters */
    margin: 0 16px !important;
    position: relative !important;
    left: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
}

/* === Final Mobile Cards Gutter === */
@media screen and (max-width: 768px) {
  #experience .timeline-container.horizontal-timeline {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #experience .timeline {
    padding: 0 16px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #experience .timeline ol {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #experience .timeline ol li {
    padding: 0 !important;
    margin: 0 0 var(--spacing-lg) !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #experience .timeline ol li .timeline-event-content {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin: 0 auto !important;
    padding: var(--spacing-md) !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: auto !important;
    transform: none !important;
  }
}

/* =============== ULTIMATE MOBILE TIMELINE GUTTERS =============== */
@media screen and (max-width: 768px) {
  section#experience .timeline-container.horizontal-timeline {
    overflow-x: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  section#experience .timeline {
    padding: 0 16px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  section#experience .timeline ol {
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  section#experience .timeline ol li {
    padding: 0 !important;
    margin: 0 0 var(--spacing-lg) !important;
    box-sizing: border-box !important;
  }

  section#experience .timeline ol li .timeline-event-content {
    width: auto !important;
    max-width: none !important;
    margin: 0 16px !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: auto !important;
    transform: none !important;
  }
}

/* ==== FINAL MOBILE GUTTERS VIA CONTAINER PADDING ==== */
@media screen and (max-width: 768px) {
  /* Add side gutters on timeline wrapper */
  #experience .timeline {
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* Full-width cards within gutters */
  #experience .timeline-event-content {
    position: static !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 var(--spacing-lg) !important;
    box-sizing: border-box !important;
  }
}

/* === FINAL: Experience Section Container Gutters on Mobile === */
@media screen and (max-width: 768px) {
  section#experience .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
}

/* == FINAL MOBILE GUTTERS AND CARD SIDES == */
@media screen and (max-width: 768px) {
  /* Add wrapper side padding */
  .timeline {
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* Apply side gutters on each card */
  .timeline ol li .timeline-event-content {
    width: calc(100% - 32px) !important; /* account for gutters */
    margin: 0 16px var(--spacing-lg) !important;
    box-sizing: border-box !important;
  }
}

/* === FINAL: mobile card side margins === */
@media screen and (max-width: 768px) {
  section#experience .timeline ol li .timeline-event-content {
    position: static !important;
    width: auto !important;
    max-width: none !important;
    margin: var(--spacing-lg) 16px !important;
    padding: var(--spacing-md) !important;
    box-sizing: border-box !important;
  }
}

/* === END: FINAL MOBILE EXPERIENCE TIMELINE OVERRIDE === */
@media screen and (max-width: 768px) {
  /* Prevent horizontal scroll */
  section#experience .timeline-container.horizontal-timeline {
    overflow-x: hidden !important;
  }
  /* Add side gutters */
  section#experience .timeline {
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }
  /* Reset list spacing */
  section#experience .timeline ol {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
  }
  /* Full-width list items with bottom margin */
  section#experience .timeline ol li {
    display: block !important;
    width: auto !important;
    min-width: auto !important;
    margin: 0 0 var(--spacing-lg) !important;
  }
  /* Cards fill container with side gutters */
  section#experience .timeline ol li .timeline-event-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: var(--spacing-md) !important;
    box-sizing: border-box !important;
  }
}

/* ==== FINAL MOBILE GUTTERS OVERRIDE ==== */
@media screen and (max-width: 768px) {
  section#experience .timeline-container.horizontal-timeline {
    overflow-x: hidden !important;
  }
  section#experience .timeline {
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }
  section#experience .timeline ol {
    padding: 0 !important;
    margin: 0 !important;
  }
  section#experience .timeline ol li {
    position: static !important;
    width: auto !important;
    margin: 0 0 var(--spacing-lg) !important;
  }
  section#experience .timeline-event-content {
    position: static !important;
    transform: none !important;
    left: auto !important;
    width: 100% !important;
    margin: 0 0 var(--spacing-lg) !important;
    box-sizing: border-box !important;
    padding: var(--spacing-md) !important;
  }
}

/* === FINAL HIGHEST-PRIORITY MOBILE GUTTERS OVERRIDE === */
@media screen and (max-width: 768px) {
  section#experience .timeline {
    padding: 0 16px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  section#experience .timeline ol li .timeline-event-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    padding: var(--spacing-md) !important;
  }
}

/* ==== DEFINITIVE MOBILE EXPERIENCE TIMELINE OVERRIDE ==== */
@media screen and (max-width: 768px) {
  section#experience .timeline-container.horizontal-timeline .timeline {
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  section#experience .timeline-container.horizontal-timeline .timeline ol li .timeline-event-content {
    width: calc(100% - 32px) !important; /* gutter both sides */
    max-width: calc(100% - 32px) !important;
    margin: 0 16px !important;
    padding: var(--spacing-md) !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   SPEC-SHEET OVERRIDE — applied after the original timeline.css.
   Re-skins colors, type, radii, shadows. Keeps the hand-crafted
   horizontal-scroll layout intact.
   ============================================================ */
.timeline-container,
.horizontal-timeline { background: var(--paper); }
.timeline,
.timeline ol,
.timeline-item,
.timeline-content,
.timeline-content-wrapper {
  background: var(--paper) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.timeline-item { border: 1px solid var(--ink) !important; }
.timeline-item.active,
.timeline-item.active-timeline-item { border-color: var(--mark) !important; }
.timeline-date,
.timeline-duration,
.timeline-job-title,
.timeline-title,
.timeline-summary,
.timeline-description {
  font-family: var(--font-mono) !important;
  letter-spacing: 0.02em;
  color: var(--ink) !important;
}
.timeline-job-title,
.timeline-title { font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--t-14) !important; }
.timeline-date,
.timeline-duration { color: var(--ink-2) !important; font-size: var(--t-11) !important; text-transform: uppercase; letter-spacing: 0.10em; }
.timeline-summary,
.timeline-description { font-family: var(--font-serif) !important; font-size: var(--t-14) !important; color: var(--ink) !important; }
/* Timeline logos full color, square. */
.timeline-logo { filter: none !important; border-radius: 0 !important; }
.timeline-scroll-arrow,
.timeline-scroll-left,
.timeline-scroll-right {
  background: var(--paper) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.timeline-scroll-arrow:hover { background: var(--ink) !important; color: var(--paper) !important; }
.timeline-detail-modal { background: rgba(10,10,10,0.92) !important; }
.timeline-modal-content {
  background: var(--paper) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-modal) !important;
  color: var(--ink) !important;
}
.timeline-modal-close {
  border: 1px solid var(--ink) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-radius: 0 !important;
}
.timeline-modal-close:hover { background: var(--mark) !important; color: var(--paper) !important; border-color: var(--mark) !important; }
.timeline-expand-indicator { color: var(--mark) !important; }

/* SPEC-SHEET OVERRIDE — timeline modal positioning.
   Change from position:fixed (covers section title) to position:absolute
   inside the experience section, so it always renders below the header.
   The section itself needs position:relative, which JS already sets via minHeight.  */
#experience { position: relative; }

.timeline-detail-modal {
  position: absolute !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  /* Sit right below the timeline container; JS expands section height to fit. */
  min-height: 0 !important;
  padding-top: var(--s-5) !important;
  padding-bottom: var(--s-5) !important;
  padding-left: var(--s-5) !important;
  padding-right: var(--s-5) !important;
  overflow-y: visible !important;
  background: var(--paper-2) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid var(--ink) !important;
  z-index: 10 !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  cursor: default !important;
}

/* === TIMELINE MODAL — CENTERED FIXED OVERLAY ===
   Modal is fixed to the viewport, starts below the sticky header so it never
   covers the section title, and is horizontally + vertically centered. */
.timeline-detail-modal {
  position: fixed !important;
  top: var(--header-height) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: var(--s-6) var(--s-5) !important;
  overflow-y: auto !important;
  border-top: 0 !important;
  z-index: calc(var(--z-index-header) - 1) !important;
  display: none !important;
  margin: 0 !important;
  background: rgba(10,10,10,0.88) !important;
  align-items: center !important;
  justify-content: center !important;
}
.timeline-detail-modal.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
.timeline-modal-content {
  max-width: 880px !important;
  width: 100% !important;
  margin: 0 auto !important;
  border-radius: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  max-height: calc(100dvh - var(--header-height) - (2 * var(--s-6))) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

/* Interaction refinement: cards are real buttons and the dialog remains tied
   to the viewport, not to the timeline's horizontal/vertical scroll state. */
.timeline ol li .timeline-event-content {
  appearance: none;
  text-align: left;
  font: inherit;
}

.timeline ol li .timeline-event-content:focus-visible {
  outline: 2px solid var(--mark);
  outline-offset: 3px;
  border-color: var(--mark);
}

.timeline-scroll-arrow:disabled {
  opacity: 0.28 !important;
  cursor: default;
}

.timeline-scroll-arrow:disabled:hover {
  background: var(--paper) !important;
  color: var(--ink) !important;
  transform: none;
}

.timeline-detail-modal {
  overscroll-behavior: contain;
}

@media screen and (max-width: 768px) {
  .timeline-detail-modal {
    padding: var(--s-3) !important;
    align-items: center !important;
  }

  .timeline-modal-content {
    max-height: calc(100dvh - var(--header-height) - (2 * var(--s-3))) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .timeline-detail-modal,
  .timeline-modal-content,
  .timeline ol li .timeline-event-content {
    transition: none !important;
  }
}