/**
 * Studio Center, курс Luau и библиотека скриптов (ТЗ §49–52).
 *
 * Все страницы раздела делят один файл: шапка, сетка карточек, тело
 * статьи, список уроков, задача с решением и квиз выглядят одинаково
 * в витрине, в уроке и в заготовке скрипта.
 *
 * Раздел построен на тех же карточках и панелях, что и остальной портал:
 * это тот же макет, а не «страница для разработчиков». Все значения —
 * через переменные `tokens.css`.
 */

.studio {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* ── Шапки ───────────────────────────────────────────────────────── */

.studio-hero,
.studio-article__head,
.studio-lesson__head {
    background: var(--bg-violet);
}

.studio-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.studio-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    color: var(--primary);
}

.studio-hero__title {
    margin: var(--space-4) 0 0;
    font-size: var(--fs-h1);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
}

.studio-hero__sub {
    margin: var(--space-3) 0 0;
    max-width: 62ch;
    color: var(--text-secondary);
    line-height: var(--lh-body);
}

.studio-hero__cta {
    margin-top: var(--space-5);
    gap: var(--space-2);
}

.studio-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 76px;
    height: 76px;
    border-radius: var(--radius-panel);
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    color: var(--primary);
}

/* ── Две большие карточки на витрине ─────────────────────────────── */

.studio-start {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-card);
}

.studio-start__item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    text-decoration: none;
    color: inherit;
}

.studio-start__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    color: var(--primary);
}

.studio-start__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.studio-start__label {
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.studio-start__title {
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
}

.studio-start__text {
    font-size: var(--fs-small);
    color: var(--text-secondary);
    line-height: var(--lh-body);
}

.studio-start__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    margin-left: auto;
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--primary);
}

/* ── Сетка разделов ──────────────────────────────────────────────── */

.studio-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.studio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--gap-card);
}

.studio-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.studio-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--bg-cold);
    color: var(--primary);
}

.studio-card__title {
    margin: 0;
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
}

.studio-card__title a {
    color: inherit;
    text-decoration: none;
}

.studio-card__title a:hover {
    color: var(--primary);
}

.studio-card__text {
    margin: 0;
    font-size: var(--fs-small);
    color: var(--text-secondary);
    line-height: var(--lh-body);
}

/* ── Статья раздела ──────────────────────────────────────────────── */

.studio-article,
.studio-lesson {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}

.studio-article__title {
    margin: 0;
    font-size: var(--fs-h2);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
}

.studio-article__lead {
    margin: var(--space-3) 0 0;
    max-width: 72ch;
    color: var(--text-secondary);
    line-height: var(--lh-body);
}

.studio-article__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}

.studio-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.studio-section__title {
    margin: 0;
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
}

.studio-section__text {
    margin: 0;
    max-width: 76ch;
    color: var(--text-secondary);
    line-height: var(--lh-body);
}

.studio-section__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.studio-section__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--text-secondary);
    line-height: var(--lh-body);
}

.studio-section__list svg {
    flex: none;
    margin-top: 4px;
    color: var(--primary);
}

.studio-section__list--num {
    counter-reset: studio-step;
    list-style: none;
}

.studio-section__list--num li {
    counter-increment: studio-step;
    padding-left: 34px;
    position: relative;
}

.studio-section__list--num li::before {
    content: counter(studio-step);
    position: absolute;
    left: 0;
    top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-pill);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
}

/* ── Чек-лист «что должно получиться» ────────────────────────────── */

.studio-checklist__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.studio-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.studio-checklist__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-pill);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
}

.studio-checklist__text {
    color: var(--text-secondary);
    line-height: var(--lh-body);
    padding-top: 2px;
}

/* ── Урок курса ──────────────────────────────────────────────────── */

.studio-lesson__step {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    color: var(--primary);
}

.studio-lesson__title {
    margin: var(--space-4) 0 0;
    font-size: var(--fs-h2);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
}

.studio-lesson__goal {
    margin: var(--space-3) 0 0;
    max-width: 72ch;
    color: var(--text-secondary);
    line-height: var(--lh-body);
}

.studio-lesson__block {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ── Список уроков ───────────────────────────────────────────────── */

.lesson-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.lesson-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 14px 18px;
}

.lesson-list__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: var(--bg-cold);
    color: var(--primary);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
}

.lesson-list__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lesson-list__title {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    text-decoration: none;
}

