/* секция на всю ширину с жёлтым фоном */
/*.hero-brief {
  background: var(--bg-brand);
  padding-top: clamp(60px, 12vw, 160px);
  padding-bottom: clamp(30px, 15vw, 250px);
  padding-left: clamp(20px, 12vw, 0px);
  padding-right: clamp(20px, 12vw, 0px);
}


.hero-brief__inner{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(40px, 4vw, 40px);
}


.hero-brief__title{
 margin: 0;
font-weight: 900;
line-height: 1.1;
font-size: clamp(28px, 5.2vw, 64px);
}


.hero-brief__rating{
  position: relative;
  flex: 0 0 auto;                      
}


.hero-brief__no{
  position: absolute;
  top: -30px;
  left: 26px;
  font-weight: 800;
  font-size: clamp(42px, 5.2vw, 64px);
  line-height: 1;
}


.hero-brief__card{
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  padding-top: clamp(60px, 4vw, 60px);
  padding-bottom: clamp(30px, 2vw, 40px);
  padding-left: clamp(15px, 2vw, 30px);
  padding-right: clamp(15px, 2vw, 30px);
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 500;
  line-height: 1.45;
  max-width: 280px;                    
}
*/

.traffic {
  padding: clamp(40px, 6vw, 100px) 0;
}

.traffic-box {display: flex; flex-direction: column;gap: 10px;}

.traffic__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: clamp(30px, 5vw, 80px);
  align-items: flex-start;
}

/* Левая колонка — 30% */
.traffic__text {
  flex: 0 0 30%;
  max-width: 360px;
}

/* Правая колонка — 70% */
.traffic__cards {
  flex: 1;
  display: flex;
  gap: 10px;
}

/* Стили текста */
.traffic__title {
  margin: 0 0 24px;
  font-size: clamp(20px, 6vw, 56px);
  font-weight: 800;
  line-height: 1;
}

.traffic__desc {
  margin: 0;
  font-size: clamp(14px, 1.5vw, 16px);
  padding-right: 50px;
  line-height: 1.5;
  font-weight: 500;
}

/* Карточки */
.traffic__card {
  flex: 1;
  background: var(--bg-surface);
  border-radius: 28px;
  padding: 220px 30px 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.traffic__card h3 {
  margin: 0 0 12px;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  width: 70%;
  line-height: 1.2;
}

.traffic__card p {
  margin: 0;
  font-size: clamp(14px, 1.4vw, 14px);
  line-height: 1.5;
  font-weight: 500;
}

/* Контейнер (по желанию) */

/* Вся карточка — кликабельная ссылка */
.cta-card{
  display: flex;
  flex-direction: column;          
  align-items: flex-start;         
  gap: 30px;                        
  padding: 110px 30px 50px;
  background: var(--bg-surface);
  border-radius: 50px;
  text-decoration: none;
  color: var(--text-primary);
}

/* Текстовая часть */
.cta-title{
  margin: 0 0 12px 0;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.2;
  font-weight: 700;
  color: var(--text-primary);
}
.cta-sub{
  margin: 0;
  font-size: clamp(14px, 1.4vw, 14px);
  line-height: 1.5;
  font-weight: 500;
}

/* Пилюля-кнопка справа */
.cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 16px 32px;
  border-radius: 18px;
  background: var(--bg-surface-btn);
  font-size: 14px;
  color: var(--text-surface-btn);
  font-weight: 600;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.cta-btn:hover{
  transform: translateY(-1px);
}

/* карточки */

.brief-grid {margin: 0 0 50px 0;}

/* контейнер 1200px, 2 колонки, gap 20 */
.brief-grid__inner {
  max-width: 1200px;
  margin: 0 auto;

  display: flex;
  flex-wrap: wrap;   
  gap: 20px;
}

.brief-grid__inner > * {
  flex: 1 1 calc(50% - 10px);
  box-sizing: border-box;
}

/* Вся карточка — ссылка */
.bp-card{
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 45px 30px 30px;
  background: var(--bg-surface-2);
  border-radius: 60px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.bp-card:hover{
  transform: translateY(-4px);
}

/* Заголовок */
.bp-title{
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
}

/* Метаданные 2×2 */
.bp-meta {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 15px;
  column-gap: 30px;
  font-size: 14px;
  font-weight: 500;
}
.bp-meta dt {
  font-weight: 600;
}

.bp-meta dd {
  margin: 0;
}

/* Низ: постер + серый капсул с описанием */
.bp-bottom{
  display: grid;
  grid-template-columns: 164px 1fr;
  gap: 16px;
  align-items: center;
}
.bp-poster{
  width:220px; height:auto; object-fit:cover; border-radius:30px; display:block;
}
.bp-summary{
  background: var(--bg-surface-inverse);
  border-radius: 30px;
  padding: 25px;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
}

.bp-wrapper, .bp-wrapper-btn {
  width: 1200px;
  margin: 0 auto;
}



.bp-wrapper-btn {display: flex;justify-content: center;margin-top: 50px;}

.bp-section-title {
    margin: 0 0 35px;
    font-size: clamp(20px, 6vw, 56px);
    font-weight: 800;
    line-height: 1;
}

/*кнопка в библиотеку*/
.bp-btn {
  display: inline-block;
  padding: 32px 64px;
  background: var(--bg-surface-4);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  border-radius: 18px;
  text-decoration: none;
  transition: background .3s, transform .2s;
}

.bp-btn:hover {
  background: var(--bg-surface-5);
  transform: translateY(-2px);
}

/* Карточка подборка */
.cards-wrapper-selection {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.cards-wrapper-selection > * {
  flex: 1 1 calc(33.333% - 10px); /* три колонки, минус кусочек для gap */
  box-sizing: border-box;
}

.card-selection {
  background: var(--bg-surface-2);
  border-radius: 60px;
  padding: 60px 30px 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 420px;
  color: inherit;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}

.card-selection:hover {
  transform: translateY(-4px);
}

.card-title-selection {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 40px;
  width: 80%;
}

.card-image-selection {
  position: relative;
  overflow: hidden;
  display: flex;
    justify-content: center;
}

.card-image-selection img {
  display: block;
  width: 70%;
  height: auto;
  border-radius: 30px;
}

.card-tag-selection {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 16px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 100px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    background: var(--bg-surface-9-alfa);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text-inverse);
}

/*универсальное окно*/

/* ФОН (оверлей) */
.sheet-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.4);
  display:flex; justify-content:flex-start;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
  z-index:2147483647;
}

