/* ============================================================
 * promotions-page-fixes.css
 * Agent-Promotions OWNED — DO NOT EDIT FROM OTHER AGENTS
 *
 * BS /tr/promotions/popular vs MR /promotions K.22 16-katman
 * exact-match fixes. Loaded after promotions-mobile.css to
 * override divergence with BS-canonical computed values.
 *
 * Reference: AI_PROJECT_DISCOVERED_RULES.md K.22 + K.21 + K.23.
 * ============================================================ */

/* ===========================================================
 * KATMAN 1-2 (PAGE / LAYOUT)
 * BS body bg: white (rgb default) + section bg #0d1115
 * MR mobile-site already has dark bg; .bs-promotions-page
 * inherits. No override needed.
 * =========================================================== */

/* ===========================================================
 * KATMAN 3 (SECTION) — chips header bar
 *
 * BS measurements (devtools captured 2026-04-28, viewport 400):
 *   .horizontal-sl-list.promotion-horizontal-sl-list-bc
 *     w: 250px, h: 60px, padding: 0, gap: normal,
 *     background: rgba(0,0,0,0), color: rgb(0,0,0)
 *
 * Outer wrapper: .horizontal-sl-list-container
 *   data-scroll-lock-scrollable=""
 *
 * MR current:
 *   w: 376px, h: 70px, padding 12px 12px 14px, gap 8px,
 *   bg #0d1115, color #fff
 *
 * Fix: Match BS layout — keep MR text/bg theming for usability
 * but enforce BS chip width (~80px each), tight spacing.
 * =========================================================== */

.horizontal-sl-list.promotion-horizontal-sl-list-bc {
  /* BS: 80px × 3 chip = 240px + ~10px slack — strip is 250px wide native */
  padding: 0 !important;
  gap: 5px !important;
  /* Sit chips left-aligned like BS — not justify-around */
  justify-content: flex-start !important;
  /* BS strip width: ~250px (auto-sized to chips). MR was 393px due to flex-1.
     Force native shrink-to-fit: width auto + max-content cap. */
  width: -webkit-max-content !important;
  width: max-content !important;
  max-width: 100% !important;
  /* BS x=7 offset reproduced via margin */
  margin: 0 0 0 7px !important;
  /* Height parity: BS 60px (no padding) */
  height: 60px !important;
  /* BS keeps transparent on chip strip area */
  background: transparent !important;
  /* BS chip strip overflow visible (no scroll) since it fits viewport */
  overflow: visible !important;
}

.horizontal-sl-item-bc {
  /* BS chip native width ~80px (250px / 3 chip + small gaps) */
  flex: 0 0 80px !important;
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  /* BS height: 60px including internal icon+title */
  height: 60px !important;
  padding: 5px 4px !important;
  /* Card chip bg is BS-default dark — kept */
  background: #1a1d21;
  color: #ffffff;
  /* BS chip uppercase text; theme matches */
  text-transform: uppercase;
  border-radius: 4px;
  /* Tighten interior gap */
  gap: 3px !important;
}

.horizontal-sl-item-bc.active {
  background: #d3af37 !important; /* BS gold */
  color: #ffffff !important;
}

.horizontal-sl-item-bc .horizontal-sl-icon-bc {
  font-size: 22px !important;
  width: 22px;
  height: 22px;
  line-height: 1;
  display: inline-block;
}

