/*!
 * Viewnamic site – Solutions pages (/solutions/, /use-cases/, /industries/, /examples/, industry and
 * use-case pages, example pages). Loads together with use-cases.css, whose .vn-uc-* cards, live
 * example and landing sections these pages reuse; the additions here are .vn-sol-*.
 */

/* ---------- Preview bar (editors, ?vnm_preview=1) ---------- */
/* #8A5A00 on #FFF6E0 ≈ 5.9:1. */
.vn-sol-preview { background: var(--vnm-warning-bg); border-bottom: 1px solid rgba(138, 90, 0, .25); color: var(--vnm-warning); }
.vn-sol-preview__inner { display: flex; align-items: flex-start; gap: .5rem; padding-block: .7rem; font-size: var(--vnm-fs-sm); line-height: 1.5; }
.vn-sol-preview__inner .vn-icon { flex: none; margin-top: .15em; }
.vn-sol-preview__inner p { margin: 0; }
.vn-sol-preview__inner strong { margin-right: .35rem; }

/* ---------- Term cards: planned ("coming soon"), unlinked, sub-categories without a page ---------- */
.vn-uc-case.vn-uc-case--planned { background: var(--vnm-bg-tint); border-style: dashed; border-color: var(--vnm-border-strong); box-shadow: none; }
.vn-uc-case--planned .vn-uc-case__media img { filter: saturate(.55); opacity: .85; }
.vn-uc-case--planned .vn-uc-case__icon { background: var(--vnm-secondary); box-shadow: none; }
.vn-uc-case.vn-uc-case--static:hover { transform: none; box-shadow: var(--vnm-shadow-sm); border-color: var(--vnm-border); }
.vn-uc-case.vn-uc-case--planned:hover { box-shadow: none; border-color: var(--vnm-border-strong); }
.vn-uc-case.vn-uc-case--static:hover .vn-uc-case__media img { transform: none; }
.vn-uc-case__sub.vn-uc-case__sub--plain { border-style: dashed; background: transparent; color: var(--vnm-text-muted) !important; }
.vn-uc-case__sub.vn-uc-case__sub--plain:hover { border-color: var(--vnm-border); background: transparent; }
.vn-uc-case__sub--plain .vn-icon { color: var(--vnm-text-muted); }
.vn-sol-soon { font-size: .8125rem; }

/* Long lists (e.g. all industries): even rows of three, shorter icon-only media. */
@media (min-width: 640px) {
    .vn-uc-cases.vn-sol-cases--even > .vn-uc-cases__item.vn-uc-cases__item:nth-child(n) { grid-column: auto; }
}
@media (min-width: 1000px) {
    .vn-uc-cases.vn-sol-cases--even { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* One media height per row, with or without a card image. */
.vn-sol-cases--even .vn-uc-case__media { aspect-ratio: 2 / 1; }
.vn-sol-cases--even .vn-uc-case__title { font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.375rem); }

/* "EN" hint: the link leads to the English page (German pages only). */
.vn-sol-lang {
    display: inline-block; margin-left: .35em; padding: 0 .35em; vertical-align: .12em;
    border: 1px solid currentColor; border-radius: 4px;
    font-family: var(--vnm-font-heading); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; line-height: 1.45;
    color: var(--vnm-text-muted);
}

/* ---------- Example cards: unlinked, chips ---------- */
.vn-uc-ex.vn-uc-ex--static:hover { transform: none; box-shadow: var(--vnm-shadow-sm); border-color: var(--vnm-border); }
.vn-uc-ex.vn-uc-ex--static:hover .vn-uc-thumb { transform: none; }

/* Industry / use-case chips above the stretched title link. 34px pills; the ::before extends the
   target to 44px (the row gap keeps neighbouring targets apart). */
.vn-sol-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem .5rem; margin: .35rem 0 0; padding: 0; }
.vn-sol-tags > li { display: flex; min-width: 0; }
.vn-sol-tag {
    position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: 34px; max-width: 100%; padding: .25rem .8rem;
    border: 1px solid var(--vnm-border); border-radius: var(--vnm-radius-pill); background: var(--vnm-bg-tint);
    font-family: var(--vnm-font-heading); font-size: var(--vnm-fs-xs); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere;
    color: var(--vnm-secondary) !important; text-decoration: none !important;
    transition: border-color .15s, background-color .15s;
}
a.vn-sol-tag::before { content: ""; position: absolute; inset: -5px 0; }
a.vn-sol-tag:hover { border-color: var(--vnm-secondary); background: var(--vnm-bg-secondary); }
a.vn-sol-tag:focus-visible { outline: none; box-shadow: var(--vnm-focus); }
.vn-sol-tag.vn-sol-tag--plain { background: transparent; color: var(--vnm-text-muted) !important; }

