/* ===== INNER PAGE STYLES ===== */
.page-hero {
  position: relative; min-height: 420px; display: flex; align-items: flex-end;
  padding-bottom: 60px; overflow: hidden;
  background: linear-gradient(135deg, var(--dark) 0%, var(--primary-dark) 100%);
  margin-top: 72px;
}
.page-hero__bg { position: absolute; inset: 0; }
.page-hero__meridian { position: absolute; bottom: 0; left: 0; right: 0; height: 200px; }
.page-hero__meridian svg { width: 100%; height: 100%; }
.page-hero__content { position: relative; z-index: 1; padding-top: 40px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; margin-bottom: 16px; font-family: var(--font-en); }
.breadcrumb a { color: rgba(255,255,255,0.5); transition: color var(--transition-fast); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb__sep { width: 14px; height: 14px; color: rgba(255,255,255,0.3); }
.breadcrumb span { color: rgba(255,255,255,0.8); }
.page-hero__title { font-family: var(--font-zh); font-size: clamp(2rem,5vw,3.5rem); font-weight: 700; color: var(--white); margin-bottom: 8px; }
.page-hero__subtitle { font-family: var(--font-en); font-size: 0.9rem; color: var(--accent); font-style: italic; margin-bottom: 16px; letter-spacing: 0.05em; }
.page-hero__desc { font-family: var(--font-zh); font-size: 1rem; color: rgba(255,255,255,0.65); max-width: 640px; line-height: 1.8; }

.about-intro__layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; }
.about-intro__image { position: relative; }
.about-intro__image img { border-radius: var(--radius-lg); width: 100%; height: 400px; object-fit: cover; box-shadow: var(--shadow-lg); }
.about-intro__badge { position: absolute; bottom: -20px; right: -20px; background: var(--accent); color: var(--dark); padding: 16px 20px; border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-md); }
.about-intro__badge-year { display: block; font-family: var(--font-mono); font-size: 2rem; font-weight: 700; line-height: 1; margin-bottom: 2px; }
.about-intro__badge-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; }
.about-intro__text { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.about-intro__text p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.85; }
.about-intro__stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; border-top: 1px solid var(--border); padding-top: 24px; }
.about-intro__stat { text-align: center; }
.about-intro__stat-num { display: block; font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; color: var(--primary); margin-bottom: 4px; }
.about-intro__stat-label { font-size: 0.78rem; color: var(--text-muted); }

.about-mission { position: relative; background: var(--secondary); }
.about-mission__header { margin-bottom: 48px; }
.about-mission__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.mission-card { background: var(--white); border-radius: var(--radius-lg); padding: clamp(28px,4vw,48px); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.mission-card__icon { width: 56px; height: 56px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--primary), var(--primary-light)); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.mission-card--vision .mission-card__icon { background: linear-gradient(135deg, var(--accent), var(--accent-light)); }
.mission-card__icon svg { width: 26px; height: 26px; color: var(--white); }
.mission-card__title { font-family: var(--font-zh); font-size: 1.25rem; font-weight: 700; color: var(--primary); margin-bottom: 20px; }
.mission-card__list { display: flex; flex-direction: column; gap: 14px; }
.mission-card__list li { display: flex; gap: 10px; font-size: 0.9rem; color: var(--text-muted); line-height: 1.65; }
.mission-card__check { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); margin-top: 2px; }
.mission-card__vision-text p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 20px; }
.mission-card__quote { border-left: 3px solid var(--accent); padding: 12px 16px; background: rgba(212,172,13,0.06); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: italic; font-size: 0.9rem; color: var(--primary); margin-bottom: 24px; }
.mission-card__pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; border-top: 1px solid var(--border); padding-top: 20px; }
.mission-card__pillar { text-align: center; padding: 12px; border-radius: var(--radius-sm); background: var(--secondary); }
.mission-card__pillar-num { display: block; font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent); font-weight: 700; margin-bottom: 4px; }
.mission-card__pillar span { font-size: 0.85rem; font-weight: 600; color: var(--primary); }

.timeline { position: relative; max-width: 720px; margin: 0 auto; padding-left: 40px; }
.timeline__line { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--primary), var(--accent)); }
.timeline__item { position: relative; margin-bottom: 36px; }
.timeline__item:last-child { margin-bottom: 0; }
.timeline__marker { position: absolute; left: -40px; top: 0; width: 80px; text-align: right; }
.timeline__marker::before { content: ''; position: absolute; right: -44px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--white); box-shadow: 0 0 0 2px var(--accent); }
.timeline__marker span { font-family: 'Space Mono', 'Noto Sans TC', monospace, sans-serif; font-size: 0.85rem; font-weight: 700; color: var(--primary); }
.timeline__content { padding-left: 24px; }
.timeline__title { font-family: 'Noto Sans TC', sans-serif; font-size: 1rem; font-weight: 700; color: var(--primary); margin-bottom: 6px; }
.timeline__desc { font-size: 0.875rem; color: var(--text-muted); line-height: 1.7; }

