/* ==========================================================================
   hack.inc corporate site — Services page
   KV(Hero)はAbout Usの.about-hero*をそのまま継承する(Services固有の上書きはしない)。
   本ファイルにはAbout Usと共通化されないServices固有セクションのみを定義する。
   ========================================================================== */

.services-summary {
  background-color: var(--color-bg-decor-navy);
  border-block: 1px solid var(--color-border);
}

.services-summary__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.services-summary__card {
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background-color: var(--color-white);
}

.services-summary__number {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  color: var(--color-navy);
  font-size: clamp(3.5rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 1;
}

.services-summary__number span {
  color: var(--color-copper);
  font-size: 1.125rem;
}

.services-summary__rule {
  display: block;
  width: 100%;
  height: 1px;
  margin-block: var(--space-3);
  background-color: rgba(184, 115, 51, 0.5);
}

.services-summary__title {
  color: var(--color-text-primary);
  font-size: 0.9375rem;
  font-weight: 700;
}

.services-summary__text {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.8;
}

.services-fields {
  background-color: var(--color-white);
}

/*
  外周を囲む「田」ではなく、中央で交わる「十」の区切り線にする(Figma準拠)。
  外周ボーダーは持たせず、1列目に右ボーダー・1行目に下ボーダーのみを付与し、
  2x2グリッド中央の縦線・横線だけを再現する。
*/
.services-fields__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-field {
  position: relative;
  padding: 5rem var(--space-5);
  overflow: hidden;
}

.service-field:nth-child(odd) {
  border-right: 1px solid var(--color-border);
}

.service-field:nth-child(-n+2) {
  border-bottom: 1px solid var(--color-border);
}

/*
  上段(01・02)と下段(03・04)が離れた2グループに見えないよう、
  中央区切り線に接する側の余白だけを詰める(外側の上端・下端の余白、
  各カード内の要素間の余白はそれぞれ変更しない)。min-heightは廃止し、
  実コンテンツに合わせた高さにすることで人為的な余白が残らないようにする。
*/
.service-field:nth-child(-n+2) {
  padding-bottom: 2.5rem;
}

.service-field:nth-child(n+3) {
  padding-top: 2.5rem;
}

.service-field__number {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  color: var(--color-navy);
  font-size: clamp(6rem, 10vw, 9rem);
  font-weight: 900;
  line-height: 1;
  opacity: 0.035;
}

.service-field__content {
  position: relative;
  z-index: 1;
}

.service-field__title {
  color: var(--color-navy);
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.25;
}

.service-field__subtitle {
  margin-top: 0.25rem;
  color: var(--color-copper);
  font-size: 0.6875rem;
}

.service-field__description {
  max-width: 31rem;
  margin-top: 1.25rem;
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  line-height: 1.85;
}

.service-field__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
  margin-top: 1.5rem;
}

.service-field__tags li {
  padding: 0.3125rem 0.75rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-bg-decor-navy);
  color: var(--color-navy);
  font-size: 0.75rem;
  font-weight: 400;
}

@media (max-width: 900px) {
  .service-field {
    padding-block: 4rem;
    padding-inline: var(--space-3);
  }

  .service-field:nth-child(-n+2) {
    padding-bottom: 2rem;
  }

  .service-field:nth-child(n+3) {
    padding-top: 2rem;
  }
}

@media (max-width: 640px) {
  .services-summary__grid,
  .services-fields__grid {
    grid-template-columns: 1fr;
  }

  .services-summary__grid {
    gap: var(--space-2);
  }

  .services-summary__card {
    padding: var(--space-3);
  }

  .services-summary__number {
    font-size: 3.25rem;
  }

  .service-field {
    padding: 2.25rem var(--space-3);
    border-bottom: 1px solid var(--color-border);
  }

  .service-field:nth-child(odd) {
    border-right: none;
  }

  .service-field:nth-child(-n+2),
  .service-field:nth-child(n+3) {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

  .service-field:last-child {
    border-bottom: none;
  }

  .service-field__number {
    font-size: 6rem;
  }
}