/*
Theme Name: Ruteatr
Theme URI: https://ruteatr.ru/
Author: Digital Life
Author URI: https://ruteatr.ru/
Description: 
Version: 0.1.0
Text Domain: ruteatr
*/



html {
	scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-family: 'Futura PT', sans-serif;
}

.content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.header {
    background-color: #212121;
}

.header .content {
    display: grid;
    gap: 20px;
    grid-template-columns: 150px 1fr 150px;
}

.header .header-center nav ul {
    display: flex;
    justify-content: space-evenly;
}

.header .header-center nav ul li {
    list-style: none;
}

.header .header-center nav ul li a {
    text-decoration: none;
    color: #212121;
    font-size: 22px;
    
    line-height: 1.55;
    font-weight: 400;
}

.header .header-center nav ul li a:hover {
    color: #ef0601 ;
}

.header .header-center {
    background: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.header .header-center h1 { 
    color: #3d3d3d;
    font-size: 81px;
    font-family: 'Elisabethische', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
}

.header .header-center .afisha-links {
    margin: 0 auto;
}

.header .header-center .afisha-links a {
    background: #ef0601;
    border: 1px solid #ef0601;
    color: #fff;
    padding: 18px 50px;
    text-decoration: none;
    font-size: 22px;
    margin: 40px auto;
    width: fit-content;
    text-transform: uppercase;
    font-family: 'Futura PT', sans-serif;
    font-weight: 400;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.header .header-center .afisha-links a:nth-child(2) {
    background-color: transparent;
    border: 1px solid #ef0601;
    color: #ef0601;
}

.header .header-center .afisha-links a:nth-child(1):hover {
    background-color: #800200;
}

.header .header-center .afisha-links a:nth-child(2):hover {
    background-color: #800200;
    color: #fff;
}

.header-left, .header-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
}

.afisha {
    background-color: #212121;
    color: #fff;
    padding-bottom: 40px;
}

.afisha h2 {
    vertical-align: middle;
    color: #ffffff;
    font-size: 45px;
    font-family: 'Elisabethische', sans-serif;
    line-height: 1.55;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 70px;
    display: flex;
    gap: 20px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
}

.afisha-item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 26px;
    justify-content: space-between;
}

.afisha-item .afisha-post {
    background-size: cover;
    background-position: center;
    padding: 32px 26px;
    color: #fff;
    width: 27%;
    position: relative; /* для псевдо-элемента затемнения */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

/* Псевдо-элемент для затемнения фона вместо filter/opacity на всём блоке */
.afisha-item .afisha-post::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6); /* степень затемнения настраиваемая */
    z-index: 0;
}

/* Контент поверх затемнения */
.afisha-item .afisha-post h3,
.afisha-item .afisha-post .afisha-content {
    position: relative;
    z-index: 1;
}


.afisha-item .afisha-post a {
    background: #ef0601;
    border: 1px solid #ef0601;
    padding: 12px 18px;
    text-decoration: none;
    color: #fff;
    position: relative;
    z-index: 1;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 12px;
    border-radius: 4px;
    line-height: 1.55;
    font-weight: 400;
}

.afisha-item .afisha-post a:hover {
    background-color: #800200;
}


.afisha-links {
    margin-top: 26px;
}

.afisha-links a:nth-child(2) {
    background-color: transparent;
    border: 1px solid #ef0601;
    border-radius: 4px;
}

.afisha-links a:nth-child(2):hover {
    background-color: #800200;
}


.afisha-item article h3 {
    font-size: 24px;
    font-family: 'Elisabethische', sans-serif;
    line-height: 1.55;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 10px;
}


.about .content {
    display: grid;
  	grid-template-columns: 1fr 1fr;
	gap: 20px;
    margin-bottom: 40px;
}

.about .content h2 {
    color: #3d3d3d;
    font-size: 62px;
    font-family: 'Elisabethische', sans-serif;
    font-weight: 400;
    margin-bottom: 0;
}

.about .content div {
    padding: 20px;
}

.about .content p {
    color: #000000;
    font-size: 20px;
    font-family: 'Futura PT', sans-serif;
    line-height: 1.55;
    font-weight: 400;
} 

.about .content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about .content section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2px;
    margin: 20px 0;
}

.about .content section article {
    background: #212121;
    color: #fff;
    padding: 12px;
    text-align: center;
    padding: 36px 12px;
}

.about .content section article span {
    display: block;
    font-size: 52px;
}

.partners {
    background-color: #212121;
    color: #fff;
    margin-bottom: 40px;
}

.partners .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;
}

.partners .content div {
    padding: 40px 60px;
}

.partners img {
    width: 100%;
    max-height: 540px;
    object-fit: cover;
}

.partners h2 {
    font-size: 40px;
    
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 40px;
    margin-bottom: 20px;
}

