/* =========================================
   EXPERIENCE + FILTERS — MOBILE-FIRST, POLISHED
   (Arrow notch is now attached to the CARD so it never hides)
   ========================================= */

/* --------- CSS Variables --------- */
:root{
  --c-ink:#141414;
  --c-ink-2:#333;
  --c-ink-3:#666;
  --c-bg:#ffffff;
  --c-brand:#7303a7;
  --c-brand-2:#420177;
  --c-accent:#f68c09;
  --c-line:#020133;
  --c-grad-a:#667eea;
  --c-grad-b:#764ba2;
  --radius:12px;
  --shadow-sm:0 2px 10px rgba(0,0,0,.08);
  --shadow-md:0 6px 18px rgba(0,0,0,.15);
  --shadow-lg:0 12px 30px rgba(0,0,0,.20);
}

/* --------- Base section + heading --------- */
section{min-height:100vh; padding:2rem 9%;}
.heading{font-size:3.5rem; color:var(--c-ink); font-weight:800; text-align:center;}
.heading span{color:var(--c-brand);} 

/* =========================================
   EXPERIENCE — TIMELINE
   Mobile-first: single column; >=768px two-columns
   ========================================= */
.experience{ margin-top:5rem; }
.experience .quote{ text-align:center; font-size:1.5rem; font-weight:600; color:var(--c-ink-2); }

.experience .timeline{ position:relative; max-width:1200px; margin:2rem auto; }

/* Mobile: single column rail on the left */
.experience .timeline::after{ content:""; position:absolute; width:6px; background:var(--c-line); top:0; bottom:0; left:31px; z-index:-2; }

.experience .container{ width:100%; position:relative; background:transparent; padding:10px 25px 10px 70px; }

/* Node icon / circle */
.experience .container::after{
  content:"\f0b1"; position:absolute; width:28px; height:28px; left:15px; top:15px;
  background:#fff; border:4px solid var(--c-accent); border-radius:50%; z-index:2;
  display: flex; align-items:center; justify-content:center; color:#02094b;
  font-family:"Font Awesome 5 Free"; font-weight:900; font-size:1.5rem; line-height:1;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}

/* Mobile arrow (points toward the card) */
.experience .container::before{
  content:" "; position:absolute; top:22px; left:60px; width:0; height:0; z-index:1;
  border: medium solid var(--c-accent);
  border-width:10px 10px 10px 0; border-color: transparent var(--c-accent) transparent transparent;
}

