@font-face {
    font-family: "Deledda";
    src: url("../fonts/deledda-closed-regular.woff2") format("woff2");
    src: url("../fonts/deledda-closed-regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

#rsd-2026 {
    --font-deledda: Deledda;
    --color-bg-primary: #EEEADA;
    --color-bg-secondary: #E3DCC2;
    --color-text-primary: #504531;
    /* --color-bg-secondary: #6C5F46; */
    --color-accent: #DD8060;
    --color-muted: #98876A;

    background-color: var(--color-bg-primary);
}

#rsd-2026 h1,
#rsd-2026 h2,
#rsd-2026 h3,
#rsd-2026 h4 {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    margin: 0;
}

#rsd-2026 a {
    text-decoration: none;
}

#rsd-2026 p {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wrapper {
    max-width: 1200px;
    padding: 0 10px;
    margin: 0 auto;
}

.main-screen {
    background-color: var(--color-bg-secondary);
    border-radius: 0 0 30px 30px;
    padding: 60px 0 58px;
}

.main-screen-content {
    position: relative;
    display: flex;
    padding: 0 80px;
}

.main-screen-content .star {
    position: absolute;
    background: url(../img/decor/star.svg) 0 0 / cover no-repeat;
}

.main-screen-content .star--1 {
    bottom: 72%;
    right: 46%;
    width: 23px;
    height: 23px;
}

.main-screen-content .star--2 {
    bottom: -7px;
    right: 48%;
    width: 46px;
    height: 46px;
}

.main-screen-content .star--3 {
    top: -7px;
    right: 22px;
    width: 38px;
    height: 38px;
}

.main-screen-info {
    display: flex;
    flex-direction: column;
    gap: 39px;
    max-width: 600px;
    padding: 64px 0 0;
}

.main-screen-info__title {
    font: 400 5rem/1 var(--font-deledda);
    color: var(--color-text-primary);
    position: relative;
    z-index: 3;
}

.main-screen-info__descr {
    max-width: 500px;
    font: 600 2rem / 1.2 var(--font-harmonia);
    margin: 0;
}

.highlight {
    position: relative;
    z-index: -1;
    display: inline-block;
    width: max-content;
    text-transform: lowercase;
    line-height: 1;
    color: var(--color-text-highlight);
}

.highlight::before {
    position: absolute;
    content: '';
    top: -1px;
    left: -10px;
    background-color: var(--color-accent);
    width: calc(100% + 17px);
    height: calc(100% + 7px);
    z-index: -1;
    border-radius: 10px;
}

.main-screen-image {
    flex-shrink: 0;
}

/* Promo Categories */
.promo-categories {
    padding: 40px 0 117px;
}

.promo-categories-list {
    /* display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-columns: repeat(4, minmax(0, 280px));
    gap: 20px; */
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* делим на 12 колонок */
    gap: 40px 20px; /* row-gap column-gap */
    max-width: 1180px;
}

/* Первая строка — 3 карточки (каждая по 4 колонки из 12) */
.promo-category:nth-child(-n+3) {
    grid-column: span 4;
}

/* Вторая строка — 4 карточки (каждая по 3 колонки из 12) */
.promo-category:nth-child(n+4) {
    grid-column: span 4;
}

.promo-category {
    position: relative;
}

.promo-category::before {
    position: absolute;
    content: '';
    width: 43px;
    height: 43px;
    top: 20px;
    right: 20px;
    background: url(../img/decor/promo-category-star-big.svg) 0 0 / contain no-repeat;
}
.promo-category::after {
    position: absolute;
    content: '';
    width: 23px;
    height: 19px;
    bottom: 61px;
    left: 32px;
    background: url(../img/decor/promo-category-star-small.svg) 0 0 / contain no-repeat;
}

.promo-category__img {
    display: flex;
    justify-content: center;
    height: 250px;
    border-radius: 20px;
    align-items: center;
    background-color: var(--color-accent);
    border: 2px solid var(--color-accent);
}

