/* 首頁全遊戲入口 — 同一 DOM 的樣式與 RWD 集中於此檔 */
.home-games-hub.casino__section {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}

.home-games-hub {
  & .swiper.mySwiper.content {
    --lux-swiper-title-mt: 2px;
    --lux-swiper-title-row-h: 34px;
    /* 區塊間距要撐得開分帶，否則相鄰兩條底色會黏在一起看不出交錯。
       !important 是為了蓋過 lux-layout-v2 的
       `.vertical-tab .tab-content > .main-col .swiper { margin-bottom: 0 !important }`
       —— 那條是為了壓掉 index_content 的巢狀輪播間距，這裡要自己定。 */
    margin-bottom: 30px !important;

    @media screen and (min-width: 768px) {
      --lux-swiper-title-mt: 4px;
      --lux-swiper-title-row-h: 42px;
    }

    &:last-child {
      margin-bottom: 8px !important;
    }
  }

  /* 分帶：這 8 個遊戲區塊全部鋪在 .main-home-panel 同一張白紙上，
     彼此只靠一行小標題分隔，往下捲就糊成一片，這是首頁「沒節奏」的主因。
     交錯墊一層極淡藍底，把相鄰區塊拆開。

     用 ::before 而不是直接給區塊底色，是因為區塊本身就是 swiper 容器 ——
     一旦加 padding，slide 寬度會跟著重算，只有偶數區塊的遊戲圖變窄會更難看。
     ::before 完全不參與排版，不會位移任何東西。

     z-index: -1 是安全的：區塊本身是 position:relative + z-index:1，
     自成一個堆疊脈絡，負值只會沉到自己的內容之下，不會穿到白色 panel 後面。
     左右一律貼齊區塊邊界 —— 父層 overflow-x 是 clip，再往外擴會被切掉。 */
  & .swiper.mySwiper.content:nth-of-type(odd)::before {
    content: "";
    position: absolute;
    inset: -14px 0 -10px;
    z-index: -1;
    border-radius: 16px;
    background: var(--ref-band);
    pointer-events: none;
  }

  & .mySwiper.content > .index_tith2.title-with-icon {
    display: flex;
    align-items: center;
    gap: 10px;
    /* 輪播箭頭是用 --lux-swiper-title-row-h 對齊標題列中線的，
       所以下緣多出來的 10px 要一起加進 min-height，文字才不會比箭頭高一截 */
    min-height: calc(var(--lux-swiper-title-row-h) + 10px);
    margin: var(--lux-swiper-title-mt) 0 8px !important;
    padding: 0 72px 10px 0;
    border-left: none;
    /* 分帶底色大半被遊戲圖蓋住，光靠底色分不出區塊；
       這條線才是真正把「標題 → 內容」切開、撐出節奏的東西。 */
    border-bottom: 1px solid var(--ref-band-line);
    box-sizing: border-box;

    @media screen and (min-width: 768px) {
      margin-bottom: 12px !important;
    }

    & > h2 {
      margin: 0;
      padding: 0;
      flex: 1 1 auto;
      min-width: 0;
      text-align: left;
      font-size: 1.2rem;
      font-weight: 700;
      line-height: 1.25;
      color: var(--ref-primary, #003d79);
      letter-spacing: 0.02em;

      @media screen and (max-width: 767px) {
        font-size: 1.05rem;
        line-height: 1.2;
      }
    }
  }

  & .title-with-icon__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: #89c4f4;
    background: radial-gradient(120% 140% at 10% 0%, rgba(137, 196, 244, 0.12) 0%, rgba(137, 196, 244, 0) 52%), linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    border: 1px solid #dddddd54;
    box-shadow: 0 4px 16px rgba(0, 61, 121, 0.08);

    & i {
      font-size: 15px;
      line-height: 1;

      @media screen and (max-width: 767px) {
        font-size: 13px;
      }
    }
  }

  /* 熱門區：參考站火焰用金色點綴 */
  & .mySwiper--hot .title-with-icon__icon {
    color: var(--ref-gold, #d4a150);
    background:
      radial-gradient(120% 140% at 10% 0%, rgba(247, 224, 143, 0.35) 0%, rgba(212, 161, 80, 0) 55%),
      linear-gradient(180deg, #fff9ef 0%, #ffffff 100%);
    border-color: var(--ref-gold-line, rgba(212, 161, 80, 0.42));
    box-shadow: 0 4px 16px rgba(212, 161, 80, 0.16);
  }
}