/* --- components.css --- */

/* Base button — inline-block, rounded, transitioned */
.btn{
  display:inline-block;
  padding:.85rem 1.9rem;
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:.95rem;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,color .25s ease;
}

/* Primary button — accent gradient, lifts on hover */
.btn--primary{
  background:linear-gradient(90deg,var(--clr-accent),#00c98d);
  color:#04120c;
}

.btn--primary:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,229,160,.25);
}

/* Ghost button — border-only, accent on hover */
.btn--ghost{
  border:1px solid var(--clr-border);
  color:var(--clr-text);
}

.btn--ghost:hover{
  border-color:var(--clr-accent);
  color:var(--clr-accent);
  transform:translateY(-3px);
}

/* Card — dark surface, border, shadow, hover lift */
.card{
  background:var(--clr-card);
  border:1px solid var(--clr-border);
  border-radius:var(--radius);
  padding:1.8rem;
  box-shadow:var(--card-shadow);
  transition:transform .25s ease,border-color .25s ease;
}

.card:hover{
  transform:translateY(-6px);
  border-color:var(--clr-accent);
}

/* Card icon — fixed size block */
.card__icon{
  display:block;
  width:1.8rem;
  height:1.8rem;
  margin-bottom:1rem;
}

.card__title{
  font-size:1.1rem;
  margin-bottom:.4rem;
}

/* Card body text — muted */
.card__text{
  color:var(--clr-muted);
  font-size:.92rem;
  margin-bottom:1.1rem;
}

/* Responsive grid — auto-fill columns */
.grid{
  display:grid;
  gap:1.5rem;
}

.grid--3{
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}

.grid--4{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

/* Tag list — flex wrap row */
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

/* Individual tag — mono, pill shape, accent */
.tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.72rem;
  padding:.3rem .75rem;
  border-radius:999px;
  border:1px solid var(--clr-border);
  color:var(--clr-accent);
  background:var(--clr-accent-soft);
}

/* Stat block — centered, large number */
.stat{
  text-align:center;
  padding:2rem 1rem;
}

.stat__num{
  font-family:var(--font-mono);
  font-size:2.1rem;
  font-weight:800;
  color:var(--clr-accent);
}

.stat__label{
  color:var(--clr-muted);
  font-size:.88rem;
  margin-top:.3rem;
}

/* Timeline — vertical line, dashed border left */
.timeline{
  position:relative;
  padding-left:2rem;
  border-left:2px solid var(--clr-border);
  display:grid;
  gap:2.4rem;
}

.timeline__item{
  position:relative;
}

/* Timeline dot — accent circle with glow */
.timeline__item::before{
  content:'';
  position:absolute;
  left:calc(-2rem - 7px);
  top:.45rem;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--clr-accent);
  box-shadow:0 0 0 4px rgba(0,229,160,.15);
}

.timeline__date{
  font-family:var(--font-mono);
  font-size:.8rem;
  color:var(--clr-accent);
}

.timeline__title{
  font-size:1.05rem;
  margin:.2rem 0;
}

.timeline__text{
  color:var(--clr-muted);
  font-size:.92rem;
}

/* Job list — bulleted with ▸ marker */
.job-list{
  display:grid;
  gap:.4rem;
  margin-top:.7rem;
}

.job-list li{
  color:var(--clr-muted);
  font-size:.9rem;
  padding-left:1.2rem;
  position:relative;
}

.job-list li::before{
  content:'▸';
  position:absolute;
  left:0;
  color:var(--clr-accent);
}

/* Project card header — title + arrow row */
.project-card__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin-bottom:.6rem;
}

/* Project card arrow — accent on card hover */
.project-card__arrow{
  color:var(--clr-muted);
  font-size:1.3rem;
  transition:color .25s ease;
}

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

/* Filter bar — flex wrap row of pills */
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-bottom:2.2rem;
}

/* Filter button — pill, mono, toggle active state */
.filter-btn{
  font-family:var(--font-mono);
  font-size:.85rem;
  padding:.5rem 1.2rem;
  border-radius:999px;
  border:1px solid var(--clr-border);
  color:var(--clr-muted);
  transition:color .25s ease,border-color .25s ease,background .25s ease;
}

.filter-btn:hover{
  color:var(--clr-text);
  border-color:var(--clr-accent);
}

.filter-btn.is-active{
  background:var(--clr-accent);
  border-color:var(--clr-accent);
  color:#04120c;
  font-weight:700;
}

/* Form — vertical gap stack */
.form{
  display:grid;
  gap:1.2rem;
}

.form__group{
  display:grid;
  gap:.35rem;
}

.form__label{
  font-family:var(--font-mono);
  font-size:.85rem;
  color:var(--clr-muted);
}

/* Input/textarea — dark bg, border, focus glow */
.form__input,
.form__textarea{
  background:var(--clr-bg-alt);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-sm);
  padding:.85rem 1rem;
  outline:none;
  transition:border-color .25s ease,box-shadow .25s ease;
}

.form__input:focus,
.form__textarea:focus{
  border-color:var(--clr-accent);
  box-shadow:0 0 0 3px rgba(0,229,160,.12);
}

/* Invalid state — danger border */
.form__input.is-invalid,
.form__textarea.is-invalid{
  border-color:var(--clr-danger);
}

.form__textarea{
  min-height:150px;
  resize:vertical;
}

/* Validation error — mono, danger */
.form__error{
  color:var(--clr-danger);
  font-family:var(--font-mono);
  font-size:.78rem;
  min-height:1.2em;
}

/* Form status — mono, reserved height */
.form__status{
  font-family:var(--font-mono);
  font-size:.9rem;
  min-height:1.4em;
}

.form__status--ok{
  color:var(--clr-accent);
}

.form__status--err{
  color:var(--clr-danger);
}