@charset "UTF-8";
/* ===========================================================================
   infohub.packages.css  —  stran s paketnimi ponudbami (Home/PackageInfo)
   ---------------------------------------------------------------------------
   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-pk {
    --pk-ink: #1d2d3f; /* besedilo seznamov – temno modro kot na osnutku */
    --pk-off: #a3aca7; /* izključene funkcije */
    --pk-on: #3f8f2e; /* zelena kljukica */
    --pk-red: #e3342f;
    --pk-blue: #2b6cdf;
    --pk-green: #3f8f2e;
    --pk-note: #eff6ea;
}

/* ---------------------------------------------------------------------------
   GLAVA STRANI
   ------------------------------------------------------------------------ */

.ih-pk-hero {
    padding: clamp(28px,3.4vw,52px) 0 clamp(8px,1.4vw,20px);
}

.ih-pk-hero__grid {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 24px 48px;
    align-items: center;
}

@media (min-width:992px) {
    .ih-pk-hero__grid {
        grid-template-columns: minmax(0,1fr) auto;
    }
}

.ih-lp .ih-pk-title {
    font-size: clamp(34px,4.4vw,62px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: var(--ih-green-700);
}

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

.ih-lp .ih-pk-intro {
    margin-top: 16px;
    max-width: 78ch;
    font-size: clamp(15.5px,1.2vw,18px);
    line-height: 1.55;
    color: #3a4a60;
}

.ih-pk-intro b {
    color: var(--ih-green-800);
    font-weight: 800;
}

/* ročno napisan slogan v svetlo zeleni lisi */
.ih-pk-script {
    position: relative;
    justify-self: center;
    padding: 34px 46px 38px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, #e8f2df 0%, #eef5e7 55%, rgba(238,245,231,0) 72%);
    transform: rotate(-7deg);
}

.ih-lp .ih-pk-script p {
    position: relative;
    max-width: 11ch;
    font-family: 'Caveat',cursive;
    font-size: clamp(28px,2.6vw,40px);
    font-weight: 600;
    line-height: 1.05;
    color: var(--ih-green-800);
    text-align: center;
}
/* zelena poteza pod sloganom */
.ih-pk-script p::after {
    content: "";
    position: absolute;
    left: 22%;
    right: -4%;
    bottom: -12px;
    height: 10px;
    border-bottom: 4px solid var(--ih-green-600);
    border-radius: 0 0 60% 60% / 0 0 100% 100%;
    transform: rotate(-4deg);
}
/* tri kratke črte levo */
.ih-pk-script__rays,
.ih-pk-script__rays::before,
.ih-pk-script__rays::after {
    position: absolute;
    width: 22px;
    height: 5px;
    border-radius: 3px;
    background: #72bf2b;
}

.ih-pk-script__rays {
    left: 4px;
    top: 50%;
}

    .ih-pk-script__rays::before {
        content: "";
        left: 6px;
        top: -24px;
        transform: rotate(38deg);
    }

    .ih-pk-script__rays::after {
        content: "";
        left: 6px;
        top: 24px;
        transform: rotate(-38deg);
    }

@media (max-width:991px) {
    .ih-pk-script {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   MREŽA KARTIC
   ------------------------------------------------------------------------ */

.ih-pk-sec {
    padding: clamp(28px,3vw,44px) 0 clamp(40px,4vw,64px);
}

.ih-pk-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 40px 24px;
    max-width: 560px;
    margin-inline: auto;
}

@media (min-width:1200px) {
    .ih-pk-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
        max-width: none;
        align-items: stretch;
    }
}

/* ---------------------------------------------------------------------------
   KARTICA
   ------------------------------------------------------------------------ */

.ih-pk-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: 24px;
    background: #fff;
    border: 1px solid var(--ih-line);
    border-radius: 26px;
    box-shadow: var(--ih-shadow);
}

    .ih-pk-card.is-popular {
        border: 2px solid #6aa93f;
        box-shadow: 0 10px 24px rgba(47,106,44,.14), 0 26px 56px rgba(47,106,44,.14);
    }

