/*
  MDC Website v2.0 — Build 2.8
  File: 10-service-pages.css
  Purpose: Detailed service page layouts, sticky service navigation, feature lists, process lists, and CTA strips.
*/
.service-hero .hero-actions { justify-content: flex-start; }
.service-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.service-aside { position: sticky; top: 110px; background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow-sm); }
.service-aside h2 { font-size: 1rem; margin-bottom: .9rem; }
.service-aside a { display: block; padding: .7rem .8rem; border-radius: .8rem; color: var(--color-gray-700); font-weight: 700; border: 1px solid transparent; }
.service-aside a:hover, .service-aside a.is-active { background: var(--color-gray-50); color: var(--color-navy-900); border-color: var(--color-gray-200); }
.service-main { display: grid; gap: 1.35rem; }
.service-block { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl); padding: clamp(1.3rem, 3vw, 2.25rem); box-shadow: var(--shadow-sm); scroll-margin-top: 120px; }
.service-block > h2 { margin-bottom: 1rem; }
.feature-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.feature-list article { background: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: 1.1rem; }
.feature-list h3 { font-size: 1.05rem; margin-bottom: .45rem; }
.process-list { display: grid; gap: .9rem; padding-left: 1.15rem; }
.process-list li { padding-left: .3rem; }
.check-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.check-grid li { position: relative; background: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-radius: .9rem; padding: .85rem .9rem .85rem 2.4rem; font-weight: 700; color: var(--color-gray-800); }
.check-grid li::before { content: "✓"; position: absolute; left: .9rem; top: .8rem; width: 1.1rem; height: 1.1rem; display: grid; place-items: center; border-radius: 50%; background: var(--color-emerald-600); color: white; font-size: .72rem; font-weight: 900; }
.cta-strip { background: linear-gradient(135deg, var(--color-navy-950), var(--color-navy-800)); color: var(--color-white); }
.cta-strip p { color: rgba(255,255,255,.8); }
.service-catalog { margin-top: 2rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.service-catalog-card { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow-sm); display: grid; gap: .7rem; }
.service-catalog-card span { color: var(--color-emerald-700); font-weight: 900; }
.service-catalog-card a { font-weight: 900; color: var(--color-navy-900); }
@media (max-width: 980px) { .service-layout { grid-template-columns: 1fr; } .service-aside { position: static; } .feature-list, .service-catalog { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .feature-list, .service-catalog, .check-grid { grid-template-columns: 1fr; } .service-block { border-radius: var(--radius-lg); } }