.promo-category__img:hover {
    background-color:  #E3DCC2;
}

.promo-category__cta {
    font: 400 2.4rem / 1 var(--font-deledda);
    color: var(--color-bg-primary);
    background-color: #6C5F46;
    text-align: center;
    border-radius: 10px;
    padding: 20px 0;
    margin: -37px auto 0;
}

.promo-category__img:hover + .promo-category__cta { 
    background-color:  #DD8060;
}

.promo-category:nth-child(-n+3) .promo-category__cta {
    width: calc(100% - 160px);
}

.promo-category:nth-child(n+4) .promo-category__cta {
    width: calc(100% - 60px);
}

/* Events */

.events {
    background-color: var(--color-bg-secondary);
    border-radius: 80px;
    padding: 120px 0;
}

.events__title {
    max-width: 780px;
    font: 400 5rem / 1.1 var(--font-deledda);
    color: var(--color-text-primary);
    position: relative;
    z-index: 3;
    text-align: center;
    margin: 0 auto !important;
}

.events__title .highlight::before {
    top: -5px;
    left: -12px;
}

.store-events:first-of-type {
    margin: 0 0 32px;
}

.store-events-heading {
    display: flex;
    justify-content: center;
    transform: translate(-14px, 40px);
}

.store-events:last-of-type .store-events-heading {
    transform: translate(-6px, 28px);
} 

.event-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: -15px 0 0 0;
}

.event {
    position: relative;
    display: flex;
    gap: 35px;
    border-radius: 30px;
    background-color: var(--color-muted);
    padding: 60px 40px;
}

.event .star {
    opacity: 0;
    position: absolute;
    background: url(../img/decor/star-white.svg) 0 0 / cover no-repeat;
}

.event .star--1 {
    bottom: 72%;
    right: 46%;
    width: 23px;
    height: 23px;
}


.event-info {
    display: grid;
    grid-template-areas:
        "title title"
        "descr descr"
        "descr descr"
        "date btn";
        gap: 30px;
    flex: 1;
    min-width: 0;
}

.event-img {
    flex: 0 1 420px;
} 

.event-img img {
    display: block;
    width: 100%;
    height: 100%;
} 

.event-list .event .event-info {
    grid-template-rows: 53px auto auto auto;
}

.event-list .event:first-child .event-info {
    grid-template-rows: 21px auto auto auto;
}

.event-info__title {
    font: 400 3rem/32px var(--font-deledda);
    color: var(--color-bg-primary);
    grid-area: title;
}

.evetn-info__descr {
    font: 400 2rem/1.4 var(--font-harmonia);
    color: var(--color-bg-primary);
    margin: 0;
    grid-area: descr;
}

.evetn-info__date {
    font: 400 2.4rem / 1 var(--font-deledda);
    color: var(--color-bg-primary);
    margin: 0;
    grid-area: date;
    white-space: nowrap;
    margin: auto 0 14px 0;
}

.evetn-info__date span {
    font: 400 2rem/1 var(--font-deledda);
    margin: 0 0 0 5px;
}

.event-info__btn {
    width: 100%;
    max-width: 150px;
    font: 400 2.2rem / 1 var(--font-deledda);
    color: var(--color-bg-primary);
    outline: none;
    border: none;
    background-color: #DD8060;
    border-radius: 10px;
    padding: 11px 20px;
    margin: auto 0 0 0;
    grid-area: btn;
    max-height: 56px;
    cursor: pointer;
}

.event-list .event:nth-child(odd) {
    background-color: var(--color-muted);
}

.event-list .event:nth-child(even){
    background-color: var(--color-accent);
}

.event-list .event:nth-child(odd) .event-info__btn {
    background-color: #DD8060;
}

.event-list .event:nth-child(even) .event-info__btn {
    background-color: #6C5F46;
}

.store-events:last-of-type .event-list .event:first-child {
    background-color: var(--color-accent);
}

.store-events:last-of-type .event-list .event:first-child .event-info__btn{
    background-color: #6C5F46;
}

