#content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
	height: auto;}

#wrapper {
	width: 1200px;
	margin: 40px auto 0px;}
	
.margin-bottom-40 {
	margin: 0 auto 40px;}	
	
.box-news-full {
    position: relative;
	display: flex;
	width: 1200px;
	flex-direction: row;
	flex-wrap: wrap;}	
	
.box-content-in {
	display:flex;
	height: 100%;
	background: var(--bg-surface-inverse);
	border-radius: var(--radius-lg);}

.box-content-in {
  flex-direction: column;
	line-height: 30px;
	font-size:17px;}	
	
.box-content-in ol {
    display: flex;
    flex-direction: column;
    padding: 0px;
    gap:20px;
    list-style: none;              
  counter-reset: my-counter;}

.box-content-in ol li {
    background: var(--secondary-bg-light);
    border-radius: 30px;
    padding: 3.5em 1.5em;
    font-weight: 500;
    position: relative;
    counter-increment: my-counter;}
    
.box-content-in ol li:first-child {
  margin-top: 15px;
}

.box-content-in ol li:last-child {
  margin-bottom: 15px;
}
    
.box-content-in ol li::before {
  content: counter(my-counter);
  position: absolute;
  top: -10px;
  left: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--bg-surface-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}

.box-content-in ul {
    display: flex;
    flex-direction: column;
    gap:10px;}

.box-content-in ul li { 
    font-weight: 500;}	
    
/*кнопка в категорию */
.btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: var(--bg-surface-inverse); 
  border-radius: 15px; 
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12); /* мягкая тень */
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.btn-back:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.18); /* тень при ховере */
  transform: translateY(-2px); /* лёгкий подъём */
}

.btn-back svg {
  width: 28px;
  height: 28px;
  color: #2c2342; /* цвет стрелки */
}

#btnBack {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: fixed; 
  top: 30px;
  left: 86px;
  z-index: 999;
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
  transform: translateY(20px); /* чуть сдвинута вниз при скрытии */
}

#btnBack.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/*контент*/

.box-full-story {
    display:flex;
	flex-direction: row;}

.box-full-story {
    display:flex;
	gap: 60px;
    justify-content: space-between;
	flex-direction: row;}

.box-full-story {
	padding: 0px;}
	
.box-full-story .xfieldimage {
	border-radius:var(--radius-lg);
	}	
	
/*левая колонка*/	

.full-story {
	width: 718px;
    background: var(--bg-surface);
    border-radius: 60px;
    padding: 40px 60px;}
    
.box-center {
    display: flex;
	flex-direction: row;
	text-align: left;
    padding: 0 0 50px 0px;}    
    
.box-center-h1 {
	width: 790px;}    
	
.font15 {
	font-size:15px;}	
	
.post-feature-card-label {
	font-weight: 500;
	color: var(--text-muted);}	
	
.post-feature-card-label a {
	color: var(--text-secondary);}	
	
.title_news {
	font-style: normal;
	font-weight: 900;
	font-size: 45px;
	line-height: 50px;}	
	
.card-label {
display: flex;
gap: 25px;}	

.icon-text {
    display: flex;
    align-items: center;}
    
.icon-pan {
    width: 24px;
    height: 24px;
    margin-right: 10px;}

.icon-pan path {fill: var(--text-secondary);}    

.text-pan {
    font-weight: 500;
    color: var(--text-secondary); }
    
.profile-card {
    display: flex;
	margin-bottom: 40px;}
	
.profile-image {
	line-height: 0px;}

.profile-image img {
    border-radius: 50%;
    width: 80px;
    height: 80px;}
    
    .profile-info {
    margin-left: 25px;}

.profile-info span {
    margin: 0;
    font-size: 18px;
    font-weight: 600;}

.profile-info p {
    font-size: 16px;
    font-weight: 500;
    margin: 0px;
    padding: 0;
    line-height: 1.3;}
    
#foreword {
	font-size: 24px;
    line-height: 1.3;
	margin: 0 0 40px 0;
	font-weight: 600;}    
	
	.img-content-box {
    display: flex;
    flex-direction: column;
    margin: 50px 0;
    border-radius: var(--radius-lg);
    overflow: hidden;}   
    
.red-spoiler {
    background: var(--info-bg);}     
    
