/* ==========================================================================
   components.css — reusable pieces shared across pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   Two shapes appear throughout the design: a straight orange action and a
   tilted dark action. Both carry the same 3px pale-orange keyline.
   -------------------------------------------------------------------------- */

.c-btn {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 35rem;
  min-height: 8rem;
  padding: var(--space-xs) var(--space-md);
  border: 3px solid var(--zino-pale-orange);
  color: var(--zino-pale-orange);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  text-align: center;
  transition:
    background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}

.c-btn--primary {
  background-color: var(--zino-orange);
}

.c-btn--primary:hover {
  background-color: var(--zino-pale-orange);
  color: var(--zino-orange);
}

.c-btn--tilt {
  background-color: var(--zino-green);
}

.c-btn--tilt:hover {
  background-color: var(--zino-pale-orange);
  color: var(--zino-green);
}

/* --------------------------------------------------------------------------
   Hashtag pill
   -------------------------------------------------------------------------- */

.c-tag {
  display: inline-grid;
  place-items: center;
  min-height: 5rem;
  padding-inline: var(--space-sm);
  border-radius: var(--radius-pill);
  background-color: var(--zino-orange);
  color: var(--color-text-inverse);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.c-tag--outline {
  background-color: transparent;
  border: 2px solid var(--zino-orange);
  color: var(--zino-orange);
}

/* --------------------------------------------------------------------------
   Section heading — English label stacked over the Japanese heading
   -------------------------------------------------------------------------- */

.c-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.c-section-head__en {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-display);
  line-height: 1.5;
}

.c-section-head__ja {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Filter / tab switch (used by the interview list and the requirements table)
   -------------------------------------------------------------------------- */

.c-switch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.c-switch__button {
  min-height: 3rem;
  padding-inline: var(--space-xs);
  border-radius: var(--radius-pill);
  border: 1px solid currentcolor;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.c-switch__button[aria-selected="true"],
.c-switch__button[aria-pressed="true"] {
  background-color: var(--zino-orange);
  border-color: var(--zino-orange);
  color: var(--color-text-inverse);
}

@media (width >= 768px) {
  .c-btn {
    width: 30rem;
    max-width: none;
  }
}