/* ---------- Chips (related terms, siblings, example topics) ---------- */
.vn-chip { max-width: 100%; overflow-wrap: anywhere; }
.vn-chip:focus-visible { outline: none; box-shadow: var(--vnm-focus); }
.vn-chip.vn-sol-chip--plain { border-style: dashed; background: transparent; color: var(--vnm-text-muted) !important; }
.vn-chip.vn-sol-chip--plain:hover { border-color: var(--vnm-border-strong); background: transparent; }
.vn-chip .vn-icon { flex: none; color: var(--vnm-primary-strong); }
.vn-chip[aria-current] .vn-icon { color: #fff; }

/* ---------- Examples hub: "Filter" button, active filters, filter panel, results ---------- */
.vn-sol-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 0 0 1.25rem; }
.vn-sol-filter-btn {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 1.1rem;
    border: 1px solid var(--vnm-border-strong); border-radius: var(--vnm-radius-pill); background: #fff; box-shadow: var(--vnm-shadow-sm);
    font-family: var(--vnm-font-heading); font-size: .9375rem; font-weight: 600; line-height: 1.2; color: var(--vnm-secondary);
    cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.vn-sol-filter-btn[hidden] { display: none; }
.vn-sol-filter-btn:hover { border-color: var(--vnm-secondary); background: var(--vnm-bg-secondary); }
.vn-sol-filter-btn:focus-visible { outline: none; box-shadow: var(--vnm-focus); }
.vn-sol-filter-btn .vn-icon { flex: none; }
/* White on #006666 ≈ 7.6:1. */
.vn-sol-filter-btn[aria-expanded="true"] { border-color: var(--vnm-secondary); background: var(--vnm-secondary); color: #fff; }
.vn-sol-filter-btn__count {
    display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding-inline: .35rem;
    border-radius: var(--vnm-radius-pill); background: var(--vnm-secondary); color: #fff; font-size: .8125rem;
}
.vn-sol-filter-btn__count[hidden] { display: none; }
.vn-sol-filter-btn[aria-expanded="true"] .vn-sol-filter-btn__count { background: #fff; color: var(--vnm-secondary); }
.vn-sol-results { margin: 0 0 1.25rem; text-align: center; font-size: var(--vnm-fs-sm); color: var(--vnm-text-muted); }
.vn-sol-toolbar .vn-sol-results { margin: 0; text-align: start; }
.vn-sol-active { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; flex-basis: 100%; margin: 0; padding: 0; }
.vn-sol-active[hidden] { display: none; }
.vn-sol-active > li { display: flex; max-width: 100%; }
.vn-sol-active__chip {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; max-width: 100%; padding: .35rem .8rem .35rem 1rem;
    border: 1px solid var(--vnm-secondary); border-radius: var(--vnm-radius-pill); background: var(--vnm-bg-secondary);
    font-family: var(--vnm-font-heading); font-size: .875rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere;
    color: var(--vnm-secondary) !important; text-decoration: none !important; cursor: pointer;
    transition: background-color .15s;
}
.vn-sol-active__chip:hover { background: #fff; }
.vn-sol-active__chip:focus-visible { outline: none; box-shadow: var(--vnm-focus); }
.vn-sol-active__chip .vn-icon { flex: none; }
.vn-sol-active__clear, .vn-sol-filter-panel__reset {
    display: inline-flex; align-items: center; min-height: 44px; padding-inline: .25rem;
    font-family: var(--vnm-font-heading); font-size: .875rem; font-weight: 600; color: var(--vnm-secondary); text-underline-offset: .2em;
}
.vn-sol-filter-panel {
    margin: 0 0 1.75rem; padding: clamp(1rem, .75rem + 1vw, 1.5rem);
    border: 1px solid var(--vnm-border); border-radius: var(--vnm-radius-lg); background: #fff; box-shadow: var(--vnm-shadow-sm);
}
.vn-sol-filter-panel[hidden] { display: none; }
.vn-sol-filter-panel__groups { display: grid; gap: 1.25rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.vn-sol-fgroup { min-width: 0; margin: 0; padding: 0; border: 0; }
.vn-sol-fgroup__legend {
    margin: 0 0 .4rem; padding: 0;
    font-family: var(--vnm-font-heading); font-size: var(--vnm-fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--vnm-text-muted);
}
.vn-sol-fgroup__list { list-style: none; display: grid; gap: .1rem; margin: 0; padding: 0; }
.vn-sol-fgroup__sub { padding-inline-start: 1.75rem; }
.vn-sol-check {
    display: flex; align-items: center; gap: .65rem; min-height: 44px; margin-inline: -.5rem; padding: .25rem .5rem;
    border-radius: 10px; font-size: .9375rem; line-height: 1.3; color: var(--vnm-text-strong); cursor: pointer;
}
.vn-sol-check:hover { background: var(--vnm-bg-tint); }
.vn-sol-check input { flex: none; width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--vnm-secondary); cursor: pointer; }
.vn-sol-check input:focus-visible { outline: 2px solid var(--vnm-secondary); outline-offset: 2px; }
.vn-sol-filter-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--vnm-border); }
.vn-sol-empty[hidden], .vn-uc-gallery[hidden] { display: none; }
.vn-uc-gallery + .vn-pagination { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }

/* ---------- Landing pages: trust (customers, hosting, privacy) ---------- */
.vn-sol-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.5rem; margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); }
.vn-sol-trust__list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0; padding: 0; }
.vn-sol-trust__item {
    display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem;
    border: 1px solid var(--vnm-border); border-radius: var(--vnm-radius-pill); background: var(--vnm-bg-tint);
    font-family: var(--vnm-font-heading); font-size: var(--vnm-fs-sm); font-weight: 600; line-height: 1.25; color: var(--vnm-text-strong);
}
.vn-sol-trust__item .vn-icon { flex: none; color: var(--vnm-primary-strong); }
.vn-sol-trust__more {
    display: inline-flex; align-items: center; gap: .35rem; min-height: 44px;
    font-family: var(--vnm-font-heading); font-size: var(--vnm-fs-sm); font-weight: 600; color: var(--vnm-secondary); text-underline-offset: .2em;
}

