/* ============================================================
   ts-hcards — 가로 카드 슬라이더 (롯데호텔 Destinations 스타일)
   1단계: 레이아웃 + peek + 진행바 자리 + 화살표 외형
   site.css 의 기존 규칙을 의도적으로 덮어씌운다.
   ============================================================ */

.ts-hcards{
  /* 슬라이더 토큰 */
  --ts-gap: 20px;
  --ts-transition: .5s ease;
  /* 컨테이너 우측에서 뷰포트 우측까지 거리 (좁은 화면에서는 최소 40px 확보)
     1400px 컨테이너 + 24px 좌우 패딩 → 50vw - (1400/2 - 24) = 50vw - 676px */
  --extend: max(40px, calc(50vw - 676px));
  /* 카드 폭은 트랙 폭에 비례 — 3.5장이 항상 보이도록 자동 분배 */
  --ts-card-w: calc((100% - 3 * var(--ts-gap)) / 3.5);

  position:relative;
  /* 가로는 잘라내고 세로는 화살표가 위로 튀어나갈 수 있게 visible 유지 */
  overflow-x:clip;
  overflow-y:visible;

  /* site.css 의 padding-top:56px / ::before 가로라인 무력화 */
  padding-top:0;
  margin-top:0;
  margin-right:0;

  /* margin 만으로는 박스가 시각적으로 확장되지 않으므로 width 로 직접 키운다 */
  width:calc(100% + var(--extend));
}
/* 슬라이더가 컨테이너 밖으로 나가는 만큼 가로 스크롤이 생기지 않도록 섹션에서 클립 */
.section:has(.ts-hcards){overflow-x:clip}
.ts-hcards::before{display:none}

/* ── 트랙 ────────────────────────────────────────────────── */
.ts-hcards__track{
  display:flex;
  gap:var(--ts-gap);
  list-style:none;
  padding:0;
  margin:0;
  /* site.css 의 overflow-x:auto / scroll-snap / padding-bottom 무력화 */
  overflow:visible;
  scroll-snap-type:none;
  padding-bottom:0;
  /* JS 가 translateX 로 이동시킨다 — 부드러운 전환 */
  transition:transform var(--ts-transition);
  will-change:transform;
}
.ts-hcards__track::-webkit-scrollbar{display:none}

/* ── 카드 ────────────────────────────────────────────────── */
.ts-hcards__item{
  flex:0 0 var(--ts-card-w);
  aspect-ratio:3 / 4;
  scroll-snap-align:none;
  position:relative;
  overflow:hidden;
}
/* 주요제품 슬라이더만 가로형(576:436) — 가로 제품 이미지가 잘리지 않게.
   카드 폭은 반응형 유지, 큰 이미지를 올려도 이 비율로 맞춰 표시(object-fit:cover) */
.ts-hcards[data-hswipe="products"] .ts-hcards__item{
  aspect-ratio:576 / 436;
}
.ts-hcards__item > a,
.ts-hcards__item > figure{
  display:block;
  width:100%;
  height:100%;
}
.ts-hcards__item figure{
  position:relative;
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  border-radius:0;
  background:#000;
}
.ts-hcards__item img{
  width:100%;
  height:100%;
  /* site.css 의 aspect-ratio:4/3 무력화 — 카드 전체를 덮는다 */
  aspect-ratio:auto;
  object-fit:cover;
  display:block;
  transition:transform var(--ts-transition);
}
.ts-hcards__item:hover img{
  transform:scale(1.1);
}

/* 어두운 그라데이션 오버레이 — 좌하단 텍스트 가독성 확보 */
.ts-hcards__item figure::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.65) 100%);
  pointer-events:none;
}

/* ── 카드 좌하단 라벨 ───────────────────────────────────── */
.ts-hcards__item figcaption{
  position:absolute;
  left:22px;
  right:22px;
  bottom:20px;
  color:#fff;
  z-index:1;
  text-shadow:0 1px 8px rgba(0,0,0,.45);
  /* site.css 의 left:14px;bottom:12px 덮어씀 */
}
.ts-hcards__item figcaption strong{
  display:block;
  font-family:var(--ff-serif-ko, "Noto Serif KR", serif);
  font-weight:600;
  font-size:24px;
  line-height:1.25;
  letter-spacing:-.01em;
}
.ts-hcards__item figcaption span{
  display:block;
  margin-top:4px;
  font-size:13px;
  font-weight:400;
  opacity:.9;
  font-weight:400;
}

