/* Benefit studies without manual expanding, the `benefits` axis of the Pult
   (columns, split, scroll, autoplay, cards, deck). `accordion` and `static` keep
   their rules in style.css. Every study shows all four titles and all four
   descriptions, or reveals them on its own; the section tokens live on
   .benefits so nothing in :root changes. */
.benefits {
  --benefit-column-title: clamp(22px, 1.9vw, 30px);
  --benefit-number: var(--small);
  --benefit-number-gap: var(--gap-lg);
  --benefit-rule: color-mix(in srgb, var(--paper) 23%, transparent);
  --benefit-muted: color-mix(in srgb, var(--paper) 55%, transparent);
  --benefit-reveal: 600ms;
  --benefit-cycle: 6s;
  --benefit-progress: 2px;
  --benefit-autoplay-text: clamp(20px, 1.9vw, 30px);
  --benefit-autoplay-leading: 1.35;
  --benefit-panel: calc(var(--body) * 1.5 * 5 + var(--gap-lg));
  --benefit-card-tilt: -1.2deg;
  --benefit-card-tilt-even: 1deg;
  --benefit-card-rule: color-mix(in srgb, var(--ink) 15%, var(--paper));
  --benefit-deck-start: 95%;
  --benefit-deck-end: 30%;
  --benefit-deck-stagger: .15;
  --benefit-deck-shift: var(--gap-xs);
}

/* Shared: the yellow arrow belongs to `static` and `scroll` only; the four
   columns count their items with a CSS counter, so no new text is needed. */
:is([data-benefits="columns"], [data-benefits="split"], [data-benefits="autoplay"], [data-benefits="cards"], [data-benefits="deck"]) .benefit-arrow { display: none; }
[data-benefits="columns"] .benefits ul { counter-reset: benefit; }
[data-benefits="columns"] .benefits li { counter-increment: benefit; }
[data-benefits="columns"] .benefits li::before {
  content: counter(benefit, decimal-leading-zero);
  display: block;
  font-size: var(--benefit-number);
  letter-spacing: 0;
}

/* Čtyři sloupce: a four-column grid, the row rule moves to the top of each
   column; 2 × 2 on tablets, one column on phones. */
[data-benefits="columns"] .benefits ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-lg);
}
[data-benefits="columns"] .benefits li,
[data-benefits="columns"] .benefits li:first-child {
  padding: var(--gap-md) 0 0;
  border-bottom: 0;
  border-top: var(--hairline) solid var(--benefit-rule);
  font-size: var(--benefit-column-title);
}
[data-benefits="columns"] .benefits li::before { color: var(--accent-soft); margin-bottom: var(--benefit-number-gap); }
[data-benefits="columns"] .benefit-detail { font-size: var(--body); }
@media (max-width: 1100px) {
  [data-benefits="columns"] .benefits ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--gap-xl); }
}
@media (max-width: 700px) {
  [data-benefits="columns"] .benefits ul { grid-template-columns: minmax(0, 1fr); row-gap: var(--gap-lg); }
  [data-benefits="columns"] .benefits li::before { margin-bottom: var(--gap-sm); }
  [data-benefits="columns"] .benefit-detail { margin-top: var(--gap-sm); }
}

/* Název vlevo, popis vpravo: the familiar rows, each one an editorial
   two-column line; on phones the description drops under its title. */
[data-benefits="split"] .benefits li {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  column-gap: var(--gap-xl);
  align-items: baseline;
}
[data-benefits="split"] .benefit-detail { margin: 0; max-width: none; }
@media (max-width: 700px) {
  [data-benefits="split"] .benefits li { grid-template-columns: minmax(0, 1fr); }
  [data-benefits="split"] .benefit-detail { margin-top: var(--gap-sm); }
}

/* Rozbalí se samo při scrollu: the familiar list; a row opens when it reaches
   the middle of the window and stays open (script.js sets data-open), the
   arrow turns to point at its text. Collapsed text keeps its place in the
   accessibility tree (height and opacity only). */