/* Card */
.experience .content{ position:relative; background:var(--c-accent); border-radius:14px; box-shadow:var(--shadow-sm); overflow:visible; }
.experience .content .tag{ font-size:1.3rem; padding:1.5rem 1.5rem 0; color:#0a0a0a; }
.experience .content .desc{ margin-left:1.5rem; padding:0 1.5rem 1.2rem 0; }
.experience .content .desc h3{ font-size:1.5rem; font-weight:700; color:#111; }
.experience .content .desc p{ font-size:1.3rem; color:#121212; text-transform:none; }

/* Two-column layout from tablet up */
@media (min-width:768px){
  .experience .timeline::after{ left:50%; margin-left:-3px; }
  .experience .container{ width:50%; padding:10px 40px; }
  .experience .left{ left:0; }
  .experience .right{ left:50%; }

  /* Node positions */
  .experience .container::after{ right:-17px; left:auto; }
  .experience .right::after{ left:-16px; right:auto; }

  /* Hide the old (container) arrow on desktop so it doesn't sit under the card */
  .experience .container::before{ display:none; }

  /* NEW: attach the arrow to the CARD itself so it is always on top
     and flush with the rounded edge. */
  .experience .left .content::after{ /* points RIGHT */
    content:""; position:absolute; top:22px; right:-10px; width:0; height:0; z-index:2;
    border-style:solid; border-width:10px 0 10px 10px;
    border-color:transparent transparent transparent var(--c-accent);
  }
  .experience .right .content::before{ /* points LEFT */
    content:""; position:absolute; top:15px; left:-10px; width:0; height:0; z-index:2;
    border-style:solid; border-width:10px 10px 10px 0;
    border-color:transparent var(--c-accent) transparent transparent;
  }
}

/* View all button */
.morebtn{ display:flex; justify-content:center; margin:2rem 0; }
.morebtn .btn{ position:relative; line-height:0; padding:1.6rem 3rem; border-radius:.5em; transition:.5s; color:#fff; background:#2506ad; box-shadow:0 5px 10px rgba(48,68,247,.6); text-align:center; display:inline-flex; align-items:center; gap:.8rem; }
.morebtn .btn span{ font:600 1.7rem "Nunito",sans-serif; }
.morebtn .btn i{ font-size:1.5rem; transition:.3s; }
.morebtn .btn:hover{ background:#1a047e; }
.morebtn .btn:hover i{ transform: translateX(-8px); }

/* Accessibility & motion preferences */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.001ms !important; }
}

/* =========================================
   FILTERS — matches site style, mobile-first
   ========================================= */
.filter-wrapper{ margin:3rem 0; padding:0 2rem; }
.filter-container{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1.5rem; margin-bottom:2rem; }
.filter-buttons{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }

.filter-btn{ padding:1rem 2rem; font-size:1.4rem; font-weight:600; border:2px solid var(--c-brand); background:transparent; color:var(--c-brand); border-radius:50px; cursor:pointer; transition:.3s; display:flex; align-items:center; gap:.5rem; font-family:"Poppins",sans-serif; }
.filter-btn:hover{ background:var(--c-brand); color:#fff; transform:translateY(-3px); box-shadow:0 5px 15px rgba(115,3,167,.3); }
.filter-btn.active{ background:var(--c-brand); color:#fff; box-shadow:0 5px 15px rgba(115,3,167,.4); }
.filter-btn i{ font-size:1.6rem; }

.toggle-advanced-filters{ padding:1rem 2rem; font-size:1.3rem; font-weight:500; border:2px solid #555; background:transparent; color:#555; border-radius:50px; cursor:pointer; transition:.3s; display:flex; align-items:center; gap:.8rem; font-family:"Poppins",sans-serif; }
.toggle-advanced-filters:hover{ background:#555; color:#fff; }
.toggle-advanced-filters i.fa-chevron-down{ transition:transform .3s; }

/* Advanced Filters */
.advanced-filters{ max-height:0; overflow:hidden; transition:max-height .4s ease, opacity .4s ease; opacity:0; margin:2rem 0; }
.advanced-filters.show{ max-height:500px; opacity:1; }

.filter-group{ background:#fff; padding:2rem; border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.filter-group h4{ font-size:1.6rem; color:var(--c-ink-2); margin-bottom:1.5rem; display:flex; align-items:center; gap:1rem; }
.filter-group h4 i{ color:var(--c-brand); font-size:1.8rem; }

.filter-tags{ display:flex; flex-wrap:wrap; gap:1rem; }
.filter-tag{ padding:.8rem 1.8rem; font-size:1.3rem; font-weight:500; border:2px solid #ddd; background:#f9f9f9; color:#555; border-radius:50px; cursor:pointer; transition:.3s; font-family:"Poppins",sans-serif; }
.filter-tag:hover{ border-color:var(--c-brand); color:var(--c-brand); background:#f0e6f6; transform:translateY(-2px); }
.filter-tag.active{ background:var(--c-brand); color:#fff; border-color:var(--c-brand); box-shadow:0 3px 10px rgba(115,3,167,.3); }

/* Filter Count */
.filter-count{ text-align:center; font-size:1.5rem; color:#666; margin:2rem 0; padding:1rem; background:#fff; border-radius:50px; box-shadow:0 2px 10px rgba(0,0,0,.05); transition:.3s; }
.filter-count span{ color:var(--c-brand); font-weight:700; font-size:1.7rem; }

/* --------- Card enhancements inside timeline --------- */
.experience .timeline{ opacity:1; transform:translateY(0); transition:opacity .5s, transform .5s; }
.experience .timeline .container{ position:relative; }

/* Featured badge */
.featured-badge{ position:absolute; top:-10px; right:20px; background:linear-gradient(135deg,#ffd700,#ffed4e); color:#333; padding:.5rem 1.5rem; border-radius:50px; font-size:1.2rem; font-weight:700; box-shadow:0 3px 10px rgba(255,215,0,.5); z-index:10; display:flex; align-items:center; gap:.5rem; animation:pulse 2s infinite; }
.featured-badge i{ color:#ff6b00; font-size:1.4rem; }
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* Meta rows */
.location{ font-size:1.3rem; color:#666; margin-top:.5rem; display:flex; align-items:center; gap:.5rem; }
.location i{ color:var(--c-brand); }
.period{ display:flex; align-items:center; gap:.5rem; font-size:1.4rem; color:#555; margin:1rem 0; }
.period i{ color:var(--c-brand); }
.description{ font-size:1.4rem; line-height:1.8; color:#444; margin:1.5rem 0; text-transform:none; }

/* Tools */
.tools{ margin-top:2rem; padding-top:1.5rem; border-top:2px dashed #e0e0e0; }
.tools-label{ font-size:1.4rem; font-weight:600; color:#333; margin-bottom:1rem; display:flex; align-items:center; gap:.8rem; }
.tools-label i{ color:var(--c-brand); font-size:1.6rem; }
.tools-list{ display:flex; flex-wrap:wrap; gap:.8rem; }
.tool-tag{ padding:.6rem 1.4rem; font-size:1.2rem; background:linear-gradient(135deg,var(--c-grad-a),var(--c-grad-b)); color:#fff; border-radius:50px; font-weight:500; box-shadow:0 2px 8px rgba(102,126,234,.3); transition:.3s; }
.tool-tag:hover{ transform:translateY(-2px); box-shadow:0 4px 12px rgba(102,126,234,.5); }

/* Type badges */
.type-badge{ display:inline-block; padding:.5rem 1.2rem; font-size:1.1rem; font-weight:600; border-radius:50px; margin-top:1rem; text-transform:uppercase; letter-spacing:.5px; }
.badge-employment{ background:#e3f2fd; color:#1976d2; border:2px solid #1976d2; }
.badge-freelance{ background:#f3e5f5; color:#7b1fa2; border:2px solid #7b1fa2; }
.badge-internship{ background:#e8f5e9; color:#388e3c; border:2px solid #388e3c; }
.badge-competition{ background:#fff3e0; color:#f57c00; border:2px solid #f57c00; }
.badge-scholarship{ background:#fce4ec; color:#c2185b; border:2px solid #c2185b; }
.badge-extracurricular{ background:#e0f2f1; color:#00796b; border:2px solid #00796b; }

/* =========================================
   RESPONSIVE TWEAKS
   ========================================= */
@media (max-width:768px){
  .filter-wrapper{ padding:0 1rem; }
  .filter-buttons{ flex-direction:column; width:100%; }
  .filter-btn{ width:100%; justify-content:center; font-size:1.3rem; padding:1.2rem; }
  .toggle-advanced-filters{ width:100%; justify-content:center; }
  .filter-tags{ justify-content:center; }
  .filter-tag{ font-size:1.2rem; padding:.7rem 1.5rem; }
  .filter-count{ font-size:1.3rem; margin:1.5rem 0; padding:.8rem; }
  .filter-count span{ font-size:1.5rem; }
  .featured-badge{ font-size:1rem; padding:.4rem 1rem; top:-5px; right:10px; }
  .tools-list{ justify-content:center; }
  .tool-tag{ font-size:1.1rem; padding:.5rem 1.2rem; }
}

@media (max-width:450px){
  .description{ font-size:1.3rem; }
  .location,.period{ font-size:1.2rem; }
}