/* ============ SKILLS — dark masonry grid ============ */
#skills {
  background: #050505;
  color: #fff;
  padding: clamp(25.92px, 2.16vw, 40.32px) 0 clamp(40.32px, 3.6vw, 63.36px);
}

/* --- top bar --- */
#skills .skills-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28.8px;
}

#skills .skills-credit {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(13px, 0.61vw, 13px);
  color: #fff;
  white-space: nowrap;
}

#skills .skills-tagline {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(13px, 0.68vw, 13px);
  line-height: 1.5;
  color: #eeeeee;
  text-align: right;
  width: min(374.4px, 55%);
}

/* --- heading --- */
#skills .skills-heading {
  font-family: var(--font-soft);
  font-weight: 300;
  font-size: clamp(24.48px, 2.88vw, 51.84px);
  line-height: 1.18;
  text-align: center;
  max-width: 705.6px;
  /* top margin clears the 3D cube band above it — see .fx-3d--skills in fx.css */
  margin: clamp(155px, 18vw, 310px) auto clamp(40.32px, 3.6vw, 64.8px);
  padding-inline: 14.4px;
}

/* --- masonry grid --- */
#skills .skills-grid {
  display: grid;
  grid-template-columns: 1.32fr 1fr 1.32fr;
  column-gap: 14.4px;
  align-items: start;
}

#skills .skills-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* --- cards --- */
#skills .skill-card {
  background: #181818;
  border-radius: 15.84px;
  padding: clamp(15.84px, 1.44vw, 24.48px);
  margin-bottom: 14.4px;
  transition: background .4s ease, transform .4s ease,
    opacity .9s cubic-bezier(.16, 1, .3, 1);
  break-inside: avoid;
}

#skills .skill-card:hover {
  background: #1e1e1e;
  transform: translateY(-6px);
}

/* reveal + hover both use transform — once visible, let hover win */
#skills .skill-card.reveal.visible:hover { transform: translateY(-6px); }

#skills .skill-card h3 {
  font-family: var(--font-soft);
  font-weight: 500;
  font-size: clamp(13px, 0.86vw, 15.12px);
  color: #fff;
  margin-top: clamp(12.96px, 1.15vw, 19.44px);
  line-height: 1.3;
}

#skills .skill-card p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.6;
  color: #9f9f9f;
  margin-top: 7.2px;
}

/* --- icon tiles --- */
#skills .tile-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(10.08px, 1.15vw, 20.16px);
}

#skills .tile-row.center { justify-content: center; }

#skills .tile {
  width: clamp(38.88px, 2.74vw, 51.84px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #262626;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#skills .tile img {
  width: 54%;
  height: 54%;
  object-fit: contain;
}

#skills .tile--light { background: #fff; }

/* dark wordmarks forced to white (AWS) */
#skills .tile img.inv { filter: brightness(0) invert(1); }

/* --- pills --- */
#skills .pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8.64px;
}

#skills .pill {
  display: inline-block;
  background: #262626;
  border-radius: 999px;
  padding: 6.48px 12.96px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(13px, 0.61vw, 13px);
  color: #fff;
  white-space: nowrap;
}

/* UI/UX card: figma tile + inline pills */
#skills .uiux-row { gap: 11.52px; }

/* --- half-width duo (Mobile App / Version Control) --- */
#skills .cards-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14.4px;
  margin-bottom: 14.4px;
}

#skills .cards-duo .skill-card {
  margin-bottom: 0;
  padding: clamp(17.28px, 1.3vw, 24.48px);
}

#skills .cards-duo .skill-card h3 { font-size: clamp(13.68px, 0.94vw, 17.28px); }

/* ================= responsive ================= */
@media (max-width: 1100px) {
  #skills .skills-grid {
    display: block;
    column-count: 2;
    column-gap: 14.4px;
  }
  #skills .skills-col { display: contents; }
  #skills .cards-duo { break-inside: avoid; }
}

@media (max-width: 700px) {
  #skills .skills-grid { column-count: 1; }
  #skills .skills-topbar {
    flex-direction: column;
    gap: 11.52px;
  }
  #skills .skills-tagline {
    text-align: left;
    width: 100%;
  }
}

@media (max-width: 500px) {
  #skills .cards-duo { grid-template-columns: 1fr; }
}