/* ============================================================
   Blue Academy - about.css (About ページ専用)
   ============================================================
   依存: base.css, layout.css, components.css, page.css
   読み込み: is_page_template('page-about.php') 時のみ
   ヒーロー (.page-hero*) は page.css に既存のため、ここでは扱わない。
   ============================================================ */

/* ============ 3 PILLARS ============ */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.pillar {
  padding: 40px 32px 48px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pillar-num {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.2em;
  margin-bottom: 24px;
}
.pillar-title {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.5;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.pillar-text {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--muted);
}

/* ============ DEFINITION SECTION ============ */
.def-section {
  padding: 120px 0;
  border-bottom: 1px solid var(--border);
}
.def-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 100px;
  align-items: start;
}
.def-label {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--blue);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.def-jp-title {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.def-body p {
  font-size: 16px;
  line-height: 1.95;
  color: var(--ink);
  font-weight: 500;
}
.def-body p + p { margin-top: 24px; }
.def-body p .blue { color: var(--blue); font-weight: 700; }

/* ============ SPECIALISTS ============ */
.specialists-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.specialist-card {
  padding: 44px 32px 48px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.specialist-num {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.2em;
  margin-bottom: 28px;
}
.specialist-title {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.45;
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}
.specialist-text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
}

/* ============ RESPONSIVE (About-specific) ============ */
@media (max-width: 1024px) {
  .pillars { grid-template-columns: 1fr; }
  .def-grid { grid-template-columns: 1fr; gap: 32px; }
  .specialists-grid { grid-template-columns: 1fr; }
}

/* ============ HERO LAYOUT FIX (About) ============ */
/* page.css の .page-hero-inner は grid 1.2fr/1fr。 */
/* About では .page-hero-text-wrap を使うのでその挙動を明示。 */
/* また .page-hero-visual の aspect-ratio:4/5 が画面幅依存で巨大化する */
/* 問題を、右列内 max-width で抑制。 */
.page-hero-inner > .page-hero-text-wrap {
  min-width: 0;
}
.page-hero-inner > .page-hero-visual {
  width: 100%;
  max-width: 480px;
  max-height: 600px;
  margin-left: auto;
  justify-self: end;
  align-self: end;
}
@media (max-width: 1024px) {
  .page-hero-inner > .page-hero-visual {
    max-width: 100%;
    max-height: 480px;
    margin-left: 0;
    justify-self: stretch;
  }
}
@media (max-width: 640px) {
  .page-hero-inner > .page-hero-visual {
    max-height: 400px;
  }
}