/* =================================================================
   pages/industries.css - page-specific styles for industries.php
   Layered on top of css/site.css (which is loaded first). Only the
   Industries page links this file, so everything here is scoped to
   that route and reuses the site.css tokens (--brand / --line /
   --muted / --ink / --heading-ink / --brand-dark / --brand-darker).
   ================================================================= */

/* Smooth in-page jumps from the on-this-page nav. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* -----------------------------------------------------------------
   Page title band (site.css does not theme #page-title)
----------------------------------------------------------------- */
#page-title {
    padding: 40px 0;
    border-bottom: 1px solid var(--line);
    background: #f7f9fb;
}
#page-title h1 {
    margin: 0;
    font-size: 1.9rem;
    color: var(--heading-ink);
}
#page-title > .container > span {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 1.05rem;
}

/* -----------------------------------------------------------------
   Intro + on-this-page quick nav
----------------------------------------------------------------- */
.industries-intro { max-width: 74ch; }

.industry-index { margin: 26px 0 6px; }
.industry-index ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.industry-index a {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--brand-dark);
    transition: border-color .18s ease, color .18s ease;
}
.industry-index a:hover,
.industry-index a:focus-visible {
    border-color: var(--brand);
    color: var(--brand-darker);
}

/* -----------------------------------------------------------------
   Industry sections
----------------------------------------------------------------- */
.industry {
    padding: 44px 0;
    /* deep links (#healthcare, #iot-edge, ...) clear the sticky header */
    scroll-margin-top: 90px;
    border-top: 1px solid var(--line);
}
.industry-eyebrow {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--brand);
}
.industry h2 {
    margin: 0 0 18px;
    font-size: 1.6rem;
    color: var(--heading-ink);
}
.industry-copy > p { max-width: 66ch; color: var(--ink); }
.industry-next { margin-top: 6px; font-weight: 600; }

/* Capabilities aside card */
.industry-aside {
    background: #fafbfc;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px 22px;
}
.industry-cap-title {
    margin: 0 0 12px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
}
.industry-caps { list-style: none; margin: 0; padding: 0; }
.industry-caps li {
    padding: 12px 0;
    border-top: 1px solid var(--line);
}
.industry-caps li:first-child { border-top: 0; padding-top: 0; }
.industry-caps > li > a { font-weight: 600; }
.industry-caps span {
    display: block;
    margin-top: 3px;
    color: #555;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* -----------------------------------------------------------------
   Build-your-own closing note
----------------------------------------------------------------- */
.build-your-own {
    padding: 40px 0 10px;
    scroll-margin-top: 90px;
    border-top: 1px solid var(--line);
}
.build-your-own h2 {
    margin: 0 0 14px;
    font-size: 1.6rem;
    color: var(--heading-ink);
}
.build-your-own p { max-width: 72ch; }

/* CTA promo sub-line (a <span>, not a <p>) */
.promo .col-lg > span {
    display: block;
    margin-top: 4px;
    color: #555;
}

/* -----------------------------------------------------------------
   Responsive
----------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .industry-aside { margin-top: 24px; }
}