/* Skills section layout */
.skills-section {
  padding: 1rem 1rem;
}

.cards-wrapper {
  display: grid;
  justify-content: center;        /* center the whole grid block */
  align-items: flex-start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 4.5rem;
  padding: 2rem;
  margin: 0 auto;
  width: 100%;
  max-width: 1400px;
}

/* Individual cards */
.card-grid-space {
  position: relative;
}

.card.skill-card {
  width: 22em;
  height: 22em;          /* equal height and width */
  font-size: 1.1em;
  border-radius: 1em;
  position: relative;
  perspective: 1500px;
  cursor: pointer;
}

/* Common styling for both sides */
.card-side {
  height: 100%;
  width: 100%;
  border-radius: 1em;
  transition: all 0.8s ease;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  padding: 1.5rem;
  color: #fafcfc;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  /* performance hints */
  will-change: transform;
  transform: translateZ(0);
}

/* Front side */
.card-side.front {
  background-size: cover;
  background-position: center;
  z-index: 2;
}

/* Back side */
.card-side.back {
  transform: rotateY(-180deg);
  background-color: #009688;
  background-image: linear-gradient(160deg, #009688 0%, #673ab7 100%);
  justify-content: flex-start;
  z-index: 1;
}

/* Title on front */
.card-title {
  font-weight: 600;
  font-size: 1.5rem;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* List on back */
.skill-list {
  padding-left: 1.1rem;
  margin: 0;
  font-size: 1.05rem;
}

.skill-list li {
  margin-bottom: 0.35rem;
}

/* Desktop hover flip */
.card.skill-card:hover .card-side.front,
.card.skill-card.flipped .card-side.front {
  transform: rotateY(180deg);
}

.card.skill-card:hover .card-side.back,
.card.skill-card.flipped .card-side.back {
  transform: rotateY(0deg);
}

 /* Tablet: 2 columns */
@media screen and (max-width: 1285px) {
  .cards-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: 1 column, card centered */
@media screen and (max-width: 900px) {
  .cards-wrapper {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

@media screen and (max-width: 500px) {
  .cards-wrapper {
    padding: 2rem 1.5rem;
  }
  .card.skill-card {
    width: calc(100vw - 4rem);    /* full width with side padding */
    height: calc(100vw - 4rem);   /* keep it square on small screens */
  }
}