/**
 * FCプランニングオフィス - DEVELOPMENTセクション専用CSS
 * ヒーローセクションとSERVICESセクションの間に配置される事業紹介セクション
 * Figma: develop ページ / Page-TOP / Frame 123
 *
 * @package FCプランニングオフィス
 */

.development-section {
  position: relative;
  background: var(--color-bg-base);
  /* 上下112px@1440px基準（Figma実測107px+目視調整で10px分プラス、上下均等に+5pxずつ） */
  padding: clamp(3rem, 7.78vw, 7rem) 0;
  overflow: hidden;
}

/* Figmaのページ全体に共通してかかっているグラデーションオーバーレイ（10%不透明度） */
.development-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-overlay);
  pointer-events: none;
  z-index: 1;
}

.development-container {
  position: relative;
  z-index: 2;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--padding-container);
}

.development-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-4xl); /* 70px@1440px基準 */
  font-weight: 400;
  color: var(--color-white);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1; /* カードラベルと同じ理由（Righteousの既定行高対策） */
  /* タイトル下72px@1440px基準（Figma実測） */
  margin: 0 0 clamp(2rem, 5vw, 4.5rem);
}

.development-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.39vw, 1.25rem); /* 行間20px@1440px基準（Figma実測） */
}

.development-row {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap; /* カード単位で折り返さず、769px以上は縮んで1行に収める（モバイルはメディアクエリで縦積みに切替） */
  gap: clamp(0.75rem, 1.39vw, 1.25rem); /* 列間20px@1440px基準（Figma実測） */
}

.development-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 1 1 300px;
  min-width: 0; /* nowrapラベルでも縮小できるようにする */
  max-width: 433px;
  /* 上下24px@1440px基準（Figma実測。行の文字サイズ42px/32pxによらず上下とも一律24px）
     左右はvar(--spacing-lg)だと769px付近でBOSWELL 1150™がはみ出すため専用の値に縮小 */
  padding: clamp(1rem, 1.7vw, 1.5rem) clamp(0.75rem, 2vw, 1.5rem);
  border: 1px solid var(--color-white);
  font-family: var(--font-heading);
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

a.development-item:hover {
  opacity: 0.7;
}

.development-item-label {
  font-size: clamp(1.375rem, 2.9vw, 2.625rem); /* 42px@1440px基準 */
  line-height: 1; /* Righteousのデフォルト行高がfont-sizeの約1.6倍あり、上下に余分な余白が出ていたため */
  white-space: nowrap;
}

.development-link-icon {
  /* Figma実測で42px行・32px行とも常に約24px固定（テキストサイズに連動しない） */
  width: clamp(1.25rem, 1.7vw, 1.5rem); /* 24px@1440px基準 */
  height: clamp(1.25rem, 1.7vw, 1.5rem);
  flex-shrink: 0;
}

/* プロジェクトカラーとは独立した、事業ラインごとの固定カラー */
.development-item--organic {
  color: #00a8b5;
}

.development-item--boswell {
  color: #e83e8c;
}

.development-item--recycle {
  color: #daa520;
}

@media (max-width: 768px) {
  .development-row {
    flex-direction: column;
    align-items: stretch;
  }

  .development-item {
    flex: 0 1 auto; /* 縦積み時はflex-basis:300pxが高さとして効いてしまうため無効化 */
    max-width: 100%;
  }

  .development-item-label {
    font-size: 1.75rem;
  }

  .development-title {
    font-size: clamp(1.75rem, 9vw, 3rem); /* 「DEVELOPMENT」は1単語で改行できないため横幅からはみ出さないよう別途縮小 */
  }
}