.spoiler-alert {
    display: flex;
    align-items: center;
    color: var(--info-fg);
    padding: 20px;
    font-weight: 600;
}

.spoiler-alert img, .spoiler-alert svg {
  width: 24px; /* или другой размер, в зависимости от вашего дизайна */
  height: auto;
  margin-right: 10px;
  padding: 10px;
}

.spoiler-alert path {
  fill: var(--info-fg);
}

.spoiler-alert__icon {
    background: var(--bg-surface-inverse-alpha-2);
    border-radius: 18px;}

.spoiler-alert__text {
  font-size: 16px;
  line-height: 1.35;
  font-weight: 600;
}    

.full-story-text h3, .full-story-text h2 {
	font-size: 32px;
	margin: 40px 0 20px;
	line-height: 1.3;}

.full-story-text h4 {
    margin: 40px 0 15px;
    font-weight:600;
    font-size: 24px;
    line-height: 1.3;}

.full-story-text p {
    text-indent: 1.5em;
	margin: 0 0 24px 0;
	font-weight: 500;}
	
.full-story-text p.no-indent {
    text-indent: 0;}	
	
.full-story-text p > img,
.full-story-text p > span > img {
    width: 100%;
    text-indent: 0;
    display: block;
    margin: 0 auto;
}
	
.full-story-text p:last-child {
    margin: 0px;}	
    
.trailer {
  margin: 0 0 40px 0;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg-2);
  cursor: pointer;
  background: #000;
}

/* Превью */
.trailer-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Кнопка Play сверху */
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: url('/img/video-play.svg') center/60px no-repeat, rgba(0,0,0,.4);
  transform: translate(-50%, -50%);
  pointer-events: none; /* чтобы клик ловила .trailer */
}

/* Когда плеер загружен — прячем превью и кнопку */
.trailer.is-loaded .trailer-thumb,
.trailer.is-loaded .play-button {
  display: none;
}

/* iframe всегда растянут под контейнер */
.trailer iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
    
.img-content {
	position: relative;
    overflow: hidden;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    height: 0;
    padding-bottom: 46%;
    border-radius:var(--radius-lg)}   
    
.image-1100 {
    width: 100%!important;
    height: auto;
    border-radius: 10px;}    
    
.image300, .image-1100 {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    font-family: "object-fit: cover;";
    -o-object-fit: cover;
    object-fit: cover;}    
    
/* ========== Film CTA ========== */
.film-cta{
  background: var(--bg-surface-8);
  color: var(--text-inverse);
  border-radius: var(--radius-lg);
  padding: 2em 1.5em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 50px;
}

.film-cta__text{
  margin: 0;
  max-width: 400px;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
}

.film-cta__btn{
  font-family: 'Manrope', Arial, sans-serif;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding:16px 32px;
  font-weight: 600;
  background:var(--bg-surface-3);font-size: 14px;border-radius: 18px;border: 0px;cursor: pointer;transition: background .3s, transform .2s;
}

.film-cta__btn:hover{
  background: var(--bg-surface-5);transform: translateY(-2px);}
  
 /* ===== СЕТКА СТРАНИЦЫ (строго в неймспейсе .film) ===== */

.film { --gap:20px;}
.film__layout{
  width: 100%;
  margin: 0 auto;
  display: grid;
  gap: var(--gap);
}
.film__main{ min-width: 0; }
.film__aside{ min-width: 0; }

/* mobile: сайдбар первым, блоки в одну колонку */
@media (max-width: 860px){
  .film__layout{
    grid-template-columns: 1fr;
  }
  .film__aside{ order: -1; }
}

/* ===== САЙДБАР ===== */

/* 1) Три метрики */
.fa-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}
.fa-stats li{
  background: var(--bg-surface-2);
    border-radius: var(--radius-lg);
    padding: 15px 0px;
    text-align: center;
}
.fa-stats li strong{
  display: block;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    margin-top: 30px;
}
.fa-stats li small{
  display:block;
  margin-top: 6px;
  font-size: 12px;
  color:var(--text-secondary);
  text-transform: none;
}

/* 2) Заголовки разделов */
.fa-heading{
  margin: 10px 0 15px;
    font-size: 12px;
    font-weight: 600;
}

