/* ═══════════════════════════════════════════════════════════
   PRODUCTION & SUPPLY CHAIN PAGE — page-specific styles only.
   Header, footer, buttons, colors, .section, .reveal etc. all come
   from the shared ../css/styles.css (same file the homepage and the
   Service page use), so layout/margins/buttons stay identical.
   Content: JMAC_Content_Service.pdf, page 1.
   ═══════════════════════════════════════════════════════════ */

/* Keep the current nav item ("บริการ") visibly active while on this page */
.nav-item.current > .nav-link { color: var(--navy); }
.nav-item.current > .nav-link::after { transform: scaleX(1); }

/* Full-page soft-blue gradient wash — same recipe as service.html's
   #services section (.ci-band .services-section#services in styles.css),
   applied to body so it flows continuously behind every section on this
   page rather than being boxed into one. Only shows through where a
   section has no opaque background of its own (the hero image, burst
   banner and footer all paint over it as normal). */
body {
  background:
    radial-gradient(135% 95% at 88% -12%, rgba(96,178,220,.42) 0%, rgba(96,178,220,0) 52%),
    radial-gradient(120% 90% at 6% 4%, rgba(150,198,235,.34) 0%, rgba(150,198,235,0) 46%),
    linear-gradient(176deg,
      #D7ECF9 0%,
      #E3F1FB 34%,
      #EFF7FD 56%,
      #F8FCFE 76%,
      #FFFFFF 100%);
}

/* ── PAGE HERO — same pattern as service/css/service.css ── */
.page-hero {
  position: relative;
  height: 380px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.page-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover!important;
  object-position: center;
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,
    rgba(34,149,196,.92) 0%,
    rgba(34,149,196,.62) 32%,
    rgba(34,149,196,.18) 62%,
    rgba(34,149,196,0) 85%);
}
.page-hero-content {
  position: relative;
  z-index: 1;
  padding: 0 64px 48px;
  width: 100%;
}
.page-hero-title {
  font-family: var(--displayfont);
  font-size: clamp(28px, 3.6vw,44px);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin: 0;
  letter-spacing: .3px;
}

@media (max-width: 960px) {
  .page-hero { height: 320px; }
  .page-hero-content { padding: 0 32px 32px; }
}
@media (max-width: 600px) {
  .page-hero { height: 260px; }
  .page-hero-content { padding: 0 24px 24px; }
}

/* ── MAIN — sticky "Service" sidebar (left) alongside the page's own
   content (right), styled after the Yamada reference's "Corporate
   Information / Contents" sidebar: the sidebar stays in view while the
   content scrolls past it; each item links straight to its own page. ── */
