/* =========================================================
   CORPORATE BANKING SOLUTIONS FOR GROWING ENTERPRISES
   Partial: Views/Partials/_CorporateBankingSolutions.cshtml
   Script:  wwwroot/scripts/businesscorporatesolutions.js

   Tab-row visual language mirrors .bh-product-tab /
   .bh-products__grid pattern rather than Personal's
   rounded menu-btn cards — screenshot match is the flat bordered
   strip, not the card style. Card visual language mirrors
   .accounts-card's toggle list (own rules here, not a link to
   accounts.css — see businessinquiryform.css for why: avoids
   coupling this page to another page's whole stylesheet).
   ========================================================= */

.bh-corp-solutions {
    padding: 40px 32px;
}

.bh-corp-solutions__header {
    margin-bottom: 24px;
}

.bh-corp-solutions__title {
    font-family: Co Headline;
    font-weight: 400;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: 0%;
    text-align: center;
    color: #003B70;
}

/* ---------- Tabs (mirrors .bh-products-nav / .bh-product-tab) ---------- */
.bh-corp-tabs-nav {
    display: flex;
    flex-direction: column;
    margin-bottom: 32px;
}

.bh-corp-tabs__grid {
    display: flex;
    align-items: stretch;
    border: 1px solid #CBCBCB;
    border-radius: 12px;
    overflow: hidden;
}

.bh-corp-tab {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    isolation: isolate;
    padding: 16px 24px 24px;
    gap: 24px;
    width: 243.2px;
    height: 156px;
    flex: 1 0 243.2px;
    background: var(--color-white, #fff);
    border-style: solid;
    border-width: 1px 0 1px 0;
    border-color: #CBCBCB;
    cursor: pointer;
    text-align: start;
}
.bh-corp-tab--active::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(/assets/NewFolder/Corprit-Active-Menu.svg);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: cover;
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}
/* Divider between cells is each tab's own left border — not on the first
       tab, since the row's own wrapper border (.bh-corp-tabs__grid) already
       draws that outer edge. Figma's per-item spec has left:1px/right:0; the
       first-tab exception is this pattern's real-world adaptation of a single
       Figma frame into a row of repeated siblings. */
.bh-corp-tab:not(:first-child) {
    border-inline-start-width: 1px;
}

.bh-corp-tab__icon {
  /*  display: inline-flex;*/
    width: 48px;
    height: 48px;
}

/* Explicit size on the images themselves (not just the wrapping span) so the
   default and active icon render identically regardless of each SVG's own
   native dimensions, matching the 44px/48px base-vs-active pair used by the
   Personal/Web-menu icons (.product-card__icon) — same hover "pop" animation
   as .menu-btn .tab-img-default too, which this row never had. */
.bh-corp-tab__icon-default,
.bh-corp-tab__icon-active {
    width: 44px;
    height: 44px;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), width var(--transition-fast), height var(--transition-fast);
    transform: scale(1);
    will-change: transform;
}

.bh-corp-tab:hover .bh-corp-tab__icon-default,
.bh-corp-tab:hover .bh-corp-tab__icon-active {
    transform: scale(1.15);
}

.bh-corp-tab:active .bh-corp-tab__icon-default,
.bh-corp-tab:active .bh-corp-tab__icon-active {
    transform: scale(0.95);
}

.bh-corp-tab__icon-active {
    display: none;
}

.bh-corp-tab__name {
    font-family: Co Headline;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0%;
    color: #003B70
}

