/* T-0040 — หน้าบริการรอบ 3 (hub + 5 หน้า detail รวม factory ใหม่) ตาม docs/ui/design-v3/README.md
   โหลดหลัง style.css เฉพาะหน้า /services/ — คลาสหน้านี้ prefix sv3- ทั้งหมด
   ยกเว้นกลุ่ม svc2- ของบล็อก faq (svcFaq) ที่คงชื่อเดิมตามบล็อกส่วนรวม
   สีทั้งหมดเป็น token --v3-* จาก style.css ห้ามดำ */

/* โครงหน้า + ตัวอักษรหลัก (T-0060: ขอบตาม --gutter กลาง) */
.sv3-wrap{max-width:1200px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.sv3-sec{padding-top:96px;padding-bottom:96px}
.sv3-h2{font-size:clamp(28px,3.2vw,38px);line-height:1.3;margin:0;color:var(--v3-navy);font-weight:800}
.sv3-sub{font-size:18px;color:var(--v3-muted);margin:12px 0 0;max-width:44em}
.sv3-soft{background:var(--v3-soft)}

/* งานที่รับทำ (รายการตรว) */
.sv3-scopegrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 48px;margin-top:36px}
.sv3-checkrow{display:flex;align-items:flex-start;gap:12px;font-size:17px;line-height:1.6;color:var(--v3-navy-deep);min-height:44px}
.sv3-check{flex:none;width:28px;height:28px;border-radius:50%;background:#ffffff;color:var(--v3-clay);display:flex;align-items:center;justify-content:center;margin-top:1px}

/* ผลงานจริง (การ์ดงานจาก projects.json) */
.sv3-workhead{margin-bottom:32px}
.sv3-workgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.sv3-workgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sv3-pj{display:flex;flex-direction:column;overflow:hidden;text-decoration:none}
.sv3-pjimg{aspect-ratio:4/3;overflow:hidden;background:var(--v3-soft)}
.sv3-pjimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sv3-pj:hover .sv3-pjimg img{transform:scale(1.05)}
.sv3-pjbody{padding:16px 18px 18px}
.sv3-pjbody h3{font-size:19px;line-height:1.45;margin:0 0 4px;color:var(--v3-navy)}
.sv3-pjmeta{font-size:14.5px;color:var(--v3-muted);margin:0}

/* ขั้นตอนเฉพาะบริการ */
.sv3-stepgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:36px}
.sv3-step{background:#ffffff;border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:12px}
.sv3-stepnum{width:40px;height:40px;border-radius:50%;background:var(--v3-navy);color:#ffffff;font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center}
.sv3-step b{font-size:17px;line-height:1.5;color:var(--v3-navy-deep);font-weight:600}

/* บทความที่เกี่ยวข้อง */
.sv3-artgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:36px}
.sv3-art{padding:22px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-decoration:none}
.sv3-art h3{font-size:18px;line-height:1.5;margin:0;color:var(--v3-navy)}
.sv3-art p{font-size:15px;line-height:1.65;color:var(--v3-muted);margin:0}
.sv3-artmeta{font-size:13.5px;color:var(--v3-blue);font-weight:600}
.sv3-art .arr,.sv3-rowlink .arr,.sv3-more .arr,.sv3-cell .arr{transition:transform .2s}
.sv3-art:hover .arr,.sv3-rowlink:hover .arr,.sv3-more:hover .arr{transform:translateX(3px)}

/* hub: ตารางบริการ 6 ใบ (T-0061 แบบ ก) — มือถือ <900 2×3, จอคอม ≥900 3×2, กดได้ทั้งใบ */
.sv3-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.sv3-cell{display:flex;flex-direction:column;background:#ffffff;border:1px solid var(--v3-line);border-radius:18px;overflow:hidden;text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s}
.sv3-cellimg{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--v3-soft)}
.sv3-cellimg img{width:100%;height:100%;object-fit:cover;display:block}
.sv3-cellimg .sv3-tag{position:absolute;top:8px;left:8px}
.sv3-cellbody{padding:8px 10px 10px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.sv3-cellname{font-size:15px;line-height:1.35;font-weight:700;color:var(--v3-navy)}
.sv3-cellname .arr{font-weight:400}
.sv3-celldesc{display:none}
@media (min-width:900px){
  .sv3-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px}
  .sv3-cellbody{padding:14px 16px 16px;gap:6px}
  .sv3-cellname{font-size:18px}
  .sv3-celldesc{display:block;font-size:14.5px;line-height:1.55;color:var(--v3-muted);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .sv3-cell:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(28,75,128,.16);border-color:rgba(28,75,128,.4)}
  .sv3-cell:hover .arr{transform:translateX(3px)}
}

/* hub/หน้าย่อย: การ์ดแถวรูปซ้าย–ข้อความขวา (หน้าบริการย่อย extension/interior/home-renovation ยังใช้ sv3-row*) */
.sv3-row{display:grid;grid-template-columns:340px 1fr;overflow:hidden}
.sv3-rowimg{min-height:230px}
.sv3-rowimg img{width:100%;height:100%;object-fit:cover;display:block}
.sv3-rowbody{padding:26px 28px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.sv3-rowtitle{font-size:clamp(22px,2.4vw,27px);line-height:1.35;margin:0;color:var(--v3-navy);font-weight:800}
.sv3-rowtitle a{color:inherit;text-decoration:none}
.sv3-rowtitle a:hover{color:var(--v3-clay)}
.sv3-tag{display:inline-flex;align-items:center;height:28px;line-height:1;background:var(--v3-blue-tint);color:var(--v3-navy);border-radius:99px;padding:1px 12px 0;font-size:13.5px;font-weight:600}
.sv3-rowdesc{font-size:16.5px;line-height:1.7;color:var(--v3-muted);margin:0;max-width:38em}
.sv3-rowlinks{display:flex;align-items:center;gap:8px 28px;flex-wrap:wrap;margin-top:auto;padding-top:12px}
.sv3-rowlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;font-size:15.5px;color:var(--v3-blue);text-decoration:none}
.sv3-rowlink:hover{color:var(--v3-clay)}
.sv3-rowlink--main{color:var(--v3-navy);font-size:16.5px}
.sv3-rowlink--main:hover{color:var(--v3-clay)}

/* hub: ทุกงานเริ่มเหมือนกัน */
.sv3-samegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px}
.sv3-samecard{background:#ffffff;border-radius:18px;padding:30px}
.sv3-samecard h3{font-size:21px;margin:16px 0 6px;color:var(--v3-navy)}
.sv3-samecard p{margin:0;color:var(--v3-muted);line-height:1.65}
.sv3-more{display:inline-flex;align-items:center;gap:8px;margin-top:32px;min-height:44px;font-weight:600;text-decoration:none;color:var(--v3-navy)}
.sv3-more:hover{color:var(--v3-clay)}

/* FAQ (บล็อก svcFaq ส่วนรวม — คงชื่อคลาส svc2- ตามบล็อก, สีเป็น token v3) */
.svc2-sec{padding-top:96px;padding-bottom:96px}
.svc2-wrap{max-width:1200px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.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}

/* โฟกัสชัดเจนสำหรับคีย์บอร์ด */
.sv3-rowlink:focus-visible,.sv3-rowtitle a:focus-visible,.sv3-pj:focus-visible,.sv3-art:focus-visible,.sv3-more:focus-visible,.sv3-cell:focus-visible,.svc2-faqlist summary:focus-visible{outline:3px solid rgba(28,75,128,.55);outline-offset:2px}

/* ลดการเคลื่อนไหวเมื่อผู้ใช้ตั้งค่า reduce */
@media (prefers-reduced-motion:reduce){
  .sv3-pjimg img,.svc2-plus,.sv3-art .arr,.sv3-rowlink .arr,.sv3-more .arr,.sv3-cell,.sv3-cell .arr{transition:none}
}

/* จอ ≤860px ตาม media rules ของดีไซน์ v3 */
@media (max-width:860px){
  /* T-0060: sv3-wrap/svc2-wrap ใช้ --gutter แล้ว (20px <768 เอง) */
  .sv3-sec,.sv3-scope,.sv3-steps,.sv3-arts,.svc2-sec,.svc2-faqsec{padding-top:64px;padding-bottom:64px}
  .sv3-sub{font-size:16.5px}
  .sv3-scopegrid{grid-template-columns:1fr;gap:10px}
  .sv3-workgrid,.sv3-workgrid--2,.sv3-artgrid{grid-template-columns:1fr;gap:28px}
  .sv3-stepgrid{grid-template-columns:1fr;gap:12px}
  .sv3-row{grid-template-columns:1fr}
  .sv3-rowimg{min-height:200px;max-height:240px}
  .sv3-rowbody{padding:20px}
  .sv3-samegrid{grid-template-columns:1fr;gap:20px}
  .svc2-faqgrid{grid-template-columns:1fr;gap:28px}
  .svc2-faqlist summary{font-size:17.5px}
}

/* T-0058 มือถือกระชับ (≤820px, เดสก์ท็อปไม่แตะ) — section 24px บน/ล่าง, หัวข้อ→เนื้อหา 16px,
   การ์ดห่าง 14px, แถวบริการเป็นแถวกะทัดรัด ภาพเล็กซ้าย–ข้อความขวา,
   ผลงานจริงเหลือ 2 การ์ดผ่าน data-more (ปุ่มดูเพิ่มของ style.css) */
@media (max-width:820px){
  .sv3-sec,.svc2-sec,.svc2-faqsec{padding-top:24px;padding-bottom:24px}
  .sv3-h2,.svc2-h2{font-size:24px}
  .sv3-h2{margin-bottom:16px}
  .sv3-sub{margin-top:6px}
  .sv3-scopegrid{margin-top:16px}
  .sv3-workhead{margin-bottom:16px}
  .sv3-workgrid,.sv3-workgrid--2,.sv3-artgrid{gap:14px}
  .sv3-pjimg{aspect-ratio:16/10}
  .sv3-pjbody{padding:12px 14px 14px}
  .sv3-pjbody h3{font-size:17px}
  /* T-0065: ขั้นตอนเป็นกล่องขาวกล่องเดียว เรียงลง เลขซ้าย–ข้อความขวาบรรทัดเดียวกัน */
  .sv3-stepgrid{margin-top:16px;gap:0;background:#ffffff;border-radius:16px;overflow:hidden}
  .sv3-step{flex-direction:row;align-items:center;gap:12px;padding:12px 14px;border-radius:0}
  .sv3-step + .sv3-step{border-top:1px solid var(--v3-line)}
  .sv3-stepnum{flex:none;width:32px;height:32px;font-size:15px}
  .sv3-step b{font-size:15px;line-height:1.5}
  .sv3-list{gap:12px;margin-top:0}
  .sv3-sec[aria-label="รายการบริการ"] .sv3-h2{margin-bottom:10px}
  .sv3-row{grid-template-columns:104px minmax(0,1fr);align-items:start}
  .sv3-rowimg{min-height:0;max-height:none;aspect-ratio:1}
  .sv3-rowbody{padding:10px 12px;gap:5px}
  .sv3-rowtitle{font-size:17px;line-height:1.35}
  .sv3-rowdesc{font-size:13.5px;line-height:1.5}
  .sv3-rowlinks{gap:4px 14px;padding-top:2px;margin-top:2px}
  .sv3-rowlink{min-height:34px;font-size:13.5px}
  .sv3-rowlink--main{font-size:14px}
  /* T-0065: การ์ด 3 ข้อเป็นกล่องขาวกล่องเดียว 3 แถว แบบเดียวกับขั้นตอนบริการ */
  .sv3-samegrid{gap:0;margin-top:16px;background:#ffffff;border-radius:18px;overflow:hidden}
  .sv3-samecard{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center;padding:14px 16px;border-radius:0}
  .sv3-samecard + .sv3-samecard{border-top:1px solid var(--v3-line)}
  .sv3-samecard svg{grid-row:1 / span 2;box-sizing:border-box;width:40px;height:40px;padding:9px;background:var(--v3-soft);border-radius:50%}
  .sv3-samecard h3{grid-column:2;margin:0;font-size:16px}
  .sv3-samecard p{grid-column:2;margin:0;font-size:14px}
  .sv3-more{margin-top:16px}
  .svc2-faqgrid{gap:16px}
  .svc2-faqlist summary{font-size:16px;min-height:56px}
  .svc2-faqlist details p{font-size:15px;margin-bottom:14px}
}