/* =========================================
   Bikeshift Problem/Solution Tabs
   ========================================= */

/* Tab buttons */
.ps__tabs {
  gap: 0;
  border-radius: 0.5em;
  overflow: hidden;
}

.ps__tab {
  cursor: pointer;
  padding: 0.875em 1.5em;
  font-size: 1em;
  font-family: "Poppins", sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
  flex: 1;
  text-align: center;
}

/* Problem state: problem tab active */
[data-ps-status="problem"] .ps__tab--problem {
  background: #fff;
  color: var(--pink);
}

[data-ps-status="problem"] .ps__tab--solution {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
}

/* Solution state: solution tab active */
[data-ps-status="solution"] .ps__tab--solution {
  background: #fff;
  color: var(--light-green);
}

[data-ps-status="solution"] .ps__tab--problem {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
}

/* Text blocks */
.ps__text--solution {
  display: none;
}

[data-ps-status="solution"] .ps__text--problem {
  display: none;
}

[data-ps-status="solution"] .ps__text--solution {
  display: block;
  animation: psSlideIn 0.4s ease;
}

@keyframes psSlideIn {
  from { opacity: 0; transform: translateY(0.75em); }
  to { opacity: 1; transform: translateY(0); }
}

/* Card grids */
.ps__grid--solution {
  display: none;
}

[data-ps-status="solution"] .ps__grid--problem {
  display: none;
}

[data-ps-status="solution"] .ps__grid--solution {
  display: flex;
  animation: psSlideIn 0.4s ease;
}

/* =========================================
   Responsive
   ========================================= */

@media screen and (max-width: 479px) {
  .ps__tab {
    padding: 0.75em 1em;
    font-size: 0.875em;
  }
}