/* Portfolio (top page) — Exited companies (IPO/M&A only) card grid.
   Fresh component, not built on the legacy .contenedor/#leer/.expand/#tail_disp/#p_list
   grid (that stays in style.css/style2.css, untouched). See tasks.md for the decision. */
.portfolio-section {
    background-color: #F2F2F2;
}

.portfolio-exit-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

/* Fixed-width cards that wrap via flexbox, so the grid naturally reflows into
   however many columns fit (1 on narrow phones, 2-3+ on medium/tablet widths,
   more on wide desktops) instead of jumping between one hardcoded column count
   and another at a single breakpoint. */
.portfolio-exit-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 48px;
    max-width: 1000px;
    margin: 0;
    padding: 40px 0;
    list-style: none;
}

.portfolio-exit-grid>li:nth-child(n+7) {
    display: none;
}

.portfolio-exit-wrap.is-expanded .portfolio-exit-grid>li:nth-child(n+7) {
    display: flex;
}

/* Card is a fixed 300px wide at every size now (desktop and mobile no longer
   differ in width — Amanda's earlier draft was 320px desktop/300px mobile,
   corrected here). Desktop gets a fixed 200px height with the badge absolutely
   positioned in the corner and content bottom-anchored; mobile stays
   auto-height (see the 1280px breakpoint below). */
.portfolio-exit-card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 300px;
    width: 300px;
    height: 200px;
    background-color: #fff;
    border-radius: 0px 16px 16px 16px;
    overflow: hidden;
}

.portfolio-exit-badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex-shrink: 0;
    width: 85px;
    height: 85px;
    padding: 16px 14px;
    border-radius: 0 0 100px 0;
    background: linear-gradient(-45.31deg, #00466D 43.517%, #2A719B 113.63%);
    color: #fff;
    text-align: center;
    overflow: hidden;
}

.portfolio-exit-badge-main {
    font-family: "Avenir Next", sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 18px !important;
    letter-spacing: 2.6px !important;
    white-space: nowrap;
}

.portfolio-exit-badge-qualifier {
    font-family: "Avenir Next", sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 15px !important;
    letter-spacing: 0.8px !important;
    white-space: nowrap;
}

.portfolio-exit-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    padding-bottom: 16px;
}

/* Logo box is now a true square (1:1) instead of a wide rectangle — the
   source images are 1:1, this was misjudged in the earlier draft. */
.portfolio-exit-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
    padding: 0 40px 0 48px;
    margin-bottom: -6px;
}

.portfolio-exit-logo img {
    width: 160px;
    height: 160px;
    object-fit: contain;
}

.portfolio-exit-name {
    padding: 0 16px 0 18px;
    font-family: "Noto Sans JP", sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 16px !important;
    letter-spacing: 0.8px !important;
    color: #14415A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portfolio-exit-more {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 32px 12px;
    border: 2px solid #7DA0BE;
    border-radius: 24px;
    background: transparent;
    color: #14415A;
    font-family: "Noto Sans JP", sans-serif !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    letter-spacing: 0.8px !important;
    line-height: 18px !important;
    cursor: pointer;
}

.portfolio-exit-more-label {
    min-width: 3.4em;
    text-align: center;
}

.portfolio-exit-more svg {
    transition: transform 0.2s ease;
}

.portfolio-exit-wrap.is-expanded .portfolio-exit-more svg {
    transform: rotate(180deg);
}

.portfolio-exit-more:focus-visible {
    outline: 2px solid #14415A;
    outline-offset: 2px;
}

/* Below this, the design switches to the compact mobile card proportions
   (smaller badge/logo/name) — card width stays 300px (unchanged from
   desktop now), but height goes back to auto since mobile cards aren't
   pinned to a fixed 200px like desktop. */
@media (max-width: 1280px) {
    .portfolio-exit-card {
        height: auto;
        min-height: 0;
    }

    .portfolio-exit-badge {
        width: 70px;
        height: 70px;
        padding: 14px 12px 12px;
    }

    .portfolio-exit-badge-main {
        font-size: 14px !important;
        line-height: 14px !important;
    }

    .portfolio-exit-badge-qualifier {
        font-size: 12px !important;
        line-height: 12px !important;
        letter-spacing: -0.2px !important;
    }

    .portfolio-exit-logo {
        height: 116px;
        padding: 0 40px 0 48px;
    }

    .portfolio-exit-logo img {
        width: 116px;
        height: 116px;
    }

    .portfolio-exit-name {
        padding: 0 16px;
        font-weight: 500 !important;
        font-size: 13px !important;
        line-height: 13px !important;
        letter-spacing: 0.6px !important;
    }
}