/* =============================================================
   SKILLS PAGE — Vicente Hernaiz Portfolio
   Inspired by skills.sh: bold hero, filter pills, grouped list.
   ============================================================= */

.skills-page {
  padding: 48px 64px 80px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}


/* =============================================================
   HERO
   ============================================================= */

.skills-hero {
  margin-bottom: 56px;
}

/* ── Big logo ─────────────────────────────────────────────── */
.skills-hero__logo {
  margin-bottom: 12px;
  line-height: 1;
}

.skills-hero__logo-text {
  display:        inline-block;
  font-family:    var(--font-headings);
  font-size:      clamp(72px, 12vw, 136px);
  font-weight:    800;
  letter-spacing: 0.06em;
  line-height:    1;
  color:          #ffffff;
  /* 3D block depth — mimics skills.sh pixel font */
  text-shadow:
    2px 2px 0 #160822,
    4px 4px 0 #1e0b30,
    6px 6px 0 #2a0f40,
    8px 8px 0 rgba(143, 0, 216, 0.35),
    0 0 80px rgba(143, 0, 216, 0.08);
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.07);
  user-select: none;
}

/* ── Subtitle ─────────────────────────────────────────────── */
.skills-hero__sub {
  margin-bottom: 24px;
}

/* ── Intro paragraph ──────────────────────────────────────── */
.skills-hero__intro {
  font-family: var(--font-text);
  font-size:   var(--fs-16);
  font-weight: 400;
  line-height: 28px;
  color:       #b0b0b0;
  max-width:   640px;
  margin-bottom: 20px;
}

.skills-hero__intro strong {
  color:       #ffffff;
  font-weight: 600;
}

/* ── Count badge ──────────────────────────────────────────── */
.skills-hero__count {
  display:        inline-flex;
  align-items:    baseline;
  gap:            4px;
  font-family:    var(--font-mono);
  font-size:      var(--fs-13);
  font-weight:    500;
  letter-spacing: 0.05em;
  color:          #555;
}

#skillsVisible {
  color:       #c97fff;
  font-size:   var(--fs-16);
  font-weight: 600;
}

.skills-hero__count-label {
  color: #555;
}


/* =============================================================
   FILTERS
   ============================================================= */

.skills-filters {
  margin-bottom: 56px;
}

.skills-filters__label {
  margin-bottom: 16px;
}

