/* ============================================================
   inCruises専用サイト TOP下
   世界の旅先10枚 / スマホ2.4枚表示カルーセル

   重要:
   - 対象は「メンバーになって、特典を活かして、賢く旅を続けるクラブです」
     の直下にある現在の3枚写真エリア（.icx-cards）のみ。
   - 見出し・本文・他セクションは変更しない。
   - PC版は既存表示をそのまま維持する（このファイルは max-width:760px
     の中でしか描画に関与しない）。760pxは、この intro セクション既存の
     スマホ切替ブレイクポイント（incruises-top-redesign.css の
     @media(max-width:760px)）と一致させている。
   - グローバルセレクタは使用せず、すべて .icx-intro-inner 配下へスコープ。
   ============================================================ */

.icx-intro-inner .inc-world-carousel-mobile{
  display:none;
}

/* ===== スマートフォンだけ新カルーセルを表示 ===== */
@media (max-width: 760px){

  /* 既存の3枚写真ストリップはスマホのみ非表示（HTMLからは削除しない） */
  .icx-intro-inner .icx-cards{
    display:none;
  }

  .icx-intro-inner .inc-world-carousel-mobile{
    display:block;
    /* .icx-intro-inner の左右padding 18px を打ち消して全幅で見せる */
    width:calc(100% + 36px);
    margin:2px -18px 0;
    overflow:hidden;
  }

  .icx-intro-inner .inc-world-track{
    display:flex;
    gap:9px;
    width:100%;
    padding:0 18px 8px;
    overflow-x:auto;
    overflow-y:hidden;

    /* 指でスワイプしやすく、カード単位で止まる */
    scroll-snap-type:x mandatory;
    scroll-padding-inline:18px;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;

    /* スクロールバーは見せない */
    scrollbar-width:none;
  }
  .icx-intro-inner .inc-world-track::-webkit-scrollbar{
    display:none;
  }
  .icx-intro-inner .inc-world-track:focus-visible{
    outline:2px solid #c69134;
    outline-offset:2px;
  }

  .icx-intro-inner .inc-world-card{
    /* 1.6枚表示：1枚目を完全表示＋2枚目を約60%見せる */
    flex:0 0 64%;
    cursor:pointer;
    -webkit-tap-highlight-color:rgba(201,163,92,.18);
    min-width:0;
    margin:0;
    /* sr-only figcaption(absolute)をカード内に閉じ込め、ページ横スクロールを防ぐ */
    position:relative;
    scroll-snap-align:start;
    scroll-snap-stop:normal;

    overflow:hidden;
    border-radius:10px;
    background:#fff;
    box-shadow:0 3px 10px rgba(72,52,32,.11);
  }

  .icx-intro-inner .inc-world-card picture,
  .icx-intro-inner .inc-world-card img{
    display:block;
    width:100%;
  }
  .icx-intro-inner .inc-world-card img{
    height:auto;
    aspect-ratio:3 / 4;
    object-fit:cover;
  }

  .icx-intro-inner .inc-world-swipe-hint{
    display:block;
    margin:2px 18px 0;
    color:#9b6b22;
    font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
    font-size:14px;
    line-height:1.5;
    text-align:center;
    letter-spacing:.02em;
  }
  .icx-intro-inner .inc-world-swipe-hint span{
    color:#c69134;
  }

  .icx-intro-inner .inc-world-sr-only{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
  }
}

/* 390〜430pxで2.4枚の見え方を安定 */
@media (min-width:390px) and (max-width:430px){
  .icx-intro-inner .inc-world-track{
    gap:9px;
    padding-inline:18px;
  }
  .icx-intro-inner .inc-world-card{
    flex-basis:64%;
  }
}

/* 少し細いスマホでもカードを小さくし過ぎない */
@media (max-width:389px){
  .icx-intro-inner .inc-world-track{
    gap:8px;
    padding-inline:18px;
  }
  .icx-intro-inner .inc-world-card{
    flex-basis:64%;
  }
  .icx-intro-inner .inc-world-swipe-hint{
    font-size:13px;
  }
}

/* 761px以上（既存introのPCレイアウト側）ではこの新UIを一切出さない */
@media (min-width:761px){
  .icx-intro-inner .inc-world-carousel-mobile{
    display:none!important;
  }
}

/* ============================================================
   写真タップで開くライトボックス（ページ内に1個だけ）
   外部ライブラリ不使用。スマホ（760px以下）でのみ開く。
   ============================================================ */
.inc-world-lightbox{ display:none; }

@media (max-width:760px){
  .inc-world-lightbox.is-open{
    display:block;
    position:fixed;
    inset:0;
    z-index:9999;
  }
  .inc-world-lightbox__backdrop{
    position:absolute;
    inset:0;
    background:rgba(223,215,203,.97);
  }
  .inc-world-lightbox__dialog{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .inc-world-lightbox__figure{
    margin:0;
    max-width:92vw;
  }
  .inc-world-lightbox__figure picture{
    display:block;
  }
  .inc-world-lightbox__image{
    display:block;
    /* 縦長写真：幅と高さの両方に収まるよう、比率を保ったまま縮小する */
    width:auto;
    height:auto;
    max-width:92vw;
    max-height:80vh;
    object-fit:contain;
    border-radius:8px;
    box-shadow:0 10px 30px rgba(80,64,44,.26);
  }

  /* 閉じる × */
  .inc-world-lightbox__close{
    position:absolute;
    top:max(10px, env(safe-area-inset-top));
    right:10px;
    width:44px;
    height:44px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.62);
    color:#5d5145;
    font-size:26px;
    line-height:1;
    cursor:pointer;
  }

  /* 左右の控えめな矢印 */
  .inc-world-lightbox__prev,
  .inc-world-lightbox__next{
    position:absolute;
    top:50%;
    width:40px;
    height:40px;
    margin-top:-20px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.58);
    color:#5d5145;
    font-size:26px;
    line-height:1;
    cursor:pointer;
  }
  .inc-world-lightbox__prev{ left:6px; }
  .inc-world-lightbox__next{ right:6px; }
  .inc-world-lightbox__prev[disabled],
  .inc-world-lightbox__next[disabled]{
    opacity:.22;
    cursor:default;
  }

  .inc-world-lightbox__counter{
    position:absolute;
    left:0;
    right:0;
    bottom:max(14px, env(safe-area-inset-bottom));
    margin:0;
    text-align:center;
    color:rgba(93,81,69,.82);
    font-family:"Noto Sans JP","Yu Gothic",sans-serif;
    font-size:13px;
    line-height:1.4;
    letter-spacing:.06em;
  }
}

/* 761px以上（PCレイアウト側）では絶対に出さない */
@media (min-width:761px){
  .inc-world-lightbox{ display:none!important; }
}