/* KONZERTPROGRAMM — reference: Slice_1.png, 768 × 889.
   Supply original, text-free background and the four licensed posters
   at the asset paths used in the template. Do not use the design screenshot. */

.concert-program {
    --program-background: #050b1c;
    --program-blue: #002078;
    --program-paper: #d8e7f0;
    --program-ink: #00214a;
    --program-red: #b00800;
    --program-red-hover: #920700;
    --program-button-text: #ffffff;
    --program-link-line: #849bc7;
    padding: 150px 0 100px;
    color: var(--program-paper);
    background:
        url('../images/concert-program-bg.jpg') center / cover no-repeat,
        linear-gradient(125deg, var(--program-background), var(--program-blue) 70%, var(--program-background));
    font-family: var(--hero-body-font);
    letter-spacing: 0;
    background-color: #050b1e;
    background-image:
        /* Тёмное пятно справа по центру */
        radial-gradient(
            ellipse 32% 30% at 68% 50%,
            rgba(4, 8, 16, 0.95) 0%,
            rgba(4, 8, 16, 0.6) 45%,
            transparent 100%
        ),

        /* Яркое синее свечение снизу слева */
        radial-gradient(
            ellipse 55% 35% at 20% 100%,
            rgba(2, 40, 134, 1) 0%,
            rgba(3, 30, 106, 0.7) 40%,
            transparent 100%
        ),

        /* Синее свечение сверху по центру */
        radial-gradient(
            ellipse 45% 30% at 38% 20%,
            rgba(4, 27, 88, 1) 0%,
            rgba(4, 22, 70, 0.6) 50%,
            transparent 100%
        ),

        /* Мягкое свечение сверху справа */
        radial-gradient(
            ellipse 35% 25% at 70% 12%,
            rgba(4, 20, 62, 0.9) 0%,
            transparent 100%
        ),

        /* Затемнение по диагонали */
        linear-gradient(
            135deg,
            rgba(6, 9, 18, 0.9) 0%,
            transparent 25%,
            transparent 75%,
            rgba(6, 8, 18, 0.95) 100%
        ),

        /* Общий тон */
        linear-gradient(
            180deg,
            #050e2a 0%,
            #05102e 45%,
            #061a52 100%
        );
}

.concert-program::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.concert-program-inner { /*width: min(662px, calc(100% - 48px));*/ margin-inline: auto; max-width: 1480px; }

.concert-program-title {
    margin: 0;
    font-family: var(--hero-condensed-font);
    font-size: var(--headings-font-size);

    line-height: 1.2;

    overflow-wrap: anywhere;
    font-weight: 400;

    text-align: center;
    text-transform: uppercase;
    color: #d9e6f2;
}

.concert-program-intro {
    text-wrap: balance;
    max-width: 480px;
    color: var(--vg-muted);
    margin: 15px auto;
    font-family: var(--hero-body-font);
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    text-align: center;
}

.concert-program-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    margin-top: 72px;
}

@media (min-width: 768px) {
    .concert-program-grid:not(.is-expanded) > .concert-program-film--extra {
        display: none !important;
    }
}

.concert-program-film { display: contents; }

.concert-program-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    aspect-ratio: 157 / 241;
    padding: 60px 40px;
    border-radius: 8px;
    color: var(--program-ink);
    background: var(--program-paper);
    transition: transform .28s ease, box-shadow .28s ease;
}

.concert-program-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}

.concert-program-tile h3 {
    margin: 0;
    font-family: var(--hero-condensed-font);
    overflow-wrap: anywhere;
    font-weight: 600;
    font-size: 30px;
    line-height: 120%;
    text-transform: uppercase;
    color: #001e4d;
}

.concert-program-tile p {
    margin: 16px 0 0;
    font-weight: 400;
    font-size: 20px;
    line-height: 150%;
    color: #05080f;
}

.concert-program-poster {
    width: 100%;
    height: auto;
    aspect-ratio: 157 / 241;
    object-fit: cover;
    border-radius: 8px;
    filter: grayscale(1);
    background: var(--program-background);
    transition: filter .35s ease, transform .35s ease, box-shadow .35s ease;
    transform: translateZ(0);
}

.concert-program-poster:hover {
    filter: grayscale(0);
    transform: scale(1.025);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
}

.concert-program-actions {
    position: relative;
    margin-top: 54px;
    min-height: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.concert-program-more {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: max-content;
    max-width: 100%;
    margin: 54px auto 0;
    padding: 0 0 3px;
    color: var(--program-link-line);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--program-link-line);
    font-family: inherit;
    font-size: 25px;
    font-weight: 500;
    line-height: inherit;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}

.concert-program-more:hover { color: var(--hero-white); border-color: var(--hero-white); }
.concert-program-more .concert-program-more-icon { font-family: Arial, sans-serif; font-size: 18px; transition: transform .25s ease; }
.concert-program-more[aria-expanded="true"] .concert-program-more-icon { transform: rotate(180deg); }

.concert-program-more .concert-program-more-hide,
.concert-program-more[aria-expanded="true"] .concert-program-more-show {
    display: none;
}

.concert-program-more[aria-expanded="true"] .concert-program-more-hide {
    display: inline;
}

.concert-program-extra-grid[hidden] { display: none !important; }

.concert-program-extra-grid {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    margin-top: 0;
}

.concert-program-extra {
    margin: 30px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--program-link-line);
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
}

.concert-program-extra li { font-family: var(--hero-condensed-font); font-size: 18px; overflow-wrap: anywhere; }

.concert-program-ticket {
    padding: 20px 30px;
    gap: 12px;
    color: var(--program-button-text);
    background: var(--program-red);
    font-family: var(--hero-condensed-font);
    font-size: 25px;
    font-weight: 500;
    margin: 0 10px;
    text-transform: uppercase;
}

.concert-program-ticket:hover { background: var(--program-red-hover); filter: none; }
.concert-program-ticket:focus-visible, .concert-program-more:focus-visible { outline: 2px solid var(--program-paper); outline-offset: 5px; }

@media (prefers-reduced-motion: reduce) {
    .concert-program-tile,
    .concert-program-poster,
    .concert-program-more,
    .concert-program-more span {
        transition: none;
    }

    .concert-program-tile:hover,
    .concert-program-poster:hover {
        transform: none;
    }
}

@media (max-width: 600px) {
    .concert-program { padding: 56px 0 48px; }
    .concert-program-inner { width: calc(100% - 32px); }
    .concert-program-title { font-size: 36px; }
    .concert-program-intro { max-width: 340px; font-size: 11px; line-height: 17px; }
    .concert-program-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; gap: 12px; }
    .concert-program-tile { padding: 24px 18px 20px; }
    .concert-program-film:nth-child(even) .concert-program-tile { order: 2; }
    .concert-program-film:nth-child(even) .concert-program-poster { order: 1; }
    .concert-program-film { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .concert-program-actions { margin-top: 36px; }
    .concert-program-extra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .concert-program-more { margin-top: 40px; font-size: 20px; }
    .concert-program-ticket { left: calc(50% - 10px); min-width: 150px; }
    .concert-program-extra { grid-template-columns: minmax(0, 1fr); }
}