/* ============================================================
   CSS Load Order (from index.html):
   1. css/style.css
   2. Bootstrap CSS (CDN)
   3. Font Awesome (CDN)
   4. Google Fonts (CDN)
   5. css/reveal.css
   6. css/i18n-visibility.css
   7. css/lookbook-override.css (THIS FILE - loaded last)
   
   This file is the SINGLE SOURCE OF TRUTH for all Lookbook styles.
   All Lookbook-related styles moved from style.css on 2025-01-XX
   
   Lookbook background policy:
   - Section (#lookbook) itself is transparent (no background/blur)
   - Only .lookbook-wrapper.lookbook-panel has white+blur (rgba(255,255,255,0.9) + blur(8px))
   - All other Lookbook elements (.lookbook-container, .lookbook-track, .band) are transparent
   ============================================================ */

/* ===== Lookbook base: section itself has NO background ===== */
#lookbook {
  position: relative;
  padding: clamp(40px, 6vw, 80px) 0;
  background: none !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-align: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto;
}

/* セクション内の band と疑似要素にも背景を持たせない */
#lookbook::before,
#lookbook::after,
#lookbook .band,
#lookbook .band::before {
  background: none !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Lookbook section wrapper - moved from style.css */
.lookbook-section {
  width: 100% !important;
  max-width: none !important;
  text-align: center !important;
  background: none !important;
  overflow: visible !important;
}

.lookbook {
  padding: 0;
  background: none !important;
  overflow: visible !important;
}

/* ===== Frosted panel ONLY around the image row ===== */
#lookbook .lookbook-wrapper.lookbook-panel {
  position: relative;
  margin: 32px auto 64px;
  max-width: 1180px;
  padding-block: clamp(16px, 3.2vw, 40px);
  padding-inline: clamp(16px, 2vw, 24px);
  background-color: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 12px;
  z-index: 1;
}

/* =========================================================
   PC表示: Lookbook のフロー背景を横幅いっぱいに
   Collection と同様のフルブリードレイアウトに統一
   ========================================================= */
@media (min-width: 1025px) {
  #lookbook .lookbook-wrapper.lookbook-panel {
    max-width: none !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
    padding-block: clamp(16px, 3.2vw, 40px) !important;
    padding-inline: clamp(16px, 3.2vw, 40px) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 要件③: 画像フロー全体を横幅いっぱいに表示 */
  #lookbook .lookbook-wrapper.lookbook-panel .lookbook-container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
  
  /* Lookbook trackも横幅いっぱいに広がるように */
  #lookbook .lookbook-track {
    width: 100%;
    max-width: none;
  }
  
  /* 要件②: Lookbook画像も高さを統一（Collectionと同様のコンセプト） */
  #lookbook .lookbook-track img,
  #lookbook .lookbook-track a img,
  #lookbook .lookbook-track picture img {
    height: var(--collection-img-h, 320px) !important;
    max-height: var(--collection-img-h, 320px) !important;
    width: auto !important;
    object-fit: contain !important; /* 画像の全体が見えることを優先 */
    object-position: center !important;
  }
}

/* 中身のコンテナはレイアウト専用。背景は持たせない */
#lookbook .lookbook-container {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px;
  background: none !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  position: relative;
  padding-block: 0.25rem !important;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  height: auto !important;
  min-height: auto !important;
  /* 中身の高さに合わせる */
}

/* Track wrap - moved from style.css */
/* 高さを固定せず、画像の高さに追従させる */
#lookbook .track-wrap {
  display: flex;
  justify-content: center;
  overflow: visible;
  height: auto;
  min-height: clamp(140px, 22vw, 260px);
}

@media (min-width: 1024px) {
  #lookbook .track-wrap {
    height: auto;
    min-height: clamp(160px, 18vw, 240px);
  }
}

/* 画像サイズ・レイアウトは必要に応じてここにまとめる */
/* position: absolute を削除し、画像が切れないようにする */
#lookbook .lookbook-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px;
  overflow-x: auto;
  overflow-y: visible !important;
  position: relative !important;
  align-items: center !important;
  height: auto !important;
  min-height: 100% !important;
  will-change: transform;
  cursor: grab;
  pointer-events: auto !important;
  width: max-content;
  margin: 0 auto;
}

