@charset "UTF-8";
/* ===========================================================================
   infohub.help.css  —  stran "Pomoč uporabnikom" (Home/HelpNotLoggedUser)
   ---------------------------------------------------------------------------
   Naloži se ZA infohub.landing.css in uporablja njene spremenljivke, pisavo
   in telefonski okvir (.ih-lp-device). Velikosti so v pikslih
   (Bootstrap 3 ima html{font-size:10px}).
   =========================================================================== */

.ih-hp-sec {
    position: relative;
    padding: clamp(32px,4vw,64px) 0 clamp(48px,5vw,80px);
    overflow: hidden; /* lise in zvezda ne smejo odpreti vodoravnega drsnika */
}

.ih-hp-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: clamp(36px,4vw,64px);
    align-items: center;
}

@media (min-width:992px) {
    .ih-hp-grid {
        grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
    }
}

/* ---------------------------------------------------------------------------
   BESEDILO
   ------------------------------------------------------------------------ */

.ih-lp .ih-hp-title {
    font-size: clamp(38px,5vw,76px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -.035em;
    color: var(--ih-green-600);
}

.ih-hp-title b {
    font-weight: 800;
    color: var(--ih-green-950);
}

.ih-lp .ih-hp-sub {
    margin-top: 18px;
    max-width: 44ch;
    font-size: clamp(18px,1.7vw,25px);
    line-height: 1.4;
    color: #33445a;
}

/* predpona .ih-lp: pravilo `.ih-lp ul{margin:0}` ima sicer večjo težo */
.ih-lp .ih-hp-list {
    display: grid;
    gap: clamp(18px,2vw,28px);
    margin-top: clamp(28px,3vw,44px);
}

.ih-hp-list li {
    display: flex;
    align-items: center;
    gap: clamp(18px,2.2vw,32px);
}

/* velik svetlo zelen krog s polno zeleno ikono */
.ih-hp-ico {
    flex: none;
    width: clamp(84px,8vw,124px);
    height: clamp(84px,8vw,124px);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--ih-green-600);
    background: radial-gradient(circle at 40% 35%, #f8fbf5 0%, var(--ih-mint) 70%);
    box-shadow: 0 8px 22px rgba(47,106,44,.10);
}

    .ih-hp-ico svg {
        width: 46%;
        height: 46%;
    }

.ih-lp .ih-hp-list h2 {
    font-size: clamp(19px,1.7vw,25px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--ih-green-950);
}

.ih-lp .ih-hp-list p {
    margin-top: 8px;
    max-width: 52ch;
    font-size: clamp(15.5px,1.2vw,18px);
    line-height: 1.55;
    color: #4a5a6a;
}

.ih-hp-list p b {
    font-weight: 800;
    color: #2b3a4a;
}

/* ---------------------------------------------------------------------------
   TELEFON IN OKRASJE
   ------------------------------------------------------------------------ */

.ih-hp-visual {
    position: relative;
    isolation: isolate;
    display: flex;
    justify-content: center;
    padding: clamp(24px,3vw,48px) 0;
}

    /* svetlo zelene lise za telefonom */
    .ih-hp-visual::before,
    .ih-hp-visual::after {
        content: "";
        position: absolute;
        z-index: -2;
        border-radius: 50%;
        pointer-events: none;
    }

    .ih-hp-visual::before {
        width: 90%;
        aspect-ratio: 1;
        left: 2%;
        top: 12%;
        background: radial-gradient(circle, rgba(163,204,114,.30) 0%, rgba(163,204,114,.12) 45%, rgba(163,204,114,0) 70%);
    }

    .ih-hp-visual::after {
        width: 60%;
        aspect-ratio: 1;
        right: -12%;
        bottom: -6%;
        background: radial-gradient(circle, rgba(163,204,114,.22) 0%, rgba(163,204,114,0) 68%);
    }

/* svetla ploščica z zvezdo (logotip) za telefonom — Images/Landing/zvezda_svetla.png */
.ih-lp .ih-hp-star {
    position: absolute;
    z-index: -1;
    top: -9%;
    right: -15%;
    width: 62%;
    max-width: none;
    height: auto;
    transform: rotate(-6deg);
    pointer-events: none;
    user-select: none;
}

.ih-hp-device {
    width: min(78%,330px);
    transform: rotate(4deg);
    box-shadow: inset 0 0 0 1.5px #464c52, 0 40px 70px rgba(18,48,28,.28), 0 12px 24px rgba(18,48,28,.16);
}

/* plavajoči znački: vprašaj in oblaček */
.ih-hp-badge {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    background: #fff;
    box-shadow: 0 14px 30px rgba(18,48,28,.16);
}

.ih-hp-badge--q {
    top: 34%;
    right: 3%;
    width: clamp(84px,8vw,118px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: clamp(8px,.8vw,12px) solid var(--ih-mint);
    color: var(--ih-green-600);
    font-family: 'Manrope','Roboto',sans-serif;
    font-size: clamp(52px,5vw,74px);
    font-weight: 800;
    line-height: 1;
}

.ih-hp-badge--chat {
    top: 60%;
    right: 6%;
    width: clamp(64px,6vw,92px);
    aspect-ratio: 1;
    border-radius: 24px;
    color: var(--ih-green-600);
}

    .ih-hp-badge--chat > svg {
        width: 56%;
        height: 56%;
        stroke-width: 2.2;
    }

/* tri kratke svetlo zelene črte ob oblačku */
.ih-hp-rays,
.ih-hp-rays::before {
    position: absolute;
    height: 5px;
    border-radius: 3px;
    background: #72bf2b;
}

.ih-hp-rays {
    width: 22px;
    top: -16px;
    right: 4px;
    transform: rotate(-55deg);
}

    .ih-hp-rays::before {
        content: "";
        width: 18px;
        top: 18px;
        right: -24px;
        transform: rotate(40deg);
    }

@media (max-width:991px) {
    .ih-hp-visual {
        max-width: 480px;
        width: 100%;
        margin-inline: auto;
    }
}

@media (max-width:480px) {
    .ih-hp-list li {
        align-items: flex-start;
    }

    .ih-hp-ico {
        width: 64px;
        height: 64px;
    }

    .ih-hp-badge--q {
        right: 4%;
        width: 64px;
        border-width: 6px;
        font-size: 40px;
    }

    .ih-hp-badge--chat {
        right: 6%;
        width: 52px;
        border-radius: 16px;
    }

    .ih-hp-rays {
        display: none;
    }
}