/* Principal-level enhancements - Monochromatic Deep Blue */

/* ============================================
   SKILLS SECTION
   ============================================ */

.skills-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.skill-category-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1.6rem;
  transition: border-color 0.2s ease;
}

.skill-category-card:hover {
  border-color: var(--color-accent);
}

.skill-category-card h3 {
  color: var(--color-accent);
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.8rem;
}

.skill-category-desc {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.skill-tags span {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 1.0rem;
  padding: 0.2rem 0.8rem;
  border-radius: 12px;
}

/* First tag in each card gets green accent */
.skill-tags span:first-child {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ============================================
   PORTFOLIO SECTION
   ============================================ */

.projects-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.project-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
  position: relative;
}

.project-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-3px);
  box-shadow: none;
}

/* Green accent line at bottom on hover */
.project-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.project-card:hover::after {
  opacity: 1;
}

.project-card--head img {
  width: 100%;
  height: 16rem;
  object-fit: cover;
  display: block;
  background: var(--color-surface-2);
}

.project-card--body {
  padding: 1.4rem;
}

.project-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
}

.project-type {
  font-size: 1.0rem;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  padding: 0.1rem 0.8rem;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.project-stats {
  font-size: 1.1rem;
  color: var(--color-text-muted);
}

.project-stats i {
  color: var(--color-accent);
}

.project-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
}

.project-link {
  color: var(--color-text);
  transition: color 0.3s ease;
}

.project-card:hover .project-link {
  color: var(--color-accent);
}

.project-desc {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Flagship card — Custom Ads SDK */
.project-card--flagship {
  background: linear-gradient(135deg, #0d2818, var(--color-surface));
  border-color: var(--color-accent);
}

.project-card--flagship .project-type {
  background: var(--color-accent);
  color: #000;
  border-color: var(--color-accent);
}

.project-card--flagship .project-title .project-link {
  color: var(--color-accent);
}

/* ============================================
   EXPERIENCE TIMELINE
   ============================================ */

.timeline {
  position: relative;
  padding-left: 2.8rem;
  border-left: 2px solid var(--color-accent);
}

.timeline-step {
  position: relative;
  margin-bottom: 2.4rem;
}

/* Timeline dot */
.timeline-step::before {
  content: "";
  position: absolute;
  left: -3.5rem;
  top: 0.8rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--color-accent);
  box-sizing: border-box;
}

/* Current role dot — filled with glow ring */
.timeline-step--current::before {
  background: var(--color-accent);
  border: 3px solid var(--color-bg);
  box-shadow: 0 0 0 2px var(--color-accent);
}

/* Oldest entry — dimmed dot */
.timeline-step--faded::before {
  border-color: var(--color-border);
}

.timeline-content {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 2rem;
  position: relative;
}

/* Current role card — green border + gradient bg */
.timeline-step--current .timeline-content {
  border-color: var(--color-accent);
  background: linear-gradient(135deg, #0d2818, var(--color-surface));
}

/* Oldest entry — reduced opacity */
.timeline-step--faded .timeline-content {
  opacity: 0.8;
}

/* CURRENT badge */
.timeline-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--color-accent);
  color: #000;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: monospace;
  letter-spacing: 1px;
  padding: 0.3rem 1rem;
  border-radius: 0 10px 0 8px;
}

.timeline-content h3 {
  color: var(--color-text);
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.timeline-company {
  display: block;
  color: var(--color-accent);
  font-size: 1.2rem;
  margin-bottom: 0.2rem;
}

.timeline-date {
  display: block;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  margin-bottom: 1.2rem;
}

/* Multi-role company header */
.timeline-company-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1.2rem;
}

.timeline-company-header h3 {
  color: var(--color-accent);
  margin-bottom: 0;
}

.timeline-duration {
  color: var(--color-text-muted);
  font-size: 1.1rem;
}

/* Sub-role entries */
.timeline-subrole {
  padding: 0.6rem 0 0.6rem 1.2rem;
  border-left: 2px solid var(--color-border);
  margin-bottom: 0.8rem;
}

.timeline-subrole h4 {
  color: var(--color-text);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

/* Timeline bullet points */
.timeline-content ul {
  list-style: none;
  padding: 0;
  margin-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.timeline-content li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  color: var(--color-text-muted);
  font-size: 1.2rem;
  line-height: 1.6;
}

.timeline-content li::before {
  content: "▸";
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* Remove old timeline-arrow styling */
.timeline-arrow {
  display: none;
}

/* ============================================
   EDUCATION SECTION
   ============================================ */

.feats.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.feat-box.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 2rem;
  transition: border-color 0.2s ease;
}

.feat-box.card:hover {
  border-color: var(--color-accent);
}

/* Degree card — green border */
.feat-box.card:first-child {
  border-color: var(--color-accent);
}

.feat-icon {
  font-size: 2.2rem;
  color: var(--color-accent);
  margin-bottom: 1.2rem;
  display: block;
}

.feat-box.card .heading-tertiary {
  font-size: 1.3rem;
  color: var(--color-text);
  margin-bottom: 0.8rem;
}

.feat-desc {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 0.4rem;
}

/* Institution name — first feat-desc after heading */
.feat-box.card .heading-tertiary + .feat-desc {
  color: var(--color-accent);
  font-size: 1.1rem;
}

/* ============================================
   FEATURES / WHAT I DO SECTION
   ============================================ */

.feats:not(.cards) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.feat-box:not(.card) {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transition: border-color 0.3s ease;
}

.feat-box:not(.card):hover {
  border-color: var(--color-accent);
}

/* Green left accent bar */
.feat-box:not(.card)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--color-accent);
}

