/*
 * ATLANTIC IMAGE DEFENSE — v1.15.4.19.35.451.386
 * Public site: layout audit.
 *
 * 1. Step strip at the top of the institutional pages (Workflow, Evidence
 *    file, Legal framework, Method, Services, FAQ…): 5 to 8 steps.
 *    Before: fixed 170 px columns, six per line, so 7 or 8 steps broke onto
 *    a second line with one or two orphans.
 *    Now, on computers, every step is on one line: the strip takes the width
 *    the steps need (up to the width of the page grid) and the steps share it
 *    evenly. Between 768 and 1199 px, the steps are split into two even rows.
 *    Below 768 px, the existing vertical list is kept.
 */

/* Computers: one line, even columns, centred under the introduction. */
@media (min-width: 1200px) {
    html body .aid-institutional-depth__hero .aid-institutional-depth__flow {
        grid-template-columns: repeat(var(--aid-flow-n, 6), minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: calc(var(--aid-flow-n, 6) * 164px + (var(--aid-flow-n, 6) - 1) * 14px) !important;
        max-width: min(1240px, calc(100vw - 80px)) !important;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    html body .aid-institutional-depth__hero .aid-institutional-depth__flow li {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 16px 14px !important;
        text-align: left !important;
    }
    html body .aid-institutional-depth__hero .aid-institutional-depth__flow li > a {
        display: flex;
        flex-direction: column;
    }
    html body .aid-institutional-depth__hero .aid-institutional-depth__flow strong {
        font-size: 13px;
        line-height: 1.35;
        /* Long single words (German compounds such as
         * "Entscheidungsprotokoll") are hyphenated rather than overflowing. */
        overflow-wrap: break-word;
        word-break: normal;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
    /* Arrow centred in the gap between two steps. */
    html body .aid-institutional-depth__hero .aid-institutional-depth__flow li:not(:last-child)::after {
        content: "→" !important;
        left: auto !important;
        right: -7px !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translate(50%, -50%) !important;
    }
}

/* Small computers and tablets in landscape: two even rows. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    html body .aid-institutional-depth__hero .aid-institutional-depth__flow {
        grid-template-columns: repeat(var(--aid-flow-half, 3), minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    html body .aid-institutional-depth__hero .aid-institutional-depth__flow li {
        text-align: left !important;
    }
    html body .aid-institutional-depth__hero .aid-institutional-depth__flow li:not(:last-child)::after {
        content: "→" !important;
        left: auto !important;
        right: -7px !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translate(50%, -50%) !important;
    }
    /* No arrow pointing out of the first row. */
    html body .aid-flow-n5 li:nth-child(3)::after,
    html body .aid-flow-n6 li:nth-child(3)::after,
    html body .aid-flow-n7 li:nth-child(4)::after,
    html body .aid-flow-n8 li:nth-child(4)::after { display: none !important; }
}

/*
 * 2. FAQ topic strip (01 Authority … 08 CCB): eight short labels.
 *    Before: four per line between 1200 and 1399 px, i.e. two lines on most
 *    laptops. Now one line from 1200 px, with a narrower number column.
 */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    html body.aid-context-public .faq_area .aid-faq90-topic-strip {
        grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    }
    html body.aid-context-public .faq_area .aid-faq90-topic-strip > li > a {
        grid-template-columns: 22px minmax(0, 1fr) !important;
        gap: 6px !important;
    }
}