/* tutorial.css */

/* Main layout for the tutorial page */
.tutorial-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem; /* Spacing between video and steps */
    align-items: flex-start; /* Align items to the top */
}

/* Video player container */
.video-container {
    flex: 2; /* Takes up 2/3 of the space */
    min-width: 320px; /* Minimum width for smaller screens */
    position: sticky;
    top: 100px; /* Sticky position below the header */
}

.video-container video {
    width: 100%;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); /* shadow-xl */
    background-color: #e2e8f0; /* bg-slate-200 for loading state */
}

/* Steps container */
.steps-container {
    flex: 1; /* Takes up 1/3 of the space */
    min-width: 300px;
}

.steps-container h2 {
    font-size: 1.5rem; /* slightly smaller by default */
    font-weight: 700; /* font-bold */
    color: #1e293b; /* text-slate-800 */
    margin-bottom: 1rem; /* tighter */
    padding-bottom: 0.75rem; /* pb-3 */
    border-bottom: 2px solid #e2e8f0; /* border-slate-200 */
}

/* Ordered list for steps */
.tutorial-steps {
    list-style: none;
    padding-left: 0;
    counter-reset: step-counter;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* tighter between steps */
}

.tutorial-steps li {
    position: relative;
    padding: 0.75rem 4rem 0.75rem 3rem; /* tighter paddings */
    background-color: #ffffff; /* bg-white */
    border: 1px solid #e2e8f0; /* border-slate-200 */
    border-radius: 0.5rem; /* rounded-lg */
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
    font-size: 0.9rem;
    color: #334155; /* text-slate-700 */
}

.tutorial-steps li:hover {
    background-color: #f8fafc; /* bg-slate-50 */
    border-color: #cbd5e1; /* border-slate-300 */
    transform: translateY(-2px);
}

/* Step number circle */
.tutorial-steps li::before {
    counter-increment: step-counter;
    content: counter(step-counter);
    position: absolute;
    left: 1rem; /* left-4 */
    top: 50%;
    transform: translateY(-50%);
    width: 2rem; /* w-8 */
    height: 2rem; /* h-8 */
    border-radius: 9999px; /* rounded-full */
    background-color: #f1f5f9; /* bg-slate-100 */
    color: #475569; /* text-slate-600 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600; /* font-semibold */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Style for the timestamp */
.step-time {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b; /* text-slate-500 */
    background-color: #f1f5f9; /* bg-slate-100 */
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Active state for the current step */
.tutorial-steps li.active {
    background-color: #eff6ff; /* bg-blue-50 */
    border-color: #2563eb; /* border-blue-600 */
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.tutorial-steps li.active::before {
    background-color: #2563eb; /* bg-blue-600 */
    color: #ffffff; /* text-white */
}

/* Active state for the timestamp */
.tutorial-steps li.active .step-time {
    background-color: #dbeafe; /* bg-blue-100 */
    color: #1d4ed8; /* text-blue-700 */
}


/* Responsive adjustments */
@media (max-width: 992px) {
    .video-container {
        position: static; /* Remove sticky positioning on smaller screens */
        top: auto;
    }
    .tutorial-layout {
        flex-direction: column; /* Stack video and steps vertically */
    }
}

/* --- migrated from inline <style> in template --- */
/* Improve FAQ usability and look */
details > summary {
    cursor: pointer;
    list-style: none;
    padding: .75rem 1rem;
    background: #f8fafc;
    border-radius: .5rem;
}
details > summary::-webkit-details-marker { display: none; }
details[open] > summary { background: #eff6ff; }

/* Step items layout fine-tuning for better readability */
.tutorial-steps li {
    display: grid;
    grid-template-columns: auto 1fr auto; /* 序号 | 标题 | 时间 */
    grid-template-rows: auto auto;       /* 顶部主行 + 底部描述行 */
    grid-template-areas:
        "badge title time"
        "desc  desc  desc";
    align-items: center;
    column-gap: .5rem;
    row-gap: .375rem;
    padding: .5rem .625rem; /* 稍减内边距以更紧凑 */
    border-radius: .5rem;
}
.tutorial-steps li:hover { background: #f8fafc; }
.tutorial-steps li:focus { outline: none; }
.tutorial-steps li:focus-visible { box-shadow: 0 0 0 3px rgba(37,99,235,0.35); background: #f8fafc; }

/* Custom badge for manual numbering (used by template) */
.badge-step {
    grid-area: badge;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #dbeafe; /* blue-100 */
    color: #1d4ed8; /* blue-700 */
    font-weight: 600;
    font-size: .8rem;
}
.tutorial-steps .step-title { grid-area: title; line-height: 1.4; }
.tutorial-steps .step-time { grid-area: time; }
.tutorial-steps .step-desc { grid-area: desc; margin-left: calc(1.5rem + .5rem); }

/* 当屏幕较窄时，描述不再向右缩进，保证文字对齐整齐 */
@media (max-width: 480px) {
    .tutorial-steps .step-desc { margin-left: 0; }
    .steps-container h2 { font-size: 1.25rem; }
    .video-container { position: static; top: auto; }
}

/* Hide original auto counter when badge is present to avoid duplicate markers */
.tutorial-steps li::before { content: none; }