/* ==========================================================================
   proposal.css
   技術提案事例ページ専用スタイル (proposal/index.html)

   ※ .c-tech-card__grid / .c-tech-card は service.css を流用
   ※ .case-pagination は case.css を流用
   ※ このファイルは下記のページ固有パーツのみを記述する
      - .p-proposal__lead
      - .p-proposal__filter（タクソノミーフィルター）
   ========================================================================== */


/* ── Lead Text ── */
.p-proposal__lead {
  margin-bottom: var(--sp-xl);
  line-height: 1.8;
  color: var(--color-text);
  font-size: var(--fs-sm);
}


/* ── Taxonomy Filter ── */
.p-proposal__filter {
  margin-bottom: var(--sp-xl);
}

.p-proposal__filter-title {
  font-size: var(--fs-xl-mid);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin: 0 0 var(--sp-sm);
}

.p-proposal__filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

.p-proposal__filter-list a {
  display: inline-block;
  padding: 0.35em 1.1em;
  background-color: var(--color-blue-light);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: background-color var(--duration) var(--ease),
              color var(--duration) var(--ease);
}

.p-proposal__filter-list a:hover {
  background-color: var(--color-blue-hover);
  color: var(--color-white);
}

.p-proposal__filter-list a.is-current {
  background-color: var(--color-blue);
  color: var(--color-white);
  font-weight: var(--fw-bold);
}


/* ── Card Grid: row-gap を列間より広く調整 ── */
/* service.css の gap: var(--sp-xl) var(--sp-sm-md) を上書き */
.c-tech-card__grid {
  row-gap: var(--sp-2xl);      /* 48px: 上下 */
  column-gap: var(--sp-sm-md); /* 12px: 左右（service.css と同値を維持） */
}


/* ── Pagination wrapper ── */
.p-proposal__pagination {
  margin-top: var(--sp-xl);
}


/* ==========================================================================
   Detail Page Styles (proposal/detail.html)
   ========================================================================== */

/* ── 課題・解決策 統合ラッパー ── */
.p-proposal-detail {
  margin-bottom: var(--sp-3xl);
}


/* ── 課題・悩み（Problem）セクション ── */
.p-proposal-problem {
  position: relative;
  background-color: var(--color-bg-light);
  padding: var(--sp-2xl) var(--sp-xl);
  margin-bottom: 0;
  overflow: hidden;
}

.p-proposal-problem::before {
  content: "Problem";
  position: absolute;
  top: -0.05em;
  right: -0.05em;
  font-size: 9rem;
  font-weight: var(--fw-black);
  font-family: var(--font-en);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.p-proposal-problem__header {
  position: relative;
  z-index: 1;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--sp-xl);
  padding-bottom: var(--sp-md);
}

.p-proposal-problem__heading {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}

.p-proposal-problem__body {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--sp-xl);
  align-items: flex-start;
}

.p-proposal-problem__image {
  width: 350px;
  flex: 0 1 350px;
}

.p-proposal-problem__image img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 35 / 23;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.p-proposal-problem__text {
  flex: 1;
  line-height: 2.1;
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.p-proposal-problem__text p + p {
  margin-top: var(--sp-md);
}


/* ── 下向き矢印パーツ ── */
.p-proposal-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--sp-sm) 0 var(--sp-md) 0;
}

.p-proposal-arrow span {
  display: block;
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 26px solid var(--color-darkblue);
}


/* ── 解決策（Solution）セクション ── */
.p-proposal-solution {
  position: relative;
  border: 3px solid var(--color-darkblue);
  background-color: #E8EAF3;
  padding: var(--sp-2xl) var(--sp-xl);
  margin-bottom: 0;
  overflow: hidden;
}

.p-proposal-solution::before {
  content: "Solution";
  position: absolute;
  top: -0.05em;
  right: -0.05em;
  font-size: 9rem;
  font-weight: var(--fw-black);
  font-family: var(--font-en);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.p-proposal-solution__heading {
  position: relative;
  z-index: 1;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-darkblue);
  border-bottom: 1px solid var(--color-text-light);
  padding-bottom: var(--sp-md);
  margin-bottom: var(--sp-xl);
}

.p-proposal-solution__body {
  position: relative;
  z-index: 1;
  display: flow-root;
  line-height: 1.8;
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.p-proposal-solution__image {
  float: left;
  width: 350px;
  height: auto;
  aspect-ratio: 35 / 23;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-right: var(--sp-xl);
  margin-bottom: var(--sp-md);
}

.p-proposal-solution__body p + p {
  margin-top: var(--sp-md);
}


/* ── 関連する技術提案事例 ── */
.p-proposal-related {
  margin-bottom: var(--sp-2xl);
}

.p-proposal-related__heading {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  background-color: var(--color-darkblue);
  padding: var(--sp-md) var(--sp-lg);
  margin-bottom: var(--sp-xl);
}

.p-proposal-related .c-tech-card__grid {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
}


/* ── 一覧に戻るボタン ── */
.p-proposal-back {
  text-align: center;
  margin-top: var(--sp-xl);
  margin-bottom: var(--sp-2xl);
}


/* ==========================================================================
   RESPONSIVE - 1024px (Tablet Landscape)
   ========================================================================== */
@media (max-width: 1024px) {
  .p-proposal-problem__image {
    width: 280px;
    flex: 0 1 280px;
  }

  .p-proposal-solution__image {
    width: 280px;
  }

  .p-proposal-related .c-tech-card__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-md);
  }
}


/* ==========================================================================
   RESPONSIVE - 768px (Tablet Portrait / Smartphone)
   ========================================================================== */
@media (max-width: 768px) {
  .p-proposal__lead {
    font-size: var(--fs-md);
    margin-bottom: var(--sp-xl);
  }

  .p-proposal__filter {
    padding: var(--sp-sm-md) var(--sp-md);
  }

  .p-proposal__filter-list a {
    padding: 0.3em 0.85em;
    font-size: var(--fs-xs);
  }

  /* Detail page responsive */
  .p-proposal-problem {
    padding: var(--sp-xl) var(--sp-md);
  }

  .p-proposal-problem::before {
    font-size: 4rem;
  }

  .p-proposal-problem__body {
    flex-direction: column;
  }

  .p-proposal-problem__image {
    width: 100%;
    max-width: 350px;
    flex: none;
  }

  .p-proposal-solution {
    padding: var(--sp-xl) var(--sp-md);
  }

  .p-proposal-solution::before {
    font-size: 4rem;
  }

  .p-proposal-solution__heading {
    font-size: var(--fs-lg);
  }

  .p-proposal-solution__image {
    float: none;
    width: 100%;
    max-width: 400px;
    margin-right: 0;
    margin-bottom: var(--sp-md);
  }

  .p-proposal-related__heading {
    font-size: var(--fs-xl);
    padding: var(--sp-sm-md) var(--sp-md);
  }

  .p-proposal-related .c-tech-card__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
  }
}