/* cgpt/use-case-tabs — Figma 53:3634.
   A 1320 strip of equal 54px cells, hairline #DFDFDF, with a 2px #513AEC rule
   under the selected one; then a 520 panel on a soft wash, padded 80, holding
   a 700 visual beside 460 of copy 80 apart. */

.cgpt-uctabs {
  display: flex;
  flex-direction: column;
  /* The strip's tabs have a floor width, and without this the block's
     min-content width became six of them side by side — which stretched the
     whole page to 960 at a 375 viewport. */
  min-inline-size: 0;
}

/* --- the strip ----------------------------------------------------------- */

/*
 * Equal cells with the accent rule drawn as the strip's own bottom border, so
 * the selected tab's 2px sits on the same line as the hairline the others
 * carry rather than shifting them by a pixel.
 */
.cgpt-uctabs__strip {
  display: flex;
  min-inline-size: 0;
}

/*
 * Equal cells: Figma divides the 1320 strip into six 220s regardless of how
 * long each label is (53:3635), so the width is the track's, not the text's.
 * `1 1 0` with a zero basis is what makes them equal — `auto` would let
 * "Engagement analytics" claim more room than "Internal search".
 */
.cgpt-uctabs__tab {
  flex: 1 1 0;
  min-inline-size: 0;
  padding: 14px 16px;
  border: 1px solid var(--cgpt-rule);
  /* Neighbours share an edge rather than doubling it. */
  border-inline-start-width: 0;
  border-block-end: 2px solid var(--cgpt-rule);
  background-color: var(--cgpt-surface);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--body);
  font-weight: 400;
  line-height: 1.25;
  /* Figma's own #6B6A7E — a cooler grey than either palette entry, and the
     one the strip is drawn in. 5.5:1 on white. */
  color: #6B6A7E;
  text-align: center;
  cursor: pointer;
  transition:
    color var(--cgpt-duration-fast) var(--cgpt-ease),
    border-color var(--cgpt-duration-fast) var(--cgpt-ease);
}

.cgpt-uctabs__tab:first-child { border-inline-start-width: 1px; }

.cgpt-uctabs__tab:hover { color: var(--cgpt-ink); }

/*
 * Selected is carried by weight and ink as well as the rule, so it is not
 * signalled by colour alone. aria-selected is the hook rather than a class:
 * the state has to be in the DOM for assistive technology anyway, so keeping
 * one source avoids the two drifting apart.
 */
.cgpt-uctabs__tab[aria-selected="true"] {
  border-block-end-color: var(--cgpt-accent);
  font-weight: 500;
  color: var(--cgpt-ink);
}

.cgpt-uctabs__tab:focus-visible {
  outline: var(--cgpt-focus-width) solid var(--cgpt-focus-color);
  outline-offset: calc(var(--cgpt-focus-offset) * -1);
}

/* --- the panel ----------------------------------------------------------- */

/*
 * 80 above and to the right only. The visual runs to the panel's left and
 * bottom edges (53:3649 pads 80/80/0/0 around a 1240x440 row in a 1320x520
 * panel), which is what gives the panel its off-centre, cropped-in look.
 */
.cgpt-uctabs__panel {
  position: relative;
  display: flex;
  gap: 80px;
  align-items: flex-end;
  isolation: isolate;
  padding: 80px 80px 0 0;
  border-end-start-radius: 8px;
  border-end-end-radius: 8px;
  background-color: var(--cgpt-surface);
}

/* The wash is its own layer for the same reason the hero's is: Figma sets it
   to 18%, and a background-image cannot be faded. */
.cgpt-uctabs__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--cgpt-uctabs-bg, none);
  background-size: cover;
  background-position: center;
  opacity: var(--cgpt-uctabs-bg-opacity, 1);
  pointer-events: none;
}

/* A tabpanel is focusable so keyboard users can reach its content, but it is
   not an interactive control — the ring is enough. */
.cgpt-uctabs__panel:focus-visible {
  outline: var(--cgpt-focus-width) solid var(--cgpt-focus-color);
  outline-offset: calc(var(--cgpt-focus-offset) * -1);
}

.cgpt-uctabs__media {
  position: relative;
  flex: none;
  inline-size: 700px;
  max-inline-size: 60%;
}

/* 38129: the hairline runs the top and trailing edges only — the visual goes
   off the panel’s floor, so there is no bottom line to draw. */
.cgpt-uctabs__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-block-start: 1px solid #E8E8E8;
  border-inline-end: 1px solid #E8E8E8;
  border-start-end-radius: 12px;
}

/*
 * The frame runs the panel's full height, so its top meets the heading and its
 * foot meets the panel's floor (38129 draws it 700x469 against a 549 panel).
 * The exports are 1400x880 — 1.59 against the slot's 1.48 — so they lose about
 * 8% of their width, taken from both sides rather than one edge.
 *
 * 1366 up only. Below it the copy wraps to another line while the frame
 * narrows, and the slot falls to 1.28: a fifth of the width would go, which
 * cuts into the screenshot itself rather than the wash around it. There the
 * frame keeps its own proportions and stops above the floor.
 */