/* "Najbolj priljubljen" */
.ih-pk-badge {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 50%;
    transform: translate(-50%,-55%);
    padding: 9px 24px;
    border-radius: 999px;
    background: linear-gradient(180deg,#4f9a31,#357a25);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(53,122,37,.3);
}

/* Zgornji del: glava (čez celo širino), seznam levo, telefon desno.
   Telefon in glava se v mreži prekrivata — telefon leži na obarvani glavi. */
.ih-pk-card__top {
    display: grid;
    grid-template-columns: minmax(0,1fr) 40%;
    grid-template-rows: auto 1fr;
}

.ih-pk-card__head {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 30px calc(40% + 8px) 36px 28px;
    border-radius: 25px 25px 0 0;
    /* ukrivljen spodnji rob, kot na osnutku */
    clip-path: ellipse(135% 100% at 18% 0%);
}

.ih-lp .ih-pk-card__head h2 {
    max-width: 9ch;
    font-size: clamp(28px,2.15vw,36px);
    -webkit-hyphens: manual;
    hyphens: manual; /* dolge nemške besede imajo v Resources mehke deljaje */
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.02em;
    color: inherit;
}

.ih-lp .ih-pk-card__head p {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.35;
    color: inherit;
    opacity: .92;
}

/* barve glave po paketih */
.ih-pk-card--basic .ih-pk-card__head {
    background: linear-gradient(135deg,#f1f7ec 0%,#e3efd8 100%);
    color: var(--ih-green-950);
}

    .ih-pk-card--basic .ih-pk-card__head p {
        color: #4a5a6a;
        opacity: 1;
    }

.ih-pk-card--standard .ih-pk-card__head {
    background: linear-gradient(135deg,#5e9c34 0%,#2f6a2c 100%);
    color: #fff;
}

.ih-pk-card--premium .ih-pk-card__head {
    background: linear-gradient(135deg,#1f5a34 0%,#0f3320 100%);
    color: #fff;
}

/* seznam funkcij */
/* predpona .ih-lp: pravilo `.ih-lp ul{padding:0}` iz infohub.landing.css ima
   sicer večjo težo in seznam prilepi na levi rob kartice */
.ih-lp .ih-pk-feats {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    padding: 14px 8px 6px 32px;
    list-style: none;
}

.ih-pk-feats li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--pk-ink);
}

.ih-pk-state {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--pk-on);
}

    .ih-pk-state svg {
        width: 15px;
        height: 15px;
        stroke-width: 3.2;
    }

.ih-pk-fico {
    flex: none;
    width: 24px;
    height: 24px;
}

.ih-pk-flabel {
    min-width: 0;
    -webkit-hyphens: manual;
    hyphens: manual;
}

.ih-pk-fico svg {
    width: 100%;
    height: 100%;
    display: block;
}
/* vse ikone vključenih funkcij so zelene (razredi c-red/c-blue ostanejo
   v pogledu, če bi kdaj želeli barvne ikone nazaj) */
.ih-pk-fico,
.ih-pk-fico.c-red,
.ih-pk-fico.c-blue,
.ih-pk-fico.c-green {
    color: var(--pk-green);
}

/* ni vključeno: siva kljukica z x, siva ikona in besedilo */
.ih-pk-feats li.is-off {
    color: var(--pk-off);
    font-weight: 500;
}

    .ih-pk-feats li.is-off .ih-pk-state {
        background: #d3d9d5;
    }

    .ih-pk-feats li.is-off .ih-pk-fico {
        color: #c2c8c4;
    }

/* besedilo samo za bralnike zaslona */
.ih-pk-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* telefon */
.ih-pk-phone {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: relative;
    z-index: 2;
    padding: 22px 18px 0 0;
}

    .ih-pk-phone .ih-lp-device {
        max-width: 220px;
        margin-left: auto;
        padding: 6px;
        border-radius: 30px;
    }

    .ih-pk-phone .ih-lp-device__screen {
        border-radius: 25px;
    }

    .ih-pk-phone .ih-lp-device::before {
        top: 12px;
        width: 7px;
        height: 7px;
        margin-left: -3.5px;
    }

/* ---------------------------------------------------------------------------
   ONEMOGOČENE PLOŠČICE NA POSNETKU ZASLONA
   Položaji so izmerjeni na Screenshot_20260925_132952_info_hub.jpg (1080×2340):
   stolpci od 2,5 %, 35 % in 67,5 % širine (30 % široki),
   vrstici od 49,15 % in 69,44 % višine (16,97 % visoki).
   ------------------------------------------------------------------------ */

.ih-pk-screen {
    position: relative;
}

.ih-pk-off {
    position: absolute;
    width: 30%;
    height: 16.97%;
    border-radius: 9% / 7.4%;
    background: rgba(240,242,240,.72);
    -webkit-backdrop-filter: grayscale(1);
    backdrop-filter: grayscale(1);
}

.ih-pk-off--1 {
    left: 2.5%;
    top: 49.15%;
}

.ih-pk-off--2 {
    left: 35%;
    top: 49.15%;
}

.ih-pk-off--3 {
    left: 67.5%;
    top: 49.15%;
}

.ih-pk-off--4 {
    left: 2.5%;
    top: 69.44%;
}

.ih-pk-off--5 {
    left: 35%;
    top: 69.44%;
}

.ih-pk-off--6 {
    left: 67.5%;
    top: 69.44%;
}

/* ---------------------------------------------------------------------------
   OPOMBA IN GUMB
   ------------------------------------------------------------------------ */

.ih-pk-note {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 22px 24px 0;
    padding: 16px 20px;
    border-radius: 16px;
    background: var(--pk-note);
}

.ih-pk-note__ico {
    flex: none;
    width: 48px;
    height: 48px;
    color: #3c7a2a;
}

    .ih-pk-note__ico svg {
        width: 100%;
        height: 100%;
        display: block;
    }

.ih-lp .ih-pk-note p {
    font-size: 15.5px;
    line-height: 1.45;
    color: var(--pk-ink);
}

.ih-pk-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 16px 24px 0;
    padding: 17px 22px;
    border-radius: 18px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(18,48,28,.18);
    transition: transform .2s var(--ih-ease), box-shadow .2s var(--ih-ease), filter .2s var(--ih-ease);
}

    .ih-pk-btn svg {
        width: 20px;
        height: 20px;
        flex: none;
    }

    .ih-pk-btn:hover,
    .ih-pk-btn:focus {
        transform: translateY(-2px);
        filter: brightness(1.08);
        text-decoration: none;
        box-shadow: 0 14px 28px rgba(18,48,28,.24);
    }

    .ih-pk-btn:focus-visible {
        box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ih-green-300);
    }