.partners p {
    /* font-size: 16px; */
    font-size: 20px;
    font-family: 'Futura PT', sans-serif;
    font-weight: 300;
    line-height: 1.55;
    color: #fff;
    margin-top: 0;
}


 /* FAQ */
 .faqs .content h2 {
    color: #3d3d3d;
    font-size: 40px;
    font-family: 'Elisabethische', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 0;
    cursor: pointer;
    text-align: center;
    margin-bottom: 20px;
}
    .faq { border-top: 1px solid #e9e9e9; }
    details.faq-item { border-bottom: 1px solid #e9e9e9; }

    /* Строка вопроса */
    summary {
        list-style: none;
        cursor: pointer;
        position: relative;
        padding: 22px 64px 22px 0;
        letter-spacing: 0.01em;
        outline: none;
        user-select: none;
        font-size: 20px;
        color: #3d3d3d;
        font-weight: 400;
        font-family: 'Futura PT', sans-serif;
        text-transform: uppercase;
    }
    summary::-webkit-details-marker { display: none; }

    /* Иконка справа */
    .icon {
      position: absolute;
      right: 0;
      top: 50%;
      translate: 0 -50%;
      width: 36px; height: 36px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background-color .25s ease, transform .25s ease;
    }
    .icon::before,
    .icon::after {
      content: "";
      position: absolute;
      width: 18px; height: 2px;
      background: #1a1a1a;
      transition: transform .25s ease, background-color .25s ease;
    }
    .icon::after { transform: rotate(90deg); }

    /* Состояние открыто */
    details[open] > summary .icon {
      background: #ef0601;
      transform: rotate(0.0001deg);
    }
    details[open] > summary .icon::before { transform: rotate(45deg); }
    details[open] > summary .icon::after { transform: rotate(-45deg); }
    details[open] > summary .icon::before,
    details[open] > summary .icon::after { background: #fff; }

    /* Ответ */
    .answer {
        padding: 0 0 22px;
        font-size: 18px;
        color: #3d3d3d;
        font-weight: 300;
        font-family: 'Futura PT';
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: max-height .45s ease, opacity .35s ease;
    }
    .answer p { margin: 0 0 .7em; }

    /* Управление состояниями анимации открытия/закрытия */
    details[open] > .answer { /* Без JS (быстрый фолбек) */ max-height: none; opacity: 1; margin-right: 48px; color: #000000;
    font-size: 20px;
    font-family: 'Futura PT', sans-serif;
    line-height: 1.55;
    font-weight: 400; }
    details.faq-item.animating .answer { will-change: max-height, opacity; }
    details.faq-item.is-open .answer { opacity: 1; }
    details.faq-item.is-closing .answer { opacity: 0; }
    details.faq-item.is-opening .answer { opacity: 1; }

    /* Фолбек без JS (нет классов) — показать контент */
    .no-js details[open] > .answer { max-height: none; opacity: 1; margin-right: 48px; }



.contacts .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}
/* Удалён пустой блок .contacts .content div */

.contacts .content div h2 {
    color: #3d3d3d;
    font-size: 40px;
    
    font-weight: 400;
    text-transform: uppercase;
}

.contacts .content div h3 {
    color: #3d3d3d;
    font-size: 28px;
    
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 0;
    display: block;
}

.contacts .content div a {
    font-weight: 400;
    font-size: 20px;
    margin-top: 8px;
    text-decoration: none;
    color: #3d3d3d;
    display: block;
}

.contacts .content div a:hover {
    text-decoration: underline;
}

.contacts .content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vector {
    max-width: 165px;
    height: auto;
}

.actors-item, .directors-item {
    margin: 0 auto;
    width: 1390px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center !important;
    align-items: center;
    margin-bottom: 40px;
}

.actors-item article h3, .directors-item article h3 {
    vertical-align: middle;
    color: #3d3d3d;
    font-size: 20px;
    
    line-height: 1.55;
    font-weight: 400;
    text-transform: uppercase;
    background-position: center center;
    border-color: transparent;
    border-style: solid;
    text-align: center;
    margin: 10px 0 0;
}

.actor a {
    text-decoration: none;
    color: #000;
}

.actor strong {
    display: block;
    font-weight: 400;
    line-height: 10px;
}



.actors {
    background-color: #212121;
    margin: 0px 0px 14px;
}

.actors h2, .directors h2 {
    color: #3d3d3d;
    font-size: 62px;
    font-family: 'Elisabethische', sans-serif;
    text-align: center;
    display: block;
    background: #fff;
    width: fit-content;
    margin: 0 auto;
    padding: 15px 40px 0;
    font-weight: 400;
    text-transform: uppercase;
}

.directors {
    background-color: #ef0601;
    margin: 14px 0;
}

hr {
	border: none;
	border-top: 1px solid #d9d9d9;; /* можно изменить толщину/цвет */
	margin: 25px auto; /* центрируем и добавляем отступы */
}

.footer-contact {
    background: #212121;
    color: #fff;
    padding: 25px 0;
}

.footer-contact article:hover {
    background-color: #3d3d3d;
}

.footer-contact h2 {
    font-size: 42px;
    line-height: 1.55;
    font-weight: 400;
    text-transform: uppercase;
    display: block;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: center;
    font-family: 'Elisabethische', sans-serif;
}

.footer-contact div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    font-weight: 400;
}

.footer-contact div article {
    border: 1px solid #595959;
    padding: 20px 40px;
    line-height: 28px;
    text-align: center;
}

.footer-contact div article a {
    color: #fff;
    text-decoration: none;
}

.footer-contact div article a:hover {
    text-decoration: underline;
}

footer {
    background-color: #3d3d3d;
}

footer section {
    margin: 0 auto;
    padding: 20px 0;
    max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    color: #fff;
    line-height: 26px;
    gap: 14px;
    font-size: 14px;
}

footer section a {
    color: #fff;
    text-decoration: none;
}

footer section a:hover {
    text-decoration: underline;
}

footer section .btn {
    border: 1px solid #fff;
    padding: 18px 22px;
}

footer section .btn:hover {
    background-color: #ef0601;
    border: 1px solid #ef0601;
    color: #fff;
    text-decoration: none;
} 

.about-button {
    background: #ef0601;
    border: 1px solid #ef0601;
    color: #fff;
    padding: 18px 50px;
    text-decoration: none;
    font-size: 22px;
    display: block;
    width: fit-content;
    text-transform: uppercase;
    border-radius: 4px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
    margin-top: 40px;
    margin-bottom: 40px;
}
.about-button:hover {
    background-color: #fff;
    color: #ef0601;
}

.partner-button {
    background: #ef0601;
    border: 1px solid #ef0601;
    color: #fff;
    border-radius: 4px;
    padding: 18px 50px;
    text-decoration: none;
    font-size: 22px;
    display: block;
    width: fit-content;
    text-transform: uppercase;
    
    font-weight: 400;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
    margin-top: 40px;
}

.partner-button:hover {
    background-color: #212121;
    color: #ef0601;
    background: #fff;
}

.ticket-button, .discount-link, .afisha-tiket {
    background: #ef0601;
    border: 1px solid #ef0601;
    color: #fff;
    padding: 6px 36px;
    text-decoration: none;
    font-size: 18px;
    display: block;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Futura PT', sans-serif;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.afisha-tiket:hover {
    background-color: #fff;
    color: #ef0601;
}

.ticket-button:hover, .discount-link:hover {
    background-color: #fff;
    color: #ef0601;
}

.header-afisha {
    /* text-align: center; */
    color: #fff;
    font-size: 24px;
}

.header-afisha .content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.header-afisha a {
    text-decoration: none;
    color: #fff;
}

.header-afisha a:hover {
    color: #fff;
}

.header-afisha .zhanr {
    font-size: 18px;
    
    line-height: 1.4;
    font-weight: 400;
    margin: 0;
    margin-top: 20px;
    border: 1px solid #fff;
    width: fit-content;
    /* margin: 30px auto; */
    margin: 30px 0;
    padding: 14px 28px;
}   

.header-afisha h1 {
    font-size: 62px;
    font-family: 'Elisabethische', sans-serif;
    line-height: 1.4;
    font-weight: 400;
    text-transform: uppercase;
    margin: 20px 0 0;
    width: 50%;
}

.main-afisha {
    background: #282828;

}

.main-afisha .content {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 40px;
}

.main-afisha .content header {
    display: flex;
    justify-content: flex-start; /* ровные отступы между элементами */
    align-items: center;
    gap: 30px; /* базовый промежуток */
}

.main-afisha .content header .prodolzhitelnost {
    vertical-align: middle;
    color: #ebebeb;
    font-family: 'FuturaPT', Arial, sans-serif;
    line-height: 1.55;
    font-weight: 300;
    border: 1px solid #6a6a6a;
    padding: 8px 12px;
    border-radius: 8px;
    margin-top: 0;
    white-space: nowrap; /* не переносить текст внутри бейджа */
}
.main-afisha .content header .vozrastnye_ogranicheniya {
    vertical-align: middle;
    color: #ffffff;
    font-size: 30px;
    font-family: 'FuturaPT', Arial, sans-serif;
    line-height: 1.4;
    font-weight: 300;
    margin-top: 0;
}

.main-afisha .content div:first-child {
    border-right: 1px solid #fff;
    padding-right: 40px;
}

.main-afisha .content h2 {
    color: #ffffff;
    font-size: 45px;
    font-family: 'Elisabethische', sans-serif;
    line-height: 1.4;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.ticket .content h2, .gallery .content h2 {
    font-size: 45px;
    font-family: 'Elisabethische', sans-serif;
    line-height: 1.4;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
}

.ticket .content a {
    background: #ef0601;
    border: 1px solid #ef0601;
    color: #fff;
    padding: 18px 50px;
    text-decoration: none;
    font-size: 22px;
    display: block;
    width: fit-content;
    text-transform: uppercase;
    
    font-weight: 400;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
    margin: 40px auto;
}

.ticket .content a:hover {
    background-color: #fff;
    color: #ef0601;
} 

.main-afisha .content .plot {
    color: #ffffff;
    font-size: 20px;
    
    line-height: 1.55;
    font-weight: 300;
}

.actors-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
}

.actors-items a {
    display: flex;
    gap: 12px;
    flex-direction: column;
    align-items: center;
    color: #fff;
    text-decoration: none;
}

.actors-items a:hover {
    color: #ef0601;
}

.team {
    color: #ffffff;
    font-size: 20px;
    
    line-height: 1.55;
    font-weight: 300;
}

.team .team-item {
    padding: 6px 0;
    color: #919191;
}

.team .team-item strong {
    color: #ffffff;
    font-weight: 400;
}

.rating {
    display: flex;
    /* margin: 0 auto; */
    gap: 20px;
    font-size: 18px;
    margin-top: 20px;
}

.rating a {
    display: flex;
    flex-direction: column;
    padding: 22px 18px;
    text-decoration: none;
    border: 1px solid #fff;
    border-radius: 4px;
    text-align: center;
}

.rating a:hover {
    border: 1px solid #ef0601;
    background: #282828;
}

.rating a strong {
    display: block;
    font-size: 48px;
}

.afisha-event__platform {
    display: block;
    margin-bottom: 6px;
}

.opisanie_v_shapke {
    width: 50%;
}

.tikets article {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    padding: 12px;
    -webkit-box-shadow: 0px 5px 5px -5px rgba(34, 60, 80, 0.6);
    -moz-box-shadow: 0px 5px 5px -5px rgba(34, 60, 80, 0.6);
    box-shadow: 0px 5px 5px -5px rgba(34, 60, 80, 0.6);
    margin-bottom: 56px;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    /*  */
    font-family: sans-serif;
}

.tikets .tikets-image {
    width: -webkit-fill-available;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    max-width: 330px;
}

.tikets .tikets-info {
    /* width: 100%;
    height: auto;

    display: flex;
    flex-wrap: nowrap;
    flex-direction: column; */
    width: -webkit-fill-available;
}

.tikets .tikets-info .discount-link {
    margin: 20px auto 0;
    padding: 8px 44px;
}

.tikets .tikets-date {
    /* display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #ccc;
    padding: 12px;
    width: 100%;
    font-size: 18px; */

    display: flex;
    justify-content: space-between;
}

.tikets .tikets-info-footer  {
    margin-top: 20px;
    /* border-top: 1px solid #ccc; */
    padding: 12px;
    width: 100%;
}

.tikets-title {
    color: #3d3d3d;
    font-size: 38px;
    /*  
    margin: 18px; */
    margin: 8px 0;
}
.afisha-event__actors a {
    text-decoration: none;
    color: #3d3d3d;
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
}
.afisha-event__actors a:hover {
    color: #ef0601;
}
.tikets-title a {
    text-decoration: none;
    color: #ef0601;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 36px;
}

.afisha-event__actors {
    margin-block-start: 12px;
}

.afisha-duration strong {
    display: block;
    font-size: 26px;
}

.afisha-event__time strong {
    display: block;
    font-size: 26px;
}


.tikets-buttons {
    /* border-left: 3px dotted #999;
    text-align: center;
    padding: 24px 12px;
    min-width: 180px;
    margin-left: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-around; */
    min-width: 240px;
}

.tikets-buttons span {
    display: block;
    
    /*  */
}

.afisha-event__day {
    font-size: 78px !important;
    color: #ef0601;
}

.up-border, .down-border {
    padding: 14px 15px;
    background-color: #ffffff;
    border-radius: 50%;
    position: absolute;
}


.afisha-event__zhanr {
    font-size: 22px;
}


.fancybox-content {
    max-width: 980px;
    max-height: 690px;
}

.afisha-event__month {
    margin-top: -20px;
}


/* ==== Responsive scaffold & progressive enhancements ==== */

/* Fluid typography variables */
:root {
    --fs-h1: clamp(2.4rem, 6vw + .5rem, 5.2rem);
    --fs-h2: clamp(2rem, 4.5vw + .4rem, 3.2rem);
    --fs-h3: clamp(1.25rem, 2.2vw + .4rem, 1.6rem);
    --fs-base: clamp(0.95rem, 0.55vw + 0.7rem, 1.25rem);
    --gap-xl: clamp(2.5rem, 6vw, 5rem);
    --gap-lg: clamp(1.8rem, 4vw, 3rem);
    --gap-md: clamp(1rem, 2.4vw, 2rem);
    --gap-sm: clamp(.6rem, 1.6vw, 1.25rem);
}

/* Optional: apply fluid sizes (uncomment and map to existing elements)
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
body { font-size: var(--fs-base); }
*/

/* Large desktop down */
@media (max-width: 1280px) {
    .header .content { grid-template-columns: 130px 1fr 130px; }
    .afisha-item { gap: 20px; }
    /* .afisha-item .afisha-post { width: 30%; } */
}

/* Desktop down */
@media (max-width: 1120px) {
    .afisha-item .afisha-post { width: 42%; }
    .partners .content { grid-template-columns: 55% 45%; }
    .actors-item,
    .directors-item { width: 100%; }

    /* При переходе актёров вниз — отключаем grid и делаем столбец */
    .main-afisha .content { display: block; }
    .main-afisha .content div:first-child { border-right: none; padding-right: 0 }
}

/* Tablet landscape */
@media (max-width: 1024px) {
    .header .content { grid-template-columns: 110px 1fr 110px; }
    .about .content { grid-template-columns: 1fr; }
    .partners .content { grid-template-columns: 1fr; }
    .partners .content div { padding: 40px 40px 20px; }
    .contacts .content { grid-template-columns: 1fr; }
    .main-afisha .content { display: block; }
    .main-afisha .content div:first-child { border-right: none; padding-right: 0; }
    .rating { flex-wrap: wrap; justify-content: center; }
}

/* Tablet portrait */
@media (max-width: 900px) {
    .header .content { grid-template-columns: 1fr; }
    .header-left,
    .header-right { flex-direction: row; justify-content: center; gap: 20px; }
    .header .header-center { order: -1; }
    .header .header-center nav ul { flex-wrap: wrap; gap: 14px; justify-content: center; }
    /* .afisha-item .afisha-post { width: 46%; } */
    .afisha-item .afisha-post { width: 41%; }
    .footer-contact div { flex-wrap: wrap; gap: 20px; }
    .header-left, .header-right { display: none; }
    .about-button {
        width: auto;
        text-align: center;
    }
    #menu-mnu {
        margin: 0;
        padding: 0px;
        text-align: center;
    }
    #menu-mnu li {
        list-style: none;
    }
}

