/* ===================================
   COMPARE BLOCK
   The insurer logo row with the tariff line and the pill into the comparison
   (home/compare-block.ejs). Both sit directly on the section background; the logos run as a
   marquee whose fading mask softens the side edges. With a reduced-motion preference, or while a
   tile has keyboard focus, the track becomes a static grid and the duplicated tiles disappear.
   =================================== */

.compare-block {
  padding: 44px 0 52px;
  background: var(--tp-paper);
}
/* Inside the white top-tariffs band (under the cards): the band carries the bottom padding, the
   block only keeps a breathing space above itself. */
.compare-block--in-band {
  padding: 48px 0 0;
}
.compare-block__line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 24px 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tp-ink-2);
}
.compare-block__line::before,
.compare-block__line::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--tp-line);
}
.compare-block__logos {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.compare-block__track {
  display: flex;
  width: max-content;
  animation: compare-block-scroll 75s linear infinite;
}
.compare-block__logos:hover .compare-block__track {
  animation-play-state: paused;
}
.compare-block__tile {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 150px;
  height: 72px;
  margin-right: 12px;
  padding: 14px 18px;
  border: 1px solid var(--tp-line);
  border-radius: 14px;
  background: var(--tp-paper);
  transition: border-color 0.2s ease;
}
.compare-block__tile img {
  display: block;
  height: 32px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
/* Only tiles that link to an insurer page react to the pointer: no underline, accent border on
   hover and an inset focus ring, since the logo row clips everything outside the tiles. */
.compare-block__tile--link {
  text-decoration: none;
}
.compare-block__tile--link:hover {
  border-color: var(--tp-accent);
}
.compare-block__tile--link:focus-visible {
  outline: 2px solid var(--tp-accent);
  outline-offset: -2px;
}
@keyframes compare-block-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.compare-block__cta {
  display: grid;
  justify-items: center;
  margin-top: 24px;
  text-align: center;
}
/* Secondary next to the "Tarif ansehen" buttons of the cards: outline in the accent, filled on hover.
   Two classes outrank the shared ghost button of home-sections.css regardless of stylesheet order. */
.compare-block__cta .compare-block__button {
  padding: 12px 22px;
  border: 2px solid var(--tp-accent);
  background: transparent;
  color: var(--tp-accent);
  font-size: 15px;
}
.compare-block__cta .compare-block__button:hover {
  border-color: var(--tp-accent);
  background: var(--tp-accent);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .compare-block__logos {
    padding: 0 24px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .compare-block__track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    width: auto;
    animation: none;
  }
  .compare-block__tile {
    width: auto;
    margin: 0;
  }
  .compare-block__tile--dup {
    display: none;
  }
}
/* Keyboard focus inside the row: the same static grid as above. A moving or masked track would
   carry the focused tile out of view, and the browser would scroll the clipped row sideways to
   reach it, leaving the marquee offset afterwards. Pointer focus keeps the marquee. */
.compare-block__logos:has(:focus-visible) {
  padding: 0 24px;
  -webkit-mask-image: none;
  mask-image: none;
}
.compare-block__logos:has(:focus-visible) .compare-block__track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  width: auto;
  animation: none;
}
.compare-block__logos:has(:focus-visible) .compare-block__tile {
  width: auto;
  margin: 0;
}
.compare-block__logos:has(:focus-visible) .compare-block__tile--dup {
  display: none;
}
@media (max-width: 820px) {
  .compare-block {
    padding: 36px 0 44px;
  }
  .compare-block--in-band {
    padding: 40px 0 0;
  }
  .compare-block__line {
    margin: 0 16px 12px;
    font-size: 12px;
  }
  .compare-block__tile {
    width: 124px;
    height: 62px;
  }
  .compare-block__tile img {
    height: 27px;
  }
  .compare-block__logos:has(:focus-visible) {
    padding: 0 16px;
  }
  .compare-block__cta .home-btn {
    width: 100%;
    max-width: 420px;
  }
}
@media (prefers-reduced-motion: reduce) and (max-width: 820px) {
  .compare-block__logos {
    padding: 0 16px;
  }
}