/* 要件②: Lookbook画像も高さを統一（Collectionと同様のコンセプト） */
#lookbook .lookbook-track img,
#lookbook .lookbook-item img {
  object-fit: contain !important; /* 画像の全体が見えることを優先 */
  object-position: center !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  user-select: none !important;
  width: auto !important;
  height: auto !important;
}

/* PC表示: Lookbook画像の高さを統一 */
@media (min-width: 1025px) {
  #lookbook .lookbook-track img,
  #lookbook .lookbook-item img {
    height: var(--collection-img-h, 320px) !important;
    max-height: var(--collection-img-h, 320px) !important;
  }
}

#lookbook .lookbook-item {
  flex: 0 0 auto !important;
  width: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  overflow: visible !important;
  pointer-events: auto !important;
  position: relative;
  display: inline-flex;
  z-index: 1;
  inline-size: auto !important;
  block-size: 100% !important;
}

#lookbook .lookbook-track a {
  display: block !important;
  inline-size: auto !important;
  block-size: 100% !important;
  pointer-events: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Lookbook row - moved from style.css */
#lookbook .lookbook-row {
  position: relative;
  height: auto;
  min-block-size: clamp(160px, 22vw, 340px);
  overflow: visible;
}

/* Safety: track側で背景が復活しないようにする */
#lookbook .lookbook-track * {
  background: none !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Lookbook内の .band は背景なしに固定 */
#lookbook .band {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-block: clamp(12px, 2vw, 24px) !important;
  background: none !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative;
  z-index: 1;
  overflow: visible !important;
}

/* Lookbook track dragging state - moved from style.css */
#lookbook .lookbook-track.dragging {
  cursor: grabbing;
  animation: none !important;
}

/* =========================================================
   Responsive (モバイル): 同じポリシーを維持
   ========================================================= */
@media (max-width: 768px) {
  #lookbook {
    background: none !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #lookbook .lookbook-wrapper.lookbook-panel {
    margin: 24px auto 48px;
    max-width: 100%;
    padding-inline: 16px;
  }

  #lookbook .lookbook-container {
    background: none !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* min-height は削除: 中身の高さに合わせる */
  }

  #lookbook .lookbook-row {
    min-block-size: clamp(140px, 36vw, 260px);
  }
}

/* PC版の画像サイズ設定 */
@media (min-width: 1025px) {
  #lookbook .lookbook-track img,
  #lookbook .lookbook-item img {
    width: 240px !important;
    height: auto !important;
    max-height: 320px !important;
    object-fit: contain !important;
  }

  #lookbook .lookbook-track {
    height: auto !important;
    /* min-height は削除: 中身の高さに合わせる */
  }
}

/* タブレット版の画像サイズ設定 */
@media (min-width: 481px) and (max-width: 1024px) {
  #lookbook .lookbook-track img,
  #lookbook .lookbook-item img {
    width: 200px !important;
    height: auto !important;
    max-height: 280px !important;
    object-fit: contain !important;
  }

  #lookbook .lookbook-track {
    height: auto !important;
    min-height: 280px !important;
    overflow: visible !important;
  }
}

/* スマホ版の画像サイズ設定 */
@media (max-width: 480px) {
  #lookbook .lookbook-track img,
  #lookbook .lookbook-item img {
    width: 70vw !important;
    height: auto !important;
    max-height: 85vw !important;
    min-width: 240px !important;
    max-width: 360px !important;
    object-fit: contain !important;
  }

  #lookbook .lookbook-track {
    height: auto !important;
    min-height: 80vw !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #lookbook .lookbook-container {
    min-block-size: calc(420px + 0.5rem) !important;
    min-height: calc(420px + 0.5rem) !important;
    max-block-size: none !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    align-items: center !important;
    padding-block: 0.25rem !important;
  }
}