/* Application Expertise sections (Lists widget - List.ApplicationExpertise).
   One <section> per list item: heading + "Needs:" / "Recommendations:" bullet
   columns, on alternating white / light-gray full-bleed bands.

   The band color lives on the <section> so it bleeds to the viewport edges,
   while .app-expertise__inner caps the content width. Deliberately NOT using
   the shared .max-width-1248 helper: common.css shrinks that class to 736px
   (<=1023px) and 332px (<=877px) for the card grids, which would collapse
   these text columns. --valent-light-gray only exists on Valent pages
   (valentair/css/styles.css), hence the literal fallback. */
.app-expertise {
    background-color: var(--color-white);
    padding: 40px 0 48px;
}

.app-expertise--shaded {
    background-color: var(--color-valent-light-gray, #EEEEEE);
}

.app-expertise__inner {
    box-sizing: border-box;
    max-width: var(--max-width-container);
    margin: 0 auto;
}

.app-expertise__title {
    font-family: var(--font-family-bold);
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    color: var(--color-near-black);
    margin: 0 0 20px;
}

.app-expertise__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

.app-expertise__label {
    font-family: var(--font-family-bold);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: var(--color-near-black);
    margin: 0 0 10px;
}

/* Bullets come from a rich-text field, so style the editor's markup rather
   than classed elements. common.css sets `ul { list-style-position: inside }`
   globally, which would indent wrapped lines under the bullet instead of
   under the text - the design wants the hanging indent, hence `outside`. */
.app-expertise__list ul,
.app-expertise__list ol {
    margin: 0;
    padding-left: 20px;
    list-style-position: outside;
}

.app-expertise__list ul {
    list-style-type: disc;
}

.app-expertise__list li {
    font-size: 14px;
    line-height: 22px;
    color: var(--color-near-black);
    margin-bottom: 8px;
}

.app-expertise__list li:last-child {
    margin-bottom: 0;
}

.app-expertise__list p {
    font-size: 14px;
    line-height: 22px;
    color: var(--color-near-black);
    margin: 0 0 8px;
}

.app-expertise__list p:last-child {
    margin-bottom: 0;
}
@media (min-width: 1024px) and (max-width: 1296px) {
    .app-expertise__inner {
        padding-left: var(--container-padding-desktop) !important;
        padding-right: var(--container-padding-desktop) !important;
    }
}
@media (max-width: 1023px) {
    .app-expertise__inner {
        max-width: 736px !important;
    }
}

@media (max-width: 877px) {
    .app-expertise {
        padding: 32px 0 36px;
    }

    .app-expertise__inner {
        max-width: 332px !important;
    }

    .app-expertise__title {
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 16px;
    }

    .app-expertise__columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}