/* Quiz */

.quiz {
    padding: 120px 0;
}

.quiz-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 42px;
    position: relative;
}

.quiz-heading::before {
    position: absolute;
    content: '';
    width: 186px;
    height: 120px;
    top: -49px;
    left: 32px;
    background: url(../img/decor/stars.svg) 0 0 / cover;
}

.quiz-heading__title {
    font: 400 5rem/1 var(--font-deledda);
    color: var(--color-text-primary);
}

.quiz-heading__subtitle {
    max-width: 300px;
    font: 600 2rem / 1.2 var(--font-harmonia);
    text-align: center;
    color: var(--color-text-primary);
    margin: 0;
}

.quiz-container {
    background-color: var(--color-accent);
    border-radius: 30px;
    padding: 60px 40px;
    margin: 29px 0 0 0;
}

/* Game */
.question-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.question-info__question-number {
    font: 400 3rem / 1 var(--font-deledda);
    color: var(--color-text-primary);
    text-align: center;
    margin: 0;
}

.question-info__question {
    font: 600 24px/ 1.4 var(--font-harmonia);
    color: var(--color-text-primary);
    text-align: center;
    padding: 4px 0 0 0;
    margin: 0;
}

.question-answers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 900px;
    padding: 40px 0 23px;
    margin: 0 auto;
}

.question-answers__btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 25px;
    font: 600 24px/ 1.4 var(--font-harmonia);
    color: var(--color-text-primary);
    background-color: transparent;
    border: none;
    white-space: nowrap;
    cursor: pointer;
}

.question-answers__radio {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--color-bg-primary);
}

.question-answers__btn.is-active .question-answers__radio::before {
    position: absolute;
    content: '';
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--color-muted);
    top: 7px;
    left: 7px;
}

.quiz-navigation {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
}

.quiz-navigation__btn {
    font: 400 24px/ 1.4 var(--font-deledda);
    color: var(--color-text-primary);
    border: none;
    border-radius: 10px;
    padding: 13px 66px 10px;
    cursor: pointer;
}

.quiz-navigation__btn--prev {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}

.quiz-navigation__btn--next,
.quiz-navigation__btn--total {
    background-color: #6C5F46;
    color: var(--color-bg-primary);
}

/* Bottom Banner */

.bottom-banner {
    background: url(../img/bottom-banner-n.png) center center / 100% 100% no-repeat;
    height: 751px;
}

/* Popup */

.event-popup {
    display: none;
    max-width: 620px;
    margin: 0 auto;
    background-color: #98876A;
    border-radius: 30px;
    padding: 60px;
    position: fixed;
    left: 50%;
    z-index: 100;
    top: 50%;
    transform: translate(-50%, -50%);
}

.events-popup-success {
    display: none;
    background-color: #98876A;
    border-radius: 30px;
    padding: 60px;
    position: fixed;
    left: 50%;
    z-index: 100;
    top: 50%;
    transform: translate(-50%, -50%);
}

.event-popup__title,
.events-popup-success__title {
    font: 400 3rem/1 var(--font-deledda);
    color: var(--color-bg-primary);
    text-align: center;
    margin: 0;
}

.events-overlay {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.8);
}

.event-close-btn,
.events-popup-success-close-btn {
    width: 23px;
    height: 23px;
    position: absolute;
    top: 23px;
    right: 23px;
    background-color: transparent;
    padding: 0;
    border: none;
    cursor: pointer;
}

.event-close-btn svg,
.events-popup-success-close-btn svg {
    pointer-events: none;
}

/* Results */

.quiz-results {
    display: grid;
    grid-template-columns: auto auto;
    gap: 50px;
    background-color: var(--color-accent);
    border-radius: 30px;
    padding: 60px 40px;
    margin: 29px 0 0 0;
}

.quiz-result-info {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    gap: 20px;
}

.correct-answers {
    font: 400 3rem / 1 var(--font-deledda);
    color: var(--color-text-primary);
    margin: 0;
}

