
.page-template-audioguide, .single-audioguide {
    main {
        background: #fff;
        margin-top: 115px;
    }

    .container {
        background: none;
        display: block;
    }

    .page-title {
        padding-top: 120px;
        padding-bottom: 64px;

        svg {
            width: 100%;
        }

        .description {
            font-family: Merriweather;
            font-weight: 400;
            font-size: 18px;
            line-height: 150%;
            letter-spacing: -2%;
            margin-top: 64px;
            margin-bottom: 32px;
        }
    }

    .center {
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .page-description {

        h3 {
            font-family: Merriweather;
            font-weight: 400;
            font-size: 25.2px;
            line-height: 100%;
            letter-spacing: -2%;
            margin-bottom: 24px;
        }

        p {
            font-family: Fira Sans;
            font-weight: 400;
            font-size: 18px;
            line-height: 27px;
            margin-bottom: 24px;
        }

        p:last-child {
            margin-bottom: 0;
        }
    }

    h2.lang-switcher-title {
        margin-top: 64px !important;
        margin-bottom: 64px !important;
        font-family: Merriweather;
        font-weight: 400;
        font-size: 32px;
        line-height: 100%;
        text-align: center;
    }

    .lang-switcher {
        font-family: Merriweather;
        font-weight: 400;
        font-size: 55.63px;
        line-height: 100%;
        text-align: center;
        color: #DCA738;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }

    a.lang-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 160px;
        height: 120px;
        border: 2px #DCA738 solid;
    }

    a.lang-btn.is-active {
        color: #fff;
        background-color: #DCA738;
    }

    .lang-selector {
        margin-bottom: 64px;
    }

    h2.audio-title {
        font-family: Merriweather;
        font-weight: 300;
        font-size: 27px;
        line-height: 150%;
        text-align: center;
    }

    .audioguide-single {
        .post-controls {
            padding-top: 80px;
            padding-bottom: 64px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }

    .custom-player {
        padding: 24px 0 84px 0;
        max-width: 540px;
        background: #fff;
        border-radius: 0;
        overflow: hidden;
    }

    .player-cover {
        width: 100%;
        height: auto;
        aspect-ratio: 540/300;
        object-fit: cover;
        display: block;
    }

    .player-controls-container {
        /*max-width: 730px;*/
        padding: 25px 0;
        margin: 0 auto;

        input[type='range'] {
            width: 100%;
            border: none;
            background: none;
            padding: 0;
        }
    }

    /* Слайдер */
    /* Контейнер для слайдера, щоб великий індикатор не обрізався */

    .player-slider {
        width: 100%;
        height: 14px;
        background: transparent;
        appearance: none;
        -webkit-appearance: none;
        margin-bottom: 8px;
        cursor: pointer;
    }

    /* Стиль лінії (треку) для Chrome/Safari */

    .player-slider::-webkit-slider-runnable-track {
        width: 100%;
        height: 4px;
        background: #eee;
        border-radius: 3px;
    }

    /* Індикатор (Thumb) для Chrome/Safari/Edge */

    .player-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 14px;
        height: 14px;
        background: #DCA738;
        border-radius: 50%;
        cursor: pointer;
        margin-top: -5px;
    }

    /* Стиль лінії для Firefox */

    .player-slider::-moz-range-track {
        width: 100%;
        height: 4px;
        background: #eee;
        border-radius: 3px;
    }

    /* Індикатор (Thumb) для Firefox */

    .player-slider::-moz-range-thumb {
        width: 14px;
        height: 14px;
        background: #DCA738;
        border-radius: 50%;
        cursor: pointer;
    }

    .time-info {
        display: flex;
        justify-content: space-between;
        color: rgba(102, 102, 102, 0.7);
        font-weight: 300;
        font-size: 16px;
        line-height: 100%;
        margin-bottom: 28px;
    }

    /* Кнопки */

    .main-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 48px;
        margin: 0 auto;
    }

    .main-controls svg {
        transition: transform 0.2s;
    }

    .main-controls button, .main-controls a {
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 0;
    }

    .post-controls, .wp-text-accordion__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto;
        background: transparent;
    }

    .post-controls span, .post-controls a, .wp-text-accordion__toggle span {
        font-family: Fira Sans;
        font-weight: 300;
        font-size: 18px;
        line-height: 100%;
        text-align: center;
        text-transform: uppercase;
        padding: 10px 26px;
        background: #DCA738;
        color: #fff;
    }

    .post-controls, .wp-text-accordion__toggle {
        span:hover, a:hover {
            /*background: #DCA738;*/
            color: #fff;
            transform: scale(1.05);
        }
    }

    .post-controls .all-stations {
        background: #DCA738;
        color: #fff;

        &:hover {
            /*background: #fff;*/
            /*color: #DCA738;*/
            transform: scale(1.05);
        }
    }


    .main-controls .disabled {
        opacity: 0.3;
        pointer-events: none;
    }

    .post-controls .disabled {
        color: #777;
        border-color: #ccc;
        pointer-events: none;
    }

    .main-controls button:hover {
        transform: scale(1.05);
    }

    .main-controls .play-pause-btn span svg {
        /*width: 180px;*/
        /*height: 180px;*/
        width: 80px;
        height: 80px;
    }

    .main-controls {
        .nav-btn, .rewind-btn, .forward-btn {
            svg {
                /*width: 85px;*/
                /*height: 85px;*/
                width: 30px;
                height: 30px;
            }
        }
    }

    .map-wrapper {
        margin-top: 120px;
        margin-bottom: 120px;

        .map-title {
            font-family: Fira Sans;
            font-weight: 700;
            font-size: 32px;
            line-height: 130%;
            margin-bottom: 60px;
        }

        .map {
            width: 100%;
            height: 450px;
            background: #c8d3c9;

            iframe {
                height: 450px !important;
            }
        }

    }

    .gallery-wrapper {
        /*margin-bottom: 120px;*/

        .gallery-title {
            font-family: Fira Sans;
            font-weight: 700;
            font-size: 32px;
            line-height: 130%;
            margin-bottom: 60px;
        }
    }

    .swiper {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .swiper-slide {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1;
        object-fit: cover;
    }

    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .swiper-navigation-wrapper {
        margin: 32px auto;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;

        .swiper-button-next, .swiper-button-prev {
            margin: 0;
            position: static;
            width: 50px;
            height: 50px;
            border: 1px solid #DDE2E0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .swiper-button-next:after, .swiper-button-prev:after {
            font-size: 14px;
            font-weight: 700;
            color: #000;
        }
    }

    .text-wrapper {
        margin-bottom: 120px;

        .text-title {
            font-family: Fira Sans;
            font-weight: 700;
            font-size: 32px;
            line-height: 130%;
            margin-bottom: 60px;
        }

        .text-content {
            font-family: Fira Sans;
            font-weight: 400;
            font-size: 18px;
            line-height: 150%;

            p {
                margin-bottom: 2em;
            }
        }


    }

    .wp-text-accordion__content {
        transition: height 0.5s ease;
        overflow: hidden;
    }

    @media (max-width: 992px) {

        main {
            margin-top: 96px;
        }

        .header-main {
            display: none;
        }

        .audioguide-main {
            .lang-switcher {
                margin-top: 24px;

                .lang-btn {
                    padding: 12px;
                    flex: 0;
                }
            }


        }

        .audioguide-single.visual-top {
            background-image: none !important;
            background: #fff;
            padding-top: 50px;
            padding-bottom: 24px;
            min-height: unset;
            border: 0;

            .visual-top__sign {
                display: none;
            }

            .visual-top__ctn {
                flex-direction: column-reverse;
            }

        }

        .visual-top:before, .visual-top:after {
            background: none !important;
            height: 0;
        }

        .lang-switcher {
            width: 100%;
            margin-top: 0;
            margin-bottom: 40px;
        }

        .custom-player {
            padding: 0;
            max-width: 100%;
        }

        .player-cover {
            width: 100%;
            height: 200px;
        }

        .player-controls-container {
            max-width: 100%;
            padding: 16px 0 80px;
            margin: 0 auto;
        }

        /* Слайдер */
        /* Контейнер для слайдера, щоб великий індикатор не обрізався */
        .player-slider {
            width: 100%;
            height: 10px;
            background: transparent;
            appearance: none;
            -webkit-appearance: none;
            margin-bottom: 8px;
            cursor: pointer;
        }

        /* Стиль лінії (треку) для Chrome/Safari */
        .player-slider::-webkit-slider-runnable-track {
            width: 100%;
            height: 2px;
            background: #eee;
            border-radius: 3px;
        }

        /* Індикатор (Thumb) для Chrome/Safari/Edge */
        .player-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 10px;
            height: 10px;
            background: #DCA738;
            border-radius: 50%;
            cursor: pointer;
            margin-top: -4px;
        }

        /* Стиль лінії для Firefox */
        .player-slider::-moz-range-track {
            width: 100%;
            height: 2px;
            background: #eee;
            border-radius: 3px;
        }

        /* Індикатор (Thumb) для Firefox */
        .player-slider::-moz-range-thumb {
            width: 10px;
            height: 10px;
            background: #DCA738;
            border-radius: 50%;
            cursor: pointer;
        }

        .time-info {
            font-size: 14px;
            margin-bottom: 13px;
        }

        /* Кнопки */
        .main-controls {
            justify-content: center;
            gap: 24px;
        }

        .main-controls .play-pause-btn span svg {
            width: 60px;
            height: 60px;
        }

        .main-controls {
            .nav-btn, .rewind-btn, .forward-btn {
                svg {
                    width: 20px;
                    height: 20px;
                }
            }
        }

        .post-controls {
            /*margin-top: 15px;*/
            /*margin-bottom: 40px;*/
            gap: 12px;
        }

        .post-controls span, .post-controls a, .wp-text-accordion__toggle span {
            height: stretch;
            align-content: center;
            padding: 12px;
            font-size: 12px;
            line-height: 12px;
            flex: 1;
        }

        .map-wrapper {
            margin-bottom: 60px;

            .map-title {
                font-size: 19px;
                margin-bottom: 13px;
            }

            .map {
                height: 180px;

                iframe {
                    height: 180px !important;
                }
            }
        }

        .gallery-wrapper {
            margin-bottom: 60px;

            .gallery-title {
                font-size: 19px;
                margin-bottom: 13px;
            }
        }

        .swiper {
            overflow: visible;
        }

        .swiper-navigation-wrapper {
            display: none;
        }

        .text-wrapper {
            margin-bottom: 60px;

            .text-title {
                font-size: 19px;
                margin-bottom: 13px;
            }

            .text-content {
                font-size: 16px;
            }
        }

    }

    .audioguide {
        padding-bottom: 120px;
    }

    .audioguide-grid {
        padding: 48px 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;

        article:last-child {
            grid-column-start: 2; /* Forces the single last item into the middle column */
        }
    }

    .stations-load-more-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;

        .stations-load-more {
            font-family: Fira Sans;
            font-weight: 700;
            font-size: 16px;
            line-height: 16px;
            background: #fff;
            border: 3px solid #DCA738;
            padding: 19px 24px;

            &:hover {
                background: #DCA738;
                color: #fff;
            }
        }
    }

    .station-card {
        padding: 15px;
        background: #FBF8EF;
        box-shadow: 9px 9px 21px 0 #00000040;
        transition: all 0.3s ease;

        &:hover {
            transform: scale(1.05);
        }
    }

    .station-cover {
        position: relative;
        /*height: 180px;*/

        img, .img-holder {
            width: 100%;
            height: auto;
            aspect-ratio: 320/180;
            object-fit: cover;
            background: #E2E2E2;
        }

        &:after {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 9;
            position: absolute;
            content: '';

            background: url('data:image/svg+xml;utf8,<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_507_14691)"><rect width="180" height="180" rx="90" fill="%23DCA738"/><path d="M121.169 94.4893L76.6306 118.279C72.8508 120.296 68 117.854 68 113.788V66.2086C68 62.1492 72.8438 59.7006 76.6306 61.7239L121.169 85.5135C122.029 85.9653 122.744 86.6185 123.241 87.4066C123.738 88.1948 124 89.09 124 90.0014C124 90.9128 123.738 91.808 123.241 92.5962C122.744 93.3843 122.029 94.0375 121.169 94.4893Z" fill="white"/></g><defs><clipPath id="clip0_507_14691"><rect width="180" height="180" fill="white"/></clipPath></defs></svg>') no-repeat center;
            background-size: 78px;
        }
    }

    .station-title section {
        padding: 24px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 24px;
        color: #000;
        height: 160px;

        .s-title {
            font-family: Fira Sans;
            font-weight: 700;
            font-size: 24px;
            line-height: 130%;
            text-align: center;
            text-transform: uppercase;
        }

        .s-subtitle {
            font-family: Fira Sans;
            font-weight: 300;
            font-size: 18px;
            line-height: 120%;
            text-align: center;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    }

    @media (max-width: 992px) {

        .audioguide-grid {
            padding-top: 10px;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
            article:last-child {
                grid-column-start: 1; /* Forces the single last item into the middle column */
            }

        }

        .station-card {
            padding: 7px;
        }

        .station-title section {
            padding: 12px;
            gap: 12px;
            height: 120px;

            .s-title {
                font-size: 19px;
            }

            .s-subtitle {
                font-size: 14px;
            }
        }

        .page-description {
            margin-top: 40px;

            p {
                font-size: 14px;
            }

        }

        .lang-switcher {
            font-size: 24px;
            gap: 30px;
        }

        a.lang-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 40px;
            border: 2px #DCA738 solid;
        }
    }

    @media (max-width: 767px) {

        .audioguide-single {
            .post-controls {
                padding-top: 50px;
            }
        }

        .page-title {
            padding-top: 50px;
            padding-bottom: 16px;

            .container {
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
            }

            .row {
                width: fit-content;
                flex-wrap: nowrap;

                .col-md-8{
                    min-width: 70%;
                }

                .left, .right {
                    padding: 0;
                }
            }
        }

        .page-description .row {
            flex-direction: column;

            .col {
                width: 100%;
                flex: 100%;
                max-width: 100%;
            }
        }

        .page-description {

            h3 {
                font-size: 18px;
                margin-top: 24px;
            }

            p {
                font-size: 14px;
                line-height: 21px;
                margin-bottom: 24px;
            }

            p:last-child {
                margin-bottom: 0;
            }
        }

        .lang-switcher {
            font-size: 18px;
            gap: 20px;
        }

        a.lang-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 30px;
            border: 2px #DCA738 solid;
        }

        .audioguide-grid {
            padding-top: 10px;
            grid-template-columns: repeat(1, 1fr);
            gap: 14px;
        }

        h2.audio-title {
            font-size: 22px;
            padding: 0 24px;
        }
    }

}

.single-audioguide {
    .page-title {
        padding-top: 0;
    }
}

.page-template-audioguide {

    .page-title {

        svg {
            width: auto;
            height: auto;
            padding: 0 10px;
        }
    }
}