[data-benefits="scroll"] .benefits li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 0fr;
  row-gap: 0;
  transition: grid-template-rows var(--benefit-reveal) var(--ease), row-gap var(--benefit-reveal) var(--ease);
}
[data-benefits="scroll"] .benefit-detail {
  margin: 0; min-height: 0; overflow: hidden; opacity: 0;
  transition: opacity var(--benefit-reveal) var(--ease);
}
[data-benefits="scroll"] .benefit-arrow { transition: transform var(--benefit-reveal) var(--ease); }
[data-benefits="scroll"] .benefits li[data-open="true"] { grid-template-rows: auto 1fr; row-gap: var(--gap-md); }
[data-benefits="scroll"] .benefits li[data-open="true"] .benefit-detail { opacity: 1; }
[data-benefits="scroll"] .benefits li[data-open="true"] .benefit-arrow { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  [data-benefits="scroll"] .benefits li { grid-template-rows: auto 1fr; row-gap: var(--gap-md); }
  [data-benefits="scroll"] .benefit-detail { opacity: 1; }
  [data-benefits="scroll"] .benefit-arrow { transform: rotate(90deg); }
}

/* Střídání samo: titles on the left, the active description large on the
   right; a yellow line fills along the active row's rule (a background on
   the row, so the descriptions position against the list, not the row) and
   hands over to the next one when it is full (script.js listens for the end
   of that animation).
   It runs only while the list is on screen and pauses under the pointer or
   keyboard focus. All descriptions stay in the DOM, stacked in one place. */
[data-benefits="autoplay"] .benefits ul {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--gap-xl);
}
[data-benefits="autoplay"] .benefits li {
  grid-column: 1;
  background: linear-gradient(var(--accent-soft), var(--accent-soft)) left bottom / 0 var(--benefit-progress) no-repeat;
}
[data-benefits="autoplay"] .benefit-title button { color: var(--benefit-muted); transition: color var(--fast) var(--ease); }
[data-benefits="autoplay"] .benefit-title button:after { content: none; }
[data-benefits="autoplay"] .benefit-title button:hover,
[data-benefits="autoplay"] .benefits li[data-active="true"] .benefit-title button { color: var(--paper); }
[data-benefits="autoplay"] .benefit-detail {
  position: absolute;
  top: 0; right: 0;
  left: calc(50% + var(--gap-xl) / 2);
  margin: 0; max-width: none;
  font-size: var(--benefit-autoplay-text);
  line-height: var(--benefit-autoplay-leading);
  letter-spacing: var(--benefit-track);
  opacity: 0;
  transform: translateY(var(--gap-sm));
  transition: opacity var(--benefit-reveal) var(--ease), transform var(--benefit-reveal) var(--ease);
  pointer-events: none;
}
[data-benefits="autoplay"] .benefits li[data-active="true"] .benefit-detail { opacity: 1; transform: none; }
[data-benefits="autoplay"] .benefits li[data-active="true"] {
  animation: benefit-progress var(--benefit-cycle) linear forwards;
  animation-play-state: paused;
}
[data-benefits="autoplay"] .benefits ul[data-playing="true"] li[data-active="true"] { animation-play-state: running; }
/* Keyboard focus pauses; a mouse click only picks a benefit and lets it run on. */
[data-benefits="autoplay"] .benefits ul[data-playing="true"]:is(:hover, :has(:focus-visible)) li[data-active="true"] { animation-play-state: paused; }
@keyframes benefit-progress { to { background-size: 100% var(--benefit-progress); } }
@media (max-width: 700px) {
  /* One column; the active description sits in a reserved panel under the
     list, so the page never jumps when the next one takes over. */
  [data-benefits="autoplay"] .benefits ul { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--benefit-panel); }
  [data-benefits="autoplay"] .benefit-detail {
    top: calc(100% - var(--benefit-panel) + var(--gap-lg));
    left: 0;
    font-size: var(--body);
    line-height: 1.5;
    letter-spacing: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* No hand-over: every description stands under its title. */
  [data-benefits="autoplay"] .benefits ul { display: block; padding-bottom: 0; }
  [data-benefits="autoplay"] .benefit-title button { color: var(--paper); }
  [data-benefits="autoplay"] .benefit-detail {
    position: static; opacity: 1; transform: none; pointer-events: auto;
    margin-top: var(--gap-md); max-width: var(--copy-width);
    font-size: var(--body); line-height: 1.5; letter-spacing: 0;
  }
  [data-benefits="autoplay"] .benefits li { background: none; }
}

/* Papírové karty (the default): four white cards in the tender-document
   language (ink on paper, soft shadow, hairline rule, a slight alternating
   tilt like the other paper on the page), without numbers. */
