/* ======================================== */
/* Сайт группы «Альянс». Mobile-first:      */
/* базовые стили — телефон, ≥768 — десктоп; */
/* горизонтальное окно ≥1024 — две колонки  */
/* ======================================== */

/* Шрифт афиши. Bebas Neue Cyrillic © Ryoichi Tsunekawa (Dharma Type): бесплатная лицензия,
   подключение на сайте через @font-face разрешено; файл не изменять. Строчных букв нет —
   все строки этим шрифтом идут с text-transform: uppercase. */
@font-face {
    font-family: "Bebas Neue Cyrillic";
    src: url("/static/fonts/bebas-neue-cyrillic.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Фон — как у страницы концерта на сайте ЦИИ: оранжевый верх в полосах,
       красная середина со свечением, тёмно-фиолетовый низ */
    --bg-top: #d95b26;
    --bg-red: #c4302a;
    --bg-glow: #e03c2e;
    --bg-wine: #6b1a2e;
    --bg-night: #1e0f2d;
    --c-stripe-dark: rgba(58, 8, 10, .6);

    /* Цвета афиши A3 */
    --c-kicker: #ebe8e8;
    --c-cream: #f4e9d7;
    --c-dot: #cd4c19;
    --c-stripe-red: #d33d31;
    --c-wine: #781d22;

    --c-text: #fff;
    --c-muted: rgba(255, 255, 255, .7);
    --c-faint: rgba(255, 255, 255, .42);
    --gutter: 16px;
    --font: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
    --font-poster: "Bebas Neue Cyrillic", "Arial Narrow", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-night);
    background-image:
        radial-gradient(ellipse 60% 32% at 62% 36%, rgba(224, 60, 46, .6), transparent 70%),
        linear-gradient(180deg, var(--bg-top) 0, #cf4527 14%, var(--bg-red) 30%, #a8262b 52%, var(--bg-wine) 72%, var(--bg-night) 92%);
    color: var(--c-text);
    font-family: var(--font);
    line-height: 1.35;
    overflow-x: hidden;
}

main { flex: 1 0 auto; }

/* ---------- Первый экран: фон с полосами и пылинками ---------- */
.event {
    position: relative;
    padding: 64px var(--gutter) 40px; /* сверху — место под кнопки соцсетей */
}

/* Тёмные горизонтальные полосы сверху: к низу тоньше, чаще и бледнее */
.event::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: clamp(130px, 26vh, 260px);
    background: linear-gradient(180deg,
        var(--c-stripe-dark) 0 5%, transparent 0 15%,
        var(--c-stripe-dark) 0 19.5%, transparent 0 28%,
        var(--c-stripe-dark) 0 31.5%, transparent 0 39.5%,
        var(--c-stripe-dark) 0 42.5%, transparent 0 50%,
        var(--c-stripe-dark) 0 52.5%, transparent 0 59.5%,
        var(--c-stripe-dark) 0 61.5%, transparent 0 68%,
        var(--c-stripe-dark) 0 69.5%, transparent 0 75.5%,
        var(--c-stripe-dark) 0 76.5%, transparent 0 82%,
        var(--c-stripe-dark) 0 82.8%, transparent 0);
    -webkit-mask-image: linear-gradient(#000 30%, transparent);
    mask-image: linear-gradient(#000 30%, transparent);
    pointer-events: none;
}

/* Редкие светлые пылинки, как на образце: шум SVG, оставлены только самые яркие точки */
.event::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .66 0 0 0 0 .5 24 0 0 0 -19.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E");
    opacity: .3;
    pointer-events: none;
}

/* ---------- Соцсети и площадки (левый верхний угол) ---------- */
.socials {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: flex;
    gap: 8px;
}

/* Слегка прозрачные: полупрозрачный тёмный круг и белая иконка на 85% */
.socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(10, 16, 40, .35);
    color: rgba(255, 255, 255, .85);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: background-color .2s, color .2s;
}
.socials a:hover,
.socials a:focus-visible { background: rgba(10, 16, 40, .6); color: #fff; }
.socials a:focus-visible { outline: 2px solid var(--c-cream); outline-offset: 2px; }
.socials svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------- Афиша, собранная вёрсткой ---------- */
/* Все размеры — в долях ширины надписи «АЛЬЯНС» (100cqi), как на A3:
   там она 710 единиц, т.е. 1 единица афиши = 0.1408cqi. Шрифт на афише примерно
   на 14% уже нашего, поэтому кегль подобран по ширине строк, а отступы — так,
   чтобы центры заглавных букв стояли на тех же высотах, что на A3
   (у шрифта при line-height: 1 заглавные занимают от .05em до .75em). */
.poster {
    position: relative;
    z-index: 2;
    width: min(100%, max(300px, 50svh), 640px); /* на планшете афиша с кнопкой — в высоту окна */
    margin: 0 auto;
    container-type: inline-size;
    text-align: center;
}
:where(.poster p, .poster h1) { margin: 0; }

/* Две части текста — над фото и под ним (на компьютере обе стоят справа от фото).
   Каждая — своя мера для cqi: в одну колонку она шириной с афишу, в две — с колонку
   текста, поэтому пропорции строк в обоих случаях одни и те же */
.poster-band,
.poster-concert { container-type: inline-size; }
.poster-concert { position: relative; z-index: 2; } /* название и дата — поверх растворённого низа фото */

/* «45 ЛЕТ ГРУППЕ» с пятью полосками по бокам */
.kicker {
    display: flex;
    align-items: center;
    gap: 2.1cqi;
    font-family: var(--font-poster);
    font-size: 8.7cqi; /* ширина строки 41cqi */
    line-height: 1;
    text-transform: uppercase;
    color: var(--c-kicker);
}
.kicker span { padding-top: .2em; } /* центр заглавных букв — по центру полосок */
.kicker::before,
.kicker::after,
.street::before,
.street::after {
    content: "";
    flex: 1;
    height: 4.37cqi; /* 5 линий по 3 ед. с шагом 7 ед. */
    background: repeating-linear-gradient(180deg, currentColor 0 .4225cqi, transparent 0 .986cqi);
}

.logo { margin-top: .63cqi; }
.logo img { display: block; width: 100%; height: auto; }

/* Солист поверх нижнего края надписи; низ фото растворяется в фоне */
.photo {
    position: relative;
    z-index: 1;
    display: block;
    width: 87.5cqi;
    height: auto;
    margin: -5.46cqi auto 0;
    -webkit-mask-image: linear-gradient(#000 76%, transparent 97%);
    mask-image: linear-gradient(#000 76%, transparent 97%);
}

h1,
.date,
.street {
    font-family: var(--font-poster);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    color: var(--c-cream);
}

/* «ГОЛОСА ЗОВУТ ТЕБЯ» — заходит на растворённый низ фото */
h1 { margin-top: -7.05cqi; font-size: 15.7cqi; } /* ширина 98cqi */

.date { margin-top: .5cqi; font-size: 13.6cqi; } /* ширина 98cqi */
.dot {
    display: inline-block;
    width: .204em;
    height: .204em;
    margin: 0 .175em;
    border-radius: 50%;
    background: var(--c-dot);
    vertical-align: .25em;
}

.place {
    display: block;
    margin-top: .82cqi;
    font-style: normal;
}
.street {
    display: flex;
    align-items: center;
    gap: 2cqi;
    font-size: 5cqi; /* ширина строки 43cqi */
    color: var(--c-cream);
}
.street::before,
.street::after { color: var(--c-stripe-red); }
.street span { padding-top: .2em; }
.venue {
    display: block;
    margin-top: 10px;
    font-size: 15px;
    color: rgba(244, 233, 215, .8);
}

.btn-tickets {
    display: block;
    width: 100%;
    max-width: 360px;
    margin: 22px auto 0;
    padding: 14px 24px 11px;
    border-radius: 999px;
    background: var(--c-cream);
    color: var(--c-wine);
    font-family: var(--font-poster);
    font-size: 26px;
    line-height: 1;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    transition: background-color .2s, transform .2s;
}
.btn-tickets:hover { background: #fff; transform: translateY(-1px); }
.btn-tickets:focus-visible { outline: 3px solid var(--c-cream); outline-offset: 3px; }

/* ---------- Футер ---------- */
.footer {
    padding: 24px var(--gutter) 20px;
    text-align: center;
    font-size: 14px;
    color: var(--c-muted);
}
:where(.footer p) { margin: 0; }

/* Логотипы партнёров с афиши — приглушённо */
.partners {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 28px;
    margin: 0 auto 20px;
    opacity: .55;
}
.partners img { display: block; }

.contacts {
    margin: 0 auto 14px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .2);
    max-width: 360px;
    font-size: 15px;
    line-height: 1.5;
}
.contacts-title {
    color: var(--c-cream);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.contacts a {
    color: var(--c-text);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.contacts a:hover { text-decoration: underline; }
.copyright { font-size: 12px; }

/* Возраст, cookie, сноска про Instagram — мелко и неярко */
.fine-print {
    max-width: 520px;
    margin: 6px auto 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--c-faint);
}

/* ---------- Десктоп ---------- */
@media (min-width: 768px) {
    .event { padding: 76px var(--gutter) 48px; }
    .socials { top: 16px; left: 16px; gap: 10px; }
    .socials a { width: 44px; height: 44px; }
    .socials svg { width: 22px; height: 22px; }
    .venue { font-size: 17px; }
    .btn-tickets { display: inline-block; width: auto; min-width: 320px; margin-top: 26px; font-size: 28px; }
}

/* ---------- Компьютер (горизонтальное окно): фото слева, текст справа ---------- */
@media (orientation: landscape) and (min-width: 1024px) {
    .poster {
        display: grid;
        grid-template-columns: minmax(0, 50fr) minmax(0, 46fr);
        grid-template-rows: 1fr auto auto 1fr; /* текст — по центру высоты фото */
        grid-template-areas: "photo ." "photo band" "photo concert" "photo .";
        column-gap: 4%;
        /* высота афиши — высота фото, 0.53 ширины: с отступами .event (76 + 48 px) — в окне */
        width: min(100%, 1500px, calc((100svh - 124px) * 1.88));
    }
    .photo { grid-area: photo; align-self: end; width: 100%; margin: 0; }
    .poster-band { grid-area: band; }
    .poster-concert { grid-area: concert; }
    h1 { margin-top: 7cqi; } /* фото слева — между логотипом и названием просто отступ */
}