@charset "UTF-8";

/* ========================================
 * ドバイ不動産コーポレートサイト
 * 物件スライドショー - CSS実装
 * ========================================
 * 
 * 設計方針:
 * - モバイルファースト設計
 * - BEM命名規則
 * - CSS変数で柔軟性確保
 * - prefers-reduced-motion 対応
 * - WordPress移行を見据えた設計
 * 
 * ブレークポイント:
 * - モバイル: ~767px
 * - タブレット: 768px~1023px(左右ボタン非表示)
 * - PC: 1024px~(左右ボタン表示)
 * - 大型デスクトップ: 1920px~
 * - 超大型デバイス: 2560px~
 * 
 * 注意事項:
 * - 左右ボタン・ドットインジケーターは将来削除される可能性あり
 * - モバイルでは左右ボタンを非表示・操作不可に設定
 * - will-change はJavaScript側で動的に制御(パフォーマンス最適化)
 * ======================================== */

/* ========================================
 * CSS変数定義
 * ======================================== */
:root {
  /* アニメーション設定 */
  --slideshow-transition: 1.2s;
  --slideshow-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
  
  /* コントロール設定(global.css のグラスモーフィズム変数を使用) */
  --control-size: 60px;
  --control-size-mobile: 48px;
  --control-color: var(--color-black); /* global.css から参照 */
  --control-spacing: 32px;
  --control-spacing-mobile: 20px;
  
  /* インジケーター設定(global.css のグラスモーフィズム変数を使用) */
  --indicator-size: 12px;
  --indicator-size-mobile: 10px;
  --indicator-gap: 12px;
  --indicator-gap-mobile: 10px;
  --indicator-bg: rgba(255, 255, 255, 0.4);
  --indicator-bg-active: var(--color-white); /* global.css から参照 */
  --indicator-bg-hover: rgba(255, 255, 255, 0.6);
  --indicator-bottom: 40px;
  --indicator-bottom-mobile: 24px;
  
  /* Z-index階層 */
  --z-index-slide: 1;
  --z-index-controls: 10;
  --z-index-indicators: 20;
}

/* ========================================
 * ベーススタイル(モバイル: ~767px)
 * ======================================== */

/* セクション全体 */
.property-archive-cta {
  position: relative;
  width: 100%;
  height: 100vh;  /* フォールバック(古いブラウザ用) */
  height: 100dvh; /* 最新仕様(動的ビューポート) */
  overflow: hidden;
}

/* スライドショーコンテナ */
.archive-slideshow {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.archive-slideshow__container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ========================================
 * スライドトラック
 * ======================================== */
.archive-slideshow__track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ========================================
 * 個別スライド
 * ======================================== */
.archive-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: var(--z-index-slide);
  overflow: hidden;
  
  /* パフォーマンス最適化 */
  /* will-change は JavaScript 側で動的に制御 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* アクティブスライド */
.archive-slide.is-active {
  opacity: 1;
  z-index: calc(var(--z-index-slide) + 1);
}

/* スライド画像 */
.archive-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  
  /* パフォーマンス最適化 */
  /* will-change は JavaScript 側で動的に制御 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* ========================================
 * コントロールボタン(モバイル・タブレットでは非表示)
 * 
 * 注意: 将来削除される可能性があります
 * 削除する場合:
 * 1. HTML から data-archive-controls を削除
 * 2. このセクション全体を削除
 * 3. JavaScript の handlePrevClick, handleNextClick を削除
 * ======================================== */
.archive-slideshow__controls {
  /* モバイル・タブレットでは非表示・操作不可 */
  display: none;
  pointer-events: none;
  
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: var(--z-index-controls);
  transform: translateY(-50%);
}

/* 個別コントロールボタン */
.archive-control {
  position: absolute;
  top: 50%;
  width: var(--control-size-mobile);
  height: var(--control-size-mobile);
  transform: translateY(-50%);
  
  /* スタイル - global.css のホワイトグラスモーフィズム変数を使用 */
  background: var(--color-glass-white);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  color: var(--control-color);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  
  /* フォント */
  font-size: 32px;
  line-height: 1;
  font-weight: 600;
  
  /* 中央配置 */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* トランジション */
  transition: background-color 0.3s ease, transform 0.2s ease;
  
  /* アウトライン(アクセシビリティ) */
  outline: none;
  
  /* タッチデバイス対応 */
  -webkit-tap-highlight-color: transparent;
}

/* 前へボタン */
/*
.archive-control--prev {
  left: var(--control-spacing-mobile);
}
*/

/* 次へボタン */
/*
.archive-control--next {
  right: var(--control-spacing-mobile);
}
*/

/* ホバー・フォーカス状態(PCのみ有効) */
.archive-control:hover,
.archive-control:focus {
  background: var(--color-glass-white-hover);
  backdrop-filter: blur(var(--blur-xl));
  -webkit-backdrop-filter: blur(var(--blur-xl));
}

.archive-control:active {
  transform: translateY(-50%) scale(0.95);
}

/* フォーカスインジケーター(アクセシビリティ) */
.archive-control:focus-visible {
  outline: 2px solid var(--control-color);
  outline-offset: 4px;
}

/* 無効状態 */
.archive-control:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* ========================================
 * インジケーター(全デバイスで表示)
 * 
 * 注意: 将来削除される可能性があります
 * 削除する場合:
 * 1. HTML から data-archive-indicators を削除
 * 2. このセクション全体を削除
 * 3. JavaScript の updateIndicators 関連コードを削除
 * ======================================== */
.archive-slideshow__indicators {
  position: absolute;
  bottom: var(--indicator-bottom-mobile);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-index-indicators);
  
  /* レイアウト */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--indicator-gap-mobile);
  
  /* パディング(タッチ領域確保) */
  padding: 8px 12px;
}

