/*
 * Výpis investic 1:1 dle Bondster .nav-investments
 * (metriky, barvy a breakpointy převzaty z bondster.com style.css v6.0.1;
 * šířky sloupců odpovídají jejich 24sloupcovému gridu)
 */

.investment-nav {
    --invn-border: #dee2e6;
    --invn-muted: #9096ae;
    --invn-light: #edf4f7;
    --invn-secondary: #ECAA14;
    --invn-primary: #2B3663;
    --invn-dark: #08193B;

    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    font-size: 16px;
    line-height: 1.5;
}

.investment-nav__item {
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .investment-nav__item {
        margin-bottom: 0.25rem;
    }
}

/* Řádek = odkaz s šipkou vpravo (nav-investment-item.svg).
   Bez overflow hidden — ořezával by tooltipy vykreslené nad řádkem */
.investment-nav__link {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    font-size: 0.875rem;
    color: #000;
    text-decoration: none;
    background: #fff;
    transition: box-shadow 0.15s ease-in-out;
}

/* Vyšší specificita než globální styly odkazů tématu (Elementor kit) */
.investment-nav a.investment-nav__link,
.investment-nav a.investment-nav__link:hover,
.investment-nav a.investment-nav__link:focus,
.investment-nav a.investment-nav__link:visited {
    color: #000;
    text-decoration: none;
}

.investment-nav a.investment-nav__link:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(8, 25, 59, 0.12);
}

@media (min-width: 768px) {
    .investment-nav__link {
        padding-right: 82px;
        background-color: #fff;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232B3663'%3E%3Cpath d='M5.2 1.6 11.6 8l-6.4 6.4L4 13.2 9.2 8 4 2.8z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 2rem center;
        background-size: 18px;
        border: 1px solid var(--invn-border);
    }

    .investment-nav__link--static {
        background-image: none;
    }
}

/* Obrázek — na mobilu přes celou šířku (poměr 2:1 přes padding-top,
   odolné vůči globálním img stylům tématu), od 768px vlevo přes výšku řádku */
.investment-nav__img {
    position: relative;
    width: 100%;
    padding-top: 50%;
    overflow: hidden;
}

.investment-nav__img img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 768px) {
    .investment-nav__img {
        padding-top: 0;
        min-height: 100px;
    }

    .investment-nav--large .investment-nav__img {
        width: 20.833%;
    }

    .investment-nav--small .investment-nav__img {
        width: 33.333%;
    }
}

@media (min-width: 992px) {
    .investment-nav--large .investment-nav__img {
        width: 16.667%;
    }

    .investment-nav--small .investment-nav__img {
        width: 41.667%;
    }
}

/* Obsahová část řádku (nav-investment-info) */
.investment-nav__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 -0.5rem;
    padding: 0.25rem 1.5rem 1rem;
}

@media (min-width: 768px) {
    .investment-nav__info {
        padding: 1.25rem 0.5rem;
    }
}

@media (min-width: 992px) {
    .investment-nav__info {
        padding-top: 2.1rem;
        padding-bottom: 2.1rem;
    }
}

.investment-nav__title,
.investment-nav__stat {
    box-sizing: border-box;
    width: 100%;
    padding: 0.25rem 0.5rem;
}

.investment-nav__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--invn-primary, #2B3663);
}

.investment-nav__label {
    display: block;
    color: var(--invn-muted);
    white-space: nowrap;
}

.investment-nav__stat strong {
    font-size: 1.125rem;
}

/* Volná částka zarovnaná doprava na všech šířkách (text-end v referenci) */
.investment-nav__stat--free {
    text-align: end;
}

/* Mini progressbar u volné částky (height 4px dle reference) */
.investment-nav__progress {
    display: flex;
    height: 4px;
    margin-top: 0.25rem;
    overflow: hidden;
    background-color: var(--invn-light);
}

.investment-nav__progress span {
    display: block;
    height: 100%;
    background-color: var(--invn-secondary);
}

/* Šířky sloupců: mobil <576px (col-10 / col-4) */
.investment-nav--large .investment-nav__stat--rate,
.investment-nav--large .investment-nav__stat--term {
    width: 41.667%;
}

.investment-nav--large .investment-nav__stat--ltv {
    width: 16.667%;
}

/* ≥576px (col-sm-*) */
@media (min-width: 576px) {
    .investment-nav--large .investment-nav__stat--rate,
    .investment-nav--large .investment-nav__stat--ltv {
        width: 20.833%;
    }

    .investment-nav--large .investment-nav__stat--term,
    .investment-nav--large .investment-nav__stat--free {
        width: 29.167%;
    }

    .investment-nav--small .investment-nav__stat--rate,
    .investment-nav--small .investment-nav__stat--free {
        width: 58.333%;
    }
}