.lesson-list__title:hover {
    color: var(--primary);
}

.lesson-list__text {
    font-size: var(--fs-small);
    color: var(--text-secondary);
    line-height: var(--lh-body);
}

.lesson-list__chevron {
    flex: none;
    margin-left: auto;
    color: var(--text-muted);
}

/* ── Задача и решение ────────────────────────────────────────────── */

.studio-task__hints {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.studio-task__hints li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--fs-small);
    color: var(--text-secondary);
    line-height: var(--lh-body);
}

.studio-task__hints svg {
    flex: none;
    margin-top: 3px;
    color: var(--text-muted);
}

.studio-solution {
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    background: var(--bg-soft);
}

.studio-solution__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 12px 16px;
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--primary);
    cursor: pointer;
    list-style: none;
}

.studio-solution__summary::-webkit-details-marker {
    display: none;
}

.studio-solution__chevron {
    transition: transform var(--t-fast) var(--ease);
}

.studio-solution[open] .studio-solution__chevron {
    transform: rotate(180deg);
}

.studio-solution__body {
    padding: 0 16px 16px;
}

/* ── Квиз ────────────────────────────────────────────────────────── */

.studio-quiz__item + .studio-quiz__item {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
}

.studio-quiz__question {
    margin: 0 0 var(--space-3);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-body);
}

.studio-quiz__options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
}

.studio-quiz__option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: var(--font-base);
    font-size: var(--fs-small);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.studio-quiz__option:hover {
    border-color: var(--primary);
}

.studio-quiz__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    background: var(--bg-cold);
    color: var(--text-secondary);
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
}

.studio-quiz__option[data-state="right"] {
    border-color: var(--success);
    background: var(--success-soft);
}

.studio-quiz__option[data-state="right"] .studio-quiz__marker {
    background: var(--success);
    color: var(--text-invert);
}

.studio-quiz__option[data-state="wrong"] {
    border-color: var(--danger);
    background: var(--danger-soft);
}

.studio-quiz__option[data-state="wrong"] .studio-quiz__marker {
    background: var(--danger);
    color: var(--text-invert);
}

.studio-quiz__explain {
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.studio-quiz__explain summary {
    cursor: pointer;
    color: var(--primary);
    font-weight: var(--fw-semibold);
}

.studio-quiz__explain p {
    margin: var(--space-2) 0 0;
    line-height: var(--lh-body);
}

/* ── Заготовка скрипта ───────────────────────────────────────────── */

.studio-setup {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.studio-setup__place {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: var(--bg-cold);
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    color: var(--text-primary);
}

.studio-setup__place svg {
    flex: none;
    color: var(--primary);
}

.studio-setup__label {
    margin: var(--space-2) 0 0;
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
}

/* ── Навигация по курсу и соседние разделы ───────────────────────── */

.studio-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-card);
}

.studio-nav__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 14px 18px;
    text-decoration: none;
    color: inherit;
}

.studio-nav__item--next {
    text-align: right;
    justify-content: flex-end;
}

.studio-nav__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.studio-nav__label {
    font-size: var(--fs-micro);
    color: var(--text-muted);
}

.studio-nav__title {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}

.studio-nav__item svg {
    flex: none;
    color: var(--text-muted);
}

.studio-related__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--gap-card);
}

.studio-related__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
}

.studio-related__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--bg-cold);
    color: var(--primary);
}

.studio-related__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.studio-related__title {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}

.studio-related__text {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    line-height: var(--lh-body);
}

.studio-related__item > svg:last-child {
    flex: none;
    margin-left: auto;
    color: var(--text-muted);
}

.studio-note a {
    color: var(--primary);
    font-weight: var(--fw-semibold);
}

/* ── Мобильная композиция ────────────────────────────────────────── */

@media (max-width: 900px) {
    .studio-start,
    .studio-nav {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .studio {
        gap: var(--space-6);
    }

    .studio-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .studio-hero__icon {
        width: 56px;
        height: 56px;
        order: -1;
    }

    .studio-hero__title,
    .studio-lesson__title,
    .studio-article__title {
        font-size: var(--fs-h2);
    }

    .studio-start__item {
        flex-wrap: wrap;
    }

    .studio-start__more {
        margin-left: 0;
    }

    .studio-nav__item--next {
        text-align: left;
        justify-content: flex-start;
    }

    .studio-nav__item--next svg {
        margin-left: auto;
    }
}