/* Zabanisa Reels course-detail sections — v2.
   Loaded only when reels_course_ui=true.  The section layer is intentionally
   visually stronger than individual lesson rows so users immediately read the
   page as a structured course, not one long list. */
.reels-course-sections{
    display:grid;
    gap:13px;
}

.reels-sections-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:2px 2px 1px;
}

.reels-sections-head-copy{min-width:0;}

.reels-sections-title{
    margin:0;
    color:var(--secondary);
    font-size:1.04rem;
    font-weight:950;
    line-height:1.5;
    letter-spacing:-.015em;
}

.reels-sections-subtitle{
    margin:3px 0 0;
    color:var(--text-soft);
    font-size:.74rem;
    font-weight:760;
    line-height:1.7;
}

.reels-sections-total{
    flex:0 0 auto;
    min-height:31px;
    padding:0 11px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,rgba(23,179,159,.10),rgba(53,92,154,.07));
    border:1px solid rgba(23,179,159,.15);
    color:var(--primary-strong);
    font-size:.68rem;
    font-weight:950;
    white-space:nowrap;
}

.reels-section-stack{
    display:grid;
    gap:10px;
}

.reels-section{
    --section-accent:23,179,159;
    position:relative;
    overflow:hidden;
    border-radius:24px;
    background:linear-gradient(135deg,rgba(var(--section-accent),.075),rgba(255,255,255,.985) 48%,#fff 100%);
    border:1px solid rgba(var(--section-accent),.17);
    box-shadow:0 12px 30px rgba(15,23,42,.055),inset 0 1px 0 rgba(255,255,255,.9);
    transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}

/* Keep the palette restrained but give adjacent topics enough identity to
   read as sections at a glance. */
.reels-section:nth-child(3n+2){--section-accent:53,92,154;}
.reels-section:nth-child(3n){--section-accent:136,94,160;}

.reels-section::before{
    content:"";
    position:absolute;
    inset-block:11px;
    inset-inline-start:0;
    width:4px;
    border-radius:0 999px 999px 0;
    background:rgb(var(--section-accent));
    opacity:.82;
}

.reels-section[open]{
    border-color:rgba(var(--section-accent),.30);
    box-shadow:0 16px 38px rgba(15,23,42,.075),inset 0 1px 0 rgba(255,255,255,.92);
}

.reels-section.is-current:not([open]){
    box-shadow:0 13px 32px rgba(15,23,42,.06),0 0 0 1px rgba(var(--section-accent),.045);
}

.reels-section-summary{
    list-style:none;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    display:grid;
    grid-template-columns:50px minmax(0,1fr) auto;
    align-items:center;
    gap:11px;
    min-height:78px;
    padding:11px 12px 11px 15px;
    user-select:none;
}
.reels-section-summary::-webkit-details-marker{display:none;}

.reels-section-index{
    width:50px;
    height:50px;
    border-radius:17px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:0;
    background:linear-gradient(145deg,rgba(var(--section-accent),.15),rgba(var(--section-accent),.065));
    border:1px solid rgba(var(--section-accent),.17);
    color:rgb(var(--section-accent));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 7px 18px rgba(15,23,42,.045);
}
.reels-section-index-label{
    display:block;
    font-size:.51rem;
    line-height:1;
    font-weight:900;
    opacity:.72;
    margin-bottom:2px;
}
.reels-section-index strong{
    display:block;
    font-size:1rem;
    line-height:1.05;
    font-weight:1000;
}

.reels-section[open] .reels-section-index{
    color:#fff;
    border-color:transparent;
    background:linear-gradient(145deg,rgba(var(--section-accent),1),rgba(var(--section-accent),.78));
    box-shadow:0 10px 21px rgba(var(--section-accent),.19),inset 0 1px 0 rgba(255,255,255,.22);
}

.reels-section-copy{
    min-width:0;
    display:grid;
    gap:5px;
}
.reels-section-name{
    color:var(--text);
    font-size:.92rem;
    font-weight:1000;
    line-height:1.58;
    letter-spacing:-.012em;
}
.reels-section-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    color:var(--text-soft);
    font-size:.64rem;
    font-weight:800;
    line-height:1.5;
}
.reels-section-progress-text{color:var(--success);}

