/*
 * 技術進階路線 page (/pathway/). Uses the design tokens in styles.css and the
 * content-page panels in pages.css — load both first.
 */

.pathway-page .content-panel > .eyebrow {
  margin-bottom: 10px;
}

.pathway-page .section-sub {
  margin: -4px 0 18px;
  color: var(--ink-soft);
}

.pathway-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.pathway-chips span {
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  background: rgba(15, 212, 178, 0.14);
  border: 1px solid rgba(15, 212, 178, 0.36);
  color: var(--tf-mint-deep);
  font-size: 0.85rem;
  font-weight: 800;
}

.pathway-chips span:nth-child(2) {
  background: var(--tf-orange-soft);
  border-color: rgba(234, 152, 0, 0.28);
  color: #a86400;
}

/* ---------- Route: four stages on a lane ---------- */

.route {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.route::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 30px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--surface-muted), var(--tf-mint) 72%, var(--tf-mint-deep));
}

.stage {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: start;
  min-width: 0;
}

.stage-gate {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  color: var(--ink-faint);
  font-size: 1.4rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.stage-mid .stage-gate {
  border-color: var(--tf-mint);
  color: var(--tf-mint-deep);
}

.stage-top .stage-gate {
  background: linear-gradient(135deg, var(--tf-mint) 0%, var(--tf-mint-deep) 100%);
  border-color: transparent;
  color: #ffffff;
}

.stage-track .stage-gate {
  background: var(--tf-mint-deep);
  border-color: transparent;
  color: #ffffff;
}

.stage-track .stage-card {
  border-color: rgba(10, 125, 106, 0.55);
  background: rgba(15, 212, 178, 0.07);
  box-shadow: 0 14px 30px rgba(11, 139, 118, 0.14);
}

.stage-card {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 16px;
  border-radius: 18px;
  background: var(--surface-elevated);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
}

.stage-top .stage-card {
  border-color: rgba(15, 212, 178, 0.5);
  box-shadow: 0 14px 30px rgba(11, 139, 118, 0.14);
}

.stage-icon {
  display: block;
  width: 60px;
  height: 60px;
  margin: -4px 0 4px -6px;
}

.content-panel .stage-card h3 {
  margin: 0;
  font-size: 1.08rem;
}

.stage-age {
  margin: 2px 0 6px;
  color: var(--tf-mint-deep);
  font-weight: 900;
}

.content-panel .stage-card ul {
  margin: 0;
  padding-left: 1.1em;
}

.content-panel .stage-card li {
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.65;
}

.fast-track {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--tf-orange-soft);
  color: var(--ink-main);
  font-size: 0.95rem;
  line-height: 1.7;
}

.fast-track b {
  color: #a86400;
  white-space: nowrap;
}

@media (max-width: 900px) and (min-width: 641px) {
  .route {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 18px;
  }

  .route::before {
    display: none;
  }
}

@media (max-width: 640px) {
  .route {
    grid-template-columns: 1fr;
  }

  .route::before {
    left: 27px;
    right: auto;
    top: 20px;
    bottom: 20px;
    width: 6px;
    height: auto;
    background: linear-gradient(180deg, var(--surface-muted), var(--tf-mint) 72%, var(--tf-mint-deep));
  }

  .stage {
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
  }
}

/* ---------- Results: 37% vs 8% ---------- */

.duel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.duel-side {
  display: grid;
  gap: 4px;
  padding: 20px;
  border-radius: 18px;
  background: var(--surface-muted);
  border: 1px solid var(--line-soft);
}

.duel-side.is-elite {
  background: rgba(15, 212, 178, 0.12);
  border-color: rgba(15, 212, 178, 0.5);
}