.feat-inner {
  padding: 2rem 2rem 2rem 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.feat-box:not(.card) .feat-icon {
  font-size: 2rem;
  color: var(--color-accent);
  margin-bottom: 0;
}

.feat-box:not(.card) .heading-tertiary {
  font-size: 1.3rem;
  color: var(--color-text);
  margin-bottom: 0;
}

.feat-box:not(.card) .feat-desc {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1.6;
  flex: 1;
}

.feat-arrow {
  font-size: 1.2rem;
  color: var(--color-accent);
  font-weight: 600;
  align-self: flex-start;
}

/* ============================================
   BLOG & ARTICLES SECTION
   ============================================ */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.blog-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color 0.3s ease;
}

.blog-card:hover {
  border-color: var(--color-accent);
}

.blog-icon {
  width: 4rem;
  height: 4rem;
  background: var(--color-bg);
  border: 1px solid var(--color-accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--color-accent);
}

/* StackOverflow icon — brand orange */
.blog-icon.stackoverflow {
  border-color: #f48024;
  color: #f48024;
}

/* GitHub icon — muted */
.blog-icon.github {
  border-color: var(--color-border);
  color: var(--color-text);
}

.blog-title {
  color: var(--color-text);
  font-size: 1.4rem;
  font-weight: 600;
}

.blog-desc {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1.6;
  flex: 1;
}

.blog-stats {
  color: var(--color-text-muted);
  font-size: 1.1rem;
}

.blog-link {
  color: var(--color-accent);
  font-size: 1.2rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: opacity 0.2s ease;
}

.blog-link:hover {
  opacity: 0.8;
}
/* ============================================
   EXPERIENCE TABS
   ============================================ */

.exp-tabs {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Tab button list — left-aligned pill row */
.exp-tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0;
}

.exp-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 1rem 1.8rem;
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
  margin-bottom: -1px;
  white-space: nowrap;
}

.exp-tab-btn:hover {
  color: var(--color-text);
}

.exp-tab-btn.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* Tab panel */
.exp-tab-panel {
  display: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 2.4rem;
  animation: fadeIn 0.25s ease;
}

.exp-tab-panel.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Panel header */
.exp-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.6rem;
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
}

.exp-title-block {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.exp-role {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--color-text);
}

.exp-role-sep {
  color: var(--color-text-muted);
  font-weight: 400;
  margin: 0 0.4rem;
}

.exp-company {
  font-size: 1.3rem;
  color: var(--color-accent);
  font-weight: 500;
}

.exp-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}

.exp-badge {
  background: var(--color-accent);
  color: #000;
  font-size: 1rem;
  font-weight: 700;
  font-family: monospace;
  letter-spacing: 1px;
  padding: 0.2rem 0.8rem;
  border-radius: 4px;
}

.exp-date {
  font-size: 1.1rem;
  color: var(--color-text-muted);
}

/* Sub-role tags */
.exp-subroles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1.6rem;
}

.exp-subrole-tag {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 1.1rem;
  padding: 0.3rem 1rem;
  border-radius: 20px;
}

/* Bullet list */
.exp-bullets {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.exp-bullets li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  color: var(--color-text-muted);
  font-size: 1.3rem;
  line-height: 1.7;
}

.exp-bullets li::before {
  content: "▸";
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* ============================================
   PROJECT TABS
   ============================================ */

.proj-tabs {
  width: 100%;
}

.proj-tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.4rem;
}

.proj-tab-btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: 0.8rem 1.8rem;
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.proj-tab-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-text);
}

.proj-tab-btn.active {
  background: var(--color-accent-dim);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.proj-tab-panel {
  display: none;
  animation: fadeIn 0.25s ease;
}

.proj-tab-panel.active {
  display: block;
}

/* ============================================
   PROJECT CARD PLACEHOLDER HEADS
   (for cards without screenshots)
   ============================================ */

.proj-placeholder {
  width: 100%;
  height: 16rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
}

.proj-placeholder i {
  opacity: 0.6;
}

.proj-placeholder--blue   { background: linear-gradient(135deg, #0d1f3c, #1a3a6b); color: #79c0ff; }
.proj-placeholder--green  { background: linear-gradient(135deg, #0d2818, #1a4a2a); color: var(--color-accent); }
.proj-placeholder--teal   { background: linear-gradient(135deg, #0d2830, #0f4a58); color: #56d4e8; }
.proj-placeholder--indigo { background: linear-gradient(135deg, #1a0d3c, #2d1a6b); color: #c0a0ff; }
.proj-placeholder--orange { background: linear-gradient(135deg, #3c1a0d, #6b2d0d); color: #f0a070; }
.proj-placeholder--purple { background: linear-gradient(135deg, #2a0d3c, #4a0d5a); color: #d080ff; }

@media screen and (max-width: 48em) {
  .proj-tab-list {
    gap: 0.5rem;
  }
  .proj-tab-btn {
    padding: 0.6rem 1.2rem;
    font-size: 1.2rem;
  }
}