/* Top placements — server-side rendered card grid (issue #355).
   Self-contained, no Tailwind. Brand colors come from the feed CSS variables
   (--feed-color-primary / --feed-color-secondary, see includes/color-variables.php). */

.elberegner-top-placements {
  --tp-primary: var(--feed-color-primary, #34a853);
  --tp-secondary: var(--feed-color-secondary, #e8f7ed);
  /* One non-wrapping row. Cards grow to fill when they fit; when they don't,
     the row scrolls horizontally and snaps card-by-card. */
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin: 0;
  padding-top: 18px; /* room so the notch badge isn't clipped by overflow */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 24px; /* consistent gutter at each snap stop -> uniform peek */
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.elberegner-top-placements *,
.elberegner-top-placements *::before,
.elberegner-top-placements *::after {
  box-sizing: border-box;
}

/* High specificity (section + element + class) so theme <article> padding
   cannot win and leave a white gutter around the full-bleed CTA. */
.elberegner-top-placements article.elberegner-tp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Grow to fill when cards fit; never shrink below the basis so the row
     overflows and scrolls instead of squashing the cards. */
  flex: 1 0 260px;
  /* Desktop order = DOM order (--tp-order is the render index); mobile swaps to
     --tp-mobile-order below. Both inline per card, see templates/top-placements.php. */
  order: var(--tp-order, 0);
  scroll-snap-align: start;
  margin: 0 !important;
  padding: 18px 0 0 !important; /* no side/bottom padding -> CTA reaches the edges */
  background: #fff;
  border: 3px solid var(--tp-primary);
  border-radius: 12px;
  font-family: inherit;
}

/* Badge — sits in a notch over the top border. */
.elberegner-tp-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  padding: 5px 14px;
  background: var(--tp-secondary);
  border: 1.5px solid var(--tp-primary);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: #2b2b2b;
  white-space: nowrap;
}

.elberegner-tp-badge-text {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}

.elberegner-tp-badge .elberegner-tp-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--tp-primary);
}

/* Header: logo box (left) + Trustpilot (right), always on one line. */
.elberegner-tp-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
}

/* Same height everywhere; basis 160px but allowed to shrink (never grow) so the
   logo box and Trustpilot stay side by side in narrow 3–5-up cards. The logo
   scales to fit inside. Equal card widths keep the box uniform across cards. */
.elberegner-tp-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 130px;
  min-width: 0;
  height: 62px;
  padding: 8px;
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

a.elberegner-tp-logo-box {
  cursor: pointer;
}

a.elberegner-tp-logo-box:hover,
a.elberegner-tp-logo-box:focus {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
  transform: translateY(-1px);
}

.elberegner-tp-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.elberegner-tp-name {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
}

.elberegner-tp-trust {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
}

.elberegner-tp-trust-label {
  font-size: 13px;
  font-weight: 600;
  color: #2b2b2b;
  text-align: center;
}

.elberegner-tp-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--tp-primary);
}

.elberegner-tp-star {
  width: 20px;
  height: 20px;
}

/* Bullets — full-bleed tinted panel, two columns. High specificity + !important
   so theme <ul> margins can't re-inset it. */
.elberegner-top-placements ul.elberegner-tp-bullets {
  list-style: none;
  margin: 0 !important;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: center;
  align-items: center;
  gap: 8px 12px;
  background: var(--tp-secondary);
  border-radius: 0;
  /* Grow to fill the card's spare height so the tinted panel reaches the CTA
     (no white gap on cards with fewer bullets); content stays top-aligned. */
  flex: 1 1 auto;
}

.elberegner-tp-bullets li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  line-height: 1.3;
  color: #2b2b2b;
}

.elberegner-tp-bullet-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 1px;
  object-fit: contain;
}

/* CTA — full-bleed footer button. */
.elberegner-top-placements a.elberegner-tp-cta {
  margin: auto 0 0 !important;
  width: 100% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  background: var(--tp-primary);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.elberegner-tp-cta:hover,
.elberegner-tp-cta:focus {
  filter: brightness(0.9);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
  color: #fff;
  text-decoration: none;
}

.elberegner-tp-cta-text {
  font-size: 19px;
}

.elberegner-tp-cta-arrow {
  font-size: 22px;
  line-height: 1;
}

/* Pagination dots — only relevant in the one-card-per-view mobile layout. */
.elberegner-tp-dots {
  display: none;
}

/* High specificity + !important so theme button styling can't repaint these. */
.elberegner-tp-dots .elberegner-tp-dot {
  width: 9px;
  height: 9px;
  min-width: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 999px;
  background: #d1d5db !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.elberegner-tp-dots .elberegner-tp-dot.is-active {
  background: var(--feed-color-primary, #34a853) !important;
  transform: scale(1.25);
}

/* Mobile: one card per view, filling the full width (still scroll-snaps).
   Zero the scroll gutter so a full-width card snaps flush instead of being
   offset by the multi-up "peek" padding. */
@media (max-width: 600px) {
  .elberegner-top-placements {
    scroll-padding-inline: 0;
    gap: 12px;
  }

  .elberegner-top-placements article.elberegner-tp-card {
    flex: 0 0 100%;
    /* Mobile-specific ordering (issue #363). Ties keep DOM order = desktop order,
       so cards without an override stay put and stale payloads degrade gracefully. */
    order: var(--tp-mobile-order, 0);
  }

  .elberegner-tp-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
  }
}