/* ---------- Landing pages: feature cards (a plan-limited feature shows its note above the title) ---------- */
.vn-sol-features .vn-card__meta { font-family: var(--vnm-font-heading); font-weight: 600; color: var(--vnm-primary-strong); }

/* ---------- Problem / solution and "Static PDF → With Viewnamic" with one side only ---------- */
.vn-problem-solution.vn-sol-ps--single { grid-template-columns: minmax(0, 1fr); max-width: 44rem; margin-inline: auto; }

.vn-sol-transform__before { background: var(--vnm-bg-tint); }
.vn-sol-transform__before .vn-ps__label { color: var(--vnm-text-muted); }
.vn-sol-transform .vn-ps__label { line-height: 1.4; }
.vn-sol-transform__list { list-style: none; display: grid; gap: .6rem; margin: 1.25rem 0 0; padding: 0; }
.vn-sol-transform__list li { display: flex; gap: .65rem; align-items: flex-start; color: var(--vnm-text-muted); }
.vn-sol-transform__list .vn-icon { flex: none; width: 22px; height: 22px; margin-top: .2em; padding: 3px; border-radius: 50%; background: #E3EBEA; color: var(--vnm-text-muted); stroke-width: 2.4; }
.vn-sol-transform .vn-checklist { margin-top: 1.25rem; }

/* ---------- Live demo: more versions of the document ---------- */
.vn-sol-demos { max-width: 1040px; margin: 1.5rem auto 0; }
.vn-sol-demos__title { margin: 0 0 .6rem; font-family: var(--vnm-font-heading); font-size: var(--vnm-fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vnm-text-muted); }
.vn-sol-demos ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.vn-sol-demos li { display: flex; max-width: 100%; }
.vn-sol-demos__link {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; min-height: 44px; max-width: 100%; padding: .4rem 1rem;
    border: 1px solid var(--vnm-border-strong); border-radius: var(--vnm-radius-pill); background: #fff;
    font-family: var(--vnm-font-heading); font-size: var(--vnm-fs-sm); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere;
    color: var(--vnm-secondary) !important; text-decoration: none !important;
    transition: background-color .15s, border-color .15s;
}
.vn-sol-demos__link:hover { background: var(--vnm-bg-secondary); border-color: var(--vnm-secondary); }
.vn-sol-demos__link:focus-visible { outline: none; box-shadow: var(--vnm-focus); }
.vn-sol-demos__lang { font-family: var(--vnm-font-body); font-weight: 400; color: var(--vnm-text-muted); }

/* ---------- Gallery / screenshots ---------- */
.vn-sol-gallery { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, .75rem + 1vw, 1.5rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
.vn-sol-gallery__item { min-width: 0; }
@media (min-width: 640px) {
    .vn-sol-gallery--2, .vn-sol-gallery--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vn-sol-gallery--1 { max-width: 46rem; margin-inline: auto; }
}
@media (min-width: 1000px) { .vn-sol-gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vn-sol-gallery__figure {
    margin: 0; overflow: hidden;
    border: 1px solid var(--vnm-border); border-radius: var(--vnm-radius-lg); background: var(--vnm-bg-secondary); box-shadow: var(--vnm-shadow-sm);
}
.vn-sol-gallery__figure img, .vn-sol-gallery__video { display: block; width: 100%; height: auto; }

/* ---------- Rich text (landing main content, example description, text sections) ---------- */
.vn-sol-prose { overflow-wrap: break-word; }
.vn-sol-prose :where(img) { height: auto; }
.vn-sol-text-image .vn-sol-prose { color: var(--vnm-text-muted); font-size: var(--vnm-fs-lg); }
.vn-sol-text-image .vn-sol-prose :where(strong, h3, h4) { color: var(--vnm-text-strong); }

/* ---------- Example page: industries, use cases and features used ---------- */
.vn-sol-terms { display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .vn-sol-terms { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2rem; } }
.vn-sol-terms__group { min-width: 0; }
.vn-sol-terms__title { margin: 0 0 .75rem; font-size: var(--vnm-fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--vnm-text-muted); }
.vn-chips.vn-sol-terms__chips ul { justify-content: flex-start; }

/* ---------- Main terms: the button straight to the example (one line, shortened when long) ---------- */
.vn-uc-case__example { max-width: 100%; min-width: 0; }
.vn-uc-case__example .vn-icon { flex: none; }
.vn-uc-case__example-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Compact term cards (hubs: everything after the main terms) ---------- */
.vn-sol-minis { list-style: none; display: grid; gap: clamp(.75rem, .5rem + .8vw, 1.25rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin: 0; padding: 0; }
.vn-sol-minis__item { display: flex; min-width: 0; }
.vn-sol-minis__item > * { flex: 1; }
.vn-sol-mini {
    position: relative; display: flex; gap: .9rem; align-items: flex-start; min-width: 0; padding: 1rem;
    border: 1px solid var(--vnm-border); border-radius: var(--vnm-radius-lg); background: #fff; box-shadow: var(--vnm-shadow-sm);
    transition: box-shadow .2s var(--vnm-ease), border-color .2s var(--vnm-ease);
}
.vn-sol-mini:hover { border-color: var(--vnm-border-strong); box-shadow: var(--vnm-shadow-md); }
.vn-sol-mini:has(.vn-sol-mini__link:focus-visible) { box-shadow: var(--vnm-focus); }
.vn-sol-mini__media {
    flex: none; display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden;
    border-radius: 14px; background: var(--vnm-bg-secondary); color: var(--vnm-secondary);
}
.vn-sol-mini__media img { width: 100%; height: 100%; object-fit: cover; }
.vn-sol-mini__media--icon { background: linear-gradient(135deg, var(--vnm-primary) 0%, var(--vnm-secondary) 100%); color: #fff; }
.vn-sol-mini__body { display: flex; flex-direction: column; gap: .35rem; flex: 1; min-width: 0; }
.vn-sol-mini__title { margin: 0; font-size: 1.0625rem; line-height: 1.3; overflow-wrap: anywhere; hyphens: auto; }
.vn-sol-mini__link { color: var(--vnm-text-strong) !important; text-decoration: none !important; }
.vn-sol-mini__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.vn-sol-mini__link:focus-visible { box-shadow: none; }
.vn-sol-mini:hover .vn-sol-mini__link { color: var(--vnm-secondary) !important; }
.vn-sol-mini__text {
    display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    font-size: var(--vnm-fs-sm); line-height: 1.5; color: var(--vnm-text-muted);
}
.vn-sol-mini .vn-sol-tags { margin-top: .25rem; }
.vn-sol-mini__soon { margin: .15rem 0 0; }
.vn-sol-mini.vn-sol-mini--planned { background: var(--vnm-bg-tint); border-style: dashed; border-color: var(--vnm-border-strong); box-shadow: none; }
.vn-sol-mini--planned .vn-sol-mini__media--icon { background: var(--vnm-secondary); opacity: .8; }
.vn-sol-mini--planned .vn-sol-mini__media img { filter: saturate(.55); opacity: .85; }
.vn-sol-mini.vn-sol-mini--static:hover { border-color: var(--vnm-border); box-shadow: var(--vnm-shadow-sm); }
.vn-sol-mini.vn-sol-mini--planned:hover { border-color: var(--vnm-border-strong); box-shadow: none; }

/* ---------- Hero video (landing hero media or example hero) ---------- */
.vn-uc-hero-media video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .vn-sol-tag, .vn-sol-filter-btn, .vn-sol-active__chip, .vn-sol-demos__link, .vn-sol-mini { transition: none; }
}

/* ---------- Print ---------- */
@media print {
    .vn-sol-preview, .vn-sol-toolbar, .vn-sol-filter-panel { display: none !important; }
}