/* =====================================================
   Front Page Styles
   責務：トップページ固有の「見た目」だけ

   【設計方針】アプローチA - 木を基準にした相対配置
   - tree-areaコンテナ内に木と果物を配置
   - 果物は木（tree-area）に対して%で相対配置
   - 画面サイズが変わっても木と果物の位置関係が維持される
   ===================================================== */


/* =====================================================
   0. Hero Section（ヘッダー含む100vh対応）
   ===================================================== */

/* ヒーローセクション全体をビューポートに収める */
.hero-section {
  /* ヘッダー高さを考慮（PC: 約80px + 余白） */
  height: calc(100vh - 80px);
  height: calc(100dvh - 80px); /* iOS Safari対応 */
  min-height: 480px; /* 最小高さ */
}

/* タブレット（md: 768px〜1023px） */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-section {
    /* タブレット: ヘッダー約60px + 管理バー32px */
    height: calc(100vh - 92px);
    height: calc(100dvh - 92px);
    min-height: 400px;
  }
}

/* スマホ（〜767px） */
@media (max-width: 767px) {
  .hero-section {
    /* スマホ: ヘッダー約56px + 管理バー46px */
    height: calc(100vh - 102px);
    height: calc(100dvh - 102px);
    min-height: 350px;
  }
}

/* WordPress管理バーがない場合（ログアウト時） */
body:not(.logged-in) .hero-section {
  height: calc(100vh - 80px);
  height: calc(100dvh - 80px);
}

@media (min-width: 768px) and (max-width: 1023px) {
  body:not(.logged-in) .hero-section {
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
  }
}

@media (max-width: 767px) {
  body:not(.logged-in) .hero-section {
    height: calc(100vh - 56px);
    height: calc(100dvh - 56px);
  }
}

/* =====================================================
   1. Orchard Hero（フル幅アニメーション領域）
   ===================================================== */

/* orchard 全体を画面幅いっぱいに広げるラッパー */
.orchard-fullwrap {
  width: 100vw;
  height: 100%;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}

/* orchard-visual も高さ100% */
#orchard-visual {
  width: 100%;
  height: 100%;
}

/* orchard 内の画像は Cocoon / Tailwind の max-width 影響を受けない */
#orchard-visual img {
  max-width: none !important;
  display: block;
}

/* ステージ本体 - 高さ100%で親に合わせる */
#orchard-visual .orchard-stage {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: #ffffff;
}

/* 右下の角丸背景（装飾） */
#orchard-visual .bg-shape {
  position: absolute;
  right: -10%;
  bottom: -10%;
  width: 120%;
  height: 100%;
  background: #ffffff;
  border-radius: 0 0 200px 0;
  z-index: 1;
}

/* =====================================================
   2. 地面
   ===================================================== */

#orchard-visual .ground {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: 2;
}


/* =====================================================
   3. 木エリア（アプローチA：木を基準にした相対配置）
   - tree-areaが木と果物の親コンテナ
   - 木の高さに合わせてコンテナサイズが決まる
   - 果物はこのコンテナに対して%で配置
   ===================================================== */

/* 木エリア - 画面下部に配置、木の高さに応じてサイズ決定 */
.tree-area {
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  z-index: 3;
  /* 幅は木画像の幅で決まる */
}

/* 木画像 - tree-areaの基準サイズを決める */
.tree-area .tree {
  position: relative;
  width: 38vw;
  max-width: 500px;
  min-width: 280px;
  height: auto;
  opacity: 0.75;
}

/* 果物（共通）- tree-areaに対して絶対配置
   位置はACFから取得してインラインスタイルで設定 */
.tree-area .fruit {
  position: absolute;
  width: 12%;
  min-width: 35px;
  max-width: 70px;
  height: auto;
  cursor: pointer;
  z-index: 4;
  opacity: 0; /* 初期状態で非表示（GSAPで表示） */
  /* left, topはインラインスタイルで設定 */
}

/* マンゴーは他より大きく表示 */
.tree-area .fruit.mango {
  width: 14%;
  max-width: 85px;
}


/* =====================================================
   4. 地上要素（農夫・ロボット）
   ===================================================== */

/* --- 農夫 --- */
.farmer-container {
  position: absolute;
  bottom: 3%;
  z-index: 5;
  opacity: 0; /* 初期状態で非表示 */
}

img.farmer-body {
  width: clamp(100px, 12vw, 200px);
  height: auto;
  position: relative;
  z-index: 3;
}

img.farmer-leg {
  width: clamp(50px, 6vw, 100px);
  height: auto;
  position: absolute;
  bottom: 2%;
  left: 42.5%;
  z-index: 1;
}

/* --- ロボット --- */
.robot-container {
  position: absolute;
  bottom: 3%;
  left: 5%;
  z-index: 10;
  opacity: 0; /* 初期状態で非表示 */
}

.robot-body {
  width: clamp(60px, 8vw, 100px);
  height: auto;
  position: relative;
  z-index: 1;
  transform: translateY(-20%); /* 本体を上に移動してタイヤとの位置を調整 */
}

#left-tire, #right-tire {
  position: absolute;
  width: clamp(15px, 2vw, 25px);
  height: auto;
  bottom: 0; /* タイヤは底に配置 */
  z-index: 2;
  transform-origin: center center;
}