.reels-section-side{
    display:grid;
    justify-items:end;
    align-items:center;
    gap:7px;
}
.reels-section-count{
    min-height:24px;
    padding:0 7px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:rgba(255,255,255,.82);
    border:1px solid rgba(var(--section-accent),.12);
    color:rgb(var(--section-accent));
    font-size:.58rem;
    font-weight:950;
    white-space:nowrap;
}
.reels-section-chevron{
    width:29px;
    height:29px;
    border-radius:11px;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.88);
    border:1px solid rgba(var(--section-accent),.12);
    color:rgb(var(--section-accent));
    transition:transform .18s ease,background .18s ease,color .18s ease;
}
.reels-section-chevron svg{width:15px;height:15px;display:block;}
.reels-section[open] .reels-section-chevron{
    transform:rotate(180deg);
    background:rgba(var(--section-accent),.11);
}

.reels-section-progress{
    height:3px;
    margin:-2px 14px 0;
    border-radius:999px;
    overflow:hidden;
    background:#edf2f7;
}
.reels-section-progress>span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,rgba(var(--section-accent),.78),rgb(var(--section-accent)));
}

.reels-section-body{
    padding:5px 11px 13px;
    border-top:1px solid rgba(var(--section-accent),.10);
    background:linear-gradient(180deg,rgba(248,250,252,.72) 0%,#fff 20%);
}
.reels-section-body .lesson-timeline{padding-top:10px;}
.reels-section-body .lesson-row{grid-template-columns:30px minmax(0,1fr);gap:8px;}
.reels-section-body .lesson-order-bubble{width:25px;height:25px;font-size:.68rem;}
.reels-section-body .lesson-item-card{padding:11px 12px;border-radius:18px;gap:8px;}
.reels-section-body .lesson-item-title{font-size:.88rem;line-height:1.62;}
.reels-section-body .lesson-item-context{font-size:.72rem;line-height:1.65;-webkit-line-clamp:1;}
.reels-section-body .lesson-media-state{width:36px;height:36px;border-radius:13px;}
.reels-section-body .lesson-media-state svg{width:18px;height:18px;}
.reels-section-body .lesson-pill{min-height:25px;padding:0 8px;font-size:.64rem;}
.reels-section-body .lesson-entry-btn{min-height:38px;border-radius:14px;font-size:.79rem;}
.reels-section-body .lesson-download-chip{min-width:60px;min-height:26px;padding:0 8px;font-size:.6rem;}

@media(max-width:460px){
    .reels-course-sections{gap:11px;}
    .reels-sections-head{align-items:center;}
    .reels-sections-title{font-size:.98rem;}
    .reels-sections-total{font-size:.62rem;min-height:28px;padding:0 8px;}
    .reels-section{border-radius:21px;}
    .reels-section-summary{
        grid-template-columns:44px minmax(0,1fr) auto;
        min-height:70px;
        gap:9px;
        padding:9px 10px 9px 13px;
    }
    .reels-section-index{width:44px;height:44px;border-radius:15px;}
    .reels-section-index-label{font-size:.47rem;}
    .reels-section-index strong{font-size:.92rem;}
    .reels-section-name{font-size:.86rem;}
    .reels-section-meta{font-size:.6rem;}
    .reels-section-side{gap:5px;}
    .reels-section-count{font-size:.54rem;min-height:22px;padding:0 6px;}
    .reels-section-chevron{width:27px;height:27px;border-radius:10px;}
    .reels-section-body{padding:3px 8px 11px;}
    .reels-section-body .lesson-timeline{padding-top:8px;}
    .reels-section-body .lesson-item-card{padding:10px;border-radius:16px;}
    .reels-section-body .lesson-item-title{font-size:.84rem;}
    .reels-section-body .lesson-item-context{font-size:.68rem;}
}

@media(prefers-reduced-motion:reduce){
    .reels-section,.reels-section-chevron{transition:none!important;}
}