/* Zency Info-popup v2 (pilot 2026-09-05) — kun aktiv når panelet har .is-zip2.
   Farver/fonts via sitets tokens med fallbacks (grid.css-konvention). */

.zbg-info-modal__panel.is-zip2 .zbg-info-modal__header {
    align-items: flex-start;
    gap: 14px;
    padding: 20px 52px 14px 20px;
}
.zbg-info-modal__panel.is-zip2 .zbg-info-modal__avatar {
    width: 64px;
    height: 64px;
    border-width: 2px;
    border-color: var(--color-sage-100, #e5edea);
}
.zbg-info-modal__panel.is-zip2 .zbg-info-modal__name {
    font-size: 20px;
    font-weight: 400;
    margin: 2px 0 3px;
}
.zbg-i2__tagline {
    font-family: var(--font-source, "Source Sans 3", "Source Sans Pro", system-ui, sans-serif);
    font-size: 14.5px;
    line-height: 1.35;
    color: var(--color-sage-700, #3d4f4b);
}
.zbg-info-modal__panel.is-zip2 .zbg-info-modal__body {
    padding: 0 20px 18px;
}

.zbg-i2 {
    font-family: var(--font-source, "Source Sans 3", "Source Sans Pro", system-ui, sans-serif);
    color: var(--color-ink, #20211e);
    font-size: 15px;
    line-height: 1.45;
}

/* Trust-linjen: tal med kilde, aldrig grafik alene */
.zbg-i2__trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 13.5px;
    color: var(--color-ink-soft, #4a4d47);
}
.zbg-i2__trust b { font-weight: 600; color: var(--color-ink, #20211e); }
.zbg-i2__dot { color: var(--color-line, #e2ddd2); }
.zbg-i2__star { color: var(--color-gold, #ebc144); }
.zbg-i2__muted { color: var(--color-ink-soft, #4a4d47); }

/* Eyebrow — samme spec som .z-eyebrow (Dosis, uppercase, tracking) */
.zbg-i2__eb {
    font-family: var(--font-dosis, "Dosis", system-ui, sans-serif);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 11px;
    color: var(--color-sage-500, #59736e);
    margin: 18px 0 8px;
}

/* Varighed */
.zbg-i2__seg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    border: 1.5px solid var(--color-sage-500, #59736e);
    border-radius: 12px;
    overflow: hidden;
}
.zbg-i2__segbtn {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 7px 4px;
    border: 0;
    border-right: 1.5px solid var(--color-sage-500, #59736e);
    background: #fff;
    font-family: var(--font-dosis, "Dosis", system-ui, sans-serif);
    font-size: 13px;
    line-height: 1.2;
    color: var(--color-sage-700, #3d4f4b);
    text-align: center;
    cursor: pointer;
}
.zbg-i2__segbtn:last-child { border-right: 0; }
.zbg-i2__segbtn b { display: block; font-weight: 700; font-size: 15px; }
.zbg-i2__segbtn.is-on { background: var(--color-sage-500, #59736e); color: #fff; }
.zbg-i2__segbtn:focus-visible { outline: 2px solid var(--color-olive-dark, #615531); outline-offset: -2px; }
.zbg-i2__seg--single .zbg-i2__segbtn { cursor: default; }

/* Tider */
.zbg-i2__slots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.zbg-i2__slots[hidden] { display: none; }
.zbg-i2__slot {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 7px 12px;
    border: 1.5px solid var(--color-sage-500, #59736e);
    border-radius: 10px;
    background: #fff;
    font-family: var(--font-dosis, "Dosis", system-ui, sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    color: var(--color-sage-700, #3d4f4b);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s;
}
.zbg-i2__slot small {
    display: block;
    font-weight: 400;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
}
.zbg-i2__slot:hover,
.zbg-i2__slot:focus-visible { background: var(--color-sage-500, #59736e); color: #fff; outline: 0; }
.zbg-i2__slot--all { border-style: dashed; }
.zbg-i2__noslots {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--color-ink-soft, #4a4d47);
}

/* Om */
.zbg-i2__bio {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.zbg-i2__bio.is-open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.zbg-i2__more {
    appearance: none;
    -webkit-appearance: none;
    margin: 4px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    color: var(--color-sage-700, #3d4f4b);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* Fold-ud */
.zbg-i2__details { margin-top: 16px; }
.zbg-i2__d { border-top: 1px solid var(--color-line, #e2ddd2); }
.zbg-i2__d:last-child { border-bottom: 1px solid var(--color-line, #e2ddd2); }
.zbg-i2__d summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 0;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--color-ink, #20211e);
}
.zbg-i2__d summary::-webkit-details-marker { display: none; }
.zbg-i2__d summary::after {
    content: "+";
    font-family: var(--font-dosis, "Dosis", system-ui, sans-serif);
    font-size: 20px;
    line-height: 1;
    color: var(--color-sage-500, #59736e);
}
.zbg-i2__d[open] summary::after { content: "–"; }
.zbg-i2__count { font-weight: 400; color: var(--color-ink-soft, #4a4d47); margin-left: 8px; flex: 1 1 auto; }
.zbg-i2__in { padding: 0 0 14px; font-size: 14.5px; color: var(--color-ink, #20211e); }

.zbg-i2__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.zbg-i2__chip {
    font-size: 13.5px;
    line-height: 1.25;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--color-sage-100, #e5edea);
    color: var(--color-sage-700, #3d4f4b);
}
.zbg-i2__chip.is-on { background: var(--color-sage-500, #59736e); color: #fff; }

.zbg-i2__list { list-style: none; margin: 0; padding: 0; }
.zbg-i2__list li { padding: 3px 0; line-height: 1.4; }

.zbg-i2__prak { display: grid; gap: 8px; }
.zbg-i2__prak > div { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; }
.zbg-i2__prak svg { width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--color-sage-500, #59736e); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.zbg-i2__link { color: var(--color-sage-700, #3d4f4b); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 480px) {
    .zbg-info-modal__panel.is-zip2 .zbg-info-modal__header { padding: 18px 48px 12px 16px; }
    .zbg-info-modal__panel.is-zip2 .zbg-info-modal__body { padding: 0 16px 14px; }
    .zbg-info-modal__panel.is-zip2 .zbg-info-modal__avatar { width: 60px; height: 60px; }
}