﻿/* ════════════════════════════════════════════════════════════
   SilverTests · разделы курса на странице курса у ученика (AvailableCourses.aspx), 02.11.2026
   Раздел — <details class="sv-sec">: заголовок (название, какие модули), описание, модули раздела внутри.
   Свёрнут ли раздел сначала — решает учитель («свёрнут у учеников» на «Модулях курсов»).
   Цвета — из main.css (--gold, --cream…), с запасными значениями.
   ════════════════════════════════════════════════════════════ */

/* Прежде модули выводил DataList: между карточками стоял <br /> — ещё одна строка (24px) к mb-3.
   Repeater его не ставит, поэтому отступ задаём здесь: страница без разделов выглядит как раньше. */
.list-modules .card.course-module.mb-3{margin-bottom:calc(1rem + 24px)!important}

.list-modules .sv-sec{margin:0 0 1.75rem;border:1px solid var(--border,#e8d8a0);border-radius:12px;
  background:var(--cream,#fdf6e8);box-shadow:var(--shadow,0 2px 12px rgba(26,22,18,.07))}

.sv-sec > summary{display:flex;align-items:center;gap:14px;padding:14px 18px;cursor:pointer;list-style:none;
  border-radius:12px;-webkit-user-select:none;user-select:none}
.sv-sec > summary::-webkit-details-marker{display:none}
.sv-sec > summary::marker{content:""}
.sv-sec > summary:hover{background:rgba(232,216,160,.28)}
.sv-sec > summary:focus{outline:none}
.sv-sec > summary:focus-visible{outline:2px solid var(--gold,#c9962c);outline-offset:2px}
.sv-sec[open] > summary{border-bottom:1px solid var(--border,#e8d8a0);border-radius:12px 12px 0 0}

.sv-sec__ic{width:40px;height:40px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--gold,#c9962c);color:#fff}
.sv-sec__ic::before{content:"";width:20px;height:20px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.2V17.5a1.8 1.8 0 0 0 1.8 1.8h13.4a1.8 1.8 0 0 0 1.8-1.8V9.3a1.8 1.8 0 0 0-1.8-1.8h-6.6L10.2 5H5.3a1.8 1.8 0 0 0-1.8 1.8Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.2V17.5a1.8 1.8 0 0 0 1.8 1.8h13.4a1.8 1.8 0 0 0 1.8-1.8V9.3a1.8 1.8 0 0 0-1.8-1.8h-6.6L10.2 5H5.3a1.8 1.8 0 0 0-1.8 1.8Z'/%3E%3C/svg%3E") center/contain no-repeat}
.sv-sec__text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.sv-sec__title{font-size:1.35rem;font-weight:700;line-height:1.25;color:var(--ink,#1a1612);overflow-wrap:anywhere}
.sv-sec__meta{font-size:.9rem;line-height:1.35;color:var(--ink-muted,#7a6a52)}
.sv-sec__chev{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--border-dk,#d4b870);background:#fff;
  position:relative;transition:transform .2s}
.sv-sec__chev::before{content:"";position:absolute;left:50%;top:44%;width:8px;height:8px;
  border-right:2px solid var(--gold-dk,#a07820);border-bottom:2px solid var(--gold-dk,#a07820);transform:translate(-50%,-50%) rotate(45deg)}
.sv-sec[open] > summary .sv-sec__chev{transform:rotate(180deg)}

.sv-sec__desc{padding:12px 18px 0 72px;color:var(--ink-mid,#2a2016);line-height:1.5;overflow-wrap:anywhere}
/* модули раздела — с полосой слева от значка раздела */
.sv-sec__body{margin:0 0 0 37px;padding:16px 16px 4px 18px;border-left:3px solid var(--gold-lt,#e8d8a0)}
.list-modules .sv-sec__body > .card.course-module.mb-3{margin-bottom:24px!important}
.list-modules .sv-sec__body > .card.course-module.mb-3:last-child{margin-bottom:14px!important}

@media (max-width:575.98px){
  .sv-sec > summary{padding:12px;gap:10px}
  .sv-sec__desc{padding:10px 12px 0}
  .sv-sec__body{margin-left:10px;padding:12px 8px 2px 10px}
}
@media (prefers-reduced-motion:reduce){ .sv-sec__chev{transition:none} }
@media print{
  .sv-sec{box-shadow:none}
  .sv-sec__chev{display:none}
}
