/* ==========================================================================
   Comparison accordion
   From the 2026 website prototype's "Ten parts of the job" block
   (why-outsource.html), restyled in the theme's language: pill eyebrow and
   48px H3 headline with the intro bottom-right (as journey-tabs), cards on
   --surface with a 1px --border and 16px radius, 12px apart.

   Row: a 44px number tile (eyebrow pill colours, 12px radius), the 20px
   title over a 14px --fg-secondary reference line, and a plus that turns
   into a minus; 20px / 24px padding. Open, three equal columns under a hairline, 1px
   rules between them, 24px padding: a 10px uppercase label in --marker
   over 16px body. The third column is highlighted with a --tint-neutral fill
   (neutral 10 on light, white 8% on dark; no lilac), its label in --marker
   like the others, so it follows the scheme with no field.

   Layout "cards": each row is an open card, the title in a lead column a
   third wide beside the columns.

   Container breakpoints (module width):
   < 720px  the header stacks; the columns stack, rules between them; a
            card's lead goes above its columns
   < 480px  row padding 16px; 36px number tile
   ========================================================================== */

.comparison-accordion {
  container: comparison-accordion / inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg, 40px);
  width: 100%;
  color: var(--fg);
}

/* Header
   -------------------------------------------------------------------------- */
.comparison-accordion__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-xl, 48px);
}

.comparison-accordion__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm, 24px);
  min-width: 0;
}

.comparison-accordion .comparison-accordion__headline {
  margin: 0;
  color: var(--fg);
}

.comparison-accordion__intro {
  flex: 0 1 400px;
  min-width: 0;
  color: var(--fg-secondary);
}

.comparison-accordion__intro :last-child {
  margin-bottom: 0;
}

/* Rows
   -------------------------------------------------------------------------- */
.comparison-accordion__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comparison-accordion__item {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-large, 16px);
  background: var(--surface);
}

.comparison-accordion__summary {
  display: flex;
  align-items: center;
  gap: var(--space-s, 16px);
  padding: 20px 24px;
  list-style: none;
  cursor: pointer;
}

.comparison-accordion__summary::-webkit-details-marker {
  display: none;
}

.comparison-accordion__summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-large, 16px);
}

.comparison-accordion__number {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-panel, 12px);
  background: var(--eyebrow-bg);
  color: var(--marker);
  font-size: var(--font-size-s, 16px);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1;
}

.comparison-accordion__heading-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.comparison-accordion .comparison-accordion__title {
  margin: 0;
  color: var(--fg);
  font-weight: var(--font-weight-medium, 500);
}

.comparison-accordion__reference {
  color: var(--fg-secondary);
  font-weight: var(--font-weight-medium, 500);
}

/* Plus: two 14 x 2px bars; open, the upright bar turns flat, leaving a minus */
.comparison-accordion__icon {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.comparison-accordion__icon::before,
.comparison-accordion__icon::after {
  content: '';
  position: absolute;
  top: 15px;
  left: 9px;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--marker);
  transition: transform 0.25s ease;
}

.comparison-accordion__icon::after {
  transform: rotate(90deg);
}

.comparison-accordion__item[open] .comparison-accordion__icon::after {
  transform: rotate(0deg);
}

.comparison-accordion__summary:hover .comparison-accordion__icon {
  background-color: var(--ghost-hover-bg);
}

/* Columns
   -------------------------------------------------------------------------- */
.comparison-accordion__cells {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  border-top: 1px solid var(--border);
}

.comparison-accordion__cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-sm, 24px);
}

.comparison-accordion__cell + .comparison-accordion__cell {
  border-left: 1px solid var(--border);
}

.comparison-accordion__cell--highlight {
  background: var(--tint-neutral);
}

.comparison-accordion__label {
  margin: 0;
  color: var(--marker);
}

.comparison-accordion .comparison-accordion__text {
  color: var(--fg);
  line-height: 1.5;
}

.comparison-accordion .comparison-accordion__text p,
.comparison-accordion .comparison-accordion__text ul,
.comparison-accordion .comparison-accordion__text ol {
  margin: 0 0 12px;
}

.comparison-accordion .comparison-accordion__text ul,
.comparison-accordion .comparison-accordion__text ol {
  padding-left: 20px;
}

.comparison-accordion .comparison-accordion__text :last-child {
  margin-bottom: 0;
}

/* Cards layout: every row open; the title (under an optional label) in a
   lead column taking a third of the card, the columns beside it with a
   rule between */
.comparison-accordion__item--card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.comparison-accordion__lead {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s, 16px);
  padding: var(--space-sm, 24px);
}

.comparison-accordion__lead .comparison-accordion__heading-text {
  gap: 8px;
}

.comparison-accordion--cards .comparison-accordion__cells {
  border-top: 0;
  border-left: 1px solid var(--border);
}

.comparison-accordion__footnote {
  max-width: 900px;
  color: var(--fg-secondary);
}

.comparison-accordion__footnote :last-child {
  margin-bottom: 0;
}

/* Open/close height animation where supported (Chrome); elsewhere it snaps */
@supports (interpolate-size: allow-keywords) {
  .comparison-accordion {
    interpolate-size: allow-keywords;
  }

  .comparison-accordion__item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
  }

  .comparison-accordion__item[open]::details-content {
    block-size: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .comparison-accordion__icon,
  .comparison-accordion__icon::before,
  .comparison-accordion__icon::after,
  .comparison-accordion__item::details-content {
    transition: none;
  }
}

/* Narrow
   -------------------------------------------------------------------------- */
@container comparison-accordion (max-width: 719px) {
  .comparison-accordion__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s, 16px);
  }

  .comparison-accordion__intro {
    flex-basis: auto;
  }

  .comparison-accordion__cells {
    grid-auto-flow: row;
  }

  .comparison-accordion__cell + .comparison-accordion__cell {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .comparison-accordion__item--card {
    grid-template-columns: minmax(0, 1fr);
  }

  .comparison-accordion--cards .comparison-accordion__cells {
    border-top: 1px solid var(--border);
    border-left: 0;
  }
}

@container comparison-accordion (max-width: 479px) {
  .comparison-accordion__summary,
  .comparison-accordion__lead {
    gap: 12px;
    padding: var(--space-s, 16px);
  }

  .comparison-accordion__number {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .comparison-accordion__cell {
    padding: 20px var(--space-s, 16px);
  }
}

/* Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .comparison-accordion {
    gap: var(--space-md, 32px);
  }
}