/*
Theme Name: Kadence Child
Template: kadence
Version: 1.0
Text Domain: kadence-child
*/

/* ==================================
   ПЕРЕМЕННЫЕ
================================== */

:root {

    /* Основные размеры */
    --content-padding-desktop: 25px;
    --content-padding-mobile: 15px;

    /* Отступы */
    --space-xs: 5px;
    --space-sm: 8px;
    --space-md: 10px;
    --space-lg: 15px;
    --space-xl: 20px;

    /* Размеры постеров */
    --poster-width: 140px;
    --poster-height: 190px;

    /* Кнопки */
    --button-height: 40px;
    --control-height: 38px;

    /* Скругления */
    --radius-small: 5px;
    --radius: 6px;

    /* Цвета */
    --color-blue: #1976d2;
    --color-blue-hover: #0d47a1;

    --color-red: #e53935;
    --color-red-hover: #b71c1c;

    --color-gray: #eeeeee;

}

/* ==================================
   ОБЩИЕ ПРАВИЛА
================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ==================================
   АФИША
================================== */

.afisha-list {

    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: var(--space-lg);

    width: 100%;

    padding: var(--space-md) var(--content-padding-desktop);

    align-items: stretch;

}

/* ==================================
   КАРТОЧКА
================================== */

.afisha-card {

    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;

}

/* ==================================
   ПОСТЕР
================================== */

.afisha-image {
    text-align: center;
}

.event-poster {
    width: 100%;
}

.afisha-image img,
.no-poster {

    width: var(--poster-width);
    height: var(--poster-height);

    object-fit: cover;

    border-radius: var(--radius-small);

}

.no-poster {

    display: flex;

    align-items: center;
    justify-content: center;

    margin: auto;

    background: var(--color-gray);

    font-size: 13px;

}

/* ==================================
   СОДЕРЖИМОЕ КАРТОЧКИ
================================== */

.afisha-content {

    display: flex;
    flex-direction: column;

    flex: 1;

    min-width: 0;

    margin-top: var(--space-sm);

}



/* ==================================
   ВЕРХНЯЯ ПАНЕЛЬ (ГОРОД + ПОИСК)
================================== */

.afisha-top-line {

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: var(--space-xl);

}

.city-box,
.search-box {

    display: flex;
    align-items: center;

    height: var(--control-height);

}

/* ==================================
   ВЫБОР ГОРОДА
================================== */

.city-box {

    margin-left: 0;
    padding-left: var(--content-padding-desktop) !important;

}

.city-selector {

    display: flex;
    align-items: center;

    margin-left: 0;

}

.city-selector strong {

    margin-right: var(--space-sm);

}

.city-selector select,
.city-selector button {

    height: var(--control-height);

}

/* ==================================
   ПОИСК
================================== */

.afisha-search {

    display: flex;
    align-items: center;

    gap: var(--space-md);

}

.afisha-search input {

    width: 300px;
    height: var(--control-height);

    padding: 0 12px;

}

.afisha-search button {

    height: var(--control-height);

    min-width: 90px;

    padding: 0 18px;

    white-space: nowrap;

}

/* ==================================
   НАЗВАНИЕ МЕРОПРИЯТИЯ
================================== */

.afisha-content h2,
.event-title {

    margin: var(--space-sm) 0 var(--space-xs);

    font-size: 16px;
    line-height: 22px;

    display: -webkit-box;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;

    word-break: break-word;
    overflow-wrap: anywhere;

}

/* ==================================
   СТРОКИ ИНФОРМАЦИИ
================================== */

.event-row {

    display: flex;
    align-items: flex-start;

    gap: var(--space-xs);

    margin-bottom: var(--space-xs);

    font-size: 13px;
    line-height: 22px;

    word-break: break-word;
    overflow-wrap: anywhere;

}

.label {

    flex-shrink: 0;

    font-weight: bold;

}

/* ==================================
   БЛОК МЕСТА
================================== */

.place-row {

    min-height: 50px;
    height: 50px;

    overflow: hidden;

}

.place-name {

    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

}

/* ==================================
   ВОЗРАСТНОЕ ОГРАНИЧЕНИЕ
================================== */

.age-row {

    min-height: 22px;

}

/* ==================================
   КНОПКИ КАРТОЧКИ
================================== */

.buttons {

    display: flex;

    gap: 6px;

    margin-top: auto;
    padding-top: var(--space-md);

}

/* ==================================
   ОБЩИЙ СТИЛЬ КНОПОК
================================== */

.btn-more,
.btn-buy {

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 1;

    height: var(--button-height);

    border-radius: var(--radius);

    color: #fff !important;
    text-decoration: none;

    font-size: 14px;
    font-weight: bold;

    transition:
        background-color .2s ease,
        transform .15s ease;

}

/* ==================================
   КНОПКА "ПОДРОБНЕЕ"
================================== */

.btn-more {

    background: var(--color-blue);

}

.btn-more:hover {

    background: var(--color-blue-hover);

}

/* ==================================
   КНОПКА "КУПИТЬ"
================================== */

.btn-buy {

    background: var(--color-red);

}

.btn-buy:hover {

    background: var(--color-red-hover);

}


/* ==================================
   СТРАНИЦА МЕРОПРИЯТИЯ
================================== */

.single-event-session {

    width: 100%;

    padding-left: var(--content-padding-desktop);
    padding-right: var(--content-padding-desktop);

}

.single-event-session .event-table {

    width: 100%;

    border-collapse: separate;
    border-spacing: 0;

}

.single-event-session .event-poster-cell {

    width: 350px;

    padding-right: 25px;

    vertical-align: top;

}