.quiz-result-info__text {
    font: 600 24px / 1.4 var(--font-harmonia);
    color: #504531;
    margin: 0;
}

.quiz-overlay {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.8);
}

.quiz-popup-success {
    display: none;
    background-color: #98876A;
    border-radius: 30px;
    padding: 60px;
    position: fixed;
    left: 50%;
    z-index: 100;
    top: 50%;
    transform: translate(-50%, -50%);
}

.quiz-popup-success-close-btn {
    width: 23px;
    height: 23px;
    position: absolute;
    top: 23px;
    right: 23px;
    background-color: transparent;
    padding: 0;
    border: none;
    cursor: pointer;
}
.quiz-popup-success-close-btn svg {
    pointer-events: none;
}

.quiz-popup-success__title {
    font: 400 3rem/1 var(--font-deledda);
    color: var(--color-bg-primary);
    text-align: center;
    margin: 0;
}
.quiz-popup-success__text {
    font: 600 24px / 1.4 var(--font-harmonia);
    color: #efeada;
    margin: 20px 0 0;
}

@media(max-width: 1180px) {
    .main-screen-content {
        justify-content: space-between;
        gap: 30px;
        padding: 0 30px;
    }
}

@media(max-width: 1080px) {
    .event-img {
        flex: 0 1 350px;
    } 
}

