/* sectors.css — shared components for the L2 sector landing pages.
   Tokens come from chassis.css; .ax-hero/.ax-three/.ax-final base from install.css. */

/* Spec ribbon — qualitative chips under the hero (NO fabricated numbers) */
.sx-ribbon { background: var(--ink, #232A25); color: #fff; }
.sx-ribbon .wrap { max-width: var(--container-max, 1240px); margin: 0 auto; padding: 18px var(--container-pad, 24px);
    display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; font-size: 14px; font-weight: 500; }
.sx-ribbon .wrap span { opacity: .9; display: inline-flex; align-items: center; gap: 8px; }
.sx-ribbon .wrap span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red, #DC2626); }

/* Generic section shell */
.sx-sec { padding: 72px var(--container-pad, 24px); }
.sx-sec .wrap { max-width: var(--container-max, 1240px); margin: 0 auto; }
.sx-sec--warm { background: var(--paper-warm, #FAFAF8); }
.sx-eyebrow { color: var(--red, #DC2626); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; margin: 0 0 12px; }
.sx-h2 { font-size: clamp(26px, 3vw, 40px); font-weight: 500; letter-spacing: -0.02em; margin: 0 0 14px; color: var(--ink, #232A25); }
.sx-lede { font-size: 17px; line-height: 1.6; color: var(--mute, rgba(35,42,37,.65)); max-width: 640px; }

/* City tile strip (links to ev-{type}-{city} pages) */
.sx-cities { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 28px; }
.sx-city { display: block; padding: 16px 18px; border: 1px solid var(--line, rgba(35,42,37,.1)); border-radius: var(--r-card, 14px);
    text-decoration: none; color: var(--ink, #232A25); font-weight: 600; transition: border-color .15s, transform .15s; background: #fff; }
.sx-city:hover { border-color: var(--red, #DC2626); transform: translateY(-2px); }
.sx-city small { display: block; font-weight: 400; color: var(--mute, rgba(35,42,37,.6)); margin-top: 4px; }

/* FAQ <details> (Repair common faults) */
.sx-faq details { border-bottom: 1px solid var(--line, rgba(35,42,37,.1)); padding: 6px 0; }
.sx-faq summary { cursor: pointer; font-weight: 600; padding: 14px 0; color: var(--ink, #232A25); list-style: none; }
.sx-faq summary::-webkit-details-marker { display: none; }
.sx-faq summary::after { content: "+"; float: right; color: var(--red, #DC2626); font-weight: 700; }
.sx-faq details[open] summary::after { content: "–"; }
.sx-faq p { color: var(--mute, rgba(35,42,37,.7)); line-height: 1.6; padding: 0 0 14px; margin: 0; }

/* Part selector (Spares) */
.sx-selector { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 12px; align-items: end; margin-top: 24px; }
.sx-selector label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ink, #232A25); }
.sx-selector select, .sx-selector input { width: 100%; height: 48px; border: 1px solid var(--line, rgba(35,42,37,.15)); border-radius: 10px; padding: 0 12px; font-size: 15px; }
.sx-selector .sx-go { height: 48px; }
.sx-result { margin-top: 18px; padding: 18px; border: 1px solid var(--line, rgba(35,42,37,.1)); border-radius: var(--r-card,14px); background: #fff; }
@media (max-width: 760px){ .sx-selector { grid-template-columns: 1fr 1fr; } }

/* Content lists + brand chips used on Service / Spares sector pages */
.sx-list { margin: 16px 0 0; padding-left: 20px; color: var(--mute, rgba(35,42,37,.7)); line-height: 1.7; max-width: 640px; }
.sx-list li { margin-bottom: 8px; }
.sx-brand-list, .sx-brands { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.sx-brand-list span, .sx-brands span, .sx-brand-chip {
    display: inline-flex; align-items: center; padding: 8px 16px;
    border: 1px solid var(--line, rgba(35,42,37,.12)); border-radius: 999px;
    font-weight: 600; font-size: 14px; color: var(--ink, #232A25); background: #fff;
}