/* ═══════════════════════════════════════════════════════════
   CASE STUDY · Factory Productivity Improvement — page-specific styles.
   Header, footer, buttons (.btn-primary/.view-all), colours, tokens,
   .reveal and .hero-crumb-bar all come from the shared css/styles.css,
   so this detail page stays identical to the homepage / service page.
   Font sizes are kept to EVEN numbers only.
   ═══════════════════════════════════════════════════════════ */

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

/* ── PAGE HERO — same compact header banner as the Service / Case page ── */
.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; object-position: center; }
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,
    rgba(35,57,105,.92) 0%,
    rgba(35,57,105,.62) 32%,
    rgba(35,57,105,.18) 62%,
    rgba(35,57,105,0) 85%);
}
/* ═══════════════ BURST BANNER — 'Our success story' + scattered hexagons ═══════════════ */
.burst-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(120deg, var(--navy) 0%, var(--cyan) 100%);
  padding: 56px 64px;
  display: flex;
  justify-content: center;
}
.burst-banner-inner { position: relative; z-index: 2; max-width: 1000px; text-align: center; }
/* Small eyebrow label — same uppercase/letter-spaced treatment as the
   site's .eyebrow component, recoloured for the dark banner. The actual
   headline (.burst-banner-title, moved up from the article's own header)
   now carries the visual weight this used to have. */
.burst-banner-text {
  margin: 0;
  color: rgba(255,255,255,.85);
  font-family: var(--sans-en);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-transform: uppercase;
}
.burst-banner-title {
  margin: 14px 0 0;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.35;
}
/* Scattered hexagons — CSS clip-path hexagons in blue/white tints */
.bb-hex {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}
.bb-hex-1 { width: 120px; height: 120px; left: 4%;  top: -28px;  background: rgba(255,255,255,.14); transform: rotate(8deg); }
.bb-hex-2 { width: 74px;  height: 74px;  left: 15%; bottom: -22px; background: rgba(21,36,74,.22); }
.bb-hex-3 { width: 168px; height: 168px; right: 6%;  top: -46px;  background: rgba(255,255,255,.10); transform: rotate(-6deg); }
.bb-hex-4 { width: 92px;  height: 92px;  right: 18%; bottom: -30px; background: rgba(21,36,74,.18); transform: rotate(10deg); }
.bb-hex-5 { width: 54px;  height: 54px;  left: 42%; top: -18px;   background: rgba(255,255,255,.16); }
.bb-hex-6 { width: 64px;  height: 64px;  right: 34%; bottom: -20px; background: rgba(255,255,255,.12); transform: rotate(-12deg); }

/* ═══════════════ ARTICLE ═══════════════ */
/* Body content column — same width as article-detail.html (.art): max-width
   1060px with 64px side padding, so the reading measure matches exactly. */
.cs {
  max-width: 1060px;
  margin: 0 auto;
  padding: 64px 64px 72px;
}
.cs-block { margin-top: 40px; }
.cs-block:first-of-type { margin-top: 0; }
.cs-block > p {
  font-size: 20px;
  line-height: 1.95;
  color: var(--ink-2);
  margin: 0 0 20px;
}

/* Article header */
.cs-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.cs-tag {
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 6px 14px;
  color: var(--cyan-deep);
  background: var(--cyan-soft);
}
.cs-tag-primary { color: #fff; background: linear-gradient(135deg, var(--navy) 0%, var(--cyan) 100%); }
.cs-title {
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--navy);
  margin: 0;
}

.cs-lead {
  font-size: 22px !important;
  line-height: 1.9 !important;
  color: var(--navy) !important;
  font-weight: 500;
}

/* Figures */
.cs-figure { margin: 0 0 8px; }
.cs-figure img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  /* natural cut corner — no solid top accent line anywhere */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
.cs-figure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 28px 0 8px;
}
.cs-figure-grid .cs-figure img { aspect-ratio: 4 / 3; }

/* Sub-heading */
.cs-h3 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
  margin: 0 0 16px;
}
.cs-h3 span { color: var(--cyan-deep); font-weight: 400; }

/* Section band — replaces the ■ PDF headings. Uses a hexagon marker + soft
   tinted panel, NOT a solid line above a box. */
.cs-band {
  position: relative;
  font-family: var(--display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
  margin: 8px 0 22px;
  padding: 18px 24px 18px 56px;
  background: linear-gradient(100deg, var(--navy-soft) 0%, rgba(234,238,246,0) 92%);
}
.cs-band::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 22px;
  background: linear-gradient(135deg, var(--navy), var(--cyan));
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}

/* Challenge card — soft card, NO solid top-border accent */
.cs-card {
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 38px rgba(35, 57, 105, .08);
  padding: 30px 34px;
  margin-bottom: 28px;
}
.cs-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.cs-list li {
  position: relative;
  padding-left: 30px;
  font-size: 20px;
  line-height: 1.7;
  color: var(--ink-2);
}
.cs-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 14px;
  height: 16px;
  background: linear-gradient(135deg, var(--navy), var(--cyan));
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}
.cs-list li strong { color: var(--navy); font-weight: 600; }

