/* ============================================================
   KOSEN NUMBERS — 数字で見る「高専×K.Platinum」
   ベース: css/common/numbers-base.css（.numbers-base__* クラス）
   ここにはkosen固有のオーバーライドのみ記載
   5 KPI: 8/17名 / 2校 / 3名PM / 24歳 / 900万〜
   ============================================================ */

/* ---- Variable overrides ---- */
.kosen-numbers {
  --nb-divider-color: rgba(201, 168, 76, 0.2);
  --nb-divider-height: 56px;
  --nb-item-gap: 12px;
  --nb-item-padding: 20px 8px;
  --nb-num-size: clamp(2.6rem, 4vw, 3.8rem);
  --nb-text-value-size: clamp(2.2rem, 3.4vw, 3rem);
  --nb-label-size: 0.75rem;
  /* Section padding (kosen has its own section padding, not inner padding) */
  padding: 80px 0 72px;
}

/* ---- Background gradient (slightly different radii) ---- */
.kosen-numbers .numbers-base__bg-gradient {
  background:
    radial-gradient(ellipse 50% 100% at 20% 50%, rgba(201, 168, 76, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 100% at 80% 50%, rgba(74, 144, 217, 0.05) 0%, transparent 70%);
}

/* ---- Inner: kosen uses __inner as wrapper, __grid as flex container ---- */
.kosen-numbers .numbers-base__inner {
  padding: 0 var(--s-gutter, 32px);
  display: block;
}

/* ---- Header (eyebrow + heading) — kosen unique ---- */
.kosen-numbers__header {
  text-align: center;
  margin-bottom: 48px;
}

.kosen-numbers__eyebrow {
  display: inline-block;
  font-family: var(--f-heading-en, 'Barlow Condensed', sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 12px;
}

.kosen-numbers__heading {
  font-family: var(--f-body, 'Noto Sans JP', sans-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.kosen-numbers__heading .sp-only {
  display: none;
}

/* ---- Grid: flex container for items (inside __inner) ---- */
.kosen-numbers__grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

/* ---- Fraction (e.g. "/ 17") — kosen unique ---- */
.kosen-numbers__fraction {
  font-family: var(--f-heading-en, 'Barlow Condensed', sans-serif);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: -0.01em;
  line-height: 1;
  margin-left: 4px;
  margin-right: 4px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
  .kosen-numbers {
    padding: 64px 0 56px;
  }

  .kosen-numbers__header {
    margin-bottom: 36px;
  }

  .kosen-numbers__grid {
    flex-wrap: wrap;
  }

  /* 5 items + 4 dividers → 3+2 layout: hide 3rd & 4th dividers */
  .kosen-numbers .numbers-base__divider:nth-of-type(3),
  .kosen-numbers .numbers-base__divider:nth-of-type(4) {
    display: none;
  }

  .kosen-numbers__fraction {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
  }

  /* Items in __grid need tablet sizing too */
  .kosen-numbers__grid .numbers-base__item {
    flex: 0 0 calc(33.333% - 2px);
    padding: 24px 12px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .kosen-numbers {
    padding: 48px 0 40px;
  }

  .kosen-numbers__header {
    margin-bottom: 28px;
  }

  .kosen-numbers__heading .sp-only {
    display: inline;
  }

  .kosen-numbers__grid {
    flex-wrap: wrap;
    gap: 0;
  }

  .kosen-numbers__grid .numbers-base__item {
    flex: 0 0 50%;
    padding: 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* Last item (5th) full width */
  .kosen-numbers__grid .numbers-base__item:last-of-type {
    flex: 0 0 100%;
    border-bottom: none;
  }

  /* Remove border from 2nd-to-last row */
  .kosen-numbers__grid .numbers-base__item:nth-last-of-type(2),
  .kosen-numbers__grid .numbers-base__item:nth-last-of-type(3) {
    border-bottom: none;
  }

  .kosen-numbers__grid .numbers-base__divider {
    display: none;
  }

  .kosen-numbers__fraction {
    font-size: clamp(1.1rem, 3.5vw, 1.4rem);
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .kosen-numbers {
    padding: 40px 0 32px;
  }

  .kosen-numbers .numbers-base__inner {
    padding: 0 16px;
  }

  .kosen-numbers__grid .numbers-base__item {
    padding: 16px 12px;
  }
}