.duel-pct {
  color: var(--ink-faint);
  font-size: clamp(2.8rem, 10vw, 4.2rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.duel-side.is-elite .duel-pct {
  color: var(--tf-mint-deep);
}

.duel-label {
  color: var(--ink-strong);
  font-weight: 800;
}

.duel-note {
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.races {
  display: grid;
  gap: 14px;
  margin-top: 12px;
  padding: 18px;
  border-radius: 18px;
  background: var(--surface-elevated);
  border: 1px solid var(--line-soft);
}

.race {
  display: grid;
  gap: 6px;
}

.race-name {
  color: var(--ink-strong);
  font-size: 0.9rem;
  font-weight: 800;
}

.race-bar {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr) 3em;
  gap: 10px;
  align-items: center;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.race-track {
  height: 12px;
  border-radius: 6px;
  background: var(--surface-muted);
  overflow: hidden;
}

.race-fill {
  height: 100%;
  border-radius: 6px;
  background: #c3ccd6;
}

.race-fill.is-elite {
  background: linear-gradient(90deg, var(--tf-mint), var(--tf-mint-deep));
}

.race-value {
  color: var(--ink-strong);
  font-weight: 900;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.strengths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.strength {
  padding: 16px;
  border-radius: 18px;
  background: var(--surface-elevated);
  border: 1px solid var(--line-soft);
}

.content-panel .strength p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

/* ---------- Perks ---------- */

.perks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.perk {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 20px;
  border-radius: 20px;
  background: var(--surface-elevated);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
}

.perk.is-gold {
  background: var(--tf-orange-soft);
  border-color: rgba(234, 152, 0, 0.3);
}

.perk-art {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  margin-bottom: 6px;
  border-radius: 14px;
  background: rgba(15, 212, 178, 0.12);
}

.perk.is-gold .perk-art {
  background: #fbe3b4;
}

.perk-art.cert-art {
  overflow: hidden;
  background: #ece6dc;
}

.cert-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 55%;
}

.perk-when {
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.content-panel .perk h3 {
  margin: 0;
  font-size: 1.2rem;
}

.content-panel .perk p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.93rem;
}

.perk-price {
  color: #a86400;
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}

.perk-price small {
  font-size: 1rem;
}

.perk-price .perk-price-note {
  margin-left: 4px;
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* ---------- Class arrangements ---------- */

.arrangements {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.arrangement {
  padding: 20px;
  border-radius: 20px;
  background: var(--surface-elevated);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
}

.arrangement.is-elite {
  border-color: rgba(15, 212, 178, 0.5);
}

.content-panel .arrangement h3 {
  margin: 0 0 2px;
  font-size: 1.15rem;
}

.arrangement dl {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
}

.arrangement dl div {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr);
  gap: 10px;
}

.arrangement dt {
  color: var(--tf-mint-deep);
  font-weight: 900;
}

.arrangement dd {
  margin: 0;
  color: var(--ink-main);
  line-height: 1.65;
}

@media (max-width: 640px) {
  .arrangements {
    grid-template-columns: 1fr;
  }
}

/* ---------- How to apply (gold glow) ---------- */

.apply-panel {
  display: grid;
  gap: 14px;
  padding: 30px 28px;
  border: 2px solid #e0a83a;
  background: linear-gradient(135deg, #fffdf6 0%, var(--tf-orange-soft) 100%);
  box-shadow: 0 0 0 6px rgba(224, 168, 58, 0.16), 0 0 36px rgba(224, 168, 58, 0.45);
  animation: apply-glow 2.6s ease-in-out infinite;
}

@keyframes apply-glow {
  50% {
    box-shadow: 0 0 0 10px rgba(224, 168, 58, 0.14), 0 0 64px rgba(224, 168, 58, 0.65);
  }
}

@media (prefers-reduced-motion: reduce) {
  .apply-panel {
    animation: none;
  }
}

.apply-panel .eyebrow {
  justify-self: start;
  margin: 0;
  color: #a86400;
}

.apply-panel h2 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1.5rem;
}

.apply-panel h2 mark {
  padding: 0 2px;
  background: linear-gradient(transparent 58%, rgba(240, 190, 70, 0.45) 58%);
  color: inherit;
}

.apply-panel p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.75;
}

.apply-urgent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.apply-panel .apply-urgent {
  color: var(--ink-strong);
  font-weight: 800;
}

.apply-tag {
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--danger);
  color: #ffffff;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}

.apply-template {
  padding: 14px 16px;
  border: 1.5px dashed #e0a83a;
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink-main);
  font-size: 0.95rem;
  line-height: 1.9;
}

.apply-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}

.apply-actions .cta-btn {
  text-align: center;
}

.apply-actions .apply-alt {
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.pathway-fine {
  display: grid;
  gap: 4px;
  padding: 0 6px;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.7;
}

.pathway-fine p {
  margin: 0;
}

@media (max-width: 640px) {
  .apply-panel {
    padding: 24px 18px;
  }

  .apply-actions .cta-btn {
    width: 100%;
    box-sizing: border-box;
  }
}