.about-endorsement__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.about-endorsement__intro { font-size: 0.95rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 32px; }
.endorsement-items { display: flex; flex-direction: column; gap: 20px; }
.endorsement-item { display: flex; gap: 14px; align-items: flex-start; }
.endorsement-item__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--primary); display: flex; align-items: center; justify-content: center; color: var(--white); }
.endorsement-item__icon svg { width: 20px; height: 20px; }
.endorsement-item h4 { font-size: 0.9rem; font-weight: 700; color: var(--primary); margin-bottom: 4px; }
.endorsement-item p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.65; }
.about-endorsement__partners-title { font-size: 1rem; font-weight: 700; color: var(--primary); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.partners-list { display: flex; flex-direction: column; gap: 12px; }
.partner-item { display: flex; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); transition: all var(--transition); background: var(--white); }
.partner-item:hover { border-color: var(--accent); transform: translateX(4px); }
.partner-item__logo { width: 44px; height: 44px; border-radius: var(--radius-sm); background: rgba(10,61,98,0.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.partner-item__logo svg { width: 20px; height: 20px; color: var(--primary); }
.partner-item strong { display: block; font-size: 0.875rem; color: var(--primary); margin-bottom: 2px; }
.partner-item small { font-size: 0.72rem; color: var(--text-light); font-family: var(--font-zh); }

.team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.team-member { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); transition: all var(--transition); }
.team-member:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.team-member__photo { height: 200px; overflow: hidden; }
.team-member__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.5s ease; }
.team-member:hover .team-member__photo img { transform: scale(1.04); }
.team-member__info { padding: 20px; }
.team-member__name { font-size: 1rem; font-weight: 700; color: var(--primary); margin-bottom: 2px; }
.team-member__en { display: block; font-family: var(--font-en); font-size: 0.72rem; color: var(--accent); font-style: italic; margin-bottom: 6px; }
.team-member__role { display: inline-block; font-size: 0.72rem; color: var(--primary); background: rgba(10,61,98,0.06); padding: 3px 10px; border-radius: 20px; margin-bottom: 10px; }
.team-member__bio { font-size: 0.82rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 12px; }
.team-member__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.team-member__tags span { font-size: 0.7rem; color: var(--text-light); background: var(--secondary); padding: 2px 8px; border-radius: 20px; }

.inner-cta { background: linear-gradient(135deg, var(--primary) 0%, var(--dark) 100%); padding: clamp(48px,6vw,72px) 0; }
.inner-cta__inner { text-align: center; }
.inner-cta__title { font-family: var(--font-zh); font-size: clamp(1.4rem,3vw,2rem); font-weight: 700; color: var(--white); margin-bottom: 14px; }
.inner-cta__desc { font-size: 0.95rem; color: rgba(255,255,255,0.7); line-height: 1.8; max-width: 560px; margin: 0 auto 28px; }
.inner-cta__actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* Course */
.course-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.course-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); transition: all var(--transition); display: flex; flex-direction: column; }
.course-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.course-card__image { height: 180px; overflow: hidden; position: relative; }
.course-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.course-card:hover .course-card__image img { transform: scale(1.05); }
.course-card__badge { position: absolute; top: 12px; left: 12px; background: var(--accent); color: var(--dark); font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-sm); font-family: var(--font-zh); }
.course-card__body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.course-card__title { font-size: 1.05rem; font-weight: 700; color: var(--primary); margin-bottom: 4px; }
.course-card__subtitle { font-family: var(--font-en); font-size: 0.75rem; color: var(--text-light); font-style: italic; margin-bottom: 12px; }
.course-card__desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 16px; flex: 1; }
.course-card__meta { display: flex; gap: 16px; font-size: 0.78rem; color: var(--text-light); margin-bottom: 16px; font-family: var(--font-en); }
.course-card__meta span { display: flex; align-items: center; gap: 4px; }
.course-card__meta svg { width: 14px; height: 14px; }

/* AI Assessment */
.ai-assessment-widget { background: var(--white); border-radius: var(--radius-xl); border: 1px solid var(--border); box-shadow: var(--shadow-lg); overflow: hidden; max-width: 680px; margin: 0 auto; }
.ai-assessment-header { background: linear-gradient(135deg, var(--primary), var(--primary-light)); padding: 32px; color: var(--white); }
.ai-assessment-header h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; }
.ai-assessment-header p { font-size: 0.9rem; color: rgba(255,255,255,0.75); line-height: 1.6; }
.ai-assessment-steps { display: flex; justify-content: space-between; padding: 24px 32px; background: var(--secondary); border-bottom: 1px solid var(--border); }
.ai-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; position: relative; }
.ai-step:not(:last-child)::after { content: ''; position: absolute; top: 16px; left: 60%; width: 80%; height: 2px; background: var(--border); }
.ai-step.active:not(:last-child)::after { background: var(--accent); }
.ai-step__circle { width: 32px; height: 32px; border-radius: 50%; background: var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; color: var(--text-muted); position: relative; z-index: 1; }
.ai-step.active .ai-step__circle { background: var(--accent); color: var(--dark); }
.ai-step__label { font-size: 0.72rem; color: var(--text-light); text-align: center; }
.ai-step.active .ai-step__label { color: var(--primary); font-weight: 600; }
.ai-assessment-form { padding: 32px; }
.assessment-question { display: none; }
.assessment-question.active { display: block; animation: fadeInUp 0.4s ease-out; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.assessment-question h3 { font-size: 1.1rem; font-weight: 700; color: var(--primary); margin-bottom: 20px; }
.assessment-options { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 24px; }
.assessment-option { padding: 14px 16px; border: 2px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); font-size: 0.9rem; color: var(--text); text-align: left; background: var(--white); font-family: var(--font-zh); }
.assessment-option:hover { border-color: var(--primary); background: rgba(10,61,98,0.04); }
.assessment-option.selected { border-color: var(--accent); background: rgba(212,172,13,0.08); color: var(--primary); font-weight: 500; }
.assessment-nav { display: flex; justify-content: space-between; gap: 12px; }