/* 3) Актёры — один ul, стили на li */
.fa-actors{
  list-style: none;
  margin: 0 0 30px;
  padding: 18px 20px;
  background: var(--bg-surface-2);
  border-radius: var(--radius-lg);
}
.fa-actors li{
  font-size: 16px;
  font-weight: 600;
  padding: 14px 0;
  border-bottom: 2px solid var(--border);
}
.fa-actors li:last-child{
  border-bottom: 0;
  padding-bottom: 6px;
}

/* 4) Чипы жанров — li без классов */
.fa-chips{
  display:flex;
  flex-wrap:wrap;
  gap: 5px;
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}
.fa-chips li{
  padding: 10px 16px;
    border-radius: var(--radius-lg);
    font-weight: 500;
    font-size: 16px;
    color: var(--info-fg);
    background: var(--info-bg);
}

/* 5) Кредиты */
.fa-credits{
  margin-top: 10px;
  font-size: 14px;
}
.fa-credits p{
  margin: 6px 0;
  color: var(--text-secondary);
}
.fa-credits p span{
  color: var(--text-secondary);
  margin-right: 5px;
} 

/*панель взаимодействия под статьей*/

.panel-comun {
	display: flex;
	justify-content: space-between;
	margin-top: 50px;}
	
.panel-button {
	display: flex;
    gap: 10px;}	
    
.share-container {
    position: relative;
    display: inline-block;}
    
.share-container:hover .share-menu {
    display: block;}  
    
.share-button, #shareButton {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    background: var(--bg-surface-4);
    background-image: unset;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--text-secondary);
    transition: background-color 0.3s ease, color 0.3s ease;}    
    
.share-button span {
    margin-right: 10px;
    font-weight: 500;}
    
.share-button img {
    width: 24px;
    height: 24px;}
    
.share-button:hover, #shareButton:hover {
    background: var(--bg-surface-5);}     
    
#shareButton img {
    width: 28px;
    height: 28px;}
    
.share-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-surface-inverse);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    z-index: 1000;
    width: 300px;
    border-radius: 20px;
    font-size: 16px;
    padding: 20px 15px;}

.share-menu a {
    display: flex;
    padding: 10px 15px;
    color: black;
    text-decoration: none;
    transition: background-color 0.3s;
    background-size: 100% 0px;
    align-items: center;
    cursor: pointer;}

.share-menu a:hover {
    background: var(--bg-surface);
    border-radius: 10px;}

.share-menu a img.icon_sh {
    width: 32px;
    height: 32px;
    margin-right: 10px;}   

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

.bp-wrapper-btn-post {display: flex;justify-content: center;margin-top: 30px;}
   
   
	
/* мобильные */
	
@media screen and (max-width: 1200px) {    
    #wrapper {
    width: 100%!important;}
    
.margin-bottom-40 {
    margin: 0 auto 20px!important;}   
    
    .box-news-full {
    width: 100%!important;}
    
.box-content-in {
    width: 100%!important;
    font-size: 17px!important;
    box-sizing: border-box;}    
    
.box-content-in {
    line-height: 27px!important;}    
    
.btn-back {
    width: 50px!important;
    height: 50px!important;
    border-radius:15px!important;
    top:20px!important;
    left:20px!important;}       
    
.box-full-story {
    width: 100%!important;
    flex-direction: column!important;
    padding: 0px!important;}
    
.box-full-story .xfieldimage {
    width: 100%!important;}    
    
.full-story #shareButton img {
    width: 28px!important;}   
    
.full-story {
    width: 100%!important;
    padding: 30px 20px !important;
    box-sizing: border-box;}    
    
.box-center {
    width: 100% !important;
    padding: 0 0 40px 0 !important;}      
    
.title_news {
    font-size: 26px!important;
    line-height: 34px!important;}    
    
#foreword {
    font-size: 20px!important;
    line-height: 30px!important;
    margin: 0 0 24px 0!important;}  
    
.img-content {
    width: 100%!important;
    height: 0px!important;
    padding: 0 0 80%!important;}  
    
.full-story-text h3, .full-story-text h2 {
    line-height: 32px!important;}    
    
.film-cta{
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .film-cta__text { max-width: none; font-size: 16px; }
  .film-cta__btn{ width: 100%; min-width: 0; }  
  
  .bp-wrapper-btn-post {width:100%!important;}

.title-news-more {padding: 0 0 0 20px;box-sizing:border-box;}
    
}