/* gumb se stisne na dno kartice, da so vsi trije v isti višini */
.ih-pk-note {
    margin-top: auto;
}

.ih-pk-card__top {
    margin-bottom: 22px;
}

.ih-pk-card--basic .ih-pk-btn {
    background: linear-gradient(180deg,#6f9f37 0%,#4f7f24 100%);
}

.ih-pk-card--standard .ih-pk-btn {
    background: linear-gradient(180deg,#2f7d38 0%,#1f5f2a 100%);
}

.ih-pk-card--premium .ih-pk-btn {
    background: linear-gradient(180deg,#1d5234 0%,#113722 100%);
}

/* ---------------------------------------------------------------------------
   OZKI ZASLONI
   ------------------------------------------------------------------------ */

@media (max-width:420px) {
    .ih-pk-card__head {
        padding: 24px calc(40% + 4px) 30px 20px;
    }

    .ih-lp .ih-pk-feats {
        padding-left: 22px;
    }

    .ih-pk-feats li {
        font-size: 14.5px;
        gap: 8px;
    }

    .ih-pk-state {
        width: 22px;
        height: 22px;
    }

    .ih-pk-fico {
        width: 20px;
        height: 20px;
    }

    .ih-pk-phone {
        padding-right: 12px;
    }

    .ih-pk-note {
        margin-inline: 16px;
        gap: 12px;
        padding: 14px;
    }

    .ih-pk-note__ico {
        width: 38px;
        height: 38px;
    }

    .ih-pk-btn {
        margin-inline: 16px;
        font-size: 16px;
    }
}

@media (prefers-reduced-motion:reduce) {
    .ih-pk-btn, .ih-pk-btn:hover {
        transition: none;
        transform: none;
    }
}