/* RUSAN base — Day 2 */
@import url('./design-tokens.css');

/* RUSAN home template — 強制 html/body 黑底，避免 wp 預設背景在 footer 下方露灰 */
html:has(body.page-template-template-rusan-home),
body.page-template-template-rusan-home {
  background-color: #111 !important;
  margin: 0;
  min-height: 100vh;
}

html { font-family: var(--font-en, 'Roboto'),'Noto Sans JP','Noto Sans TC',sans-serif; }
body { margin: 0; }

/* ============================================
   Section Title chip (Day 2 規範)
   設計稿：hug content + max-width (不是固定 600px)
   - 桌機 ≥1024：width=max-content / min=200 / max=600
   - 平板/手機 <1024：max=100% (容器內滿版)
   - 內容多 → 撐到 max 換行；內容少 → 自然窄
   ============================================ */
[data-component="section-title"] {
  box-sizing: border-box;
  width: max-content;
  max-width: 600px;
  min-width: 200px;
}
@media (max-width: 1023px) {
  [data-component="section-title"] {
    max-width: 100%;
    min-width: 0;
  }
}

/* ============================================
   Header (data-node-id="42:447") — sticky 全寬
   ============================================ */
[data-node-id="42:447"] {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100% !important;
}
[data-node-id="42:447"] [data-node-id="42:448"] {
  width: 100% !important;
  max-width: 1320px;
  /* Day 8.4 Anna：logo 跟白框左緣對齊 → 拔掉 margin auto 讓 container 靠左 */
  margin: 0;
}

/* ============================================
   漢堡按鈕 (#mobile-hamburger) — <1024 顯示
   ============================================ */
#mobile-hamburger {
  display: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  padding: 10px;
  cursor: pointer;
  z-index: 110;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}