/* ── 우측 상단 원형 화살표 ──────────────────────────────── */
.ts-hcards .ts-arrows{
  position:absolute;
  top:-56px;
  /* extend 만큼 오른쪽으로 들여 컨테이너 우측 가장자리에 정확히 정렬 */
  right:var(--extend);
  display:flex;
  gap:10px;
  z-index:3;
}
.ts-hcards .ts-arrows button{
  width:44px;
  height:44px;
  padding:0;
  border:1px solid #111;
  border-radius:50%;
  background:#fff;
  color:#111;
  font-size:20px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, opacity .2s ease, border-color .2s ease;
}
.ts-hcards .ts-arrows button:hover{
  background:#111;
  color:#fff;
}
.ts-hcards .ts-arrows button[disabled],
.ts-hcards .ts-arrows button[aria-disabled="true"],
.ts-hcards .ts-arrows button.is-disabled{
  opacity:.35;
  /* pointer-events 차단 제거 — 클릭은 항상 받고, 끝단 처리는 JS go() 가 담당 */
}

/* ── 진행바 (트랙 위) ───────────────────────────────────── */
.ts-progress{
  position:relative;
  height:1px;
  background:#e5e5e5;
  /* 진행바는 컨테이너 폭에서 마무리 — 슬라이더 확장 영역까지 늘어나지 않게 */
  margin:0 var(--extend) 24px 0;
  overflow:hidden;
}
.ts-progress__bar{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:0;            /* JS 가 currentIndex/maxIndex 비율로 갱신 */
  background:#111;
  transition:width .4s ease;
}

/* ============================================================
   반응형 — 카드 너비 / gap / 화살표 위치
   ============================================================ */
@media (max-width:1199px){
  .ts-hcards{
    --ts-gap: 16px;
    /* 태블릿: 2.5장 보이도록 자동 분배 */
    --ts-card-w: calc((100% - 2 * var(--ts-gap)) / 2.5);
  }
}
@media (max-width:767px){
  .ts-hcards{
    --ts-gap: 12px;
    --extend: 24px;
    /* 모바일은 카드를 화면 폭 기준으로 고정 (1.2장 노출) */
    --ts-card-w: 75vw;
  }
  .ts-hcards .ts-arrows{
    top:-44px;
    gap:8px;
  }
  .ts-hcards .ts-arrows button{
    width:36px;
    height:36px;
    font-size:18px;
  }
  .ts-progress{
    margin-bottom:18px;
  }
  .ts-hcards__item figcaption{
    left:16px;right:16px;bottom:14px;
  }
  .ts-hcards__item figcaption strong{font-size:20px}
}

/* ============================================================
   카드 1장 이하 — 슬라이더 UI 완전 숨김 (JS 가 .is-static 부여)
   ============================================================ */
.ts-hcards.is-static .ts-arrows,
.ts-hcards.is-static .ts-progress{
  display:none;
}

/* ============================================================
   ts-films (M6 라이프스타일 필름) — ts-hcards 와 동일 슬라이더 사용
   다만 카드는 유튜브 16:9 비율로 — 폭은 같지만 높이만 낮아진다.
   ============================================================ */
.ts-films__item{
  /* M4 의 3:4 portrait 비율 무력화 — 영상은 가로형 16:9 */
  aspect-ratio:16 / 9;
}
.ts-films__item img{
  /* site.css 의 aspect-ratio:16/9 / opacity:.9 무력화 — 카드 박스 자체가 16:9 */
  aspect-ratio:auto;
  opacity:1;
}
.ts-films__item .ts-films__play{
  /* 그라데이션 오버레이 / figcaption 위로 끌어올려 항상 보이게 */
  z-index:2;
}
.ts-films__item figcaption{
  /* site.css 의 padding:12px 4px 무력화 — 오버레이 라벨로 동작 */
  padding:0;
  /* 16:9 카드는 세로 여백이 좁으므로 라벨 위치를 조금 더 안쪽으로 */
  left:16px;
  right:16px;
  bottom:14px;
}
.ts-films__item figcaption strong{
  font-size:18px;
  line-height:1.3;
}

/* ============================================================
   접근성 — 모션 최소화 환경에서는 트랜지션 제거
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .ts-hcards__track,
  .ts-progress__bar,
  .ts-hcards__item img{
    transition:none;
  }
  .ts-hcards__item:hover img{
    transform:none;
  }
}