/*
 * Copyright (C) 2026 Stefy Lanza <stefy@nexlab.net>
 *
 * AISBF - AI Service Broker Framework || AI Should Be Free
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
.studio-shell {
    --studio-border: color-mix(in srgb, var(--color-border) 70%, transparent);
    --studio-accent-soft: color-mix(in srgb, var(--color-primary) 18%, var(--bg-panel));
    --studio-panel-bg: linear-gradient(180deg, color-mix(in srgb, var(--bg-panel) 92%, white 8%), color-mix(in srgb, var(--bg-page) 82%, var(--bg-panel)));
    display: grid;
    gap: 24px;
}

.studio-hero {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(260px, 1fr);
    gap: 20px;
    align-items: stretch;
}

.studio-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.75rem;
    color: var(--color-link);
    margin-bottom: 12px;
}

.studio-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1;
    margin-bottom: 14px;
}

.studio-subtitle,
.studio-copy {
    color: var(--color-muted);
    line-height: 1.6;
}

.studio-status-card,
.studio-panel {
    background: var(--studio-panel-bg);
    border: 1px solid var(--studio-border);
    border-radius: 20px;
    box-shadow: 0 20px 45px color-mix(in srgb, var(--shadow-lg) 70%, transparent);
}

.studio-status-card {
    padding: 24px;
    display: grid;
    align-content: space-between;
    gap: 16px;
}

.studio-status-label,
.studio-chip {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.studio-status-label {
    color: var(--color-subtle);
}

.studio-status-value {
    font-size: 1.1rem;
    line-height: 1.4;
}

.studio-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 20px;
}

.studio-panel {
    padding: 24px;
}

.studio-panel-emphasis {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--color-link) 20%, transparent), transparent 35%),
        var(--studio-panel-bg);
}

.studio-panel-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
}

.studio-chip {
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--studio-accent-soft);
    color: var(--color-text);
}

.studio-placeholder-list {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

.studio-placeholder-item {
    height: 72px;
    border-radius: 16px;
    background:
        linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-link) 18%, transparent), transparent),
        color-mix(in srgb, var(--bg-input) 86%, var(--bg-panel));
    background-size: 220% 100%;
    animation: studio-sheen 2.8s linear infinite;
    border: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
}

.studio-diagnostics {
    margin-top: 20px;
    min-height: 164px;
    padding: 18px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-input) 86%, var(--bg-panel));
    border: 1px dashed color-mix(in srgb, var(--color-border) 70%, transparent);
    color: var(--color-subtle);
}

@keyframes studio-sheen {
    0% { background-position: 200% 0; }
    100% { background-position: -20% 0; }
}

@media (max-width: 980px) {
    .studio-hero,
    .studio-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .studio-shell {
        gap: 16px;
    }

    .studio-panel,
    .studio-status-card {
        padding: 18px;
        border-radius: 16px;
    }

    .studio-panel-header {
        align-items: flex-start;
        flex-direction: column;
    }
}