#left-tire {
  left: -4%;
}

#right-tire {
  left: 80%;
}


/* =====================================================
   5. ドローン
   ===================================================== */

#drone-container {
  position: absolute;
  top: 25%;
  right: 15%;
  width: clamp(80px, 10vw, 140px);
  z-index: 7;
  opacity: 0; /* 初期状態で非表示 */
}

#drone-body {
  width: 100%;
  display: block;
  position: relative;
}

#drone-propeller {
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  z-index: 2;
}


/* =====================================================
   6. レスポンシブ調整
   ===================================================== */

/* タブレット（768px〜1023px） */
@media (min-width: 768px) and (max-width: 1023px) {
  .tree-area {
    bottom: 2%;
  }

  .tree-area .tree {
    width: 50vw;
    max-width: 450px;
  }

  .tree-area .fruit {
    width: 10%;
  }

  .tree-area .fruit.mango {
    width: 12%;
  }

  /* 農夫・ロボット位置調整（木と同じライン） */
  .farmer-container {
    bottom: 2%;
  }

  .robot-container {
    bottom: 2%;
  }

  /* ドローン位置調整 */
  #drone-container {
    top: 30%;
    right: 12%;
  }
}

/* スマホ（〜767px） */
@media (max-width: 767px) {
  .tree-area {
    bottom: 1%;
  }

  .tree-area .tree {
    width: 85vw;
    max-width: none;
    min-width: 250px;
  }

  .tree-area .fruit {
    width: 12%;
    min-width: 28px;
    max-width: 45px;
  }

  .tree-area .fruit.mango {
    width: 14%;
  }

  /* 農夫（木と同じライン） */
  .farmer-container {
    bottom: 1%;
  }

  img.farmer-body {
    width: clamp(80px, 20vw, 120px);
  }

  img.farmer-leg {
    width: clamp(40px, 10vw, 60px);
  }

  /* ロボット（木と同じライン） */
  .robot-container {
    bottom: 1%;
  }

  .robot-body {
    width: clamp(50px, 12vw, 70px);
  }

  /* ドローン */
  #drone-container {
    top: 25%;
    right: 8%;
    width: clamp(70px, 18vw, 100px);
  }
}


/* =====================================================
   7. Front Page Utility
   ===================================================== */

/* トップページでは WP デフォルトのタイトル類を非表示 */
.home .entry-title,
.home .entry-header,
.home .entry-meta {
  display: none;
}

.home .entry-content {
  margin: 0;
  padding: 0;
}


/* =====================================================
   8. Swiper（農業最前線）
   ===================================================== */

/* Swiperのラッパーを強制的にフレックスボックスにする */
.swiper-frontline .swiper-wrapper {
  display: flex !important;
  grid-template-columns: none !important;
  width: 100% !important;
  box-sizing: content-box !important;
  align-items: flex-start !important;
}

/* スライド自体の設定 */
.swiper-frontline .swiper-slide {
  display: block !important;
  height: auto !important;
  flex-shrink: 0 !important;
}

/* アスペクト比を有効にするための設定 */
.swiper-frontline .swiper-slide > a {
  display: block !important;
  width: 100% !important;
  position: relative;
}

/* スマホ用: スライドモード（複数枚表示） */
@media (max-width: 767px) {
  .swiper-frontline .swiper-slide > a {
    aspect-ratio: 16 / 9;
  }
}

/* タブレット・PC用: 1枚表示モード（フェードエフェクト） */
@media (min-width: 768px) {
  .swiper-frontline {
    height: auto !important;
  }

  .swiper-frontline .swiper-wrapper {
    height: auto !important;
  }

  .swiper-frontline .swiper-slide {
    height: auto !important;
  }

  .swiper-frontline .swiper-slide > a {
    aspect-ratio: 16 / 9;
    height: auto !important;
  }

  .swiper-frontline .swiper-slide > a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


/* =====================================================
   9. Swiper Pilot（パイロット事業）
   ===================================================== */

/* Swiperのラッパーを強制的にフレックスボックスにする */
.swiper-pilot .swiper-wrapper {
  display: flex !important;
  grid-template-columns: none !important;
  width: 100% !important;
  box-sizing: content-box !important;
  align-items: flex-start !important;
}

/* スライド自体の設定 */
.swiper-pilot .swiper-slide {
  display: block !important;
  height: auto !important;
  flex-shrink: 0 !important;
}

/* アスペクト比を有効にするための設定 */
.swiper-pilot .swiper-slide > a {
  display: block !important;
  width: 100% !important;
  position: relative;
}

/* スマホ用: スライドモード（複数枚表示） */
@media (max-width: 767px) {
  .swiper-pilot .swiper-slide > a {
    aspect-ratio: 16 / 9;
  }
}

/* タブレット・PC用: 1枚表示モード（フェードエフェクト） */
@media (min-width: 768px) {
  .swiper-pilot {
    height: auto !important;
  }

  .swiper-pilot .swiper-wrapper {
    height: auto !important;
  }

  .swiper-pilot .swiper-slide {
    height: auto !important;
  }

  .swiper-pilot .swiper-slide > a {
    aspect-ratio: 16 / 9;
    height: auto !important;
  }

  .swiper-pilot .swiper-slide > a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}