/*
 * Boredom Fighters - residual listing rules
 *
 * After PR-12D migration to native widget Style-tab settings, this file
 * holds ONLY rules that Elementor / JetEngine widget settings cannot model:
 *
 * 1. Alternating red/blue KPI numbers via :nth-child(2n) on listing 747.
 *    JetEngine has no per-row conditional styling in the free edition.
 *
 * 2. Process pillar (listing 745) image circle sizing -- the dynamic-image
 *    widget settings can set border-radius, but not "force square 220x220
 *    then crop", which the circular Wix look requires.
 *
 * 3. Partner logo (listing 375) grayscale hover lift -- the image widget
 *    has no filter / hover-filter native control.
 *
 * Every other rule that lived here in PR-12B/PR-12C is now in the listing
 * template _elementor_data as native widget settings.
 */

/* ============================================================
 *  KPI alternating colors (listing 747)
 * ============================================================ */
.jet-listing-grid--747
  .jet-listing-grid__item:nth-child(2n)
  .elementor-element[data-id]:first-of-type
  .jet-listing-dynamic-field__content {
  color: #00588d;
}

/* ============================================================
 *  Process pillar image circles (listing 745)
 * ============================================================ */
.jet-listing-grid--745 .jet-listing-dynamic-image__img {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 50%;
  border: 6px solid #ffffff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}
@media (max-width: 767px) {
  .jet-listing-grid--745 .jet-listing-dynamic-image__img {
    width: 160px;
    height: 160px;
  }
}

/* ============================================================
 *  Partner logo (listing 375) -- grayscale hover lift
 * ============================================================ */
/* session-48f QA: a more specific per-element rule was overriding
 * `object-fit` to `cover`, which crops wide logos (e.g. "PLAYWORKS"
 * -> "LAYWORKS"). Logos must NEVER be cropped -- force `contain` and
 * natural-aspect sizing with !important + an html-body specificity
 * prefix so this rule wins regardless of the per-element CSS. */
html body .jet-listing-grid--375 .jet-listing-dynamic-image__img,
html body .jet-listing-grid--375 .jet-listing-dynamic-image img,
.jet-listing-grid--375 .jet-listing-dynamic-image__img {
  max-height: 84px !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  filter: grayscale(20%);
  opacity: 0.88;
  transition:
    filter 180ms ease,
    opacity 180ms ease;
}
.jet-listing-grid--375
  .jet-listing-grid__item:hover
  .jet-listing-dynamic-image__img {
  filter: grayscale(0%);
  opacity: 1;
}

/* ============================================================
 *  Champion Pillar image circles (listing 744)
 *  Same circle-crop need as 745.
 * ============================================================ */
.jet-listing-grid--744 .jet-listing-dynamic-image__img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 50%;
  border: 6px solid #ffffff;
}

/* ============================================================
 *  Activation method icons (listing 759)
 * ============================================================ */
.jet-listing-grid--759 .jet-listing-dynamic-image__img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  margin: 0 auto;
}