/* ========================================
   EXPERIENCE SECTION STYLES
   ========================================
   This file contains all styles for the Experience/CV section
   including the timeline, job entries, and related elements.
   
   Table of Contents:
   1. Experience Title
   2. CV Page Container
   3. Grid Layout
   4. Timeline Styles
   5. Timeline Heading
   6. Timeline Details
   7. Tools/Tags Styles
   ======================================== */


/* ========================================
   1. EXPERIENCE TITLE
   Main heading for the Experience section
   ======================================== */

.experience-title {
  font-weight: 700;
  font-size: 4.5rem;
  text-align: center;
  margin-bottom: 2rem;
  color: #4a5568;
}


/* ========================================
   2. CV PAGE CONTAINER
   Main wrapper for the CV/Experience content
   ======================================== */

.CV-page {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 2em;
  padding-top: 80px;
  padding-bottom: 80px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #222222;
  font-size: 1em;
  font-family: 'Lato', sans-serif;
}

/* Responsive: Reduce padding on smaller screens */
@media all and (max-width: 500px) {
  .CV-page {
    padding: 0 1em;
  }
}


/* ========================================
   3. GRID LAYOUT
   Table-based grid system for CV columns
   ======================================== */

.CV-grid {
  display: table;
}

.CV-grid-column {
  display: table-cell;
}


/* ========================================
   4. TIMELINE STYLES
   Vertical timeline with left border line
   ======================================== */

.CV-timeline {
  position: relative;
  margin: 0 0 0 0.5em;
  padding-left: 1.5em;
  border-left: solid 1px #222222;
}

/* Remove top margin for first timeline item */
.CV-timeline:first-of-type {
  margin-top: 1em;
}

/* Remove border for last timeline item */
.CV-timeline:last-of-type {
  border-left-color: transparent;
}

/* Timeline dot/bullet on the left */
.CV-timeline:before {
  content: "";
  position: absolute;
  top: 0;
  left: -0.5em;
  display: block;
  width: 1em;
  height: 1em;
  border: solid 1px #222222;
  background-color: #ffffff;
  border-radius: 50%;
}


/* ========================================
   5. TIMELINE HEADING
   Job title, company, location, and duration
   ======================================== */

.CV-timeline-heading {
  margin: 0;
  padding-bottom: 0.5em;
  line-height: 1em;
  font-weight: normal;
  -webkit-transform: translateY(-0.1em);
  -ms-transform: translateY(-0.1em);
  transform: translateY(-0.1em);
}

/* Job Title Styling */
.CV-timeline-heading-title {
  line-height: 1.2em;
  color: #4a5568;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 20px;
}

/* Company Location */
.CV-timeline-heading-location {
  font-size: 0.8em;
  padding: 10px, 10px, 0px, 0px;
  color: #4a5568;
}

/* Employment Duration/Dates */
.CV-timeline-heading-duration {
  display: block;
  font-size: .6em;
 
  color: #6f6f6f;
}


/* ========================================
   6. TIMELINE DETAILS
   List of job responsibilities/achievements
   ======================================== */

.CV-timeline-details {
  display: block;
  margin: 0;
  padding-bottom: 2em;
  padding: 0 0 2em 1em;
  list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGElEQVQIW2NkYGD4D8TIgJERTQDMpVAQAGaUAQbko3DsAAAAAElFTkSuQmCC");
}

/* Individual detail items */
.CV-timeline-details-item {
  margin-bottom: 0.5em;
  color: #4a5568;
}


/* ========================================
   7. TOOLS/TAGS STYLES
   Skills and tools used in each role
   ======================================== */

.tools {
  font-size: 0.85em;
  color: #4a5568;
  font-weight: 500;
  margin-top: 0.5em;
  padding: 0.5em 1em;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  display: inline-block;
}