@media (min-width: 1366px) {
  .cgpt-uctabs__media { align-self: stretch; }

  .cgpt-uctabs__img {
    block-size: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* The copy runs the image's own height: its first line meets the top of the
   frame and the person meets its foot (38129). */
.cgpt-uctabs__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  align-self: stretch;
  justify-content: space-between;
  min-inline-size: 0;
  /* The image bleeds to the panel's foot; the copy stops short of it. */
  padding-block-end: 32px;
}

/* With nothing to close on, the copy and its link sit as one group, centred
   on the visual. */
@media (min-width: 768px) {
  .cgpt-uctabs__body:not(:has(.cgpt-uctabs__close)) {
    justify-content: center;
    padding-block-start: 32px;
  }
}

/* The label lines up with the copy above it. */
.cgpt-uctabs__body > .cgpt-cta { margin-inline-start: -16px; }
.cgpt-uctabs__body .cgpt-btn--ghost { padding-inline: 16px; }

.cgpt-uctabs__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cgpt-uctabs__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3333;    /* 32/24 */
  color: var(--cgpt-ink);
  text-wrap: pretty;
}

.cgpt-uctabs__desc {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-lg);
  line-height: 1.444;     /* 26/18 */
  color: var(--cgpt-ink-soft);
}

/* The marker is set back on: reset.css clears it from every ul with a class. */
.cgpt-uctabs__points {
  margin: 0;
  padding-inline-start: 1.25em;
  font-size: var(--wp--preset--font-size--body-lg);
  line-height: 1.444;
  color: var(--cgpt-ink-soft);
  list-style: disc;
}

.cgpt-uctabs__point + .cgpt-uctabs__point { margin-block-start: var(--cgpt-space-2); }


.cgpt-uctabs__close {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  align-self: stretch;
}

.cgpt-uctabs__quote {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-lg);
  line-height: 1.444;
  color: var(--cgpt-ink);
  text-wrap: pretty;
}

.cgpt-uctabs__stats {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  align-self: stretch;
}

.cgpt-uctabs__stat {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 8px;
  min-inline-size: 0;
  padding-block-start: 16px;
}

.cgpt-uctabs__stat-value {
  font-size: var(--wp--preset--font-size--lead);
  font-weight: 500;
  line-height: 1.4;       /* 28/20 */
  color: var(--cgpt-ink);
}

.cgpt-uctabs__stat-label {
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.4286;    /* 20/14 */
  color: var(--cgpt-ink-soft);
}

.cgpt-uctabs__person {
  display: flex;
  gap: 24px;
  align-items: center;
}

.cgpt-uctabs__avatar {
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.cgpt-uctabs__who {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-inline-size: 0;
}

.cgpt-uctabs__name {
  font-size: var(--wp--preset--font-size--body);
  font-weight: 500;
  line-height: 1.5;       /* 24/16 */
  color: var(--cgpt-ink);
}

.cgpt-uctabs__role {
  font-size: var(--wp--preset--font-size--xs);
  line-height: 1.6667;    /* 20/12 */
  color: var(--cgpt-ink-soft);
}

/*
 * Without the script every panel is visible, which is the point — but a stack
 * of six needs a line between them or it reads as one long band.
 */
.cgpt-uctabs__panel + .cgpt-uctabs__panel { border-block-start: 1px solid var(--cgpt-rule); }
.cgpt-uctabs[data-cgpt-uctabs-ready] .cgpt-uctabs__panel + .cgpt-uctabs__panel { border-block-start: 0; }

@media (max-width: 1023.98px) {
  .cgpt-uctabs__panel { padding: 40px 40px 0 0; gap: 40px; }
  .cgpt-uctabs__media { inline-size: 50%; max-inline-size: none; }
}

@media (max-width: 767.98px) {
  /*
   * Figma's phone frame (53:5179) turns the strip on its side rather than
   * scrolling it: six full-width rows, and the accent indicator moves from
   * under the selected tab to a 2px bar down its leading edge. Every tab
   * carries that edge in the rule colour so the labels do not shift by two
   * pixels when the selection moves.
   *
   * A stack also settles the 320px requirement outright — there is nothing
   * left that could scroll sideways.
   */
  .cgpt-uctabs__strip { flex-direction: column; }

  .cgpt-uctabs__tab {
    flex: 0 0 auto;
    border-inline-start-width: 2px;
    border-block-end-width: 1px;
    /* Stacked neighbours share an edge, as the row's did. */
    border-block-start-width: 0;
    text-align: start;
  }

  .cgpt-uctabs__tab:first-child { border-block-start-width: 1px; }

  .cgpt-uctabs__tab[aria-selected="true"] {
    border-inline-start-color: var(--cgpt-accent);
    border-block-end-color: var(--cgpt-rule);
  }

  /* 53:5196 — the visual on top, then the copy inset 16, 32 apart, with 20
     under it. The visual keeps the panel's own edges. */
  .cgpt-uctabs__panel {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding: 0 0 20px;
  }

  .cgpt-uctabs__media { inline-size: 100%; }

  .cgpt-uctabs__body {
    gap: 24px;
    padding-inline: 16px;
  }

  .cgpt-uctabs__copy { gap: 16px; }

  /* 38129 has no phone frame; the figures stay side by side at 320. */
  .cgpt-uctabs__close { gap: 16px; }

  .cgpt-uctabs__stats { gap: 16px; }

  .cgpt-uctabs__person { gap: 16px; }
}

.cgpt-uctabs__placeholder {
  padding: var(--cgpt-space-4);
  border: 1px dashed var(--cgpt-border-strong);
  border-radius: var(--cgpt-radius-md);
  color: var(--cgpt-fg-muted);
}

/* A recording playing over the panel's visual, which is its poster — the media
   box it covers is positioned for it above. */
.cgpt-uctabs__video { position: absolute; inset: 0; }

.cgpt-uctabs__video .cgpt-video-bg__video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}