/* ≥992px (col-lg-*) */
@media (min-width: 992px) {
    .investment-nav--large .investment-nav__title {
        width: 29.167%;
    }

    .investment-nav--large .investment-nav__stat--rate {
        width: 16.667%;
    }

    .investment-nav--large .investment-nav__stat--term,
    .investment-nav--large .investment-nav__stat--free {
        width: 20.833%;
    }

    .investment-nav--large .investment-nav__stat--ltv {
        width: 12.5%;
    }

    .investment-nav--small .investment-nav__stat--rate,
    .investment-nav--small .investment-nav__stat--free {
        width: 41.667%;
    }
}

/* Simple varianta — tabulkový výpis bez obrázků (nav-investments-simple),
   používá se pro úvěry se zpětným odkupem */
.investment-nav--simple .investment-nav__info {
    padding: 1rem 1.5rem;
}

@media (max-width: 767.98px) {
    .investment-nav--simple .investment-nav__item {
        margin-bottom: -1px;
    }

    .investment-nav--simple .investment-nav__link {
        border: solid var(--invn-border);
        border-width: 1px 0;
    }
}

@media (min-width: 768px) {
    .investment-nav--simple .investment-nav__info {
        padding: 1.25rem 0.5rem 1.25rem 1rem;
    }
}

/* Hlavičkový řádek se sloupci — jen na desktopu (d-none d-lg-block) */
.investment-nav__item--header {
    display: none;
}

.investment-nav__item--header .investment-nav__link {
    border: 0;
    background-image: none;
    background-color: transparent;
}

.investment-nav__item--header .investment-nav__info {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.investment-nav__item--header .investment-nav__title,
.investment-nav__item--header .investment-nav__stat {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--invn-muted);
}

@media (min-width: 992px) {
    .investment-nav__item--header {
        display: block;
        margin-bottom: 0.25rem;
    }

    /* Labely v řádcích nahrazuje hlavička (d-lg-none v referenci) */
    .investment-nav--simple .investment-nav__item:not(.investment-nav__item--header) .investment-nav__label {
        display: none;
    }
}

/* Šířky sloupců simple varianty: mobil <576px (col-10 / col-9 / col-5) */
.investment-nav--simple .investment-nav__stat--rate {
    width: 41.667%;
}

.investment-nav--simple .investment-nav__stat--term {
    width: 37.5%;
}

.investment-nav--simple .investment-nav__stat--ltv {
    width: 20.833%;
}

/* ≥576px (col-sm-*) */
@media (min-width: 576px) {
    .investment-nav--simple .investment-nav__stat--rate,
    .investment-nav--simple .investment-nav__stat--ltv {
        width: 20.833%;
    }

    .investment-nav--simple .investment-nav__stat--term,
    .investment-nav--simple .investment-nav__stat--free {
        width: 29.167%;
    }
}

/* ≥768px (col-md-*) */
@media (min-width: 768px) {
    .investment-nav--simple .investment-nav__stat--rate,
    .investment-nav--simple .investment-nav__stat--ltv {
        width: 16.667%;
    }

    .investment-nav--simple .investment-nav__stat--term,
    .investment-nav--simple .investment-nav__stat--free {
        width: 25%;
    }
}

/* ≥992px (col-lg-*) — jednořádkové s hlavičkou */
@media (min-width: 992px) {
    .investment-nav--simple .investment-nav__title {
        width: 41.667%;
        font-size: 1.125rem;
    }

    .investment-nav__item--header .investment-nav__title {
        font-size: 0.875rem;
    }

    .investment-nav--simple .investment-nav__stat--rate,
    .investment-nav--simple .investment-nav__stat--term,
    .investment-nav--simple .investment-nav__stat--free {
        width: 16.667%;
    }

    .investment-nav--simple .investment-nav__stat--ltv {
        width: 8.333%;
    }
}

/* LTV tooltip — na mobilu skrytý (d-none d-md-inline-block v referenci) */
.investment-nav__tooltip {
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1px solid var(--invn-muted);
    border-radius: 50rem;
    font-size: 0.5rem;
    font-style: normal;
    vertical-align: 0.15rem;
    cursor: help;
}

@media (min-width: 768px) {
    .investment-nav__tooltip {
        display: inline-flex;
    }
}

.investment-nav__tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    background: var(--invn-dark);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease-in-out;
    z-index: 10;
}

.investment-nav__tooltip:hover::after,
.investment-nav__tooltip:focus::after {
    opacity: 1;
    visibility: visible;
}
