/* =========================================
   關於翰霖 專用樣式：廠房卡片（雙地址）+ 沿革時間軸
   ========================================= */

/* ---------- 翰霖與陽極處理的初次見面：滿版底圖＋文字疊加，區塊大小完全貼合圖片本身比例，
   不裁切、四周也不留其他底色（section 的上邊留白對這裡歸零，見 .origin-section） ---------- */
.section.origin-section { padding-top: 0; padding-bottom: 0; }
.origin-hero {
  position: relative;
  width: 100%; aspect-ratio: 1536 / 720;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  display: flex; align-items: center;
}
.origin-hero-content { max-width: 560px; padding: 60px 20px 60px clamp(20px, 6vw, 90px); }
.origin-hero-content .section-title { text-align: left; margin-bottom: 0; }
.origin-milestone { border-left: 3px solid var(--brand-navy); padding-left: 18px; margin-top: 26px; }
.origin-year { font-weight: 800; color: var(--brand-navy); font-size: 17px; margin-bottom: 6px; }
.origin-milestone p { font-size: 14.5px; color: var(--text-muted); margin: 0; line-height: 1.7; }

/* 鋁件下方 45 度製程標註（原始鋁材／前處理／陽極氧化處理／封孔染色），沿用示意圖裡的位置 */
.origin-process { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.origin-process-point circle:first-child { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
.origin-process text {
  font-size: 18px; font-weight: 700; fill: #1c2b40; text-anchor: middle;
  paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round;
}

@media (max-width: 760px) {
  .origin-hero-content { max-width: none; padding: 20px 18px; background: rgba(255,255,255,0.88); border-radius: var(--radius); }
  /* 手機版文字卡片會蓋住這個區域，標註在小螢幕上會被壓在卡片底下看不清楚，直接隱藏 */
  .origin-process { display: none; }
}

.facility-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  margin: 30px 0 10px;
}
.facility-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.facility-card .facility-photo { aspect-ratio: 3 / 2; background: var(--bg-light); overflow: hidden; }
.facility-card .facility-photo img { width: 100%; height: 100%; object-fit: cover; }
.facility-card .facility-body { padding: 22px 24px; }
.facility-card h3 { font-size: 18px; margin-bottom: 8px; }
.facility-card .facility-address { font-size: 14px; color: var(--text-muted); margin-bottom: 14px; }
.facility-card .facility-map { border: 0; width: 100%; height: 200px; border-radius: 8px; }
.facility-stats { display: flex; gap: 20px; margin-top: 14px; flex-wrap: wrap; }
.facility-stats div { font-size: 13px; color: var(--text-muted); }
.facility-stats strong { display: block; font-size: 20px; color: var(--brand-red); }

/* ---------- 沿革時間軸：整張手繪合成圖，跟 header／footer 一樣滿版不設寬度上限，任何螢幕寬度都等比例縮放、不橫向捲動。
   獨立成自己的白底 section，上下只留 2px，不要讓 section-alt 的灰底跑出來 ---------- */
.timeline-section { background: #fff; padding: 2px 0; }
.timeline-photo { width: 100%; margin: 0; }
.timeline-photo img { display: block; width: 100%; height: auto; }

/* ---------- 左右分欄：文字／圖片預留位置交錯排版（除了沿革時間軸都用這個）---------- */
.about-split {
  display: flex; align-items: center; gap: 50px; flex-wrap: wrap;
}
.about-split-reverse { flex-direction: row-reverse; }
.about-split-content { flex: 1 1 380px; min-width: 0; }
.about-split-content .section-title,
.about-split-content .section-subtitle { text-align: left; }
.about-media-placeholder {
  flex: 1 1 380px; aspect-ratio: 4 / 3;
  background: var(--bg-light); border: 1.5px dashed var(--border-color); border-radius: var(--radius);
}
.about-media {
  flex: 1 1 380px; aspect-ratio: 4 / 3;
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}
.about-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 860px) {
  /* flex-direction 變 column 後，主軸換成垂直方向，子項目原本的 flex-basis:380px 會被當成「高度」
     基準，再疊加 aspect-ratio:4/3 換算回寬度，導致寬度被撐到超過螢幕。這裡強制子項目寬度改為
     100%、flex-basis 歸零，避免手機版橫向溢出 */
  .about-split, .about-split-reverse { flex-direction: column; align-items: stretch; }
  .about-split > *, .about-split-reverse > * { flex: none; width: 100%; }
}

/* ---------- 定位主張（Hero 標語）---------- */
.about-hero-title { font-size: 30px; color: var(--brand-navy); line-height: 1.5; margin-bottom: 16px; }
.about-hero-sub { font-size: 17px; color: var(--text-muted); }

/* ---------- 直向堆疊卡片（三個據點三種任務，跟圖片分欄後改直排）---------- */
.pillar-stack { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
.pillar-card {
  background: var(--white); border-top: 4px solid var(--brand-red);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 26px 26px;
}
.pillar-card h3 { font-size: 18px; color: var(--brand-navy); margin: 0 0 12px; }
.pillar-card p { font-size: 14.5px; color: var(--text-muted); line-height: 1.75; margin: 0; }
.pillar-icon { width: 40px; height: 40px; color: var(--brand-red); margin-bottom: 16px; }
.pillar-icon svg { width: 100%; height: 100%; }

/* ---------- 長條型區塊，水平三等分（穩定成長四十年的三件事）---------- */
.pillar-bar {
  display: flex; margin-top: 30px;
  background: var(--white); border-top: 4px solid var(--brand-red);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}
.pillar-third { flex: 1 1 0; padding: 32px 30px; }
.pillar-third + .pillar-third { border-left: 1px solid var(--border-color); }
.pillar-third h3 { font-size: 18px; color: var(--brand-navy); margin: 0 0 12px; }
.pillar-third p { font-size: 14.5px; color: var(--text-muted); line-height: 1.75; margin: 0; }

@media (max-width: 760px) {
  .pillar-bar { flex-direction: column; }
  .pillar-third + .pillar-third { border-left: none; border-top: 1px solid var(--border-color); }
}

/* ---------- 現場與團隊：資料待補的預留版位 ---------- */
.placeholder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.placeholder-item {
  border: 1.5px dashed var(--border-color); border-radius: var(--radius);
  padding: 18px 14px; text-align: center; color: var(--text-muted);
  font-size: 13.5px; background: var(--bg-light);
}