/* 個別インジケーター */
.archive-indicator {
  width: var(--indicator-size-mobile);
  height: var(--indicator-size-mobile);
  
  /* スタイル */
  background-color: var(--indicator-bg);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  
  /* トランジション */
  transition: background-color 0.3s ease, transform 0.2s ease;
  
  /* アウトライン */
  outline: none;
  
  /* タッチデバイス対応 */
  -webkit-tap-highlight-color: transparent;
  
  /* タッチ領域拡大(アクセシビリティ) */
  position: relative;
}

/* タッチ領域拡大(疑似要素) */
.archive-indicator::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; /* WCAG推奨タッチターゲットサイズ */
  height: 44px;
}

/* アクティブ状態 */
.archive-indicator.is-active {
  background-color: var(--indicator-bg-active);
}

/* ホバー・フォーカス状態 */
.archive-indicator:hover,
.archive-indicator:focus {
  background-color: var(--indicator-bg-hover);
}

.archive-indicator:active {
  transform: scale(0.9);
}

/* フォーカスインジケーター(アクセシビリティ) */
.archive-indicator:focus-visible {
  outline: 2px solid var(--control-color);
  outline-offset: 4px;
}

/* ========================================
 * アクセシビリティ: prefers-reduced-motion
 * ======================================== */
@media (prefers-reduced-motion: reduce) {
  /* スライドとコントロールの全アニメーションを無効化 */
  .archive-slide,
  .archive-slide img,
  .archive-control,
  .archive-indicator {
    animation: none !important;
    transition: none !important;
    will-change: auto !important; /* JS側で追加された場合も強制的に無効化 */
  }
}

/* ========================================
 * レスポンシブ: タブレット(768px~1023px)
 * ======================================== */
@media (min-width: 768px) {
  /* インジケーターサイズ調整のみ */
  /* 左右ボタンはまだ非表示のまま */
  
  .archive-slideshow__indicators {
    bottom: var(--indicator-bottom);
    gap: var(--indicator-gap);
  }
  
  .archive-indicator {
    width: var(--indicator-size);
    height: var(--indicator-size);
  }
}

/* ========================================
 * レスポンシブ: PC(1024px~)
 * ======================================== */
@media (min-width: 1024px) {
  /* コントロールボタンを表示・操作可能にする */
  .archive-slideshow__controls {
    display: block;
    pointer-events: auto;
  }
  
  /* コントロールサイズ調整 */
  .archive-control {
    width: var(--control-size);
    height: var(--control-size);
    font-size:20px;
  }
  
  .archive-control--prev {
    left: var(--control-spacing);
  }
  
  .archive-control--next {
    right: var(--control-spacing);
  }
}

/* ========================================
 * レスポンシブ: 大型デスクトップ(1920px~)
 * ======================================== */
@media (min-width: 1920px) {
  /* コントロールボタンの位置調整 */
  .archive-control--prev {
    left: 60px;
  }
  
  .archive-control--next {
    right: 60px;
  }
  
  /* インジケーターの間隔調整 */
  .archive-slideshow__indicators {
    gap: 16px;
    bottom: 60px;
  }
  
  .archive-indicator {
    width: 14px;
    height: 14px;
  }
}

/* ========================================
 * レスポンシブ: 超大型デバイス(2560px~)
 * ======================================== */
@media (min-width: 2560px) {
  /* コントロールボタンのサイズと位置調整 */
  .archive-control {
    width: 80px;
    height: 80px;
    font-size: 48px;
  }
  
  .archive-control--prev {
    left: 80px;
  }
  
  .archive-control--next {
    right: 80px;
  }
  
  /* インジケーターの調整 */
  .archive-slideshow__indicators {
    gap: 20px;
    bottom: 80px;
  }
  
  .archive-indicator {
    width: 16px;
    height: 16px;
  }
}

/* ========================================
 * ユーティリティクラス
 * ======================================== */

/* スクリーンリーダー専用テキスト */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ========================================
 * WordPress対応用コメント
 * ======================================== */

/*
 * WordPress移行時の注意点:
 * 
 * 1. このCSSファイルは静的HTMLでもWordPressでも共通で使用可能
 * 
 * 2. functions.php での読み込み:
 *    function theme_enqueue_styles() {
 *        wp_enqueue_style(
 *            'property-slideshow',
 *            get_template_directory_uri() . '/assets/css/property-slideshow.css',
 *            array(),
 *            '1.0.0'
 *        );
 *    }
 *    add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
 * 
 * 3. CSS変数をカスタマイザーで変更可能にする場合:
 *    add_action('wp_head', 'property_slideshow_custom_css');
 *    function property_slideshow_custom_css() {
 *        $control_color = get_theme_mod('slideshow_control_color', '#ffffff');
 *        $indicator_bg = get_theme_mod('slideshow_indicator_bg', 'rgba(255, 255, 255, 0.4)');
 *        ?>
 *        <style>
 *            :root {
 *                --control-color: <?php echo esc_attr($control_color); ?>;
 *                --indicator-bg: <?php echo esc_attr($indicator_bg); ?>;
 *            }
 *        </style>
 *        <?php
 *    }
 * 
 * 4. レスポンシブブレークポイントをテーマに合わせる場合:
 *    @media クエリの値を調整してください
 * 
 * 5. パフォーマンス最適化:
 *    - 画像の最適化(WebP形式推奨)
 *    - 遅延読み込み(loading="lazy")
 *    - 適切な画像サイズ(1920x1080推奨)
 */