.single-event-session .event-table td:not(.event-poster-cell) {

    padding-left: 15px;

    vertical-align: top;

}

.single-event-session .event-poster {

    display: block;

    width: auto;

    max-width: 100%;

    height: auto;

}


/* ==================================
   ОДНА КАРТОЧКА НА ДЕСКТОПЕ
================================== */

.afisha-list.single-event {

    grid-template-columns: minmax(280px,420px);

}


/* ==================================
   МОБИЛЬНАЯ ВЕРСИЯ
================================== */

@media (max-width:1000px){

    .afisha-list{


        grid-template-columns:repeat(3,1fr);

    }

}

@media (max-width:900px){


    .afisha-top-line{

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:12px;

    }

}

@media (max-width:768px){

    /* ===========================
       Верхняя панель
    =========================== */

    .city-box,
    .search-box{

        width:100%;

        justify-content:center;

        padding-left:var(--content-padding-mobile);
        padding-right:var(--content-padding-mobile);

    }

    .city-selector{

        display:flex;

        justify-content:center;

	


    }

    .city-selector select{

        max-width:220px;

    }

    .afisha-search{

        gap:5px;

    }

    .afisha-search input{

        width:220px;

        max-width:calc(100vw - 110px);

    }

    .afisha-search button{

        min-width:80px;

        padding:0 12px;

    }

    /* ===========================
       Афиша
    =========================== */

    .afisha-list{

        grid-template-columns:repeat(2,1fr);

        gap:12px;

        padding:10px 5px;

    }

    /* ===========================
       Страница мероприятия
    =========================== */

    .single-event-session{

        padding-left:var(--content-padding-mobile);

        padding-right:var(--content-padding-mobile);

    }

    .single-event-session .event-table,
    .single-event-session .event-table tbody,
    .single-event-session .event-table tr,
    .single-event-session .event-table td{

        display:block;

        width:100%;

    }

    .single-event-session .event-poster-cell{

        width:100%;

        padding:0;

        margin-bottom:20px;

        text-align:left;

    }

    .single-event-session .event-poster-cell img{

        width:100%;

        max-width:100%;

        height:auto;

        object-fit:contain;

        margin:0;

    }

    .single-event-session .event-table h1{

        text-align:center;

    }

    /* ===========================
       Кнопка Купить
    =========================== */

    .single-event-session .btn-buy{

        display:inline-flex;

        flex:none;

        width:auto;

        padding:0 25px;

    }

    /* ===========================
       Кнопки карточек
    =========================== */

    .buttons{

        width:100%;

        justify-content:center;

    }

    .btn-buy,
    .btn-more{

        justify-content:center;

        text-align:center;

        white-space:nowrap;

    }

    /* ===========================
       Город
    =========================== */

    .event-page-city{

        padding-left:var(--content-padding-mobile);

    }

}

@media (max-width:480px){

    .afisha-list.single-event{

        grid-template-columns:1fr;

        justify-items:stretch;

        padding-left:var(--content-padding-mobile);

        padding-right:var(--content-padding-mobile);

    }

    .afisha-list.single-event .afisha-card{

        width:100%;

    }

    .afisha-list.single-event .afisha-image{

        text-align:left;

    }

    .afisha-list.single-event img,
    .afisha-list.single-event .no-poster{

        width:var(--poster-width);

        height:var(--poster-height);

        margin:0;

    }

}

/* ==================================
   BUY BUTTON DESKTOP ALIGN
================================== */

@media(min-width:769px){

    .single-event-session .event-table .buy-row td {

        padding-left:0 !important;

    }


    .single-event-session .btn-buy {

        margin-left:0 !important;

    }

}
/* ==================================
   BUY BUTTON DESKTOP DOWN
================================== */

@media(min-width:769px){

    .single-event-session .buy-row td {

        padding-top:15px !important;

    }

}

/* только страница Подробнее */

.event-page-city {

    padding-left:25px !important;

}

@media(max-width:768px){

    .city-box,
    .event-page-city {

        padding-left:15px !important;
        padding-right:15px !important;

    }

}


/* ==================================
   ПЛАНШЕТЫ 769-1000px
================================== */

@media (min-width:769px) and (max-width:1000px){

    .afisha-list{
        padding-left:15px;
        padding-right:15px;
    }

    .city-box{
        padding-left:15px;
    }

    .search-box{
        padding-right:15px;
    }

    .single-event-session{
        padding-left:15px;
        padding-right:15px;
    }


}

/* ==================================
   ДЕСКТОП ОТ 1001px
================================== */

@media (min-width:1001px){

    .search-box{
        padding-right:25px;
    }



}

/* ==================================
   ОДНА АФИША - КОРОЧЕ КНОПКИ
================================== */

.afisha-list.single-event .buttons{

    justify-content:flex-start;

}

.afisha-list.single-event .btn-more,
.afisha-list.single-event .btn-buy{

    flex:0 0 160px;

}
/* Только страница "Подробнее" */
.single-event-session .btn-buy{

    flex:none;
    width:160px;

}

/* ==================================
   МОБИЛЬНЫЙ - КНОПКИ ДРУГ ПОД ДРУГОМ
================================== */


/* ==================================
   ТОЛЬКО ТЕЛЕФОН ВЕРТИКАЛЬНО
   несколько афиш
================================== */

@media (max-width:480px) and (orientation:portrait){

    .afisha-list:not(.single-event) .buttons{

        flex-direction:column;
        gap:8px;

    }


    .afisha-list:not(.single-event) .btn-more,
    .afisha-list:not(.single-event) .btn-buy{

        width:100%;
        height:40px;
        flex:none;
        border-radius:6px;

    }

}