/* Section 04 — "AI Agents That Automate Real Staffing Workflows" (tabs + audio player) */
/* Scoped under .wh-agents. Values from research/whippy.ai/components/04-*.spec.md */

.wh-agents {
  position: relative;
  padding: 120px 0 40px;
  font-family: var(--font-sans);
}

.wh-agents__bg {
  position: absolute;
  left: 0;
  bottom: -759px;
  width: 100%;
  height: 1440px;
  background-image: linear-gradient(rgb(224, 229, 249) 0%, rgb(255, 255, 255) 100%);
  z-index: -2;
}

.wh-agents__container {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 15px;
}

.wh-agents__inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 80px;
}

/* ---- Heading block ---- */
.wh-agents__head {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 960px;
}

.wh-agents__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  color: var(--ink-700);
  text-align: center;
}

.wh-agents__sub {
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: var(--gray-500);
  text-align: center;
  max-width: 960px;
}

/* ---- Tabs card ---- */
.wh-agents__tabs {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.wh-agents__tablist {
  display: flex;
  flex-direction: row;
}

.wh-agents__tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 15px;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  color: rgb(135, 144, 150);
  text-align: center;
  border-radius: 12px 12px 0 0;
  position: relative;
  opacity: 0.5;
  transition: 0.2s;
  cursor: not-allowed;
  background: none;
}

.wh-agents__tab:disabled {
  cursor: not-allowed;
}

.wh-agents__tab.is-active {
  font-weight: 600;
  color: var(--ink-700);
  background-color: var(--white);
  box-shadow: var(--card-shadow);
  opacity: 1;
  cursor: pointer;
}

/* Mobile combobox replacement — hidden on desktop */
.wh-agents__selectwrap {
  display: none;
}

/* ---- Panel ---- */
.wh-agents__panelwrap {
  position: relative;
}

.wh-agents__panelwrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white);
}

.wh-agents__panel {
  position: relative;
  background-color: var(--white);
  padding: 60px;
  border-radius: 0 16px 16px 16px;
}

.wh-agents__panel-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
}

.wh-agents__desc {
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: rgb(102, 101, 102);
}

/* ---- Audio player pill ---- */
.wh-agents__player {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  background-color: rgb(34, 36, 49);
  padding: 10px 20px 10px 10px;
  border-radius: 100px;
}

.wh-agents__playwrap {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 0 0 70px;
  width: 70px;
  height: 70px;
}

.wh-agents__playbtn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  cursor: pointer;
}

.wh-agents__icon-play,
.wh-agents__icon-pause {
  width: 70px;
  height: 70px;
  display: block;
}

.wh-agents__icon-pause {
  display: none;
}

.wh-agents.is-playing .wh-agents__icon-play {
  display: none;
}

.wh-agents.is-playing .wh-agents__icon-pause {
  display: block;
}

.wh-agents__wave {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 50px;
}

.wh-agents__bars {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.wh-agents__bars span {
  flex: 0 0 2px;
  width: 2px;
  border-radius: 1px;
  background-color: rgba(255, 255, 255, 0.32);
}

.wh-agents__bars span.is-played {
  background-color: rgba(255, 255, 255, 0.85);
}

/* progress = red-orange dot near top of pill + thin vertical line down through the bars */
.wh-agents__progress {
  display: none;
  position: absolute;
  top: -14px;
  bottom: -16px;
  left: 0;
  width: 2px;
  margin-left: -1px;
  background-color: rgb(243, 96, 74);
}

.wh-agents__progress::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: rgb(243, 96, 74);
}

.wh-agents.is-started .wh-agents__progress {
  display: block;
}

.wh-agents__time {
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
  color: var(--white);
}

.wh-agents__audio {
  display: none;
}

/* ---- Desktop container gutter parity with original (no padding >=769) ---- */
@media (min-width: 769px) {
  .wh-agents__container {
    padding: 0;
  }
}

/* ================= Mobile (<=768) ================= */
@media (max-width: 768px) {
  .wh-agents {
    padding: 60px 0;
  }

  .wh-agents__bg {
    height: 1350px;
    bottom: -657px;
  }

  .wh-agents__title {
    font-size: 30px;
    line-height: 36px;
  }

  .wh-agents__tablist {
    display: none;
  }

  .wh-agents__selectwrap {
    display: flex;
    flex-direction: row;
    background-color: var(--white);
    padding: 25px 15px 10px;
    gap: 5px;
    border-radius: 16px 16px 0 0;
  }

  .wh-agents__select {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--ink-900);
    background: none;
    border: 1px solid rgb(215, 219, 223);
    border-radius: 16px;
    cursor: pointer;
  }

  .wh-agents__select svg {
    display: block;
    width: 26px;
    height: 26px;
  }

  .wh-agents__panel {
    padding: 20px;
    border-radius: 0 0 16px 16px;
  }

  .wh-agents__panel-inner {
    gap: 15px;
  }

  .wh-agents__desc {
    font-size: 16px;
    line-height: 24px;
  }

  .wh-agents__player {
    padding: 10px 20px 10px 5px;
  }

  .wh-agents__playwrap {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
  }

  .wh-agents__playbtn,
  .wh-agents__icon-play,
  .wh-agents__icon-pause {
    width: 48px;
    height: 48px;
  }

  .wh-agents__wave {
    height: 30px;
  }

  .wh-agents__progress {
    top: -10px;
    bottom: -13px;
  }

  .wh-agents__time {
    font-size: 14px;
    line-height: 21px;
  }
}

/* Single-agent layout (owner 2026-09-02): one tab label, portrait on the right */
.wh-agents__panel-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; row-gap: 24px; align-items: center; }
.wh-agents__desc { grid-column: 1; }
.wh-agents__player { grid-column: 1; }
.wh-agents__portrait { grid-column: 2; grid-row: 1 / 3; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wh-agents__portrait img { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(17, 20, 24, 0.08), 0 12px 30px rgba(17, 20, 24, 0.15); }
.wh-agents__portrait figcaption { font-size: 14px; font-weight: 600; color: rgb(115, 115, 115); }
@media (max-width: 768px) {
  .wh-agents__tablist { display: flex; }
  .wh-agents__panel-inner { grid-template-columns: 1fr; }
  .wh-agents__portrait { grid-column: 1; grid-row: auto; }
  .wh-agents__portrait img { width: 96px; height: 96px; }
}
/* keep the single tab docked top-left like the original active tab */
.wh-agents__tablist { justify-content: flex-start; }
/* single tab must not stretch across the card */
.wh-agents__tablist .wh-agents__tab { flex: 0 0 auto; min-width: 288px; }

/* Mobile fixes (owner review 2026-09-04): the tint used to start
   mid-section (below the title) because its box is anchored to the
   bottom; anchor it to the top instead. The single tab becomes the full
   card header instead of a 288px stub next to a bare panel corner. */
@media (max-width: 768px) {
  .wh-agents__bg { top: 0; height: auto; bottom: -657px; }
  .wh-agents__head { padding: 0 5px; }
  .wh-agents__tablist .wh-agents__tab {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    border-radius: 16px 16px 0 0;
    box-shadow: none;
  }
  .wh-agents__panel { border-radius: 0 0 16px 16px; padding: 24px 20px 28px; }
}