/* Large phones / small tablets */
@media (max-width: 768px) {
    .afisha h2 { font-size: 34px; line-height: 1.2; }
    .afisha-item { justify-content: center; }
    .afisha-item .afisha-post { width: 100%; max-width: 480px; }
    .actors-item,
    .directors-item { gap: 14px; }
    .ticket-button,
    .discount-link,
    .about-button,
    .partner-button { padding: 14px 34px; font-size: 18px; width: fit-content; }
    .footer-contact h2 { font-size: 34px; }
    .rating a { padding: 16px 14px; }
    .rating a strong { font-size: 38px; }
    footer section {
        flex-direction: column;
        gap: 14px;
    }
    .about .content section {
        display: block;
    }
    .about .content section  article {
        width: 100%;
        padding: 32px 0;
    }

    hr {
        border: none;
    }
}

/* Medium phones */
@media (max-width: 600px) {
    .header .header-center h1 { font-size: clamp(2.2rem, 8vw, 3.2rem); }
    .afisha-item .afisha-post { padding: 26px 20px; }
    .partners h2 { font-size: 32px; font-family: 'Elisabethische', sans-serif;}
    .actors-item article h3,
    .directors-item article h3 { font-size: 18px; }
    .footer-contact div article { padding: 16px 24px; }
    .rating { gap: 14px; }
    .main-afisha .content header {
        display: block;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .header .header-center nav ul { gap: 10px; }
    .header .header-center nav ul li a { font-size: 18px; }
    /* На странице single-afisha меню может быть вне .header — прячем общий ul */
    body.single-afisha nav ul { display: none; }
    .header .header-center .afisha-links a { padding: 14px 28px; font-size: 16px; margin: 24px auto; }
    .afisha-item .afisha-post h3 { font-size: 20px; }
    .about .content h2,
    .actors h2,
    .directors h2 { font-size: 42px; padding: 10px 24px 0; }
    .partners p { font-size: 14px; }
    .ticket .content a { padding: 14px 32px; font-size: 18px; }
    .rating a strong { font-size: 32px; }
    .rating a { flex: 1 1 calc(50% - 12px); }
}

/* Ultra small (older devices) */
@media (max-width: 360px) {
    .header .header-center h1 { font-size: 2rem; }
    .footer-contact div article { width: 100%; }
    .rating a { flex: 1 1 100%; }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* High contrast adjustments (override colors only if needed) */
@media (prefers-contrast: more) {
    :root { --focus-ring: 0 0 0 3px #ffffff, 0 0 0 6px #ef0601; }
    a:focus-visible,
    button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
}

/* Dark scheme hook (if system preference differs) */
@media (prefers-color-scheme: dark) {
    /* Example override (commented)
    body { background: #181818; }
    */
}

/* Print basics */
@media print {
    .header,
    nav,
    .footer-contact,
    footer { display: none !important; }
    a { text-decoration: underline; }
    body { background: #fff; color: #000; }
}

/* ==== Mobile navigation additions ==== */
.burger {
    --burger-size: 44px;
    position: fixed;
    top: 14px;
    left: 14px;
    display: none; /* показываем через медиа */
    padding: 0;
    width: var(--burger-size);
    height: var(--burger-size);
    background: #ef0601;
    border: 1px solid #ef0601;
    border-radius: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
    z-index: 1100; /* выше overlay */
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.burger-floating .burger:not(:hover):not(:focus-visible) { box-shadow: 0 2px 8px rgba(0,0,0,.15); }
body.scrolled-down .burger { background:#d20400; }
body.menu-open .burger { background:#ef0601; }
.burger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.burger:hover { background:#800200; border-color:#800200; }
.burger-box { position: relative; display: block; width: 100%; height: 100%; }
.burger-inner,
.burger-inner::before,
.burger-inner::after {
    position: absolute;
    left: 50%;
    width: 60%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    content: '';
    transform: translateX(-50%);
    transition: transform .35s ease, top .35s ease, opacity .25s ease, background-color .35s ease;
}
.burger-inner { top: 50%; }
.burger-inner::before { top: -10px; }
.burger-inner::after { top: 10px; }
body.menu-open .burger-inner { background: transparent; }
body.menu-open .burger-inner::before { top: 0; transform: translateX(-50%) rotate(45deg); }
body.menu-open .burger-inner::after { top: 0; transform: translateX(-50%) rotate(-45deg); }

/* Контейнер навигации (nav ul) адаптив */
.header .header-center nav { position: relative; }
.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
    z-index: 1000;
}
body.menu-open .mobile-nav-overlay { opacity:1; visibility: visible; }

.mobile-nav-panel {
    position: fixed;
    top: 0; left: 0;
    width: 78%;
    max-width: 340px;
    height: 100dvh;
    background: #ffffff;
    box-shadow: 2px 0 18px rgba(0,0,0,.25);
    transform: translateX(-105%);
    transition: transform .4s cubic-bezier(.65,.05,.36,1);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    padding: 90px 26px 40px;
    gap: 30px;
    overflow-y: auto;
    scrollbar-width: thin;
}
body.menu-open .mobile-nav-panel { transform: translateX(0); }

.mobile-nav-panel::-webkit-scrollbar { width: 10px; }
.mobile-nav-panel::-webkit-scrollbar-track { background: #f1f1f1; }
.mobile-nav-panel::-webkit-scrollbar-thumb { background: #c2c2c2; border-radius: 6px; }
.mobile-nav-panel::-webkit-scrollbar-thumb:hover { background: #a0a0a0; }

.mobile-nav-panel nav ul { flex-direction: column; align-items: flex-start; gap: 14px; }
.mobile-nav-panel nav ul li a { color: #212121 !important; font-size: 38px; text-decoration: none; padding: 12px 0; border-bottom: 1px solid #eee; display: block; }
.mobile-nav-panel nav ul li a:hover { color: #ef0601 !important; }

/* Скрываем оригинальный ряд меню и показываем мобильную панель на нужных брейкпоинтах */
@media (max-width: 900px) {
    .burger { display: inline-block; }
    .header .header-center nav ul { display: none; }
    body.menu-open { overflow: hidden; }
    /* Перемещаем контент меню в offcanvas через дублирование в JS */
    .header .header-center { padding-top: 70px; }
    .mobile-extra .afisha-links { margin: 10px 0 0; }
    .mobile-extra .discount-link { margin: 0; }
    .mobile-extra .afisha-links a, .mobile-extra .discount-link { width: 100%; text-align: center; }

}

/* Utility класс для скрытого текстового заголовка если понадобится */
.visually-hidden { position: absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

#filter {
    margin-bottom: 40px;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}


.actor-link {
  display: block;
  width: 260px;
  text-decoration: none;
  color: inherit;
}

/* Контейнер для фото с фиксированным соотношением 3:4 */
.actor-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  position: relative;
}

/* Картинка растягивается и выравнивается по верху */
.actor-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform 0.4s ease, filter 0.4s ease;
}

.actor-image:hover img {
  transform: scale(1.08); /* немного увеличиваем */
  filter: brightness(1.05); /* чуть ярче, чтобы эффект был приятнее */
}

/* Подпись под фото */
.actor-link h3 {
  margin: 8px 0 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.2;
}

.actor-link h3:hover {
  color: #ef0601;
}

.discount-popup p:nth-of-type(2) {
    display: flex;
    gap: 16px;
    align-items: center;
    margin: 28px 0;
}

.discount-popup b, .partner-popup-holder b, .feedback-popup b {
    color: #3d3d3d;
    font-size: 48px;
    font-family: 'Elisabethische', sans-serif;
    font-weight: 400;
    margin-bottom: 0;
}

.discount-popup p {
    color: #000000;
    font-size: 20px;
    line-height: 1.55;
    font-weight: 400;
}

.discount-popup a {
    color:#ef0601;
    text-decoration: none;
}




.discount-popup input[type=email] {
    font-size: 20px;
    width: 100%;
    padding: 10px 8px;
    border: 1px solid #ccc;
}
.discount-popup input[type=email]:focus {
    outline: none;
    border-color: #ef0601;
}
.discount-popup input[type=submit] {
    background: #ef0601;
    border: 1px solid #ef0601;
    color: #fff;
    padding: 8px 50px;
    text-decoration: none;
    font-size: 22px;
    width: fit-content;
    text-transform: uppercase;
    font-family: 'Futura PT', sans-serif;
    font-weight: 400;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.wpcf7-not-valid-tip {
    position: absolute;
}

.wpcf7 form .wpcf7-response-output {
    margin: 12px 0;
}


.footer-question p {
  font-size: 18px;
  margin-bottom: 20px;
}

.footer-btn {
  display: block;
  padding: 4px 32px;
  border: 1px solid #fff;
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
  border-radius: 4px;
} 

.footer-btn:hover {
  background-color: #fff;
  color: #1e1e1e;
  text-decoration: none;
}


.premiere {
    background: #ef06016e;
    margin-bottom: 24px;
    border: 1px solid #ef0601;
    color: #fff;
    padding: 8px 76px;
    text-decoration: none;
    font-size: 24px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    display: inline-flex;
}


.actors-item, section.platform {
    width: unset;
}

/* .tikets {
    margin-left: 45px;
    margin-right: 45px;
} */

.tikets.premiere-aside {
    position: relative;
    /* margin-left: 45px; */
}

.tikets.premiere-aside .premiere {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateX(calc(-50% - 24px)) translateY(-50%) rotate(-90deg);
    transform-origin: center center;
    background: #ef0601;
    border: 1px solid #ef0601;
    color: #fff;
    padding: 1px 46px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 8px 8px 0 0;
    display: inline-flex;
    white-space: nowrap;
    margin: 0;
    box-shadow: inset 0px -1px 12px 0px #0005;
}

	/* @media (max-width: 639px) {
		.tikets.premiere-aside .premiere {
			position: static;
			left: auto;
			top: auto;
			transform: none;
		}
	} */

.slide-content.content {
    left: 0;
}

.actors-item.content {
    justify-content: space-between;
}

.navigation.content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.navigation .swiper-button-prev {
    left: -75px;
}
.navigation .swiper-button-next {
    right: -75px;
}

.navigation .swiper-button-prev,
.navigation .swiper-button-next {
    opacity: .5;
    transition: .2s ease !important;

    &::after {
        transition: .2s ease !important;
    }
    
    &:hover {
        opacity: 1;
        background-color: #fff;

        &::after {
            color: #000;
        }
    }
}


.actor-link {
    width: 100%;
}

.actor {
    width: calc(20% - 20px);
}


.ticket-button {
    margin: 30px auto 0;
}

.platform.content {
    justify-content: space-between;
}

.header-burger { display: none; }
.header-burger span { display: block; width: 100%; height: 3px; background:#fff; border-radius: 2px; transition: transform .3s ease, opacity .2s ease; }


.main-afisha .head.content {
    display: block;
}

.main-afisha .head .buttons,
.main-afisha .head .rating,
.main-afisha .head .opisanie_v_shapke {
    display: flex;
    justify-content: center;
    border-right: 0 !important;
    padding-right: 0 !important;
}
.main-afisha .head .rating a {
    color: #fff;
    width: 165px;
    box-sizing: border-box;
}
.main-afisha .head .opisanie_v_shapke {
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 40px;
    margin-bottom: 20px;
}

.main-afisha .head .buttons {
    gap: 20px;
}

.main-afisha .head .buttons .afisha-tiket {
    width: 218px;
    box-sizing: border-box;
    text-align: center;
    font-size: 22px;
}

.main-afisha .head .buttons .premiere-tiket {
    background-color: #282828;
    color: #ef0601;
    border: none;
    /* margin-top: 0; */
}

/* .main-afisha .head .buttons .afisha-tiket,
.main-afisha .head .buttons .premiere-tiket {
    margin: 0;
} */



.main-afisha .actor-image {
    padding: 0 !important;
}

.main-afisha .content {
    /* grid-template-columns: calc(50% - 20px) calc(50% - 20px); */
}

section.actors-items {
    /* display: flex;
    flex-wrap: wrap;
    justify-content: space-between; */
    width: 100%;
}

.header-afisha {
    position: relative;
    /* Обеспечиваем фон секции под изображением, чтобы не было белой полосы при загрузке/рисовании */
    background: #212121;
    overflow: hidden; /* предотвращает визуальные зазоры и пролазывание элементов */
}

/* Полупрозрачное затемнение поверх фонового изображения афиши */
.header-afisha::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45); /* степень затемнения можно менять */
    z-index: 1;
    pointer-events: none; /* чтобы не блокировать клики по контенту */
}

section.header-afisha .afisha-bg {
    width: 90%;
    height: auto;
    position: relative;
    display: block;      /* убирает белую строку, возникающую из-за inline-ображения */
    vertical-align: top; /* страховка против baseline-gap */
    max-width: 100%;
    z-index: 0;
    margin: 0 auto;
    /* изображение под оверлеем */
}
/* section.actors-items .actor-link {
    width: calc(33% - 20px);
}
section.actors-items .actor-link p {
    margin-left: 0 !important;
}
section.actors-items .actor-link div {
    width: 100% !important;
} */

.header-afisha .content {
    flex-direction: column-reverse;
    justify-content: space-between;
    height: 80%;
    padding-bottom: 10px;
    box-sizing: border-box;
    position: absolute;
    /* top: 0; */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2; /* контент над затемнением */
}

.header-afisha h1 {
    width: 100%;
    text-align: center;
}

@media (max-width: 1355px) {
    .navigation.content {
        display: none;
    }
}

@media (max-width: 1237px) {
    nav.primary-nav .primary-menu {
        gap: 5px;
        justify-content: space-between;
    }

    nav.primary-nav .primary-menu > li > a {
        font-size: 14.4px;
    }

    div.header-cta .discount-btn {
        padding: 12px 16px;
    }
}

@media (max-width: 1050px) {
    div.site-header__inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    nav.primary-nav {
        /* order: 3; */
        width: 100%;
    }
    nav.primary-nav .primary-menu {
        width: 100%;
        justify-content: center;
        gap: 20px;
    }
    nav.primary-nav .primary-menu > li > a {
        font-size: 16px;
    }

    .site-header { background: #212121; }
    .site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 4px 16px;
    }

    /* Keep bar elements on one row: logo | cta | burger */
    .site-branding { order: 1; }
    .site-branding img { max-width: 90px; height: auto; display: block; }

    .header-cta { order: 2; display: flex; align-items: center; gap: 40px; }
    .header-cta .discount-btn { padding: 8px 14px; font-size: 12px; border-radius: 4px; white-space: nowrap; }

    .header-burger {
        order: 3;
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
        width: 28px;
        height: 22px;
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
    }

    .header-burger span { background:#fff; }
    .header-burger.is-active span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
    .header-burger.is-active span:nth-child(2) { opacity: 0; }
    .header-burger.is-active span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

    /* Nav becomes dropdown under the bar, growing header height */
    .primary-nav { order: 4; flex-basis: 100%; width: 100%; overflow: hidden; max-height: 0; padding: 0; transition: max-height .35s ease, padding .2s ease; }
    .site-header.is-open .primary-nav { max-height: 65vh; padding: 8px 0 10px; }

    .primary-nav .primary-menu { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; }
    /* .primary-nav .primary-menu li { border-top: 1px solid rgba(255,255,255,.12); }
    .primary-nav .primary-menu li:first-child { border-top: none; } */
    .primary-nav .primary-menu a { color: #fff; text-decoration: none; display: block; padding: 12px 8px; font-size: 16px; }
    .primary-nav .primary-menu a:hover { color:#ef0601; background: rgba(255,255,255,.04); }

    /* Single Afisha hero tuning */
    .header-afisha .content { padding: 20px 16px 14px; gap: 16px; }
    .header-afisha h1 { width: 100%; font-size: clamp(2rem, 6vw, 44px); }
    .header-afisha .zhanr { font-size: 16px; padding: 10px 18px; margin: 16px 0; }

    .calendar .day .date {
        font-size: 18px;
    }
    .calendar .day .weekday {
        font-size: 16px;
    }
}

@media (max-width: 960px) {
    .actor {
        width: calc(25% - 20px);
    }
    .actors-item.content,
    .platform.content {
        justify-content: center;
    }

    /* Отмена переноса при адаптации: держим элементы в одну строку и выравниваем отступы */
    .main-afisha .content header { display: flex; flex-wrap: nowrap; align-items: center; gap: 30px; justify-content: flex-start; }
    .main-afisha .content header h2 { flex: 0 1 auto; margin: 0; }
    .main-afisha .content header .prodolzhitelnost { white-space: nowrap; }
    .main-afisha .content header .vozrastnye_ogranicheniya { margin-left: 0; }

    .tikets .container {
        grid-template-areas: "title title title"
                             "img img img"
                             "pos pos pay";
    }
    .events-filters__field {
        width: 100%;
    }
    
    
}

@media (max-width: 850px) {
    .calendar .swiper {
        height: auto
    }
    .calendar .swiper-slide {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        justify-content: center;
    }
    .calendar .day {
        justify-self: center;
    }
}

@media (max-width: 800px) {
    nav.primary-nav .primary-menu > li > a {
        font-size: 15px;
    }

    .actors-item article h3,
    .directors-item article h3 {
        font-size: 16px;
    }

    /* Stack CTA buttons on single-afisha header */
    /* .main-afisha .head .buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    } */
    .main-afisha .head .buttons .afisha-tiket {
        width: 50%;
        /* margin: 0; */
    }
}

@media (max-width: 720px) {
    .actor {
        width: calc(33.33% - 20px);
    }
    .actors-item.content,
    .platform.content {
        justify-content: center;
    }

    h2.slide-title {
        margin: 0 auto 20px;
        width: 100%;
    }

    .slide-content.content {
        left: 50%;
    }

    .actor-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .actor-hero__photo {
        max-width: 320px;
        margin: 0 auto;
    }
    .actor-biography {
        column-width: auto;
        column-count: 1;
    }
    .actor-section__title{
        text-align: center;
    }

    /* Make hero image cover and reduce height on small screens */
    section.header-afisha .afisha-bg { height: 60vh; object-fit: cover; object-position: center; }
    .header-afisha .content { padding: 18px 14px 24px; gap: 12px; }
    .header-afisha h1 { font-size: clamp(1.8rem, 7vw, 36px); }
    .header-afisha .zhanr { font-size: 14px; padding: 8px 14px; margin: 10px 0; }

    .hero-swiper {
        margin-top: -132px;
        height: 100vh;
    }
}

@media (max-width: 650px) {
    .footer-contact .content article {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .actor {
        width: calc(50% - 20px);
    }

    /* Single Afisha text scaling */
    .main-afisha .content h2 { font-size: 34px; }
    .header-afisha h1 { font-size: clamp(1.6rem, 8vw, 32px); }

    .tikets .container {
        grid-template-areas: "title title title"
                             "img img img"
                             "pos pos pos"
                             "pay pay pay";
    }

    .tikets.premiere-aside {
        margin-left: 0;
        margin-right: 0;
        margin-top: 45px;
    }
    .tikets {
        margin-left: 0;
        margin-right: 0;
    }
    .actors {
        margin-top: 16px !important;
        margin-bottom: -36px;
    }

    .tikets.premiere-aside:not(:first-child) {
        margin-top: 60px;
    }

    .tikets.premiere-aside .premiere {
        top: 0;
        left: 50%;
        transform: translateX(-50%) translateY(-100%) rotate(0);
    }

    .calendar .month .prev,
    .calendar .month .next {
        display: none;
    }

    .discount-popup p:nth-of-type(2) {
        flex-direction: column;

        br, .wpcf7-spinner {
            display: none;
        }
    }
    .discount-popup input[type=email] {
        box-sizing: border-box;
    }

    .partner-popup .wpcf7 textarea {
        height: 150px;
    }

    .tikets .container * {
        text-align: left;
    }

    .tikets .container .tikets-title,
    .tikets .container .tikets-title > div:first-child {
        width: 100%;
    }

    .tikets-pos .platform {
        width: 100%;
        display: block;
    }

    .tikets-pay a {
        text-align: center !important;
    }
    .tikets-title div p {
        text-align: center !important;
    }
}

.tikets-pay a:hover {
    background-color: #c90501;
    border-color: #c90501;
    color: #fff;
}

@media (max-width: 500px) {
    .main-afisha .head .buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        margin: 30px auto 50px;
    }
    .main-afisha .head .buttons .afisha-tiket {
        width: 100%;
        margin: 0;
    }
    
    .main-afisha .content header {
        flex-wrap: wrap;
    }

    .discount-popup b, .partner-popup-holder b, .feedback-popup b {
        font-size: 36px;
    }
}

@media (max-width: 470px) {
    .header-cta {
        gap: 12px;
    }
    div.site-header__inner {
        /* gap: 12px; */
    }

    /* Extra compact hero */
    section.header-afisha .afisha-bg { height: 52vh; }
    .header-afisha .content { padding: 14px 12px 18px; }
    .header-afisha h1 { font-size: clamp(1.4rem, 8.5vw, 28px); }
    .main-afisha .head .opisanie_v_shapke { font-size: 28px; }

    div.header-cta .discount-btn {
        font-size: 12px;
        padding: 8px 10px;
    }
    
    .discount-popup b, .partner-popup-holder b, .feedback-popup b {
        font-size: 30px;
    }

    .feedback-popup .wpcf7 textarea {
        height: 150px;
    }
}

@media (max-width: 380px) {
    .actor-link h3 {
        font-size: 14px;
    }

    .discount-popup input[type=submit] {
        width: 100%;
    }
}


@media (max-width: 350px) {
    div.header-cta .discount-btn {
        font-size: 10px;
        padding: 8px 8px;
    }
}


.main-afisha .head .buttons .afisha-tiket:not(.premiere-tiket):hover {
    background-color: #fff;
    border-color: #c90501;
    color: #c90501;
}

.main-afisha .head .buttons .afisha-tiket.premiere-tiket:hover {
    cursor: default;
}

.hidden-fields-container {
    display: none;
}

#tiket h2 {
    color: #3d3d3d;
    /* font-size: 62px; */
    font-family: 'Elisabethische', sans-serif;
    font-weight: 400;
    margin-bottom: 0;
    text-align: center;
}

.tikets-pay__actors a:hover {
    background: none;
}


	.conafisha {  
		display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr .7fr 1fr .7fr;
        grid-auto-columns: 1fr;
        gap: 14px 20px;
        grid-auto-flow: row;
        grid-template-areas:
            "TITLE TITLE TITLE"
            "IMG DATA ACTORS"
            "IMG PLATFORM ACTORS"
            "IMG ABOUT PAY";
        border-radius: 8px;
        position: relative;
        margin: 20px 45px 20px 45px;
        box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
        padding: 0px 20px;
        /* max-height: 330px; */
        align-items: start;
	}

	.TITLE { grid-area: TITLE; }
    .IMG {
        grid-area: IMG;
        position: relative;
        overflow: hidden;
    }
	.DATA { grid-area: DATA; }
	.PLATFORM { grid-area: PLATFORM; }
	.ABOUT { grid-area: ABOUT; }
	.ACTORS { grid-area: ACTORS; }
	.PAY { grid-area: PAY; }

    .TITLE h2 a {
        color: #2B2F3A;
        text-decoration: none;
        transition: color .15s ease;
        font-family: 'Elisabethische', sans-serif;
        font-weight: 400;
        text-transform: uppercase;
        font-size: 36px;
        display: block;
        text-align: left;
    }

    .TITLE h2 a:hover {
        color: #ef0601;
    }

    .TITLE p {
        margin: 0;
        font-family: sans-serif !important;
        font-weight: 500;
        font-size: 18px;
        color: #2B2F3A;
    }

    .IMG img {
        width: 100%;
        height: auto;
        border-radius: 8px;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease, filter 0.4s ease;
    }

	.IMG:hover img {
		transform: scale(1.08);
		filter: brightness(1.05);
	}

    .PLATFORM a {
        font-size: 24px;
        line-height: 1.2;
        color: #ef0601;
        text-transform: uppercase;
        display: block;
        text-decoration: none;
        text-transform: uppercase;
        margin-bottom: 3px;
    }

    .PLATFORM a:hover {
        color: #2B2F3A;
    }

    .discount-link-permalink {
		border: 1px solid #ef0601;
		background-color: #fff;
		color: #ef0601;
		padding: 6px 24px;
		text-decoration: none;
		font-size: 18px;
        text-align: center;
		display: block;
		text-transform: uppercase;
		font-weight: 400;
		cursor: pointer;
		border-radius: 4px;
		transition: background-color .25s ease, color .25s ease, border-color .25s ease;
	}

    .platform__adress, .platform__metro {
        display: block;
        font-size: 18px;
        color: #2B2F3A;
        text-transform: none;
        margin-bottom: 4px;
    }

    .DATA div {
        display: flex;
        gap: 8px;
        margin-bottom: 3px;
    }
    .DATA #data, .DATA #time {
        font-size: 24px;
        line-height: 1.2;
        color: #ef0601;
        text-transform: uppercase;
    }

    .DATA #time {
        margin-left: -5px;
    }

    .DATA #weekday {
        border: 1px solid #000;
        padding: 2px 8px;
        border-radius: 4px;
    }

    .age-limit, .duration {
        font-size: 18px;
        color: #2B2F3A;
        text-transform: none;
        margin-bottom: 6px;
    }

    #premiere {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateX(calc(-50% - 24px)) translateY(-50%) rotate(-90deg);
        transform-origin: center center;
        background: #ef0601;
        border: 1px solid #ef0601;
        color: #fff;
        padding: 1px 46px;
        text-decoration: none;
        font-size: 16px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-radius: 8px 8px 0 0;
        display: inline-flex;
        white-space: nowrap;
        margin: 0;
        box-shadow: inset 0px -1px 12px 0px #0005;
    }

    /* .ABOUT, .PAY {
        padding-top: 8px;
    } */

    .tikets-pay__actors_text {
		font-size: 24px;
		line-height: 1.2;
		color: #ef0601;
		text-transform: uppercase;
	}

    .tikets-pay__actors {
        margin-top: 3px !important;
    }

.header-cta .discount-link-permalink {
    display: none;
}

    @media (max-width: 850px) {
        .conafisha {  
            display: grid;
            grid-template-columns: 1fr;
            grid-template-areas:
                "TITLE"
                "IMG"
                "DATA"
                "PLATFORM"
                "ACTORS"
                "ABOUT"
                "PAY";
            row-gap: 10px;
            border-radius: 8px;
            margin: 40px 5px 20px 5px;
            box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
            padding: 1px 15px 20px;
            
            grid-template-rows: none;     /* или: unset; */
            grid-auto-rows: max-content;  /* строки по контенту */
            align-content: start;         /* чтобы треки не растягивались по высоте */

            height: auto;
            min-height: 0;
        }
        .TITLE, .IMG, .ACTORS, {
            margin-bottom: 10px;
        }
        .TITLE p {
            text-align: center;
        }
        .TITLE h2 a {
            font-size: 18px;
            text-align: center;
        }
        .DATA div {
            justify-content: space-between;
        }
        #premiere {
            top: -26px;
            left: 100px;
            transform: none;
            margin: 0 auto;
        }
        .header-cta .discount-link-permalink {
            display: block;
            font-size: 12px;
            padding: 8px 10px;
            background: none;
            color: #fff
        }
    }