@media(max-width: 1024px) {
    .wrapper--no-pd {
        padding: 0;
    }

    /* Main Screen */
    .main-screen {
        padding: 60px 0;
    }

    .main-screen-content {
        align-items: center;
        flex-direction: column;
        padding: 0;
    }

    .main-screen-info {
        max-width: 500px;
        gap: 20px;
        padding: 0;
    }

    .main-screen-info__title {
        font: 400 3.2rem / 1.2 var(--font-deledda);
        text-align: center;
    }

    .main-screen-info__descr {
        font: 600 1.8rem / 1.2 var(--font-harmonia);
        text-align: center;
    }

    .highlight::before {
        top: -2px;
        left: -7px;
        width: calc(100% + 14px);
        height: calc(100% + 8px);
        border-radius: 7px;
    }

    .main-screen-image {
        max-width: 343px;
        min-height: 313px;
        display: flex;
    }

    .main-screen-content .star--1 {
        bottom: 61.5%;
        right: 7px;
    }

    .main-screen-content .star--2 {
        bottom: -35px;
        right: auto;
        left: 6px;
        width: 32px;
        height: 32px;
    }

    .main-screen-content .star--3 {
        top: -43px;
        right: auto;
        left: 24px;
        width: 22px;
        height: 22px;
    }

    /* Promo Categories */
    .promo-categories {
        padding: 20px 0 56px;
    }

    .promo-categories-list {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
        gap: 15px;
        padding: 0 17px;
    }

    .promo-category {
        flex-shrink: 0;
        max-width: 213px;
        
    }

    .promo-category:nth-child(-n+3) .promo-category__cta,
    .promo-category:nth-child(n+4) .promo-category__cta {
        width: 150px
    }

    .promo-category__img {
        border-radius: 20px;
        height: 193px;
        padding: 30px;
    }

    .promo-category__img img {
        object-position: 0 !important;
    }

    .promo-category__img:hover {
        background-color:  var(--color-accent);
    }

    .promo-category__img:hover + .promo-category__cta { 
        background-color: #6C5F46;
    }

    .promo-category__cta {
        font: 400 1.8rem / 1 var(--font-deledda);
        border-radius: 6px;
        padding: 18px 0;
        margin: -25px auto 0;
    }

    .promo-category::before,
    .promo-category::after {
        display: none;
    }

    /* Events */

    .events {
        border-radius: 30px;
        padding: 60px 0;
    }

    .events__title {
        max-width: 350px;
        font: 400 3.2rem / 1.2 var(--font-deledda);
        margin: 0 auto !important;
    }

    .events__title .highlight::before {
        top: -2px;
        left: -7px;
    }

    .store-events:first-of-type {
        margin: 16px 0 39px;
    }

    .store-events-heading {
        transform: translate(0, 5px);
    }

    .store-events:last-of-type .store-events-heading {
        transform: translate(0, 1px);
    }

    .store-events-heading img {
        max-width: 160px;
    }

    .event-list {
        gap: 20px;
        margin: 0;
    }

    .event {
        display: flex;
        flex-direction: column;
        gap: 21px;
        padding: 40px 16px;
    }

    .event-info {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .event-img {
        flex: 0 1 280px;
    }

    .event-img img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .event-info__title {
        font: 400 2.4rem/29px var(--font-deledda);
    }

    .event-info__title br {
        display: none;
    }

    .evetn-info__descr {
        font: 400 1.8rem/1.4 var(--font-harmonia);
    }

    .evetn-info__date {
        font: 400 2rem / 1 var(--font-deledda);
        margin: 5px 0 0 0;
    }

    .evetn-info__date span {
        font: 400 1.6rem/1 var(--font-deledda);
        margin: 0 0 0 5px;
    }

    /* Quiz */

    .quiz {
        padding: 60px 0;
    }

    .quiz-heading {
        gap: 20px;
    }

    .quiz-heading::before {
        width: calc(100% - 32px);
        height: 143px;
        top: -41px;
        left: 13px;
        background: url(../img/decor/stars-m.svg) 0 0 / 100% 100% no-repeat;
    }

    .quiz-heading__title {
        font: 400 3.2rem/1 var(--font-deledda);
    }

    .quiz-heading__subtitle {
        max-width: 300px;
        font: 600 18px / 1.2 var(--font-harmonia);
    }

    .quiz-container {
        padding: 40px 16px;
        margin: 40px 0 0 0;
    }

    /* Game */
    .question-info {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .question-info__question-number {
        font: 400 2.4rem / 1 var(--font-deledda);
    }

    .question-info__question {
        font: 600 18px/ 1.4 var(--font-harmonia);
        text-align: left;
        padding: 10px 0 0 0;
    }

    .question-answers {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 44px 0 23px;
    }

    .question-answers__btn {
        gap: 10px;
        font: 600 20px/ 1 var(--font-harmonia);
        white-space: normal;
        text-align: left;
        padding: 0;
    }

    .question-answers__radio {
        width: 30px;
        height: 30px;
    }

    .question-answers__btn.is-active .question-answers__radio::before {
        width: 16px;
        height: 16px;
        top: 7px;
        left: 7px;
    }

    .quiz-navigation {
        gap: 20px;
    }

    .quiz-navigation__btn {
        font: 400 22px/ 1.4 var(--font-deledda);
        padding: 8px 43px 7px;
    }

    .quiz-navigation__btn--total {
        padding: 8px 15px 7px;
    }

    .bottom-banner {
        background: url(../img/bottom-banner-n.png) center center / cover no-repeat;
        height: 392px;
    }


    .event-popup {
        display: none;
        width: calc(100% - 32px);
        padding: 60px 16px 40px;
    }

    .events-popup-success {
        display: none;
        width: calc(100% - 32px);
        padding: 40px 66px 40px;
    }

    .event-popup__title,
    .events-popup-success__title {
        font: 400 2.4rem/1 var(--font-deledda);
    }


    .event-close-btn,
    .events-popup-success-close-btn {
        width: 23px;
        height: 23px;
        top: 23px;
        right: 23px;
    }

    .registration {
        padding: 0 !important;
    }

    .registration form {
        padding: 0 !important;
        margin: 20px 0 0 !important;
    }

    .quiz-results {
        grid-template-columns: auto;
        gap: 20px;
        padding: 40px 16px;
    }

    .correct-answers {
        font: 400 2.4rem / 1 var(--font-deledda);
    }

    .quiz-result-info__text {
        font: 600 18px / 1.4 var(--font-harmonia);
    }

    #rsd-2026-quiz-result {
        padding: 0 !important;
        margin: 0 0 0 !important;
    }
}