/* САММ ПРАВЫЙ БОКОВОЙ БЛОК */
.sheet{
  width:450px;
  margin:20px 0 20px 84px;              
  height:calc(100vh - 40px);     
  background:#fff; border-radius:18px;
  display:flex; flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  transform:translateX(40px);      /* выезжает справа */
  transition:transform .25s ease;
  overflow: hidden;
  
}

/* ВНУТРЕННЯЯ СЕТКА */
.sheet-header, .sheet-footer{
  padding:14px 16px; flex:0 0 auto;
  display:flex; align-items:center; gap:10px;
}
.sheet-header{border-bottom:1px solid var(--border);}
.sheet-footer{border-top:1px solid var(--border); justify-content:flex-end}

.sheet-header {margin:0;font-size:18px;font-weight:700}
.sheet-subtitle{margin:12px 0px 15px;font-size:14px;font-weight: 500;color: var(--text-secondary);}

/* Кнопка крестика */
.sheet-close{
  margin-left:auto; width:36px; height:36px; border:none; border-radius:36px;
  background: transparent; cursor:pointer; font-size:18px; line-height:1
}

/* ПРОКРУТКА ТОЛЬКО СЕРЕДИНЫ */
.sheet-body {
  flex:1 1 auto;
  min-height:0;      /* важно для корректного overflow */
  overflow:auto;
  padding:8px 16px 8px;
}

/* Пример списка */
.sheet-list{list-style:none; margin:0; padding:0}
.sheet-item{
  display:flex; align-items: flex-start; gap:12px;
  padding:10px 0px;
}
.sheet-item + .sheet-item{border-top:1px solid #f1f1f4}
.sheet-item .ico{
  width:52px; height:52px; border-radius:50%;
  background:#ddd; flex:0 0 52px; display:grid; place-items:center;
}

.sheet-item .ico img {width:52px; height:52px; border-radius:50%;}
.sheet-item .txt{flex:1 1 auto}
.sheet-item .t1{font-size:15px; line-height:1.3}
.sheet-item .t2{font-size:12px; color:#666; margin-top:4px}
.sheet-item .more{
  border:none; background:transparent; cursor:pointer; font-size:20px; line-height:1; padding:8px
}

/* СОСТОЯНИЕ "ОТКРЫТО" */
.sheet-backdrop[aria-hidden="false"]{opacity:1; pointer-events:auto}
.sheet-backdrop[aria-hidden="false"] .sheet{transform:translateX(0)}

/* конец универсальное окно */

/* боковое меню */

:root{
  --sp-width: 64px;          /* ширина панели */
  --sp-gap: 32px;            /* расстояние между иконками */
  --sp-pad: 16px;            /* внутренние отступы */
  --sp-line: #e6e6e9;        /* цвет разделительной линии */
  --sp-icon: #0f0d1f;        /* цвет иконок */
  --sp-icon-hover: #1f1a3a;  /* при наведении */
}

.side-panel{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;                 /* во всю высоту окна */
  width: var(--sp-width);
  padding: var(--sp-pad) 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;/* верх–низ */
  align-items: center;
  background: #fff;
  border-right: 1px solid var(--sp-line);
  z-index: 1000;
}

.sp-item svg {
  width: 26px;
  height: 26px;
  color: currentColor; /* SVG возьмёт цвет ссылки */
}

.sp-item{
  width: 44px;                  
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--sp-icon);
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
  margin: var(--sp-gap) 0;       /* вертикальные интервалы */
  cursor: pointer;
  border: 0px;
}

.sp-item:hover{
  background: #f4f5f9;
  color: var(--sp-icon-hover);
  transform: translateY(-1px);
}

/* блок ссылок*/
.settings-container {
    background: var(--bg-surface-2);
    border-radius: 18px;
    padding: 10px 15px;
}

.settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background-color 0.3s;
    text-decoration: none;
}