.skills-filters__pills {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

/* ── Filter pill ──────────────────────────────────────────── */
.skills-filter-pill {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  height:         36px;
  padding:        0 14px;
  background:     transparent;
  border:         1px solid var(--purple-card-border);
  border-radius:  64px;
  font-family:    var(--font-mono);
  font-size:      var(--fs-13);
  font-weight:    500;
  letter-spacing: 0.02em;
  color:          var(--white);
  cursor:         pointer;
  transition:     background 0.18s, border-color 0.18s, color 0.18s;
  white-space:    nowrap;
  background-color: #2a0f40;
}

.skills-filter-pill:hover {
  border-color: var(--purple-border);
  color:        var(--purple-900);
}

.skills-filter-pill--active {
  background:   rgba(143, 0, 216, 0.18);
  border-color: var(--purple-border);
  color:        var(--purple-900);
}

.skills-filter-pill--active:hover {
  background:   rgba(143, 0, 216, 0.25);
  border-color: var(--purple-500);
  color:        var(--white);
}

.skills-filter-pill__count {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  min-width:      20px;
  height:         18px;
  padding:        0 5px;
  background:     var(--purple-card);
  border-radius:  20px;
  font-size:      10px;
  font-weight:    600;
  color:          var(--gray-900);
  transition:     background 0.18s, color 0.18s;
}

.skills-filter-pill--active .skills-filter-pill__count {
  background: rgba(143, 0, 216, 0.3);
  color:      var(--purple-900);
}


/* =============================================================
   SECTION TITLE (shared)
   ============================================================= */

.skills-section-title {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-family: var(--font-headings);
  font-size:   var(--fs-20);
  font-weight: 600;
  color:       var(--white);
  margin-bottom: 20px;
}

.skills-section-title__icon {
  color:     #c97fff;
  font-size: 14px;
}


/* =============================================================
   BEST SKILLS
   ============================================================= */

.skills-best {
  margin-bottom: 56px;
  padding:       28px 32px;
  background:    rgba(143, 0, 216, 0.06);
  border:        1px solid rgba(143, 0, 216, 0.15);
  border-radius: 16px;
}

.skills-best__grid {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

/* ── Best skill tag ───────────────────────────────────────── */
.skill-item--best {
  display:        inline-flex;
  align-items:    center;
  height:         40px;
  padding:        0 16px;
  background:     rgba(143, 0, 216, 0.14);
  border:         1px solid rgba(143, 0, 216, 0.4);
  border-radius:  8px;
  font-family:    var(--font-mono);
  font-size:      var(--fs-13);
  font-weight:    500;
  letter-spacing: 0.02em;
  color:          #d9a8ff;
  white-space:    nowrap;
  transition:     background 0.15s, border-color 0.15s;
}

.skill-item--best:hover {
  background:   rgba(143, 0, 216, 0.22);
  border-color: rgba(143, 0, 216, 0.65);
}


/* =============================================================
   SEARCH
   ============================================================= */

.skills-search {
  margin-bottom: 40px;
}

.skills-search__inner {
  position:    relative;
  display:     flex;
  align-items: center;
}

.skills-search__icon {
  position:       absolute;
  left:           14px;
  pointer-events: none;
  flex-shrink:    0;
  font-size:      18px;
  color:          #c97fff;
  line-height:    1;
}

.skills-search__input {
  width:        100%;
  height:       48px;
  padding:      0 44px 0 44px;
  background:   rgba(255, 255, 255, 0.04);
  border:       1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-family:  var(--font-mono);
  font-size:    var(--fs-16);
  font-weight:  400;
  color:        #f0f0f0;
  outline:      none;
  transition:   border-color 0.18s, background 0.18s;
  -webkit-appearance: none;
  appearance:   none;
}

.skills-search__input::placeholder {
  color: #c97fff;
}

.skills-search__input:focus {
  border-color: rgba(143, 0, 216, 0.5);
  background:   rgba(255, 255, 255, 0.06);
}

/* Hide browser default clear button */
.skills-search__input::-webkit-search-cancel-button { display: none; color: violet; }

.skills-search__clear {
  position:    absolute;
  right:       12px;
  cursor:      pointer;
  padding:     4px;
  opacity:     0.5;
  transition:  opacity 0.15s;
  background:  transparent;
  border:      none;
  display:     flex;
  align-items: center;
}

.skills-search__clear:hover { opacity: 1; }

.skills-search__result {
  margin-top:  10px;
  font-family: var(--font-mono);
  font-size:   12px;
  color:       #555;
  letter-spacing: 0.04em;
}


/* =============================================================
   SKILLS LIST
   ============================================================= */

.skills-list {
  display:        flex;
  flex-direction: column;
  gap:            40px;
}

/* ── Group ────────────────────────────────────────────────── */
.skills-group__header {
  display:     flex;
  align-items: baseline;
  gap:         8px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.skills-group__title {
  font-family: var(--font-headings);
  font-size:   var(--fs-20);
  font-weight: 600;
  color:       var(--white);
}

.skills-group__count {
  font-family: var(--font-mono);
  font-size:   var(--fs-13);
  font-weight: 400;
  color:       var(--purple-900);
  letter-spacing: 0.04em;
}

.skills-group__tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

/* ── Regular skill tag ────────────────────────────────────── */
.skill-item {
  display:        inline-flex;
  align-items:    center;
  height:         36px;
  padding:        0 14px;
  background:     var(--purple-card);
  border:         1px solid var(--purple-card-border);
  border-radius:  8px;
  font-family:    var(--font-mono);
  font-size:      var(--fs-13);
  font-weight:    var(--mono-fw-lte20);
  letter-spacing: var(--mono-ls-lte20);
  color:          var(--purple-900);
  white-space:    nowrap;
  transition:     background 0.15s, border-color 0.15s;
}

.skill-item:hover {
  background:   rgba(143, 0, 216, 0.12);
  border-color: rgba(143, 0, 216, 0.35);
}

/* ── No results ───────────────────────────────────────────── */
.skills-no-results {
  font-family: var(--font-mono);
  font-size:   var(--fs-16);
  color:       #444;
  padding:     24px 0;
  text-align:  center;
  letter-spacing: 0.04em;
}


/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width: 1200px) {
  .skills-page { padding: 40px 48px 72px; }
}

@media (max-width: 900px) {
  .skills-page { padding: 36px 40px 64px; }
  .skills-best  { padding: 24px; }
}

@media (max-width: 640px) {
  .skills-page { padding: 28px 20px 56px; }

  .skills-hero__logo-text {
    font-size:      clamp(56px, 18vw, 96px);
    letter-spacing: 0.04em;
  }

  .skills-hero__intro { font-size: 15px; line-height: 26px; }

  .skills-best { padding: 20px 16px; border-radius: 12px; }

  .skills-search__input { font-size: 15px; }

  .skills-group__title { font-size: var(--fs-16); }

  .skills-filters__pills { gap: 6px; }

  .skills-filter-pill {
    height:   32px;
    padding:  0 11px;
    font-size: 12px;
  }
}