/* Service / landing page template (service-template.php). Brand blue matches the Moodle page. */
.vs-svc { --vs-blue: #0077b4; --vs-dark: #1a1a2e; --vs-text: #444; --vs-muted: #f5f8fb; color: var(--vs-text); }
.vs-svc h2 { color: var(--vs-dark); font-size: 26px; margin: 0 0 18px; text-transform: none; }
.vs-svc h3 { font-size: 17px; margin: 0 0 8px; color: var(--vs-blue); text-transform: none; }
.vs-svc p, .vs-svc li { font-size: 16px; line-height: 1.7; }
.vs-svc-intro { padding: 50px 0 30px; }
.vs-intro-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; }
.vs-svc-lead p:first-child { font-size: 18px; }
.vs-svc-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.vs-btn { display: inline-block; padding: 12px 24px; border-radius: 4px; font-weight: 600; text-decoration: none; transition: background .2s, color .2s; }
.vs-btn-primary { background: var(--vs-blue); color: #fff; }
.vs-btn-primary:hover, .vs-btn-primary:focus { background: #005f91; color: #fff; }
.vs-btn-ghost { border: 2px solid var(--vs-blue); color: var(--vs-blue); }
.vs-btn-ghost:hover, .vs-btn-ghost:focus { background: var(--vs-blue); color: #fff; }
.vs-btn-light { background: #fff; color: var(--vs-blue); }
.vs-btn-light:hover, .vs-btn-light:focus { background: #e8f3fa; color: var(--vs-blue); }
.vs-svc-highlights { list-style: none; margin: 0; padding: 20px; background: var(--vs-muted); border-left: 4px solid var(--vs-blue); border-radius: 4px; }
.vs-svc-highlights li { padding: 10px 0; border-bottom: 1px solid #e3e9ef; }
.vs-svc-highlights li:last-child { border-bottom: 0; }
.vs-svc-highlights strong { display: block; font-size: 22px; color: var(--vs-blue); }
.vs-svc-highlights span { font-size: 14px; }
.vs-svc-section { padding: 45px 0; }
.vs-svc-section.vs-alt { background: var(--vs-muted); }
.vs-svc-text { max-width: 860px; margin-bottom: 10px; }
.vs-svc-text ul { padding-left: 20px; }
.vs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 20px; }
.vs-card { background: #fff; border: 1px solid #e3e9ef; border-radius: 6px; padding: 22px; box-shadow: 0 2px 8px rgba(0, 0, 0, .04); }
.vs-card p { margin: 0; font-size: 15px; }
.vs-card h3 a { color: var(--vs-blue); }
.vs-faq details { background: #fff; border: 1px solid #e3e9ef; border-radius: 6px; margin-bottom: 10px; }
.vs-faq summary { cursor: pointer; padding: 16px 20px; font-weight: 600; font-size: 16px; color: var(--vs-dark); list-style: none; position: relative; padding-right: 44px; }
.vs-faq summary::-webkit-details-marker { display: none; }
.vs-faq summary::after { content: "+"; position: absolute; right: 20px; top: 12px; font-size: 22px; color: var(--vs-blue); }
.vs-faq details[open] summary::after { content: "\2212"; }
.vs-faq details > div { padding: 0 20px 16px; }
.vs-related ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.vs-related a { display: inline-block; padding: 8px 16px; border: 1px solid #cfe0ec; border-radius: 20px; color: var(--vs-blue); font-size: 15px; }
.vs-related a:hover, .vs-related a:focus { background: var(--vs-blue); color: #fff; }
.vs-cta { background: var(--vs-blue); color: #fff; text-align: center; padding: 50px 0; }
.vs-cta h2 { color: #fff; }
.vs-cta p { max-width: 700px; margin: 0 auto 22px; color: #eaf4fa; }
@media (max-width: 767px) {
  .vs-svc h2 { font-size: 22px; }
  .vs-svc-intro { padding: 30px 0 10px; }
  .vs-intro-grid { grid-template-columns: 1fr; gap: 10px; }
}