/* ===========================================================
   resume.css — for resume.html only
   =========================================================== */

/* Import CSS Variables */
@import url('./variables.css');

/* ---------- Chinese display helpers (used in brand) ---------- */
.cw-font { font-family: var(--font-family-chinese); }
.cw-font--bigger { font-size: 1.4em; font-weight: var(--font-weight-bold); }

/* ---------- Resume Header text ---------- */
.resume-header__name {
  font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-wide); 
  color: var(--color-text-primary); margin-top: var(--spacing-md);
}
.resume-header__subtitle {
  font-size: var(--font-size-xl); color: var(--color-text-secondary); font-style: italic; 
  letter-spacing: var(--letter-spacing-normal); margin-top: var(--spacing-sm);
}

/* ===========================================================
   TIMELINE (Mobile-first approach)
   =========================================================== */
.timeline-section { background-color: var(--color-bg-primary); padding: var(--spacing-3xl) 0; }
.timeline-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-xl); }

/* Mobile styles (default) */
.timeline-wrapper { display: grid; grid-template-columns: 1fr; gap: var(--spacing-xl); align-items: start; }
.timeline-label { position: static; }
.timeline-label__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin-bottom: var(--spacing-md); }
.timeline-label__description { font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); color: var(--color-text-secondary); margin-bottom: var(--spacing-xl); }
.timeline-label__link {
  display: inline-block; padding: var(--spacing-sm) var(--spacing-lg); background-color: var(--color-primary); color: var(--color-white); text-decoration: none;
  border-radius: var(--border-radius-sm); font-weight: var(--font-weight-medium); transition: background-color var(--transition-normal);
}
.timeline-label__link:hover { background-color: var(--color-primary-dark); color: var(--color-white); text-decoration: none; }

.timeline { position: relative; }
.timeline::before {
  content: ""; position: absolute; left: var(--spacing-md); top: 0; bottom: 0; width: 2px; background-color: var(--color-primary);
}
.timeline-year { margin-bottom: var(--spacing-2xl); }
.timeline-year:last-child { margin-bottom: 0; }
.timeline-date {
  display: block; font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-primary); margin-bottom: var(--spacing-md); padding-left: var(--spacing-2xl);
}
.timeline-item {
  position: relative; padding-left: var(--spacing-2xl); margin-bottom: var(--spacing-xl);
}
.timeline-item::before {
  content: ""; position: absolute; left: var(--spacing-sm); top: var(--spacing-sm); width: var(--spacing-md); height: var(--spacing-md); background-color: var(--color-primary);
  border-radius: var(--border-radius-full); border: 3px solid var(--color-white); box-shadow: 0 0 0 3px var(--color-primary);
}
.timeline-item:last-child { margin-bottom: 0; }

.timeline-item__company { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin-bottom: var(--spacing-sm); }
.timeline-item__role { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-primary); margin-bottom: var(--spacing-sm); }
.timeline-item__description { font-size: var(--font-size-base); color: var(--color-text-secondary); line-height: var(--line-height-normal); }

/* ===========================================================
   HOBBY (resume專屬樣式；不同於 index 的 hobby-card) - Mobile-first
   =========================================================== */
.hobby-section__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); padding: var(--spacing-md) 0;
  max-width: 800px; margin: 0 auto;
}
.hobby-thumbnail {
  background: var(--color-white); border: none; border-radius: var(--border-radius-md); overflow: hidden;
  box-shadow: var(--shadow-md); transition: all var(--transition-normal); text-decoration: none; color: inherit; display: block;
}
.hobby-thumbnail:hover, .hobby-thumbnail:focus { text-decoration: none; color: inherit; cursor: pointer; }

.hobby-panel { background: var(--color-white); border-radius: var(--border-radius-md); overflow: hidden; }
.hobby-panel__heading { background-color: var(--color-primary); color: var(--color-white); padding: var(--spacing-md); text-align: center; margin: 0; }
.hobby-panel__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); margin: 0; color: var(--color-white); }
.hobby-panel__image {
  display: block; margin: var(--spacing-xl) auto var(--spacing-lg); border-radius: 30%; width: 180px; height: 180px;
  object-fit: cover; box-shadow: var(--shadow-md);
}
.hobby-thumbnail:hover .hobby-panel__image, .hobby-thumbnail:focus .hobby-panel__image {
  opacity: .5; box-shadow: var(--shadow-md);
}
.hobby-panel__description {
  font-size: var(--font-size-lg); font-weight: var(--font-weight-light); line-height: var(--line-height-normal); width: 90%;
  margin: 0 auto; padding: var(--spacing-md); color: var(--color-text-secondary); text-align: center;
}

/* ===========================================================
   RESPONSIVE for resume (Mobile-first approach)
   =========================================================== */

/* Mobile styles (default) - already defined above */

/* ≥768px */
@media (min-width: 768px) {
  .timeline-wrapper { grid-template-columns: 1fr 2fr; gap: var(--spacing-3xl); }
  .timeline-label { position: sticky; top: var(--spacing-xl); }
  .timeline::before { left: var(--spacing-xl); }
  .timeline-date, .timeline-item { padding-left: var(--spacing-3xl); }
  .timeline-item::before { left: var(--spacing-lg); }

  .resume-header__name { font-size: var(--font-size-4xl); }
  .resume-header__subtitle { font-size: var(--font-size-xl); }

  .hobby-section__grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-xl); padding: var(--spacing-xl) 0; }
  .hobby-panel__description { font-size: var(--font-size-xl); width: 80%; padding: var(--spacing-lg); }
}