/* ===================================
   TARIFF CARD PANEL: ALL BENEFITS BEHIND A TOGGLE
   The third row of the tariff card (benefit-board.ejs): the quiet "Alle Teilleistungen anzeigen"
   action under a hairline and the panel with the detail list (benefit-detail-list.css), closed on
   load. tariff-page-card.js switches `aria-expanded` on the toggle and `is-open` + `inert` on the
   panel; the grid-row trick animates the real content height without measuring it, as the
   sub-benefit drawers of the rows do. Linked by benefit-board.ejs; the --tp-* tokens come from the
   .tariff-board root (benefit-detail-list.css).
   =================================== */

.tariff-card__footer {
  display: block;
  padding-top: 4px;
  border-top: 1px solid var(--tp-line);
  color: var(--tp-ink);
}

/* Quiet, centred, mint. Two classes, because the campaign host sizes every button with
   `.bb-site button { font-size: inherit }`. */
.tariff-card__footer .tariff-card__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px 6px 14px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--tp-mint);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: background-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.tariff-card__toggle:hover {
  background: var(--tp-mint-soft);
}
.tariff-card__toggle:focus-visible {
  outline: 2px solid rgba(var(--tp-mint-rgb), 0.45);
  outline-offset: 1px;
}
.tariff-card__toggle-label--hide,
.tariff-card__toggle[aria-expanded="true"] .tariff-card__toggle-label--show {
  display: none;
}
.tariff-card__toggle[aria-expanded="true"] .tariff-card__toggle-label--hide {
  display: inline;
}
/* A finger needs a taller row than a mouse pointer. */
@media (pointer: coarse) {
  .tariff-card__footer .tariff-card__toggle {
    min-height: 44px;
  }
}

.tariff-card__toggle .tariff-card__chevron {
  width: 18px;
  height: 18px;
  color: currentColor;
  transition: transform var(--tp-motion);
}
.tariff-card__toggle[aria-expanded="true"] .tariff-card__chevron {
  transform: rotate(180deg);
}

.tariff-card__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--tp-motion);
}
.tariff-card__panel.is-open {
  grid-template-rows: 1fr;
}
.tariff-card__panel-inner {
  min-height: 0;
  overflow: hidden;
}

/* One column: the card keeps a compact width (benefit-board.css), two columns would squeeze the rows. */
.tariff-card__benefits {
  min-width: 0;
  border-top: 1px solid var(--tp-line);
}

@media (prefers-reduced-motion: reduce) {
  .tariff-card__panel,
  .tariff-card__toggle,
  .tariff-card__toggle .tariff-card__chevron {
    transition: none;
  }
}