/* ── ODF gallery ───────────────────────────────────────────────────────────
   Full-screen showcase of the global ODF configurations, opened from the
   welcome screen. Sits above the welcome screen (z-index 10000) so closing it
   returns there instead of dropping the user into an empty app. */

.og-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--dc-z-odf-gallery);
    flex-direction: column;
    background: var(--dc-modal-surface);
}

.og-overlay.active { display: flex; }

/* The top bar is the shared .header component — same markup and styling as the
   wizard, the product catalogue and the ODF configurator overlay. Nothing to
   restyle here; only the grid below it needs rules. */

.og-grid {
    flex: 1;
    overflow-y: auto;
    padding: 22px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
    align-content: start;
}

.og-state {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--dc-space-3);
    padding: 30px 0;
    font-size: var(--dc-text-md);
    color: var(--dc-c-muted);
}

.og-state--error { color: var(--dc-c-error); }

/* ── Card ───────────────────────────────────────────────────────────────── */

/* A card is a <button> for keyboard and screen-reader semantics, which means the
   app-wide `button` rule in controls-panel.css paints it accent-green with white
   text. Background and colour are therefore pinned here — on hover too, or
   `button:hover` would turn the card green under the cursor. */
.og-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0;
    background: var(--dc-modal-surface);
    color: inherit;
    border: 1px solid var(--dc-modal-border);
    border-radius: var(--dc-radius-md);
    box-shadow: var(--dc-elev-sm);
    cursor: pointer;
    overflow: hidden;
    font: inherit;
    transition: box-shadow var(--dc-transition-fast), border-color var(--dc-transition-fast),
                transform var(--dc-transition-fast), background var(--dc-transition-fast);
}

.og-card:hover {
    background: var(--dc-modal-surface);
    border-color: var(--dc-c-accent);
    box-shadow: var(--dc-elev-md);
    transform: translateY(-2px);
}

/* Focus ring comes from the app-wide `button:focus-visible` rule. */

.og-card-img {
    width: 100%;
    height: 150px;
    object-fit: contain;
    background: var(--dc-img-placeholder-bg);
    display: block;
}

.og-card-img--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--dc-text-xs);
    color: var(--dc-img-placeholder-icon);
}

.og-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--dc-space-2);
    padding: 12px 14px 14px;
}

.og-card-name {
    font-size: var(--dc-text-md);
    font-weight: 600;
    color: var(--dc-c-dark);
    line-height: 1.3;
}

.og-card-desc {
    font-size: var(--dc-text-xs);
    color: var(--dc-c-muted);
    line-height: 1.45;
}

.og-card-tags,
.og-preview-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dc-space-1);
}

/* .og-tag is .badge .badge--accent .badge--chip now — see js/odf-gallery.js. */

/* ── Preview ────────────────────────────────────────────────────────────── */

.og-preview {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--dc-z-odf-gallery-preview);
    align-items: center;
    justify-content: center;
    background: var(--dc-overlay-backdrop);
    backdrop-filter: blur(var(--dc-overlay-blur));
    padding: 24px;
}

.og-preview.active { display: flex; }

.og-preview-box {
    position: relative;
    display: flex;
    gap: 0;
    width: min(940px, 100%);
    max-height: 100%;
    background: var(--dc-modal-surface);
    border-radius: var(--dc-radius-lg);
    box-shadow: var(--dc-elev-modal);
    overflow: hidden;
}

.og-preview-close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 1;
}

.og-preview-viewer {
    position: relative;
    flex: 1 1 60%;
    min-width: 0;
    min-height: 420px;
    background: var(--dc-img-placeholder-bg);
}

.og-preview-viewer model-viewer {
    width: 100%;
    height: 100%;
    background: var(--dc-img-placeholder-bg);
}

.og-preview-status {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    text-align: center;
    font-size: var(--dc-text-sm);
    color: var(--dc-c-muted);
    pointer-events: none;
}

.og-preview-info {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: var(--dc-space-3);
    padding: 26px 24px;
    border-left: 1px solid var(--dc-modal-divider);
    overflow-y: auto;
}

.og-preview-name {
    font-size: var(--dc-text-lg);
    font-weight: 700;
    color: var(--dc-c-dark);
    line-height: 1.3;
    padding-right: 30px;
}

.og-preview-code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: var(--dc-text-xs);
    color: var(--dc-c-muted);
    word-break: break-all;
}

.og-preview-desc {
    font-size: var(--dc-text-sm);
    color: var(--dc-c-dark);
    line-height: 1.5;
}

.og-preview-actions {
    margin-top: auto;
    padding-top: var(--dc-space-4);
}

.og-preview-actions .btn { width: 100%; justify-content: center; }

/* Narrow screens: stack the viewer above the info panel */
@media (max-width: 780px) {
    .og-preview-box { flex-direction: column; }
    .og-preview-viewer { flex: 0 0 auto; min-height: 300px; }
    .og-preview-info { flex: 1 1 auto; border-left: none; border-top: 1px solid var(--dc-modal-divider); }
}