/* ============================================================
   [scheme_offerings] — home page "Our Offerings" › Schemes tab.
   Markup in custom-functions/scheme-offerings.php,
   behaviour in assets/js/scheme-offerings.js.
   ============================================================ */

.scheme-offerings {
    --off-border: #C6C9CD;
    --off-muted: #6B7280;
    --off-ink: #111827;
    --off-blue: #005EB9;
    --off-blue-soft: #C9E0FB;
}

/* ---------- Chips ----------
   The Elementor kit stylesheet paints every bare <button> with its own border,
   radius and colour, and loads after this file — so every chip rule below is
   scoped `.scheme-offerings …` to outrank it. Keep that prefix on new buttons. */

.offerings-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.scheme-offerings .offerings-chip {
    padding: 5px 16px;
    border: 1px solid var(--off-border);
    border-radius: 8px;
    background-color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: #1E2124;
    cursor: pointer;
}

.scheme-offerings .offerings-chip:hover {
    border-color: var(--off-blue-soft);
    background-color: #F5F9FE;
}

.scheme-offerings .offerings-chip.is-active {
    border-color: var(--off-blue);
    background-color: var(--off-blue);
    color: #fff;
}

.scheme-offerings .offerings-chip:focus-visible {
    outline: 2px solid var(--off-blue);
    outline-offset: 2px;
}

/* ---------- Panel ---------- */

.offerings-panel {
    border: 1px solid var(--off-border);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.offerings-panel[hidden] {
    display: none !important;
}

.offerings-panel:focus-visible {
    outline: 2px solid var(--off-blue);
    outline-offset: 2px;
}

.offerings-panel__head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    background-color:#C0DBFF;
}

/* Always rendered — an empty circle keeps the header aligned while icons are
   still being uploaded. */
.offerings-panel__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #fff;
    overflow: hidden;
}

.offerings-panel__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.offerings-panel__heading {
    min-width: 0;
}

.scheme-offerings .offerings-panel__name {
    margin: 0 0 2px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--off-ink);
}

.offerings-panel__tagline {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #374151;
}

/* ---------- Promoted link strip (term `top_section` WYSIWYG) ---------- */

.offerings-panel__promo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    background-color: #FFF2ED;
}
.offerings-panel__promo .promo-copy h4{
    font-size: 16px;
    font-weight: 600;
    color:#0E1114;
}

.offerings-panel__promo > :last-child {
    margin-bottom: 0;
}

/* Layout contract for the editor-authored block, shared with .scheme-topsection
   in schemes-services-component.css so one piece of markup renders the same in
   both places: copy on the left, call to action on the right. */
.offerings-panel__promo .promo-copy {
    flex: 1 1 260px;
    min-width: 0;
}

.offerings-panel__promo .promo-cta {
    flex: 0 0 auto;
    margin: 0;
}

/* Only needed when an author writes a bare button with no .promo-cta wrapper. */
.offerings-panel__promo > a.btn {
    flex: 0 0 auto;
}

.offerings-panel__promo h1,
.offerings-panel__promo h2,
.offerings-panel__promo h3,
.offerings-panel__promo h4,
.offerings-panel__promo h5,
.offerings-panel__promo h6 {
    margin-bottom: 2px;
    font-size: 16px;
    font-weight: 600;
    color: var(--off-ink);
}

.offerings-panel__promo p {
    margin-bottom: 0;
    font-size: 14px;
    color: #3A3D41;
}

/* ---------- Scheme rows ---------- */

.offerings-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.offerings-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 24px;
    border-top: 1px solid var(--off-border);
}

.offerings-list > .offerings-row:first-child {
    border-top: 0;
}

.offerings-row__main {
    flex: 1 1 auto;
    min-width: 0;
}

.offerings-row__category {
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #004B96;
}

.scheme-offerings a.offerings-row__title {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #0E1114;
    text-decoration: none;
}

.scheme-offerings a.offerings-row__title:hover,
.scheme-offerings a.offerings-row__title:focus-visible {
    color: var(--off-blue);
    text-decoration: underline;
}

.offerings-row__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #4B5563;
}

.scheme-offerings a.offerings-row__link {
    flex: 0 0 auto;
    align-self: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--off-blue);
    text-decoration: none;
    white-space: nowrap;
}

.scheme-offerings a.offerings-row__link:hover {
    text-decoration: underline;
}

/* ---------- Footer ---------- */

.offerings-panel__footer {
    padding: 14px 24px;
    border-top: 1px solid #DCDEE1;
}

.scheme-offerings a.offerings-panel__viewall {
    font-size: 14px;
    font-weight: 500;
    color: var(--off-blue);
    text-decoration: none;
}

.scheme-offerings a.offerings-panel__viewall:hover {
    text-decoration: underline;
}

/* ---------- Responsive ---------- */

/* Eleven applicant groups wrap to six or seven rows on a phone and push the
   panel off-screen, so below 1024px the chips become one swipeable strip. The fade
   marks whichever edge still has chips past it; scheme-offerings.js sets the
   is-more-start / is-more-end classes and keeps the selected chip in view. */
@media (max-width: 1023.98px) {
    .offerings-chips {
        position: relative; /* offsetParent for the chips' scroll maths */
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        /* Room for the focus outline, which the scroll box would otherwise clip. */
        padding: 4px;
        margin: -4px -4px 12px;
    }

    .offerings-chips::-webkit-scrollbar {
        display: none;
    }

    .offerings-chips.is-more-end {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
                mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    }

    .offerings-chips.is-more-start {
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
                mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
    }

    .offerings-chips.is-more-start.is-more-end {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
                mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    }

    .scheme-offerings .offerings-chip {
        flex: 0 0 auto;
        white-space: nowrap;
        scroll-snap-align: start;
    }
}

@media (max-width: 575.98px) {
    .offerings-panel__head,
    .offerings-panel__promo,
    .offerings-row,
    .offerings-panel__footer {
        padding-inline: 16px;
    }

    .offerings-panel__icon {
        width: 44px;
        height: 44px;
    }

    /* "View Details" drops under the text rather than squeezing it. */
    .offerings-row {
        flex-direction: column;
        gap: 8px;
    }

    .scheme-offerings a.offerings-row__link {
        align-self: flex-start;
    }

    /* The rows print a Bootstrap .btn-link, whose horizontal padding indents
       it once it sits under the title; line it up with the text instead. */
    .scheme-offerings .offerings-row > .btn-link,
    .scheme-offerings .offerings-panel__footer > .btn-link {
        padding-inline: 0;
    }
}