.iugs-wrap {
    --iugs-heading-color: #f8fafc;
    --iugs-title-font-size: 14px;
    --iugs-title-font-weight: 750;
    --iugs-date-font-size: 11px;
    --iugs-date-font-weight: 800;
    --iugs-platform-font-size: 11px;
    --iugs-platform-font-weight: 800;
    --iugs-card-bg: #111827;
    --iugs-card-text: #f8fafc;
    --iugs-border-color: #334155;
    --iugs-border-width: 1px;
    --iugs-card-radius: 12px;
    --iugs-badge-bg: #2563eb;
    --iugs-badge-text: #fff;
    --iugs-badge-radius: 999px;
    --iugs-platform-bg: #334155;
    --iugs-platform-text: #fff;
    --iugs-platform-radius: 999px;
    --iugs-platform-icon-size: 18px;
    --iugs-separator-color: #94a3b8;
    --iugs-separator-size: 18px;
    --iugs-featured-bg: #312e81;
    --iugs-featured-text: #fff;
    --iugs-featured-border: #8b5cf6;
    --iugs-cover-width: 60px;
    --iugs-cover-padding: 8px;
    --iugs-gap: 10px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.iugs-wrap *,
.iugs-wrap *::before,
.iugs-wrap *::after { box-sizing: border-box; }

.iugs-heading {
    margin: 0 0 12px;
    color: var(--iugs-heading-color);
    font-size: clamp(17px, 1.3vw, 21px);
    font-weight: 800;
    line-height: 1.2;
}

.iugs-list { display: flex; flex-direction: column; gap: var(--iugs-gap); }

.iugs-card {
    display: grid;
    grid-template-columns: calc(var(--iugs-cover-width) + (var(--iugs-cover-padding) * 2)) minmax(0, 1fr);
    min-height: calc(var(--iugs-cover-width) * 1.333 + (var(--iugs-cover-padding) * 2));
    overflow: hidden;
    background: var(--iugs-card-bg);
    color: var(--iugs-card-text);
    border: var(--iugs-border-width) solid var(--iugs-border-color);
    border-radius: var(--iugs-card-radius);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
}

.iugs-card.is-featured {
    background: var(--iugs-featured-bg);
    color: var(--iugs-featured-text);
    border-color: var(--iugs-featured-border);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--iugs-featured-border) 25%, transparent);
}

.iugs-card.is-featured .iugs-title { color: var(--iugs-featured-text); }

.iugs-cover-wrap { display: flex; align-items: center; justify-content: center; min-width: 0; padding: var(--iugs-cover-padding); }
.iugs-cover { display: block; width: var(--iugs-cover-width); max-width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; overflow: hidden; border-radius: max(3px, calc(var(--iugs-card-radius) * .55)); }
.iugs-cover-placeholder { display: grid; place-items: center; font-size: 22px; background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.025)); }
.iugs-info { display: flex; min-width: 0; align-items: center; gap: 0; padding: 12px 12px 12px 4px; text-align: left; }
.iugs-row-separator { display: inline-flex; align-items: center; justify-content: center; align-self: center; flex: 0 0 auto; min-width: .62em; margin: 0; padding: 0; color: var(--iugs-separator-color); font-family: Arial, Helvetica, sans-serif; font-size: var(--iugs-separator-size); font-weight: 800; line-height: 1; transform: none; }
.iugs-text-content { display: grid; min-width: 0; flex: 1 1 auto; grid-template-rows: auto auto auto; align-content: center; align-items: start; gap: 7px; }
.iugs-title-row { display: flex; align-items: center; justify-content: flex-start; gap: 6px; width: 100%; min-width: 0; }
.iugs-title { display: block; width: 100%; margin: 0; padding: 0; color: var(--iugs-card-text); font-size: var(--iugs-title-font-size); font-weight: var(--iugs-title-font-weight); line-height: 1.25; overflow-wrap: anywhere; }
.iugs-date-row, .iugs-platform-row { display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 5px; width: 100%; min-width: 0; margin: 0; padding: 0; line-height: 1.25; }
.iugs-date-row { color: var(--iugs-badge-text); font-size: var(--iugs-date-font-size); }
.iugs-platform-row { color: var(--iugs-platform-text); font-size: var(--iugs-platform-font-size); }
.iugs-meta-group { display: inline-flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 5px; min-width: 0; color: inherit; font: inherit; line-height: inherit; }
.iugs-meta-prefix { color: inherit; font-size: inherit; font-weight: 500; line-height: inherit; white-space: nowrap; }
.iugs-date { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 25px; padding: 5px 9px; border-radius: var(--iugs-badge-radius); background: var(--iugs-badge-bg); color: var(--iugs-badge-text); font-size: inherit; font-weight: var(--iugs-date-font-weight); line-height: 1.1; text-align: left; white-space: normal; }
.iugs-date.is-plain { display: inline; min-height: 0; padding: 0; border-radius: 0; background: transparent; color: inherit; line-height: inherit; vertical-align: baseline; }
.iugs-platforms { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; font-size: inherit; }
.iugs-platform-badge { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 23px; padding: 4px 8px; border-radius: var(--iugs-platform-radius); background: var(--iugs-platform-bg); color: var(--iugs-platform-text); font-size: inherit; font-weight: var(--iugs-platform-font-weight); line-height: 1; white-space: nowrap; }
.iugs-platform-icon { display: block; width: var(--iugs-platform-icon-size); height: var(--iugs-platform-icon-size); object-fit: contain; flex: 0 0 auto; }
.iugs-platform-badge.is-icon-only { min-width: 0; min-height: 0; padding: 0; border-radius: 0; background: transparent; color: inherit; }
.iugs-platform-badge.is-icon-only .iugs-platform-icon { width: var(--iugs-platform-icon-size); height: var(--iugs-platform-icon-size); }
.iugs-empty { padding: 14px; border: var(--iugs-border-width) solid var(--iugs-border-color); border-radius: var(--iugs-card-radius); background: var(--iugs-card-bg); color: var(--iugs-card-text); font-size: 13px; line-height: 1.45; }
.iugs-empty small { display: block; margin-top: 7px; opacity: .72; }

@media (max-width: 360px) {
    .iugs-card { grid-template-columns: calc(min(54px, var(--iugs-cover-width)) + (var(--iugs-cover-padding) * 2)) minmax(0, 1fr); }
    .iugs-cover { width: min(54px, var(--iugs-cover-width)); }
    .iugs-info { padding: 9px 8px 9px 2px; }
}

/* Font-family zámerne neurčujeme. Vybraný HTML tag (H1–H6/P/DIV/SPAN) tak môže prevziať typografiu priamo z témy alebo buildera. */