#prod-main {
  padding-top: 120px;
  padding-bottom: 96px;
}
.prod-layout {
  display: flex;
  align-items: flex-start;
  gap: 64px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Sidebar — sticky, top offset matches the fixed header height (same
   convention as .company-media in about.css). */
.prod-sidebar {
  flex: 0 0 26%;
  position: sticky;
  top: 130px;
}
.prod-sidebar .svc-section-heading { margin-bottom: 24px; }

.svc-section-heading {
  font-family: var(--displayfont);
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}

/* Thick cyan underline on hover — no persistent "active" state, since
   each item is now a real link (not a JS panel-switcher) rather than a
   tracked selection. */
.svc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.svc-list-item {
  display: inline-block;
  width: fit-content;
  font-family: var(--sans-th);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--gray-700);
  text-decoration: none;
  padding-bottom: 8px;
  border-bottom: 4px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.svc-list-item:hover { color: var(--navy); border-color: var(--cyan); }

/* toggle chevron — ซ่อนบนเดสก์ท็อป (sub-service กางอยู่แล้ว), โผล่บนมือถือ */
.svc-toggle { display: none; }

/* 20260717 client feedback: หัวข้อย่อยระดับที่ 3 (Sub-service → รายการย่อย)
   เรียงลำดับชั้นตามผังโครงสร้างบริการในชีต — เยื้องเข้าและคั่นด้วยเส้นซ้าย
   เพื่อให้อ่านเป็น "└" ใต้ Sub-service ของตัวเอง */
.svc-sublist {
  list-style: none;
  margin: 12px 0 0;
  padding: 0 0 0 18px;
  border-left: 2px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.svc-sublist a {
  display: inline-block;
  font-family: var(--sans-th);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--gray-700);
  text-decoration: none;
  transition: color .25s var(--ease);
}
.svc-sublist a:hover { color: var(--cyan-deep); text-decoration: underline; }

/* Main content — the two split-block paragraphs, stacked with the same
   rhythm they had as standalone sections before. */
.prod-main-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* ── SPLIT BLOCK — text on top, image below (same order for both blocks —
   .split-block--reverse no longer alternates sides, everything just stacks). ── */
.split-block {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.split-content { order: 1; min-width: 0; }
.split-media {
  order: 2;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--navy-deep);
  /* diagonal-cut corner, same device as .btn-primary / .view-all */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
}
.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.split-heading {
  font-family: var(--displayfont);
  font-size: clamp(22px, 2.2vw,28px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
  margin-bottom: 26px;
}
.split-content p {
  color: var(--gray-700);
  font-size: 20px;
  line-height: 1.95;
  margin-bottom: 22px;
}
.split-content p:last-child { margin-bottom: 0; }

@media (max-width: 960px) {
  #prod-main { padding-top: 88px; padding-bottom: 72px; }
  .prod-layout { gap: 40px; }
}
@media (max-width: 900px) {
  /* Stack: sidebar on top (no longer sticky — it's above scrolling
     content now, not beside it), main content below. */
  .prod-layout { flex-direction: column; gap: 40px; }
  .prod-sidebar { position: static; flex: none; width: 100%; }

  /* ── mobile accordion: เมนูบริการเป็นการ์ดรายการ แตะ chevron เพื่อกาง
     sub-service (ค่าเริ่มต้นพับไว้) — แก้ปัญหารายการยาวอ่านยากบนมือถือ ── */
  .prod-sidebar .svc-section-heading { margin-bottom: 14px; }
  .svc-list {
    gap: 0;
    border: 1px solid var(--border);
    overflow: hidden;
  }
  .svc-item { border-bottom: 1px solid var(--border); }
  .svc-item:last-child { border-bottom: 0; }

  .svc-list-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
  }
  .svc-item .svc-list-item {
    flex: 1 1 auto;
    width: auto;
    display: flex;
    align-items: center;
    padding: 15px 18px;
    border-bottom: 0;          /* ยกเลิกเส้นใต้ hover บนมือถือ */
    font-size: 18px;
    font-weight: 600;
    color: var(--navy);
  }
  .svc-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    background: none;
    border: 0;
    border-left: 1px solid var(--border);
    color: var(--cyan);
    cursor: pointer;
  }
  .svc-toggle i { font-size: 22px; transition: transform .3s var(--ease); }
  .svc-item.is-open .svc-toggle { background: var(--navy); color: #fff; border-left-color: var(--navy); }
  .svc-item.is-open .svc-toggle i { transform: rotate(180deg); }

  /* sub-list — พับไว้เป็นค่าเริ่มต้น กางเมื่อ .is-open */
  .svc-item--has-sub .svc-sublist {
    max-height: 0;
    margin: 0;
    padding: 0 18px;
    border-left: 0;
    overflow: hidden;
    background: var(--paper);
    transition: max-height .32s var(--ease), padding .32s var(--ease);
  }
  .svc-item--has-sub.is-open .svc-sublist {
    max-height: 460px;
    padding: 12px 18px 18px 32px;
  }
  .svc-sublist a { font-size: 16px; }
}
@media (max-width: 700px) {
  .split-media {
    aspect-ratio: 16 / 10;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
  }
}
@media (max-width: 600px) {
  #prod-main { padding-top: 64px; padding-bottom: 56px; }
  .prod-main-content { gap: 40px; }
}

/* ═══════════════════════════════════════════════════════════
   20260717 client feedback (sheet):
   20260721 แก้: กลับไปใช้ฟอนต์เดิม Noto Sans Thai แบบหน้า home (TH Sarabun New ใช้เฉพาะหน้า article-detail)
   ② เพิ่มขนาดฟอนต์พื้นฐานทั้งหน้าให้ใหญ่ขึ้น (16px → 18px)
   ═══════════════════════════════════════════════════════════ */
:root {
  --sans-th: 'Noto Sans Thai', system-ui, sans-serif;
  --sans-en: 'Noto Sans Thai', system-ui, sans-serif;
  --sans-jp: 'Noto Sans Thai', 'Noto Sans JP', sans-serif;
  --serif-jp: 'Noto Sans Thai', 'Noto Sans JP', sans-serif;
  --displayfont: 'Noto Sans Thai', sans-serif;
}
body { font-size: 18px; }

/* ═══════════════════════════════════════════════════════════
   20260721 แก้: เนื้อหาฝั่งขวาทั้งหมด (.prod-main-content — 2 split-block:
   หัวข้อ + ย่อหน้า) ใช้ฟอนต์ TH Sarabun New
   bind ตัวแปรฟอนต์ไว้ที่ .prod-main-content (custom property จึง inherit ให้ลูกทุกตัว)
   ส่วน sidebar / navbar / footer อยู่นอก scope นี้ จึงคงใช้ Noto Sans Thai แบบหน้า home
   (@font-face อยู่ใน css/fonts.css — โหลดใน production-supply-chain.html)
   ═══════════════════════════════════════════════════════════ */
.prod-main-content {
  --sans-th: 'TH Sarabun New', 'Noto Sans Thai', system-ui, sans-serif;
  --sans-en: 'TH Sarabun New', 'Noto Sans Thai', system-ui, sans-serif;
  --sans-jp: 'TH Sarabun New', 'Noto Sans Thai', 'Noto Sans JP', sans-serif;
  --serif-jp: 'TH Sarabun New', 'Noto Sans Thai', 'Noto Sans JP', sans-serif;
  --displayfont: 'TH Sarabun New', 'Noto Sans Thai', sans-serif;
  font-family: var(--sans-th);
}