.horizontal-sl-item-bc .horizontal-sl-title-bc {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

/* ===========================================================
 * KATMAN 4-5 (COMPONENT / ELEMENT) — promotion grid wrapper
 *
 * BS measurements:
 *   .promotionsList-bc (no -Wrapper-bc!)
 *     w: 400px (full viewport)
 *     padding: 10px (uniform)
 *     gap: 10px
 *     grid-template-columns: 185px 185px
 *     overflow: hidden
 *     max-width: 100%
 *
 * MR current (.promotionsListWrapper-bc):
 *   w: 376px (-24px from full viewport)
 *   padding: 6px 12px 16px (asymmetric)
 *   gap: 12px (+2)
 *   grid-template-columns: 182px 182px (-3 each)
 *   overflow: visible
 *
 * Fix: Override .promotionsListWrapper-bc to BS-exact
 * (185px cols, 10px gap, uniform 10px padding, full-width).
 * =========================================================== */

.promotionsListWrapper-bc {
  display: grid !important;
  /* BS exact: 185px × 2, gap 10 — total 185+10+185 = 380, fits 400 with 10px each side */
  grid-template-columns: 185px 185px !important;
  gap: 10px !important;
  /* BS uniform 10px padding */
  padding: 10px !important;
  /* BS full viewport width with overflow hidden */
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  /* BS: justify-content default left-start; let it flow */
  justify-content: start !important;
  /* No background override on wrapper — section bg already set */
  background: transparent !important;
  /* BS pos:static */
  position: static;
}

/* ===========================================================
 * KATMAN 4 (COMPONENT) — single promotion card
 *
 * BS .promotionsListEl-bc:
 *   tag: <article>, w: 185px (or 175.75 viewable)
 *   position: relative
 *   border-radius: 10px
 *   overflow: visible (BS); MR uses hidden
 *   background: transparent
 *   color: rgb(0,0,0) (default — h3 hidden)
 *   font-family: Roboto, Arial, Helvetica, sans-serif
 *   aspect-ratio: auto (BS — height computed by img natural ratio)
 *   margin: 0; padding: 0
 *
 * MR current <a class="promotionsListEl-bc">:
 *   w: 182px aspect 177/224 → forces 230.32px h
 *   color rgb(212,175,55) (gold inherited from theme)
 *   overflow: hidden
 *
 * Fix:
 * - Force width 185 (matches BS grid col)
 * - Aspect 177/224 OK (BS image natural is similar; safe to keep)
 * - color rgba(0,0,0,0) → unset (inherit white)
 * - Keep border-radius 10
 * =========================================================== */

.promotionsListEl-bc {
  /* Width auto-controlled by 185px grid col */
  display: block !important;
  position: relative !important;
  width: 100% !important;            /* fills 185px grid track */
  /* BS: visual aspect 177/224 (≈ 1.265). Keep MR aspect — matches BS img natural. */
  aspect-ratio: 177 / 224 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  background: transparent !important;
  /* font-family: BS-paralel via global Roboto fallback chain */
  font-family: "Roboto", Arial, Helvetica, sans-serif !important;
  /* BS color: rgb(0,0,0) — but since h3 is hidden, use unset to clear theme gold leak */
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.promotionsListEl-bc:active {
  transform: scale(0.97);
}

/* ===========================================================
 * KATMAN 5 (ELEMENT) — image / thumbnail
 *
 * BS .promotionsArticleThumbnail-bc (direct <img>):
 *   tag: IMG (single element, not wrapper-div + img)
 *   w: 166.5px (approx, accounting for container padding)
 *   border-radius: 10px
 *   object-fit: fill (BS — image is exact aspect)
 *   centered with auto margin / display block
 *
 * MR current: bg-image div + nested <img>:
 *   thumb (.promotionsArticleThumbnail-bc div): 182×230, bg-image cover
 *   img (no class): 182×230, object-fit cover
 *
 * Fix: Make MR's div+img stack visually identical:
 * - object-fit: cover (MR uses cover; BS uses fill; with same
 *   aspect ratio the result is identical)
 * - Both 100% w/h fit card
 * - 10px radius matches
 * =========================================================== */

.promotionsArticleThumbnail-bc {
  position: relative;
  display: block;
  width: 100% !important;
  height: 100% !important;
  border-radius: 10px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* When .promotionsArticleThumbnail-bc is itself an <img> (BS pattern) */
img.promotionsArticleThumbnail-bc {
  object-fit: cover; /* BS-equivalent visual to fill given aspect parity */
  display: block;
}

/* When MR uses div wrapper + nested <img> */
.promotionsArticleThumbnail-bc img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

/* ===========================================================
 * KATMAN 5 (ELEMENT) — h3 title (BS: display: none)
 *
 * BS hides h3 visually — only the image (with title baked in)
 * is shown. MR PHP doesn't render h3, but if anything injects
 * one (or for Drakon API future state), force display:none.
 * =========================================================== */

.promotions-article-title,
.promotionsListEl-bc h3 {
  display: none !important;
}

/* ===========================================================
 * KATMAN 7 (COLOR) — page bg, cards, chips
 *
 * BS body bg: white (no .bs-promotions-page wrapper exists in
 * BS — the .promotionsList-bc sits on white body)
 * MR uses .bs-promotions-page #0d1115 background.
 *
 * Decision: Keep MR dark — globally consistent with rest of
 * MR pages. Per K.22 §15 if BS specifically needs white we
 * record as user-override (future TBD). Audit shows BS has no
 * theme variant — body bg is white. To preserve operator brand,
 * keep MR dark.
 * =========================================================== */

/* No color override on .bs-promotions-page — operator brand */

/* ===========================================================
 * KATMAN 8 (SHAPE) — border-radius
 * BS card radius: 10px ✓ MR matches
 * =========================================================== */

/* ===========================================================
 * KATMAN 9 (SPACING) — handled above (gap, padding)
 * =========================================================== */

/* ===========================================================
 * KATMAN 10 (ASSET) — already correct, MR uses local mirror
 * of icons.bahissende302.com; same md5 for major promos.
 * =========================================================== */

/* ===========================================================
 * KATMAN 11-12 (INTERACTION / ANIMATION)
 * BS card no transition declared (instant tap).
 * MR adds 0.18s scale active feedback — BS-paralel UX, kept.
 * =========================================================== */

/* ===========================================================
 * KATMAN 13 (LOADING) — loading="lazy" already in PHP after
 * idx >= 4. Above-fold eager. ✓
 * =========================================================== */

/* ===========================================================
 * KATMAN 14 (STATE) — active chip color: gold ✓ matches BS
 * =========================================================== */

/* ===========================================================
 * KATMAN 15 (DATA) — chip labels HEPSİ/CASİNO/SPOR ✓ matches BS
 * =========================================================== */

/* ===========================================================
 * KATMAN 16 (BACKEND) — promotion data driven by controller;
 * no schema impact from this CSS. ✓
 * =========================================================== */

/* ===========================================================
 * §17-A — HEADER 3-DOT (handled by global header CSS, no diff)
 * §17-B — TILE INNER SPACING (no internal text/icon — pure img)
 * §17-C — TRANSITION TIMING (0.18s ease scale on active — kept)
 * §17-D — LOADING STATE (eager+lazy threshold matches BS)
 * =========================================================== */

/* ===========================================================
 * RESPONSIVE — BS scales chip + grid down on narrow viewports.
 * MR matches BS breakpoint logic.
 * =========================================================== */

@media (max-width: 360px) {
  .promotionsListWrapper-bc {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
  }
  .horizontal-sl-list.promotion-horizontal-sl-list-bc {
    margin-left: 5px !important;
    gap: 4px !important;
  }
  .horizontal-sl-item-bc {
    flex: 0 0 75px !important;
    width: 75px !important;
    min-width: 75px !important;
    max-width: 75px !important;
  }
}