.settings-item:last-child {
    border-bottom: none;
}

.item-label {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

.item-arrow {
    width: 24px;
    height: 24px;
    background-image: url("/img/arrow-right.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease; /* Добавляем плавный переход для перемещения */
}

.settings-item:hover .item-arrow {
    transform: translateX(5px); /* Смещение стрелки вправо на 5px при наведении на блок */
}

/*Навигация*/

.navigation {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top:50px;}
	
.pages span {
    display: inline-flex;
    align-items: center;
	justify-content: center;
    width: 50px;
    height: 50px;
	border-radius: 50px;
	background: var(--bg-surface-11);
    color: var(--text-inverse);
    font-weight: 500;}

.pages a {
	display: inline-flex;
    align-items: center;
	justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 40px;
	color: var(--text-primary);}

.pages a:hover {
	background-color: var(--bg-surface-4);}	
	
.box-box {
    width:1200px;
    margin: 0 auto;}  	
	
.rootTitle {
	display: flex;
    justify-content: flex-start;
    font-weight: 800;
    font-size: 34px;
    line-height: 40px;
    height: 40px;
    color: rgba(0,0,0);
    align-content: flex-start;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 0 0 30px 0;
}


@media (max-width: 1199px){
  .side-panel{display: none !important;}
  
.cards-wrapper-selection {
  width: 100%!important;
  flex-direction: column;}
  
.rootTitle {
    font-size: 20px!important;
    margin: 0px 0 20px 0!important;}  
  
}


/* мобильная раскладка: плашка под заголовком слева */
@media (max-width: 900px){
    
.bp-wrapper, .bp-wrapper-btn {width:100%!important;}
    
  .hero-brief__inner{
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-brief__rating{
    margin-top: 8px;
  }
  
  .hero-brief__no{
  top: -20px;
  left: 15px;}
  
  .hero-brief__card {max-width:100%!important;}
  
    .traffic__inner {
    flex-direction: column;
  }
  .traffic__text {
    flex: 1 1 auto;
    max-width: none;
    max-width: none;
    padding: 0px 20px;
    box-sizing: border-box;
  }
  .traffic__cards {
    flex-direction: column;
    width: 100%;
    padding: 0px 20px;
    box-sizing: border-box;
  }
  
  .traffic__desc {
  padding-right: 0px!important;}
  
  .traffic__card {padding: 60px 30px 20px!important;}
  
  .traffic__card h3 {width: 100%!important;}
  
  .cta {
    width: 100%!important;
    padding: 0px 20px;
    box-sizing: border-box;}

.cta-card{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 60px 30px 30px;
  }
  .cta-btn{ margin-top: 4px; width: 100%; width: 100%!important; box-sizing: border-box;}
  
  /*карточки*/
  .brief-grid {margin: 0 0 50px 0!important;}
  .brief-grid__inner > * {flex: 1 1 100%!important;}
  .bp-bottom{ grid-template-columns: 120px 1fr; }
  .bp-poster{ width:120px; height:160px; }
  .bp-title {font-size: 20px!important;}
  .bp-card {gap:25px!important; padding: 45px 20px 25px!important;}
  .bp-meta {row-gap: 10px!important;}
  
  /*заголовок*/
  .bp-section-title {padding: 0 20px;}
  
  /*карточка подборка*/
  .card-selection {min-height: 380px!important;padding: 60px 20px 80px!important;}

.box-box {
    width: 100%!important;
    box-sizing: border-box;}  
 
}

@media (max-width: 600px){
  .sheet{
    width:100%; height:100vh; margin:0; border-radius:0;
  }
}