/* Вкладка занятий зала (T-094). Отдельный файл, только эта страница, подключается после темы зала.
   Цвета, шрифты и скругления приходят из переменных темы (T-092, docs/ARCHITECTURE.md), здесь только разметка.
   Вёрстка как в site.css: flex и то, что умеют Chromium 49 и Firefox 52. */
.cl-title{margin:0 0 10px;font-size:30px;line-height:1.2}
.cl-filters{display:flex;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.cl-filters__chips{flex:0 1 auto;min-width:0}
.cl-filters__group{display:inline-block;margin:0 14px 0 0}
.cl-search{display:flex;flex:1 1 240px;max-width:360px;margin:0 0 6px auto}
.cl-search input{flex:1 1 auto;min-width:0;height:36px;margin:0 6px 0 0;padding:0 10px;background:var(--surface);border:1px solid var(--line);border-radius:3px;color:inherit;font:inherit;font-size:16px}
.cl-search .button{flex:0 0 auto;height:36px;padding:0 14px;font-size:15px;line-height:34px}

.cl__columns{display:flex;flex-direction:row-reverse;align-items:flex-start}
.cl__main{flex:1 1 auto;min-width:0}
.cl__side{flex:0 0 300px;width:300px;margin-left:24px;position:-webkit-sticky;position:sticky;top:12px}

.cl-summary{margin:0 0 10px;color:var(--muted);font-size:15px}
.cl-section{margin:18px 0 0;color:var(--muted);font-family:var(--body-font);font-size:13px;font-weight:bold;letter-spacing:.06em;line-height:1.3;text-transform:uppercase}
.cl-section:first-child{margin-top:0}
.cl-section__note{margin-left:6px;font-weight:normal;letter-spacing:0;text-transform:none}
.cl-month{margin:10px 0 8px;font-size:19px}
.cl-list>.cl-month:first-child{margin-top:0}

/* Занятие */
.cl-row{display:flex;align-items:flex-start;margin:0 0 8px;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:var(--text);text-decoration:none}
.cl-row:hover{color:var(--text);border-color:var(--muted)}
.cl-row__media{position:relative;flex:0 0 132px;width:132px;height:74px;margin:0 14px 0 0;overflow:hidden;background:var(--surface-2);border-radius:4px}
.cl-row__media img{display:block;width:100%;height:100%;object-fit:cover}
.cl-row__initial{display:block;color:var(--muted);font-family:var(--head-font);font-size:28px;line-height:74px;text-align:center}
.cl-row__body{flex:1 1 auto;min-width:0}
.cl-row h3{margin:0 0 3px;font-size:18px;line-height:1.25}
.cl-row__meta{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.cl-row__duration:before{content:" · "}
.cl-status{margin:0 0 0 6px;background:var(--surface-2);vertical-align:1px;font-size:12px}
.cl-row__about{margin:3px 0 0;color:var(--muted);font-size:14px;line-height:1.4}

/* Закрытое: всё видно, приглушено и серое */
.cl-row--closed{background:var(--locked);border-color:transparent;color:var(--locked-text)}
.cl-row--closed:hover{color:var(--locked-text);border-color:var(--locked-text)}
.cl-row--closed h3,.cl-row--closed .cl-row__meta,.cl-row--closed .cl-row__about,.cl-row--closed .cl-status{color:var(--locked-text)}
.cl-row--closed .cl-status{background:none;border:1px solid var(--locked-text)}
.cl-row--closed img{-webkit-filter:grayscale(1);filter:grayscale(1);opacity:.8}
/* Подложка замка лежит на фотографии, а не на теме */
.cl-lock{position:absolute;top:4px;right:4px;width:24px;height:24px;background:rgba(0,0,0,.6);border-radius:50%;color:#fff;line-height:0;text-align:center}
.cl-lock svg{margin-top:5px}

/* Курс: другая карточка */
.cl-course{display:flex;align-items:center;margin:0 0 10px;padding:12px;background:var(--surface);border:2px solid var(--accent);border-radius:var(--radius);-webkit-box-shadow:var(--shadow);box-shadow:var(--shadow);color:var(--text);text-decoration:none}
.cl-course:hover{color:var(--text)}
.cl-course__media{position:relative;flex:0 0 200px;width:200px;height:113px;margin:0 16px 0 0;overflow:hidden;background:var(--surface-2);border-radius:4px}
.cl-course__media img{display:block;width:100%;height:100%;object-fit:cover}
.cl-course__body{flex:1 1 auto;min-width:0}
.cl-course__kind{display:inline-block;margin:0 0 4px;padding:0 8px;background:var(--accent);border-radius:3px;color:var(--accent-text);font-size:13px;font-weight:bold;line-height:1.6}
.cl-course h3{margin:0 0 3px;font-size:19px;line-height:1.25}
.cl-course__meta{margin:0;color:var(--muted);font-size:14px}
.cl-course__about{margin:4px 0 0;color:var(--muted);font-size:14px;line-height:1.4}
.cl-course__offer{flex:0 0 auto;margin:0 0 0 16px;text-align:right}
.cl-course__price{display:block;font-size:20px;font-weight:bold;line-height:1.3;white-space:nowrap}
.cl-course__go{display:block;margin-top:2px;color:var(--link);font-size:14px;text-decoration:underline}

/* Закрытый курс: серый с замком, но своей рамкой и с ценой */
.cl-course--closed{background:var(--locked);border-color:var(--locked-text);color:var(--locked-text);-webkit-box-shadow:none;box-shadow:none}
.cl-course--closed:hover{color:var(--locked-text)}
.cl-course--closed h3,.cl-course--closed .cl-course__meta,.cl-course--closed .cl-course__about{color:var(--locked-text)}
.cl-course--closed .cl-course__kind{background:var(--locked-text);color:var(--locked)}
.cl-course--closed img{-webkit-filter:grayscale(1);filter:grayscale(1);opacity:.8}

.cl-more{margin:14px 0 4px;text-align:center}
.cl-more__back{margin-right:16px}
.load-more-button{display:inline-block;text-decoration:none}

/* Календарь */
.cl-cal{padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.cl-cal__head{display:flex;align-items:center;justify-content:space-between;margin:0 0 6px}
.cl-cal__title{font-weight:bold;text-align:center}
.cl-cal__step{flex:0 0 auto;width:36px;height:36px;border-radius:4px;font-size:17px;line-height:36px;text-align:center;text-decoration:none}
.cl-cal__step--off{opacity:.25}
.cl-cal__grid{width:100%;border-collapse:collapse;table-layout:fixed}
.cl-cal__grid th{padding:2px 0 4px;color:var(--muted);font-size:12px;font-weight:normal}
.cl-cal__day{padding:1px;color:var(--muted);font-size:14px;text-align:center}
.cl-cal__num{display:block;height:38px;line-height:34px}
.cl-cal__weekday{display:none}
.cl-cal__day--outside{opacity:.45}
.cl-cal__day a{position:relative;display:block;border-radius:4px;color:var(--text);font-weight:bold;text-decoration:none}
.cl-cal__day a:hover{background:var(--surface-2)}
.cl-cal__day a:after{content:"";position:absolute;left:50%;bottom:5px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--accent)}
.cl-cal__day--closed a{color:var(--locked-text);font-weight:normal}
.cl-cal__day--closed a:after{background:var(--locked-text)}
/* Сегодня -- число в красном круге, как в календаре главной (T-114); цвет круга -- в site.css рядом с .calendar__today.
   Круг по центру строки чисел (цифра на одной линии с соседними); точка под кругом опущена до низа ячейки,
   иначе круг ее накрывает: ячейка 38 px, а круг кончается на 30-м */
.cl-cal__day--today .cl-cal__num{display:inline-block;width:26px;height:26px;margin:4px 0 8px;border-radius:50%;font-weight:bold;line-height:26px;vertical-align:top}
.cl-cal__day--today a:after{bottom:0}
.cl-cal__day--picked a,.cl-cal__day--picked a:hover{background:var(--accent);color:var(--accent-text)}
.cl-cal__day--picked a:after{background:currentColor}
.cl-cal__note{margin:8px 0 0;color:var(--muted);font-size:13px}

@media (max-width:900px){
.cl__side{flex-basis:260px;width:260px;margin-left:16px}
.cl-course{flex-wrap:wrap}
.cl-course__media{flex-basis:130px;width:130px;height:73px;margin-right:12px}
.cl-course__body{flex-basis:50%}
.cl-course__offer{flex:1 0 100%;display:flex;align-items:baseline;justify-content:space-between;margin:8px 0 0;text-align:left}
}
@media (max-width:640px){
.cl-title{margin-bottom:8px;font-size:24px}
.cl-filters{display:block;margin-bottom:8px}
/* Фильтры в одну строку с прокруткой: высота экрана нужнее */
.cl-filters__chips{overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
.cl-filters__group{margin:0 6px 0 0}
.cl-filters .filters a{margin:0 2px 4px 0;padding:12px 10px;font-size:14px;line-height:18px}
.cl-search{max-width:none;margin:0}
.cl-search input,.cl-search .button{height:44px}
.cl-search .button{line-height:42px}
.cl__columns{display:block}
.cl__side{position:static;width:auto;margin:0 0 12px}
/* Телефон: вместо сетки одна прокручиваемая строка дней с занятиями */
.cl-cal{padding:8px}
.cl-cal__head{margin:0 0 4px}
.cl-cal__step{width:44px;height:44px;line-height:44px}
.cl-cal__grid{display:block}
.cl-cal__grid thead{display:none}
.cl-cal__grid tbody{position:relative;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
.cl-cal__grid tr{display:inline}
.cl-cal__day{display:none}
.cl-cal__day--marked{display:inline-block;width:48px;margin:0 4px 2px 0;padding:0}
.cl-cal__day--outside{display:none}
.cl-cal__weekday{display:block;padding-top:5px;font-size:12px;font-weight:normal;line-height:1.2}
.cl-cal__day a{height:54px;background:var(--surface-2)}
.cl-cal__day .cl-cal__num{height:auto;font-size:16px;line-height:1.3}
/* Круг 24 px по центру строки чисел: 26-й упирался в день недели сверху и в точку снизу */
.cl-cal__day--today .cl-cal__num{width:24px;height:24px;margin:-2px 0 0;line-height:24px}
.cl-cal__day a:after{bottom:3px;width:5px;height:5px;margin-left:-2px}
/* Строки */
.cl-row{padding:8px}
.cl-row__media{flex-basis:96px;width:96px;height:54px;margin-right:10px}
.cl-row h3{font-size:16px}
.cl-row__meta{font-size:13px}
.cl-row__about{max-height:2.8em;overflow:hidden;font-size:13px}
.cl-row__initial{line-height:54px}
.cl-lock{top:3px;right:3px;width:22px;height:22px}
.cl-lock svg{margin-top:4px}
.cl-course{padding:10px}
.cl-course h3{font-size:17px}
.cl-course__media{flex-basis:96px;width:96px;height:54px;margin-right:10px}
.cl-course__about{display:none}
}