/* Contact */
.contact-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; }
.contact-info { display: flex; flex-direction: column; gap: 20px; }
.contact-info-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; display: flex; gap: 14px; align-items: flex-start; transition: all var(--transition-fast); }
.contact-info-card:hover { border-color: var(--accent); transform: translateX(4px); box-shadow: var(--shadow-sm); }
.contact-info-card__icon { width: 44px; height: 44px; border-radius: var(--radius-sm); background: rgba(10,61,98,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-info-card__icon svg { width: 20px; height: 20px; color: var(--primary); }
.contact-info-card__label { font-size: 0.75rem; color: var(--text-light); font-family: var(--font-en); margin-bottom: 4px; }
.contact-info-card__value { font-size: 0.9rem; font-weight: 600; color: var(--primary); }
.contact-form-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); }
.contact-form-card h2 { font-size: 1.4rem; font-weight: 700; color: var(--primary); margin-bottom: 24px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group--full { grid-column: 1 / -1; }
.form-label { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.form-label span { color: #e74c3c; }
.form-input, .form-select, .form-textarea { padding: 12px 14px; border: 2px solid var(--border); border-radius: var(--radius-sm); font-size: 0.9rem; color: var(--text); background: var(--white); transition: all var(--transition-fast); font-family: var(--font-zh); }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(10,61,98,0.08); }
.form-textarea { min-height: 120px; resize: vertical; }

/* Research */
.research-project-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; transition: all var(--transition); }
.research-project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.research-project-card__tag { display: inline-block; font-size: 0.72rem; font-weight: 600; color: var(--accent); background: rgba(212,172,13,0.1); padding: 3px 10px; border-radius: 20px; margin-bottom: 12px; font-family: var(--font-en); }
.research-project-card__title { font-size: 1.1rem; font-weight: 700; color: var(--primary); margin-bottom: 8px; }
.research-project-card__desc { font-size: 0.875rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 16px; }
.research-project-card__meta { display: flex; gap: 16px; font-size: 0.78rem; color: var(--text-light); font-family: var(--font-en); }
.research-project-card__meta span { display: flex; align-items: center; gap: 4px; }
.research-project-card__meta svg { width: 14px; height: 14px; }

/* Media / News */
.news-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.news-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); transition: all var(--transition); }
.news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.news-card__image { height: 180px; overflow: hidden; }
.news-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.news-card:hover .news-card__image img { transform: scale(1.05); }
.news-card__body { padding: 20px; }
.news-card__date { font-family: var(--font-en); font-size: 0.72rem; color: var(--accent); font-weight: 600; margin-bottom: 8px; }
.news-card__title { font-size: 0.95rem; font-weight: 700; color: var(--primary); margin-bottom: 8px; line-height: 1.4; }
.news-card__desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; }

/* Coop */
.coop-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition); }
.coop-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.coop-card__header { height: 160px; position: relative; overflow: hidden; }
.coop-card__header img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.coop-card:hover .coop-card__header img { transform: scale(1.05); }
.coop-card__header-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(10,61,98,0.7) 100%); }
.coop-card__body { padding: 24px; }
.coop-card__title { font-size: 1.05rem; font-weight: 700; color: var(--primary); margin-bottom: 6px; }
.coop-card__subtitle { font-family: var(--font-en); font-size: 0.75rem; color: var(--text-light); font-style: italic; margin-bottom: 12px; }
.coop-card__desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.7; }

@media (max-width: 1024px) {
  .about-intro__layout, .about-mission__grid, .about-endorsement__layout, .contact-layout { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2,1fr); }
  .course-grid { grid-template-columns: repeat(2,1fr); }
  .news-grid { grid-template-columns: repeat(2,1fr); }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .about-intro__stats { grid-template-columns: repeat(2,1fr); }
  .team-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .course-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .assessment-options { grid-template-columns: 1fr; }
  .inner-cta__actions { flex-direction: column; }
}
@media (max-width: 480px) {
  .timeline { padding-left: 24px; }
  .timeline__marker { left: -24px; }
  .timeline__marker::before { right: -29px; }
  .ai-assessment-steps { padding: 16px; }
}