/* Vision / emphasis statement */
.cs-vision {
  font-family: var(--display);
  font-size: 24px !important;
  font-weight: 600;
  line-height: 1.6 !important;
  color: var(--navy) !important;
  margin: 6px 0 20px !important;
  padding-left: 22px;
  border-left: 4px solid var(--cyan);
}

/* Pull quote */
.cs-quote {
  margin: 30px 0;
  padding: 30px 34px;
  background: linear-gradient(150deg, var(--navy) 0%, var(--cyan-deep) 100%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
.cs-quote p {
  margin: 0;
  color: #fff;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.7;
}
.cs-quote cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-size: 18px;
  color: rgba(255,255,255,.82);
  line-height: 1.5;
}
/* Lead-in line ("…กล่าวเพิ่มเติมว่า") shown inside the quote box, above the quote */
.cs-quote-lead {
  font-family: var(--sans-th) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,.82) !important;
  margin-bottom: 14px !important;
}

/* Result stats — stacked layout: the big number(s) sit together on the
   FIRST row, and the description sits on the SECOND row underneath. Both
   cards follow the same shape whether the row has one number or
   two-numbers-plus-arrow. */
.cs-stats { display: grid; gap: 20px; margin: 28px 0; }
.cs-stat {
  display: grid;
  gap: 14px;
  background: var(--navy-soft);
  padding: 28px 32px;
}
.cs-stat-nums {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
.cs-stat-num {
  font-family: var(--display);
  font-size: 48px;
  font-weight: 700;
  color: var(--gray-700);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.cs-stat-num span { font-size: 18px; font-weight: 600; color: var(--gray-500); }
.cs-stat-num-hl { color: var(--cyan-deep); }
.cs-stat-num-hl span { color: var(--cyan-deep); }
.cs-stat-arrow { color: var(--cyan); font-size: 26px; display: inline-grid; place-items: center; }
.cs-stat-desc {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: var(--gray-700) !important;
}
.cs-stat-desc strong { color: var(--navy); font-weight: 700; }

/* Roadmap */
.cs-roadmap { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 14px; }
.cs-roadmap li {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 22px;
  background: #fff;
  border: 1px solid var(--border);
  padding: 18px 24px;
}
/* Year marker — colored accent bar + colored number, no filled rectangle
   behind it. Color progresses navy → mid-tone → brand cyan across the
   three roadmap years. */
.cs-road-year {
  position: relative;
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  text-align: left;
  padding-left: 16px;
  background: none;
}
.cs-road-year::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 28px;
}
.cs-roadmap li:nth-child(1) .cs-road-year { color: var(--navy); }
.cs-roadmap li:nth-child(1) .cs-road-year::before { background: var(--navy); }
.cs-roadmap li:nth-child(2) .cs-road-year { color: #246894; }
.cs-roadmap li:nth-child(2) .cs-road-year::before { background: #246894; }
.cs-roadmap li:nth-child(3) .cs-road-year { color: var(--cyan); }
.cs-roadmap li:nth-child(3) .cs-road-year::before { background: var(--cyan); }
.cs-road-body { font-size: 18px; line-height: 1.7; color: var(--ink-2); }

/* ═══════════════ CTA BAND ═══════════════ */
.cs-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 76px 64px;
  text-align: center;
  background: linear-gradient(135deg, var(--navy) 0%, var(--cyan-deep) 100%);
}
.cs-cta-hex {
  position: absolute;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  width: 420px;
  aspect-ratio: 1 / 1;
  background: url('images/Jmac Element_3 hexagon copy.png') center / contain no-repeat;
  opacity: .18;
  pointer-events: none;
  z-index: -1;
}
.cs-cta-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.cs-cta h2 {
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin: 0 0 14px;
}
.cs-cta p { color: rgba(255,255,255,.9); font-size: 20px; line-height: 1.7; margin: 0 0 30px; }
.cs-cta-btns { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* Both CTA buttons size to their own content (no fixed 264px width, which
   left them stretched far too wide for the short labels). */
.cs-cta .btn-primary,
.cs-cta .view-all {
  height: 52px;
  width: auto;
  min-width: 0;
  padding: 0 30px;
}
.cs-cta .btn-primary { background: #fff; color: var(--navy); border-color: #fff; }
/* Hover: solid white → white outline. The button has a diagonal cut corner,
   so a plain `border` tears open at the notch (the "broken" corner). Draw the
   outline with the same 5-layer white background-image recipe as .view-all
   below, so the corner reads as one continuous white line. */
.cs-cta .btn-primary:hover {
  background-color: transparent;
  color: #fff;
  border-color: transparent;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><line x1='0' y1='14' x2='14' y2='0' stroke='rgb(255,255,255)' stroke-width='1'/></svg>");
  background-position: 0 0, 0 0, 100% 0, 0 100%, 100% 100%;
  background-size:
    100% 1px,
    1px 100%,
    1px calc(100% - 14px),
    calc(100% - 14px) 1px,
    14px 14px;
  background-repeat: no-repeat;
}

/* .view-all's "border" isn't the CSS border property — it's drawn with
   background-image gradients + an SVG diagonal line, hardcoded to cyan
   in the shared stylesheet. Overriding border-color (as before) did
   nothing, which is why the cut-corner outline looked incomplete/wrong
   against this dark band. Re-declare the same background-image recipe
   in white instead. */
.cs-cta .view-all {
  color: #fff;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><line x1='0' y1='14' x2='14' y2='0' stroke='rgb(255,255,255)' stroke-width='1'/></svg>");
  background-position: 0 0, 0 0, 100% 0, 0 100%, 100% 100%;
  background-size:
    100% 1px,
    1px 100%,
    1px calc(100% - 14px),
    calc(100% - 14px) 1px,
    14px 14px;
  background-repeat: no-repeat;
}
.cs-cta .view-all:hover {
  background-color: transparent;
  color: var(--navy);
  background-image: none;
}
.cs-cta .view-all:hover::before { background: #fff; }

/* ═══════════════ RESPONSIVE ═══════════════ */

/* .cs's padding breakpoints are kept in sync with .art's (article-detail.css:
   1000px / 640px) — NOT the 960px/600px used below for this page's other
   elements — so the reading-column width matches article-detail.html at
   every viewport size, not just above/below both sets of thresholds. */
@media (max-width: 1000px) {
  .cs { padding: 48px 32px 56px; }
}
@media (max-width: 640px) {
  .cs { padding: 36px 20px 44px; }
}

@media (max-width: 960px) {
  .page-hero { height: 320px; }
  .burst-banner { padding: 44px 32px; }
  .cs-cta { padding: 60px 32px; }
  .bb-hex-3 { width: 120px; height: 120px; }
  .bb-hex-1 { width: 96px; height: 96px; }
}

@media (max-width: 700px) {
  .cs-figure-grid { grid-template-columns: 1fr; }
  /* keep both numbers on the same line, just a touch smaller */
  .cs-stat { padding: 24px 22px; }
  .cs-stat-num { font-size: 36px; }
  .cs-stat-nums { gap: 12px; }
}

@media (max-width: 600px) {
  .page-hero { height: 260px; }
  .burst-banner { padding: 36px 24px; }
  .bb-hex-5, .bb-hex-6 { display: none; }
  .cs-block > p, .cs-list li { font-size: 18px; }
  .cs-lead { font-size: 20px !important; }
  .cs-card { padding: 24px 22px; }
  .cs-band { padding: 16px 18px 16px 48px; }
  .cs-band::before { left: 18px; }
  .cs-quote { padding: 24px 22px; }
  .cs-quote p { font-size: 20px; }
  .cs-roadmap li { grid-template-columns: 1fr; gap: 12px; }
  .cs-road-year { justify-self: start; }
  .cs-cta { padding: 48px 20px; }
  .cs-cta-btns { flex-direction: column; }
  .cs-cta-btns .btn-primary,
  .cs-cta-btns .view-all { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════
   20260721 แก้: ใช้ฟอนต์ TH Sarabun New (Font หัวกลม) สำหรับหน้านี้
   (@font-face อยู่ใน css/fonts.css — โหลดใน case-study-factory.html)
   ② เพิ่มขนาดฟอนต์พื้นฐานทั้งหน้าให้ใหญ่ขึ้น (16px → 18px)
   ═══════════════════════════════════════════════════════════ */
:root {
  --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;
  --display: 'TH Sarabun New', 'Noto Sans Thai', sans-serif;
}
body { font-size: 18px; }

/* ═══════════════════════════════════════════════════════════
   20260721 แก้: หน้านี้ใช้ TH Sarabun New เป็นค่าเริ่มต้น (body/เนื้อหา
   กรณีศึกษา) แต่ให้ส่วนกรอบเหล่านี้กลับไปใช้ Noto Sans Thai แบบหน้า home:
   navbar (.site-header รวม mobile-menu) / breadcrumb (.hero-crumb-bar) /
   ส่วน CTA ท้ายหน้า (.cs-cta) / footer (.footer-v2)
   bind ตัวแปรฟอนต์ทับที่แต่ละ subtree (custom property จึง inherit ลงลูก)
   ═══════════════════════════════════════════════════════════ */
.site-header,
.hero-crumb-bar,
.cs-cta,
.footer-v2 {
  --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;
  --display: 'Noto Sans Thai', sans-serif;
  font-family: var(--sans-th);
}