/* ==========================================================================
   LIUGONG — Service & Resource Pages
   Services / Parts / Maintenance / Warranty / Dealer Locator / Support
   FAQ / How to Import
   Reuses tokens & base from style.css
   ========================================================================== */

/* ---------- Service hub cards ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 26px;transition:all .3s ease;height:100%}
.svc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--blue-300)}
.svc-card__ico{width:52px;height:52px;border-radius:10px;background:var(--blue-100);color:var(--blue-500);display:flex;align-items:center;justify-content:center;margin-bottom:18px;flex:none}
.svc-card__ico svg{width:26px;height:26px}
.svc-card h3{font-size:18px;margin-bottom:8px}
.svc-card p{font-size:14px;color:var(--slate-500);flex:1;margin-bottom:0}
.svc-card__link{font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--blue-500);margin-top:16px}
.svc-card__link svg{width:15px;height:15px;vertical-align:-2px;transition:transform .25s}
.svc-card:hover .svc-card__link svg{transform:translateX(4px)}

/* ---------- Parts category grid ---------- */
.part-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.part-cat{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 16px;text-align:center;font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--navy-800);transition:all .25s}
.part-cat:hover{border-color:var(--blue-300);background:var(--blue-100)}
.part-cat span{display:block;font-weight:400;color:var(--slate-500);font-size:12.5px;margin-top:5px;font-family:var(--font-body)}

/* ---------- Numbered steps ---------- */
.steps{counter-reset:st;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 22px}
.step::before{counter-increment:st;content:counter(st,decimal-leading-zero);font-family:var(--font-head);font-weight:700;font-size:26px;color:var(--blue-300);display:block;margin-bottom:10px}
.step h3{font-size:16px;margin-bottom:6px}
.step p{font-size:13.5px;color:var(--slate-500);margin:0}

/* ---------- FAQ accordion (native details) ---------- */
.faq-list{display:grid;gap:12px;max-width:920px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.faq-item[open]{border-color:var(--blue-300);box-shadow:var(--shadow-sm)}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 22px;font-family:var(--font-head);font-weight:600;color:var(--navy-800);font-size:15.5px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .faq-ic{font-size:24px;color:var(--blue-500);font-weight:400;line-height:1;transition:transform .25s;flex:none}
.faq-item:not([open]) summary .faq-ic::before{content:"+"}
.faq-item[open] summary .faq-ic::before{content:"\2212"}
.faq-item__body{padding:0 22px 20px;font-size:14.5px;color:var(--slate-700)}
.faq-item__body p:last-child{margin-bottom:0}
.faq-item__body ul{padding-left:20px;list-style:disc;margin:8px 0}
.faq-item__body li{margin:4px 0}
.faq-group-title{font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-500);font-family:var(--font-head);font-weight:700;margin:26px 0 4px}

/* ---------- Dealer / region list ---------- */
.region-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.region{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px 18px}
.region b{display:block;color:var(--navy-800);font-size:14.5px;margin-bottom:3px}
.region span{display:block;color:var(--slate-500);font-size:13px}

/* ---------- Info callout ---------- */
.note-box{background:var(--blue-100);border-left:3px solid var(--blue-500);border-radius:6px;padding:16px 20px;font-size:14px;color:var(--navy-800);margin:20px 0}
.note-box p:last-child{margin-bottom:0}

/* ---------- Coverage / support quick strip ---------- */
.cover-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.cover-cell{background:#fff;padding:24px 26px;display:flex;gap:16px;align-items:flex-start}
.cover-cell svg{width:26px;height:26px;color:var(--blue-500);flex:none;margin-top:2px}
.cover-cell b{display:block;font-family:var(--font-head);font-size:15px;color:var(--navy-800)}
.cover-cell span{font-size:13.5px;color:var(--slate-500)}

/* ---------- In-page anchor sub-nav ---------- */
.subnav{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 4px}
.subnav a{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 16px;font-size:13.5px;font-weight:500;color:var(--navy-700)}
.subnav a:hover{border-color:var(--blue-300);background:var(--blue-100)}

/* ---------- Prose content blocks ---------- */
.prose{max-width:880px}
.prose h2{font-size:24px;margin:30px 0 12px}
.prose h3{font-size:18px;margin:22px 0 8px;color:var(--navy-700)}
.prose p{color:var(--slate-700)}
.prose ul{padding-left:22px;list-style:disc;margin:10px 0}
.prose li{margin:7px 0;color:var(--slate-700)}
.doc-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px}
.doc-table th,.doc-table td{border:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top}
.doc-table th{background:var(--bg-soft);color:var(--navy-800);font-family:var(--font-head)}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .part-cats{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .region-list{grid-template-columns:repeat(2,1fr)}
  .cover-strip{grid-template-columns:1fr}
}
@media(max-width:620px){
  .svc-grid,.part-cats,.steps,.region-list{grid-template-columns:1fr}
}