@charset "UTF-8";

/* ==========================================================================
   詳細（single-farm）専用スタイル（デモ detail.css を移植・トークン参照）
   ========================================================================== */

/* ヘッダー画像 */
.detail-hero {
  position: relative;
  height: 400px;
  background: #ddd;
  overflow: hidden;
}

.detail-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 詳細レイアウト */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-xl);
  padding: var(--space-xl) 0;
}

/* 基本情報ヘッド */
.detail-head {
  margin-bottom: var(--space-xl);
}

.detail-head__area {
  display: block;
  font-size: 1.3rem;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.detail-head__title {
  font-family: var(--font-display);
  font-size: 3.0rem;
  font-weight: bold;
  margin-bottom: var(--space-md);
  line-height: 1.3;
}

.detail-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  margin-bottom: var(--space-md);
}

.detail-head__status {
  font-size: 1.4rem;
  padding: 4px 14px;
}

.detail-head__period {
  font-size: 1.4rem;
  color: var(--color-text-sub);
}

.detail-head__period::before {
  content: "🗓 ";
}

.detail-head__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.detail-head__tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 1.2rem;
  background-color: #f0f5ee;
  color: var(--color-primary-dark);
  border-radius: 4px;
}

/* 収穫物色つきタグ（カード/詳細共通） */
.farm-card__tag--fruit { color: #fff; }
.farm-card__tag--fruit.fruit--ichigo    { background-color: var(--fruit-ichigo); }
.farm-card__tag--fruit.fruit--blueberry { background-color: var(--fruit-blueberry); }
.farm-card__tag--fruit.fruit--budou     { background-color: var(--fruit-budou); }
.farm-card__tag--fruit.fruit--mikan     { background-color: var(--fruit-mikan); }

/* 本文 */
.detail-body__heading {
  font-family: var(--font-display);
  font-size: 2.0rem;
  font-weight: bold;
  margin: var(--space-xl) 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-primary);
}

.detail-body__text p {
  margin-bottom: var(--space-md);
  line-height: 1.9;
  font-size: 1.5rem;
}

/* ギャラリー */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.gallery__item {
  aspect-ratio: 4 / 3;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 情報テーブル */
.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.4rem;
}

.info-table th,
.info-table td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.info-table th {
  width: 140px;
  background: #f5f5ef;
  font-weight: bold;
  color: var(--color-text);
}

.info-table td {
  color: var(--color-text-sub);
  line-height: 1.7;
}

/* 地図埋込 */
.map-embed {
  margin-top: var(--space-md);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.map-embed iframe {
  width: 100%;
  height: 360px;
  display: block;
  border: 0;
}

/* CTAブロック */
.cta-block {
  background: linear-gradient(135deg, #fff5e6 0%, #ffe8d4 100%);
  border-radius: 8px;
  padding: var(--space-xl);
  text-align: center;
  margin-top: var(--space-xl);
}

.cta-block__lead {
  font-size: 1.4rem;
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

.cta-block__btn {
  font-size: 1.6rem;
  padding: 16px 40px;
}

.cta-block__note {
  font-size: 1.1rem;
  color: var(--color-text-sub);
  margin-top: var(--space-sm);
}

/* サイドバー */
.detail-sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-md));
  align-self: start;
}

.sidebar-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}

.sidebar-card__title {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.sidebar-card__status {
  text-align: center;
  margin-bottom: var(--space-md);
}

.sidebar-card__status-label {
  font-size: 1.2rem;
  color: var(--color-text-sub);
  margin-bottom: var(--space-xs);
}

.sidebar-card__status-badge {
  font-size: 1.6rem;
  padding: 6px 16px;
}

/* 関連農園 */
.related {
  background: var(--color-bg);
  padding: var(--space-2xl) 0;
}

.related__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

/* レスポンシブ */
@media (max-width: 768px) {
  .detail-hero {
    height: 240px;
  }

  .detail-layout {
    grid-template-columns: 1fr;
  }

  .detail-head__title {
    font-size: 2.2rem;
  }

  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .info-table th {
    width: 100px;
    font-size: 1.3rem;
  }

  .related__list {
    grid-template-columns: 1fr;
  }

  .detail-sidebar {
    position: static;
  }
}