/* T-0041 — services/precast.css (หน้า Precast เท่านั้น; tokens/motion อยู่ใน style.css) */
.pc-sec{padding-block:clamp(56px,9vw,96px)}
.pc-sec--soft{background:var(--v3-soft)}
.pc-wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(18px,4vw,32px)}
.pc-h2{color:var(--v3-navy);font-size:clamp(1.45rem,3vw,1.95rem);font-weight:800;line-height:1.25;margin:0 0 .45em}
.pc-lead{color:var(--v3-muted);margin:0 0 clamp(26px,4vw,42px);max-width:620px;line-height:1.7}

/* 2 — เทียบ Precast กับหล่อในที่ */
.pc-cmp{display:grid;gap:14px}
.pc-cmprow{display:grid;grid-template-columns:minmax(150px,230px) 1fr 1fr;gap:10px 22px;align-items:start;background:var(--v3-bg-card,#fff);border:1px solid var(--v3-line);border-radius:14px;padding:18px 20px}
.pc-cmpkey{color:var(--v3-navy);font-weight:700;font-size:1rem;line-height:1.5}
.pc-cmpcell{margin:0;color:var(--v3-navy-deep);line-height:1.65;font-size:.97rem}
.pc-cmpcell::before{content:attr(data-k);display:block;font-size:.76rem;font-weight:700;letter-spacing:.04em;color:var(--v3-blue);margin-bottom:4px}

/* 3 — เหมาะกับงานแบบไหน */
.pc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.pc-card{padding:24px}
.pc-card h3{color:var(--v3-navy);font-size:1.05rem;font-weight:700;margin:0 0 8px}
.pc-card p{margin:0;color:var(--v3-muted);line-height:1.65}

/* 4 — ขั้นตอนงาน TYROLIT */
.pc-steps{display:grid;gap:clamp(28px,4vw,44px)}
.pc-step{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:clamp(18px,4vw,44px);align-items:center}
.pc-stepmedia{display:flex;border-radius:16px;overflow:hidden;border:1px solid var(--v3-line);background:var(--v3-soft)}
.pc-stepmedia img{display:block;flex:1 1 auto;min-width:0;width:auto;height:auto}
.pc-step:nth-child(even) .pc-stepmedia{order:2}
.pc-stepnum{display:inline-flex;width:34px;height:34px;border-radius:999px;background:var(--v3-clay);color:#fff;font-weight:700;font-size:1rem;align-items:center;justify-content:center}
.pc-step h3{color:var(--v3-navy);font-size:1.2rem;font-weight:800;margin:12px 0 8px}
.pc-step p{margin:0;color:var(--v3-muted);line-height:1.7;max-width:560px}
.pc-more{margin:clamp(28px,4vw,44px) 0 0}
/* ปุ่มรองบนพื้นสว่างของหน้านี้ (.v3-btn ปกติออกแบบไว้สำหรับพื้นเข้ม) */
.pc-more .v3-btn{color:var(--v3-navy);border-color:var(--v3-navy)}
.pc-more .v3-btn:hover{background:rgba(28,75,128,.08);color:var(--v3-navy);text-decoration:none}

/* 5 — เราทำอะไรในงาน Precast */
.pc-roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.pc-role{background:var(--v3-bg-card,#fff);border:1px solid var(--v3-line);border-radius:16px;padding:22px}
.pc-rolenum{color:var(--v3-clay);font-weight:800;font-size:.82rem;letter-spacing:.08em}
.pc-role b{display:block;color:var(--v3-navy);font-size:1.02rem;font-weight:700;margin:8px 0 6px}
.pc-role p{margin:0;color:var(--v3-muted);line-height:1.65}

/* T-0047 — งานที่หล่อจากโรงงาน + ภาพโครงเสร็จ (หน้า "เราทำอะไร") */
.pc-note{margin:clamp(22px,3vw,30px) 0 0;color:var(--v3-navy-deep);line-height:1.7}
.pc-frame{margin:clamp(24px,4vw,38px) auto 0;max-width:880px}

@media (max-width:860px){
  .pc-cmprow{grid-template-columns:minmax(0,1fr);gap:8px}
  .pc-cmpkey{margin-bottom:4px}
  .pc-step{grid-template-columns:minmax(0,1fr);gap:14px}
  .pc-step:nth-child(even) .pc-stepmedia{order:0}
}

/* คำถามท้ายหน้า (svcFaq) — หน้านี้ไม่ได้โหลด services.css จึงคัดกฎส่วนคำถามมาไว้ที่นี่ (ตรงกับ services.css) */
.svc2-wrap{max-width:1200px;margin:0 auto;padding-left:32px;padding-right:32px}
.svc2-h2{font-size:clamp(28px,3.2vw,38px);line-height:1.3;margin:0;color:var(--v3-navy);font-weight:800}
.svc2-faqsec{padding-top:96px;padding-bottom:96px}
.svc2-faqgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.svc2-faqlist{border-top:1px solid var(--v3-line)}
.svc2-faqlist details{border-bottom:1px solid var(--v3-line)}
.svc2-faqlist summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;font-size:19px;font-weight:600;cursor:pointer;list-style:none;color:var(--v3-navy)}
.svc2-faqlist summary::-webkit-details-marker{display:none}
.svc2-plus{flex:none;width:36px;height:36px;border-radius:50%;background:var(--v3-soft);display:flex;align-items:center;justify-content:center;color:var(--v3-clay);font-size:22px;font-weight:400;transition:transform .3s,background .3s}
.svc2-faqlist details[open] .svc2-plus{transform:rotate(45deg);background:var(--v3-blue-tint)}
.svc2-faqlist details p{margin:0 0 20px;color:var(--v3-muted);max-width:34em}
.svc2-faqlist summary:focus-visible{outline:3px solid rgba(28,75,128,.55);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.svc2-plus{transition:none}}
@media (max-width:860px){
  .svc2-wrap{padding-left:20px;padding-right:20px}
  .svc2-faqsec{padding-top:64px;padding-bottom:64px}
  .svc2-faqgrid{grid-template-columns:1fr;gap:28px}
  .svc2-faqlist summary{font-size:17.5px}
}

/* T-0058 มือถือกระชับ (≤820px, เดสก์ท็อปไม่แตะ) — จังหวะ 24/16/14 ตาม style.css,
   .pc-steps ใส่ class swipe-row ใน HTML เพื่อเลื่อนแนวนอน (การ์ด ~85% กว้าง เห็นการ์ดถัดไปเล็กน้อย),
   pc-roles เหลือ 3 ผ่าน data-more, รูปในการ์ด/เฟรมยึด 16/10 ให้การ์ดเตี้ยลง */
@media (max-width:820px){
  .pc-sec{padding-block:24px}
  .pc-h2{font-size:22px;margin-bottom:10px}
  .pc-lead{font-size:15px;margin-bottom:16px;line-height:1.6}
  .pc-cmp{gap:10px}
  .pc-cmprow{padding:12px 14px}
  .pc-cmpcell{font-size:.9rem}
  .pc-grid{gap:12px}
  .pc-card{padding:16px}
  .pc-card h3{font-size:1rem}
  .pc-card p{font-size:.9rem}
  /* pc-steps เป็น swipe: ประกาศ display ที่นี่อีกชั้น (specificity 0,2,0) เพราะ .pc-steps{display:grid}
     ด้านบนโหลดทีหลัง style.css จะชนะ .swipe-row ธรรมดา */
  .pc-steps.swipe-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0 4px;margin:0}
  .pc-steps.swipe-row::-webkit-scrollbar{display:none}
  .pc-steps.swipe-row .pc-step{flex:0 0 85%;max-width:85%;scroll-snap-align:start;min-width:0}
  .swipe-row .pc-step{gap:10px}
  .pc-stepmedia{aspect-ratio:16/10}
  .pc-stepmedia img{width:100%;height:100%;object-fit:cover}
  .pc-stepnum{width:30px;height:30px;font-size:.9rem}
  .pc-step h3{font-size:1.02rem;margin:8px 0 6px}
  .pc-step p{font-size:.9rem;line-height:1.6}
  .pc-more{margin-top:16px}
  .pc-roles{gap:12px}
  .pc-role{padding:14px}
  .pc-role b{font-size:.95rem}
  .pc-role p{font-size:.88rem}
  .pc-note{font-size:15px;margin-top:12px}
  .pc-frame{margin-top:12px}
  .pc-frame img{aspect-ratio:16/10;object-fit:cover}
  .svc2-faqsec{padding-top:24px;padding-bottom:24px}
  .svc2-faqgrid{gap:16px}
  .svc2-faqlist summary{font-size:16px;min-height:56px}
  .svc2-faqlist details p{font-size:15px;margin-bottom:14px}
}