#mobile-hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  transition: transform .25s ease, opacity .2s ease;
  transform-origin: center;
}
#mobile-hamburger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#mobile-hamburger.is-open span:nth-child(2) { opacity: 0; }
#mobile-hamburger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 1023px) {
  #mobile-hamburger { display: flex; }

  /* Header 縮高、padding 改小 */
  [data-node-id="42:447"] {
    height: 60px !important;
    padding: 0 16px !important;
  }
  /* 桌機 nav 預設隱藏，漢堡點擊 .nav-open 才顯示 */
  [data-node-id="42:447"] [data-node-id="42:484"] { display: none !important; }
  [data-node-id="42:447"].nav-open [data-node-id="42:484"] {
    display: flex !important;
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    background: #111 !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 16px !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    z-index: 99 !important;
    align-items: stretch !important;
  }
  [data-node-id="42:447"].nav-open [data-node-id="42:484"] > * {
    width: 100% !important;
    padding: 14px 8px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    white-space: normal !important;
  }
  /* Actions（語言+聯絡）— Alpine 把子節點搬進 nav，原容器留空隱藏 */
  [data-node-id="42:447"] [data-node-id="42:492"] { display: none !important; }
  [data-node-id="42:447"].nav-open [data-node-id="42:484"] [data-node-id="42:495"] { display: none !important; }
  [data-node-id="42:447"].nav-open [data-node-id="42:484"] [data-node-id="42:488"],
  [data-node-id="42:447"].nav-open [data-node-id="42:484"] [data-node-id="42:493"] {
    justify-content: flex-start !important;
  }
  [data-node-id="42:447"].nav-open [data-node-id="42:484"] [data-node-id="42:490"] img,
  [data-node-id="42:447"].nav-open [data-node-id="42:484"] [data-node-id="42:495"] img {
    width: 24px !important;
    height: 24px !important;
  }
  [data-node-id="42:447"].nav-open [data-node-id="42:484"] [data-node-id="42:497"] {
    background: #2258b2 !important;
    margin: 8px 0 4px !important;
    padding: 14px 16px !important;
    justify-content: center !important;
    border-bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* Footer width fluid — Figma w-[1440px] 在 WP 不限固定寬
   Day 8.11 Anna：≥1440 也左右填滿 → 拔 max-width 1320 + margin auto */
[data-node-id="42:330"] { width: 100% !important; }
[data-node-id="42:330"] [data-node-id="42:331"] {
  width: 100% !important;
  max-width: none;
  margin: 0;
}

/* img reset (vite-prototype 對齊) */
img { max-width: none; }

/* ============================================================
   Day 3 元件規則
   ============================================================ */

/* ---- Btn ---- */
.rusan-btn { transition: background-color .2s ease, opacity .2s ease, border-color .2s ease; }
.rusan-btn--primary:hover { background-color: #1c4a99 !important; }
.rusan-btn--outline:hover { background-color: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.85) !important; }
.rusan-btn:focus-visible { outline: 2px solid #6ea1ff; outline-offset: 2px; }
@media (max-width: 767px) {
  .rusan-btn--block { width: 100% !important; }
}

/* ---- Hero (home) ---- */
.rusan-hero { width: 100%; }
.rusan-hero--home { min-height: 720px; padding: 92px 60px 60px; }
.rusan-hero--home .rusan-hero-frame {
  inset: 92px 60px 60px;
  /* 對齊 Figma 42:130：1320x852 大白外框 */
}
.rusan-hero--home .rusan-hero-content {
  min-height: 540px;
  padding-top: 240px;
  gap: 24px;
}
.rusan-hero--home .rusan-hero-heading { font-size: 48px; }
.rusan-hero--home .rusan-hero-subtitle { font-size: 18px; max-width: 720px; }
.rusan-hero--home .rusan-hero-actions { margin-top: 48px; }

@media (max-width: 1023px) {
  .rusan-hero--home { min-height: 480px; padding: 48px 20px 40px; }
  .rusan-hero--home .rusan-hero-frame { inset: 24px 16px; border-width: 8px !important; }
  .rusan-hero--home .rusan-hero-content { min-height: 380px; padding-top: 80px; }
  .rusan-hero--home .rusan-hero-heading { font-size: 32px; }
  .rusan-hero--home .rusan-hero-subtitle { font-size: 14px; padding: 0 12px; }
  .rusan-hero--home .rusan-hero-actions { margin-top: 32px; flex-wrap: wrap; }
}

/* ---- Hero (inner) ---- */
.rusan-hero--inner { min-height: 610px; height: 610px; }
.rusan-hero--inner .rusan-hero-bg { width: 100%; height: 100%; }
.rusan-hero--inner .rusan-hero-inner-frame {
  width: 600px; height: 450px;
  left: 780px; top: 192px;
}
.rusan-hero--inner .rusan-hero-inner-banner {
  width: 600px; height: 450px;
  left: 740px; top: 152px;
}
.rusan-hero--inner .rusan-hero-inner-title {
  width: 381px;
  left: 800px; top: 417px;
}
.rusan-hero--inner .rusan-hero-heading { font-size: 48px; }
.rusan-hero--inner .rusan-hero-subtitle { font-size: 18px; }

/* inner mobile 降級為純文字置中（DRY-RUN 1.4 規則） */
@media (max-width: 1023px) {
  .rusan-hero--inner { height: auto; min-height: 220px; padding: 60px 20px; display: flex; align-items: center; justify-content: center; }
  .rusan-hero--inner .rusan-hero-inner-frame,
  .rusan-hero--inner .rusan-hero-inner-banner { display: none !important; }
  .rusan-hero--inner .rusan-hero-inner-title {
    position: static !important;
    width: 100% !important;
    left: auto !important; top: auto !important;
    text-align: center;
    align-items: center;
  }
  .rusan-hero--inner .rusan-hero-heading { font-size: 30px; }
  .rusan-hero--inner .rusan-hero-subtitle { font-size: 14px; }
}

/* ---- Value Card (階梯) ---- */
.rusan-value-stack {
  position: relative;
  width: 100%;
  max-width: 755px; /* 675 + 80 cascading offset */
  height: 660px;
}
@media (min-width: 1024px) {
  .rusan-value-stack > .rusan-value-card {
    position: absolute;
    top: var(--rusan-value-top, 0px);
    left: var(--rusan-value-left, 0px);
  }
}
@media (max-width: 1023px) {
  .rusan-value-stack { height: auto; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }
  .rusan-value-stack > .rusan-value-card {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 200px;
    padding: 24px 20px !important;
    gap: 20px !important;
    --rusan-value-top: 0; --rusan-value-left: 0;
  }
  .rusan-value-card[data-component="value-card"] > div[data-name="value-card-icon"] { width: 56px !important; height: 56px !important; }
}

/* ---- Member Card ---- */
.rusan-member-card { width: 420px; }
@media (max-width: 1023px) {
  .rusan-member-card {
    width: 100% !important;
    flex-direction: row !important;
    overflow: hidden;
  }
  .rusan-member-photo {
    width: 96px !important;
    flex: 0 0 96px;
    aspect-ratio: 1/1 !important;
  }
  .rusan-member-photo img { object-fit: cover; }
  .rusan-member-body {
    padding: 16px 18px !important;
    gap: 8px !important;
    flex: 1 1 auto;
  }
  .rusan-member-body p { font-size: 15px !important; }
  .rusan-member-body > div:first-child > p:first-child { font-size: 17px !important; }
}

/* ---- Contact Row ---- */
.rusan-contact-row + .rusan-contact-row { margin-top: 0; }
.rusan-contact-row [data-component="contact-row"] { padding: 0; }

/* ---- Big Display ---- */
.rusan-big-display { display: block; }
@media (max-width: 767px) {
  .rusan-big-display--hide-mobile { display: none !important; }
}

/* ============================================================
   Day 4 — 首頁 section layout
   每個 section：左側 chip + 大字浮水印（桌機）/ 右側內容區
   ============================================================ */
.rusan-home-section {
  position: relative;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 80px 60px;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.rusan-home-section__chip { z-index: 2; }
.rusan-home-section__big  { z-index: 1; }
.rusan-home-section__body { z-index: 2; }

@media (max-width: 1023px) {
  .rusan-home-section {
    padding: 48px 20px;
    gap: 24px;
  }
}

/* ---- Tech 區：4 卡橫排（桌機）/ 1 欄堆疊（手機/平板） ---- */
.rusan-tech-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.rusan-tech-card { min-height: 340px; }
@media (max-width: 1023px) {
  .rusan-tech-row { grid-template-columns: 1fr; gap: 16px; }
  .rusan-tech-card { min-height: auto; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .rusan-tech-row { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Products 區：2x2 grid ---- */
.rusan-products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.rusan-products-card { min-height: 240px; }
@media (max-width: 1023px) {
  .rusan-products-grid { grid-template-columns: 1fr; gap: 16px; }
  .rusan-products-card { min-height: auto; }
  .rusan-products-card .shrink-0 { width: 110px !important; height: 110px !important; }
}

/* ---- Application 區：2x2 grid + 底部 CTA ---- */
.rusan-app-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.rusan-app-cta { display: flex; justify-content: center; margin-top: 48px; }
@media (max-width: 1023px) {
  .rusan-app-grid { grid-template-columns: 1fr; gap: 20px; }
  .rusan-app-cta { margin-top: 32px; }
}

/* ---- Reviews 區：背景圖 + 暗色 + 中央卡 ---- */
.rusan-home-section--reviews {
  position: relative;
  max-width: none;
  padding: 80px 60px 100px;
  margin-top: 0;
  display: block;
  overflow: hidden;
  isolation: isolate;
}
.rusan-reviews-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.rusan-reviews-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.rusan-reviews-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
}
.rusan-reviews-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.rusan-reviews-eyebrow { margin-bottom: 8px; }
.rusan-reviews-stars img { display: block; height: 19px; }
.rusan-reviews-quote { margin: 0; max-width: 600px; }
.rusan-reviews-author { margin-top: 16px; }
.rusan-reviews-author-divider {
  width: 1px; height: 48px;
  background: rgba(255,255,255,0.4);
}
@media (max-width: 1023px) {
  .rusan-home-section--reviews { padding: 48px 20px 64px; }
  .rusan-reviews-eyebrow { font-size: 36px !important; }
  .rusan-reviews-quote { font-size: 16px !important; }
}

/* ---- Media Block ---- */
.rusan-media-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  width: 100%;
}
.rusan-media-block--reverse { direction: rtl; }
.rusan-media-block--reverse > * { direction: ltr; }
.rusan-media-block-image { width: 100%; aspect-ratio: 1/1; overflow: hidden; }
.rusan-media-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1023px) {
  .rusan-media-block { grid-template-columns: 1fr; gap: 32px; direction: ltr; }
  .rusan-media-block-image { aspect-ratio: 4/3; }
  .rusan-media-block--reverse .rusan-media-block-image { order: -1; }
}

/* ============================================================
   Day 5 — About 頁專屬區塊
   ============================================================ */

/* About sections 共用 */
.rusan-about-section { color: #fff; }

/* ---- Cert section: 描述 + 4 卡 grid ---- */
.rusan-cert-desc {
  max-width: 800px;
  margin: 0 auto 48px;
  text-align: center;
  font-family: 'Roboto','Noto Sans JP',sans-serif;
}
.rusan-cert-desc p {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
  margin: 0 0 16px;
}
.rusan-cert-cta { display: flex; justify-content: center; margin-top: 32px; }

.rusan-cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 32px;
}
.rusan-cert-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 400px;
  overflow: hidden;
  padding: 24px;
  text-align: center;
}
.rusan-cert-card__img {
  width: 100%;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rusan-cert-card__img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.rusan-cert-card__title {
  margin-top: 16px;
  font-size: 16px;
  color: #fff;
  font-weight: 600;
}

@media (max-width: 1023px) {
  .rusan-cert-desc p { font-size: 15px; }
  .rusan-cert-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .rusan-cert-card { height: 280px; padding: 16px; }
  .rusan-cert-card__img { height: 180px; }
  .rusan-cert-card__title { font-size: 14px; }
}
@media (max-width: 600px) {
  .rusan-cert-grid { grid-template-columns: 1fr; }
  .rusan-cert-card { height: 320px; }
  .rusan-cert-card__img { height: 220px; }
}

/* ---- Team section: 描述 + 6 portrait/list ---- */
.rusan-team-desc {
  max-width: 720px;
  margin: 0 0 48px 0;
  font-family: 'Roboto','Noto Sans JP',sans-serif;
}
.rusan-team-desc p {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
  margin: 0 0 16px;
}
.rusan-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.rusan-team-grid > .rusan-member-card { width: 100% !important; }
@media (max-width: 1023px) {
  .rusan-team-desc p { font-size: 15px; }
  .rusan-team-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ---- Join us section ---- */
.rusan-about-section--join {
  max-width: none;
  padding: 80px 60px 100px;
  background: linear-gradient(180deg, #1a1f2c 0%, #0e1118 100%);
  position: relative;
  display: block;
  overflow: hidden;
}
.rusan-about-section--join::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 0;
}
.rusan-join-inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.rusan-join-title { font-size: 60px; line-height: 1.5; }
.rusan-join-desc  { font-size: 20px; }
@media (max-width: 1023px) {
  .rusan-about-section--join { padding: 48px 20px 64px; }
  .rusan-join-title { font-size: 36px; }
  .rusan-join-desc  { font-size: 16px; }
}

/* ---- Contact section: 3 rows + map ---- */
.rusan-contact-list {
  max-width: 720px;
  margin: 0 auto;
}
.rusan-contact-map {
  margin-top: 48px;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
.rusan-contact-map iframe { display: block; width: 100%; }
@media (max-width: 1023px) {
  .rusan-contact-map { margin-top: 32px; }
}

/* ---- About-section big-display 解除 whitespace-nowrap 的 overflow 風險 ---- */
.rusan-about-section .rusan-big-display p { word-break: keep-all; }
@media (max-width: 600px) {
  .rusan-about-section .rusan-big-display p { white-space: normal !important; }
}

/* ---- Footer 3 欄公司資料（v0.0.45） ---- */
.rusan-footer-info {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  color: #fff;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}
/* 強制白字（mobile 某處覆蓋成黑，根因未明 → 用 !important 蓋過） */
.rusan-footer-info,
.rusan-footer-info p,
.rusan-footer-info a { color: #fff !important; }
.rusan-footer-info__col { display: flex; flex-direction: column; gap: 8px; }
.rusan-footer-info__col--brand { gap: 16px; }
/* 台北/新屋 heading 對齊 brand 欄「如山光學股份有限公司」那行（logo 100px + brand gap 16px = 116px） */
.rusan-footer-info__col:not(.rusan-footer-info__col--brand) { margin-top: 116px; }
.rusan-footer-info__brand-text { display: flex; flex-direction: column; gap: 6px; }
.rusan-footer-info__company { font-size: 16px; font-weight: 700; }
.rusan-footer-info__email a { color: #fff; text-decoration: none; }
.rusan-footer-info__email a:hover { text-decoration: underline; }
.rusan-footer-info__heading { font-weight: 700; margin-bottom: 4px; }
.rusan-footer-info p { margin: 0; }
@media (max-width: 1023px) {
  .rusan-footer-info {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* 手機堆疊時不需要 logo 高度補償 */
  .rusan-footer-info__col:not(.rusan-footer-info__col--brand) { margin-top: 0; }
}