/**
 * sk-tech — секция пронумерованных принципов педагогики.
 *
 * Sprint S8 / Warm-Platinum. Two-column layout (>=1024): sticky-заголовок слева,
 * ordered list справа. Mobile-first: одна колонка, статичный header.
 *
 * @package SchoolKarjera
 * @since   8.0.0
 */

.sk-tech {
    padding: var(--section-padding-y) var(--section-padding-x);
}

.sk-tech__container {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    gap: var(--sp-12);
}

.sk-tech__header {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.sk-tech__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.sk-tech__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-6);
    padding: var(--sp-6) 0;
    border-top: 1px solid var(--color-border-subtle);
    align-items: start;
}

.sk-tech__item:last-child {
    border-bottom: 1px solid var(--color-border-subtle);
}

.sk-tech__number {
    font-family: var(--font-display);
    font-size: var(--fs-32);
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
    min-width: 3ch;
}

.sk-tech__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.sk-tech__title {
    font-family: var(--font-display);
    font-size: var(--fs-24);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-primary);
    margin: 0;
}

.sk-tech__text {
    font-size: var(--fs-16);
    line-height: var(--lh-relaxed);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Desktop: two-column с sticky-заголовком */
@media (min-width: 1024px) {
    .sk-tech__container {
        grid-template-columns: 1fr 1.5fr;
        gap: var(--sp-16);
        align-items: start;
    }

    .sk-tech__header {
        position: sticky;
        top: var(--sp-16);
    }
}

/* Reduced motion: выключаем sticky для пользователей, которым мешает движение */
@media (prefers-reduced-motion: reduce) {
    .sk-tech__header {
        position: static;
    }
}