/**
 * iPad専用CSS修正
 * 2025-08-08
 */

/* iPad用メディアクエリ（768px-1024px） */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* グリーンスクリーン要素を非表示 */
  .green-screen,
  .greenscreen,
  #greenscreen-canvas,
  .greenscreen-processor {
    display: none !important;
  }

  /* 3カラムレイアウトを縦並びに変更 */
  .main-grid,
  .three-column-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem;
  }

  .column,
  .main-column {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* VRMキャンバスの背景を透明に */
  #vrm-container {
    background: transparent !important;
  }

  #vrm-canvas {
    background: transparent !important;
  }

  /* ブログカードを横並びレイアウトに */
  #blog-cards-container,
  .blog-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .blog-card-image {
    height: 200px;
    overflow: hidden;
  }

  .blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* YouTube動画グリッドを縦並びに */
  .youtube-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem;
  }

  .youtube-card {
    width: 100% !important;
  }

  .youtube-card.featured {
    grid-column: span 1 !important;
  }

  /* モード切り替えボタンの位置修正 */
  .mode-switcher,
  #mode-switcher {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
  }

  /* フォントサイズ調整 */
  h1 {
    font-size: 2rem !important;
  }

  h2 {
    font-size: 1.5rem !important;
  }

  h3 {
    font-size: 1.2rem !important;
  }

  p, .text-content {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  /* パディング調整 */
  .container,
  .main-container {
    padding: 1rem !important;
  }

  /* アニメーション軽量化 */
  * {
    animation-duration: 0.3s !important;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
  }
}

/* iPad Pro対応（1024px-1366px） */
@media screen and (min-width: 1024px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  /* グリーンスクリーン要素を非表示 */
  .green-screen,
  .greenscreen,
  #greenscreen-canvas,
  .greenscreen-processor {
    display: none !important;
  }

  /* レイアウト調整 */
  .main-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 1.5rem;
  }

  /* VRM表示エリア */
  #vrm-container {
    min-height: 400px;
    background: transparent !important;
  }

  /* ブログカード */
  #blog-cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  /* YouTube動画 */
  .youtube-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

/* タッチデバイス共通 */
@media (hover: none) and (pointer: coarse) {
  /* ホバーエフェクト無効化 */
  .hover-lift:hover,
  .blog-card:hover,
  .youtube-card:hover {
    transform: none !important;
  }

  /* タップ時のハイライト */
  .blog-card:active,
  .youtube-card:active {
    opacity: 0.8;
  }

  /* スクロール最適化 */
  * {
    -webkit-overflow-scrolling: touch;
  }
}

/* iOS Safari固有の修正 */
@supports (-webkit-touch-callout: none) {
  /* Safe Area対応 */
  .container {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* 100vh問題の修正 */
  .full-height {
    height: -webkit-fill-available;
  }
}

/* デバイスクラス別のスタイル */
.device-ipad {
  /* iPadでグリーンスクリーン無効化 */
  #greenscreen-canvas,
  .greenscreen-processor {
    display: none !important;
  }

  /* VRMコンテナの背景透明化 */
  #vrm-container {
    background: transparent !important;
  }

  /* パフォーマンス最適化 */
  * {
    will-change: auto !important;
  }

  /* アニメーション簡略化 */
  .animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }
}

/* アニメーション定義 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 横向き対応 */
@media screen and (orientation: landscape) and (max-width: 1366px) {
  .main-grid {
    grid-template-columns: 1fr 2fr 1fr;
  }

  #vrm-container {
    min-height: 300px;
  }
}

/* 縦向き対応 */
@media screen and (orientation: portrait) and (max-width: 1024px) {
  .main-grid {
    display: flex;
    flex-direction: column;
  }

  #vrm-container {
    min-height: 400px;
  }
}