.bh-corp-tab--active {
    position: relative;
    background: var(--color-secondary-dark, #003B70);
    /* Figma's active frame carries no border at all; keeping one here (same
       color as the fill) instead of removing it avoids a 1px layout shift
       against its still-bordered neighbors, since box-sizing is border-box. */
    border-color: var(--color-secondary-dark, #003B70);
    /* Decorative line-art background — local asset, not editor-set, so every
       active tab carries the same artwork regardless of content. Scoped to
       this rule rather than the base .bh-corp-tab, so an inactive tab simply
       never gets it — no !important fight needed against the button's own
       solid background-color. */
   /* background-image: url('/assets/NewFolder/Corprit-Active-Menu.svg');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: auto;
    background-size: cover;*/
}

    .bh-corp-tab--active .bh-corp-tab__icon-default {
        display: none;
    }

    .bh-corp-tab--active .bh-corp-tab__icon-active {
        display: inline-flex;
        /* Uploaded icons are navy line-art same as the inactive ones, so on
           the navy active background they'd be invisible — force them white
           the same way .bh-hero-card__icon img already does in
           BusinessHome.css, rather than requiring a separately-colored
           "active" SVG asset per icon. */
        filter: brightness(0) invert(1);
        /* A little bigger than the 44px base once selected, same pairing as
           .product-card.active .product-card__icon (44px → 48px). */
        width: 48px;
        height: 48px;
    }

    .bh-corp-tab--active .bh-corp-tab__name {
        color: var(--color-white, #fff);
    }

/* ---------- Panels ---------- */
.bh-corp-panel {
    display: none;
}

.bh-corp-panel--active {
    display: block;
}

.bh-corp-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* A lone card keeps the same width it would have as one of two (like the
   Personal menu's .menu-header .menu-btn items, which stay a fixed size
   instead of stretching to fill the row) rather than spanning the full
   row's width just because it's alone. */
.bh-corp-cards--1 {
    grid-template-columns: minmax(0, calc(50% - 12px));
    justify-content: center;
}

.bh-corp-cards--3 {
    grid-template-columns: repeat(3, 1fr);
}

.bh-corp-cards--4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ---------- Card ---------- */
.bh-corp-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #CBCBCB;
    border-radius: 16px;
    overflow: hidden;
    background: var(--color-white, #fff);
}

.bh-corp-card__image {
    height: 200px;
    background-color: var(--color-icon-bg, #E8F7F5);
    background-size: cover;
    background-position: center;
}

.bh-corp-card__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px;
    gap: 8px;
}

.bh-corp-card__title {
    margin: 0;
    color: var(--color-secondary-dark, #003B70);
    font-family: Co Headline;
    font-weight: 400;
    font-size: 24px;
    line-height: 150%;
    letter-spacing: 0%;
}

.bh-corp-card__desc {
    margin: 0 0 8px;
    color: #6b7684;
    font-family: Co Headline;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0%;
}

/* ---------- "What we offer" toggle (mirrors .accounts-card__toggle/__list) ---------- */
.bh-corp-card__toggle-wrap {
    border-radius: 11px;
    margin-bottom: 8px;
}

.bh-corp-card__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: #F0F0F0;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-secondary-dark, #003B70);
}
.bh-corp-card__toggle-label {
    color: #003B70;
    font-family: Co Headline;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0%;
}
.bh-corp-card__toggle-icon {
    transition: transform var(--transition-fast, 0.2s ease);
    flex-shrink: 0;
}

.bh-corp-card__toggle[aria-expanded="true"] .bh-corp-card__toggle-icon {
    transform: rotate(180deg);
}

.bh-corp-card__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0 12px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
}

    .bh-corp-card__list.is-expanded {
        max-height: 1000px;
        opacity: 1;
        padding: 16px 12px 14px;
    }

.bh-corp-card__list-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    color: #5F6674;
    font-family: Co Headline;
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 0px;
}

.bh-corp-card__list-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    background-color: var(--color-primary, #00B4A0);
    border-radius: 50%;
    position: relative;
}

    .bh-corp-card__list-icon::after {
        content: '';
        position: absolute;
        width: 7px;
        height: 4px;
        border: solid var(--color-white, #fff);
        border-width: 0 0 1px 1px;
        transform: rotate(-45deg);
        top: 5px;
        left: 4px;
    }

.bh-corp-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 12px 24px;
    border-radius: 999px;
    background: #8BDC64;
    color: #F7FAFA;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    transition: opacity var(--transition-fast, 0.2s ease);
}

    .bh-corp-card__btn:hover {
        opacity: 0.88;
        color: #F7FAFA;
    }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .bh-corp-tabs__grid {
        border: 0px;
        gap: 10px;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        border-radius: 12px;
    }

        .bh-corp-tabs__grid::-webkit-scrollbar {
            display: none;
        }

    .bh-corp-tab {
        /* Keep the 243.2x156 Figma sizing even on the mobile carousel — just
           stop it from stretching to fill, so cells scroll at a fixed size
           instead of growing/shrinking in a scroll container. */
        border: 1px solid #CBCBCB;
        border-radius: 20px;
        flex: 0 0 auto;
    }
}

@media (max-width: 768px) {
    .bh-corp-solutions {
        padding: 32px 16px;
    }

    .bh-corp-solutions__title {
        font-family: Co Headline;
        font-weight: 400;
        font-size: 24px;
        line-height: 150%;
        letter-spacing: 0%;
        text-align: center;
        color: #003B70;
    }

    .bh-corp-cards,
    .bh-corp-cards--1,
    .bh-corp-cards--3,
    .bh-corp-cards--4 {
        grid-template-columns: 1fr;
        justify-content: initial;
    }
    .bh-corp-card__title {
        font-family: Co Headline;
        font-weight: 400;
        font-size: 20px;
        line-height: 150%;
        letter-spacing: 0%;
    }
    .bh-corp-card__desc {
        margin: 0 0 8px;
        color: #6b7684;
        font-family: Co Headline;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0%;
    }
    .bh-corp-card__toggle-label {
        color: #003B70;
        font-family: Co Headline;
        font-weight: 400;
        font-size: 14px;
        line-height: 150%;
        letter-spacing: 0%;
    }

    .bh-corp-card__list-item {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        color: #5F6674;
        font-family: Co Headline;
        font-weight: 300;
        font-size: 14px;
        line-height: 120%;
        letter-spacing: 0px;
    }
}