:is([data-benefits="cards"], [data-benefits="deck"]) .benefits ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-md);
  align-items: start;
}
:is([data-benefits="cards"], [data-benefits="deck"]) .benefits li,
:is([data-benefits="cards"], [data-benefits="deck"]) .benefits li:first-child {
  padding: var(--gap-md);
  border: 0;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
  font-size: var(--benefit-column-title);
  transform: rotate(var(--benefit-card-tilt));
}
:is([data-benefits="cards"], [data-benefits="deck"]) .benefits li:nth-child(even) { transform: rotate(var(--benefit-card-tilt-even)); }
:is([data-benefits="cards"], [data-benefits="deck"]) .benefit-detail {
  color: var(--ink);
  font-size: var(--body);
  padding-top: var(--gap-sm);
  border-top: var(--hairline) solid var(--benefit-card-rule);
}
@media (max-width: 1100px) {
  :is([data-benefits="cards"], [data-benefits="deck"]) .benefits ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-lg) var(--gap-md); }
}
@media (max-width: 700px) {
  :is([data-benefits="cards"], [data-benefits="deck"]) .benefits ul { grid-template-columns: minmax(0, 1fr); gap: var(--gap-md); }
  :is([data-benefits="cards"], [data-benefits="deck"]) .benefit-detail { margin-top: var(--gap-sm); }
}

/* Balíček, který se rozhodí: the cards layout, but the cards start as one
   deck and deal out into it with the scroll, the page never stops (script.js
   scrubs --deal on each card from 0 = in the deck to 1 = in its own grid cell
   while the list's top moves from --benefit-deck-start to --benefit-deck-end of
   the window height; the cards leave one after another by
   --benefit-deck-stagger of the way). The list keeps
   the height of the dealt layout all along, so nothing below moves. In the deck
   each card sits at the deck's centre: whole cells across and down (the cell's
   own size plus the gap) away from its own cell, the first card on top and
   readable. Without JS or with reduced motion there is no deck, only the cards. */
[data-benefits="deck"] .benefits {
  /* Tilted cards on their way may cross the page edge; they must not widen the page. */
  overflow-x: clip;
  --deck-centre-column: 1.5;
  --deck-centre-row: 0;
  --deck-gap-x: var(--gap-md);
  --deck-gap-y: var(--gap-md);
}
[data-benefits="deck"] .benefits li { --deck-column: 0; --deck-row: 0; --deck-tilt: var(--benefit-card-tilt); --deck-rest-tilt: var(--benefit-card-tilt); --deck-order: 0; }
[data-benefits="deck"] .benefits li:nth-child(2) { --deck-column: 1; --deck-tilt: 3deg; --deck-rest-tilt: var(--benefit-card-tilt-even); --deck-order: 1; }
[data-benefits="deck"] .benefits li:nth-child(3) { --deck-column: 2; --deck-tilt: -5deg; --deck-order: 2; }
[data-benefits="deck"] .benefits li:nth-child(4) { --deck-column: 3; --deck-tilt: 5.5deg; --deck-rest-tilt: var(--benefit-card-tilt-even); --deck-order: 3; }
[data-benefits="deck"] .benefits ul[data-deck] li {
  position: relative;
  z-index: calc(4 - var(--deck-order));
  transform:
    translate(
      calc((1 - var(--deal, 1)) * ((var(--deck-centre-column) - var(--deck-column)) * (100% + var(--deck-gap-x)) + var(--deck-order) * var(--benefit-deck-shift))),
      calc((1 - var(--deal, 1)) * ((var(--deck-centre-row) - var(--deck-row)) * (100% + var(--deck-gap-y)) + var(--deck-order) * var(--benefit-deck-shift))))
    rotate(calc(var(--deck-tilt) + (var(--deck-rest-tilt) - var(--deck-tilt)) * var(--deal, 1)));
}
@media (max-width: 1100px) {
  [data-benefits="deck"] .benefits { --deck-centre-column: .5; --deck-centre-row: .5; --deck-gap-y: var(--gap-lg); }
  [data-benefits="deck"] .benefits li:nth-child(2) { --deck-column: 1; --deck-row: 0; }
  [data-benefits="deck"] .benefits li:nth-child(3) { --deck-column: 0; --deck-row: 1; }
  [data-benefits="deck"] .benefits li:nth-child(4) { --deck-column: 1; --deck-row: 1; }
}
@media (max-width: 700px) {
  /* One column: the deck lies where the first card will be and deals downwards. */
  [data-benefits="deck"] .benefits { --deck-centre-column: 0; --deck-centre-row: 0; --deck-gap-y: var(--gap-md); }
  [data-benefits="deck"] .benefits li:nth-child(n) { --deck-column: 0; }
  [data-benefits="deck"] .benefits li:nth-child(2) { --deck-row: 1; }
  [data-benefits="deck"] .benefits li:nth-child(3) { --deck-row: 2; }
  [data-benefits="deck"] .benefits li:nth-child(4) { --deck-row: 3; }
}