* { box-sizing: border-box; }

.experience-section {
    max-width: var(--measure);
    margin: 0 auto;
}

/* Each job entry */
.experience-entry {
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--border);
}

.experience-entry:first-of-type {
    padding-top: 0;
}

.experience-entry:last-of-type {
    border-bottom: none;
}

/* Header row: company name (left) + date range (right) */
.experience-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-bottom: 0.15rem;
}

.experience-company {
    color: var(--fg);
}

.experience-company:hover {
    text-decoration: underline;
    text-decoration-color: var(--fg-muted);
}

.experience-dates {
    color: var(--fg-muted);
    white-space: nowrap;
}

/* Role title */
.experience-role {
    color: var(--green);
    margin: 0 0 0.6rem 0;
}

/* One-line summary */
.experience-summary {
    color: var(--fg);
    margin: 0 0 0.75rem 0;
}

/* Bullet list */
.experience-bullets {
    margin: 0 0 1rem 0;
    padding-left: 1.1rem;
    color: var(--fg-muted);
}

.experience-bullets li {
    margin-bottom: 0.35rem;
}

.experience-bullets li:last-child {
    margin-bottom: 0;
}

/* Tech stack pills */
.experience-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.experience-stack span {
    color: var(--fg);
    background: var(--bg-panel);
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    line-height: 1;
}

.experience-images {
  display: flex;
  width: 100%;
  gap: 16px;
}

.img-wrapper {
  flex: 1 1 auto; /* Scale based on image aspect ratios */
  display: flex;
}

.img-wrapper img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media (max-width: 480px) {
    .experience-header {
        flex-direction: column;
        align-items: flex-start;
    }
}