/* ============================================================
   Shared styles for lower-level (subpage) templates
   e.g. about.html and future subpages (company, news, etc.)
   PC-first / breakpoints: 1200px, 960px, 568px
============================================================ */

/* ------------------------------------------------------------
   Page header (breadcrumb label + big title + lead)
------------------------------------------------------------ */
.page_header {
  background: var(--c_white);
  padding: 160px 0 96px;
}
.page_header_label {
  font-size: 14px;
  letter-spacing: 0.15em;
  color: var(--c_label);
  margin: 0 0 16px;
}
.page_header_title {
  font-size: 72px;
  font-weight: 500;
  color: var(--c_accent);
  letter-spacing: 0.02em;
  margin: 0 0 24px;
}
.page_header_lead {
  letter-spacing: 0.04em;
  max-width: 576px;
  margin: 0;
}

@media (max-width: 1200px) {
  .page_header { padding: 140px 0 80px; }
  .page_header_title { font-size: 56px; }
}
@media (max-width: 960px) {
  .page_header { padding: 120px 0 64px; }
  .page_header_title { font-size: 44px; }
}
@media (max-width: 568px) {
  .page_header { padding: 96px 0 48px; }
  .page_header_title { font-size: 34px; }
}

/* ------------------------------------------------------------
   History (alternating timeline)
   Used by about.html and company.html
------------------------------------------------------------ */
.history { padding: 160px 0; background: var(--c_bg_alt); }
.history_inner { max-width: 1024px; }
.history_head { text-align: center; margin-bottom: 112px; }
.history_head .section_label { text-align: center; margin-bottom: 16px; }
.history_heading {
  font-size: 48px;
  font-weight: 500;
  color: var(--c_accent);
  letter-spacing: 0.02em;
  text-align: center;
  margin: 0;
}

.history_list { position: relative; }
.history_list::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--c_border_light);
}
.history_item {
  position: relative;
  width: 50%;
}
.history_item + .history_item { margin-top: 64px; }
.history_item:nth-child(odd) { margin-left: 50%; padding-right: 48px; text-align: right; }
.history_item:nth-child(even) { padding-left: 48px; text-align: left; }

.history_dot {
  position: absolute;
  top: 6px;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c_accent);
}
/* .history_item is only 50% wide, so "left: 50%" on the dot resolves
   against the item's own width (25%/75% of the timeline), not the
   center line. Anchor each side to its item edge touching the line
   instead so the dot lands exactly on .history_list::before. */
.history_item:nth-child(odd) .history_dot { left: 0; }
.history_item:nth-child(even) .history_dot { left: 100%; }
.history_date { letter-spacing: 0.1em; color: var(--c_label); margin: 0 0 4px; }
.history_title { font-size: 20px; font-weight: 500; color: var(--c_black); letter-spacing: 0.02em; margin: 0 0 8px; }
.history_text { margin: 0; }

@media (max-width: 1200px) {
  .history { padding: 120px 0; }
  .history_head { margin-bottom: 88px; }
}
@media (max-width: 960px) {
  .history_list::before { left: 6px; }
  .history_item,
  .history_item:nth-child(odd),
  .history_item:nth-child(even) {
    width: 100%;
    margin-left: 0;
    padding-left: 32px;
    padding-right: 0;
    text-align: left;
  }
  .history_item + .history_item { margin-top: 40px; }
  .history_item:nth-child(odd) .history_dot,
  .history_item:nth-child(even) .history_dot { left: 6px; }
}
@media (max-width: 568px) {
  .history { padding: 80px 0; }
  .history_head { margin-bottom: 56px; }
  .history_heading { font-size: 36px; }
}

/* ------------------------------------------------------------
   FAQ accordion (shared component)
   Used by contact.html (single flat list) and faq.html
   (grouped into categories) - see js/common.js #js_faq_list.
------------------------------------------------------------ */
.faq_item { border-bottom: 1px solid var(--c_border); }
.faq_item + .faq_item { margin-top: 16px; }
.faq_question {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
  padding: 20px 0;
  cursor: pointer;
}
.faq_question_text { color: var(--c_black); }
.faq_question_num { color: var(--c_label); margin-right: 12px; }
.icon_chevron {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-right: 1.5px solid var(--c_text);
  border-bottom: 1.5px solid var(--c_text);
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease);
}
.faq_item.is_open .icon_chevron { transform: rotate(225deg); }

/* Expanded by default so answers are readable without JS;
   only collapses once html.has_js confirms JS is running. */
.faq_answer_wrap { display: grid; grid-template-rows: 1fr; }
html.has_js .faq_answer_wrap {
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease);
}
html.has_js .faq_item.is_open .faq_answer_wrap { grid-template-rows: 1fr; }
.faq_answer_inner { overflow: hidden; }
.faq_answer {
  padding: 0 20px 20px 40px;
  line-height: 2;
  color: var(--c_text);
  margin: 0;
  letter-spacing: 0.1em;
}

@media (max-width: 568px) {
  .faq_answer { padding-left: 24px; }
}