/* Блоки главной страницы. Рассчитаны на Bootstrap 5 (Cassiopeia, Helix Ultimate и совместимые). */

/*
 * Все цвета и размеры собраны в переменные: их задают настройки модуля, а
 * шаблон сайта может переопределить любую одним правилом, например
 *   .olymp-home { --olymp-accent: #1b7ea8; --olymp-muted: #6b7280; }
 */
.olymp-home {
    --olymp-home-max: 1320px;
    --olymp-scale: 1;

    /* Палитра шаблона сайта (ссылки #1b7ea8, фон секций #f2f7fa,
       текст #252525, приглушённый #6b7280). Меняется настройками модуля или одной
       строкой в CSS шаблона — см. комментарий выше. */
    --olymp-accent: #1b7ea8;
    --olymp-accent-hover: #145f7f;
    --olymp-soft-bg: #f2f7fa;
    --olymp-card-bg: #fff;
    --olymp-text: #252525;
    --olymp-muted: #6b7280;
    --olymp-border: #dbe4ea;

    /*
     * Размер текста берётся от шаблона (1em, а не 1rem): у Helix базовый
     * шрифт 14px, и на rem блоки оказывались заметно крупнее остального
     * сайта. Собственные размеры внутри блоков заданы в em, поэтому
     * масштабируются вместе с базой.
     */
    font-size: calc(1em * var(--olymp-scale));
    color: var(--olymp-text);
}

/*
 * Кнопки внутри блоков красим акцентом. Одних переменных --bs-btn-* мало:
 * Helix Ultimate задаёт кнопкам цвет обычными свойствами, и его правило
 * перебивает переменные. Поэтому дублируем свойствами — селектор из двух
 * классов весомее, чем .btn-primary у шаблона.
 */
.olymp-home .btn-primary,
.olymp-home a.btn-primary {
    --bs-btn-bg: var(--olymp-accent);
    --bs-btn-border-color: var(--olymp-accent);
    --bs-btn-hover-bg: var(--olymp-accent-hover);
    --bs-btn-hover-border-color: var(--olymp-accent-hover);
    --bs-btn-active-bg: var(--olymp-accent-hover);
    --bs-btn-active-border-color: var(--olymp-accent-hover);
    background-color: var(--olymp-accent);
    border-color: var(--olymp-accent);
    color: #fff;
}

.olymp-home .btn-primary:hover,
.olymp-home .btn-primary:focus,
.olymp-home .btn-primary:active,
.olymp-home a.btn-primary:hover,
.olymp-home a.btn-primary:focus {
    background-color: var(--olymp-accent-hover);
    border-color: var(--olymp-accent-hover);
    color: #fff;
}

.olymp-home .btn-outline-primary,
.olymp-home a.btn-outline-primary {
    --bs-btn-color: var(--olymp-accent);
    --bs-btn-border-color: var(--olymp-accent);
    --bs-btn-hover-bg: var(--olymp-accent);
    --bs-btn-hover-border-color: var(--olymp-accent);
    --bs-btn-active-bg: var(--olymp-accent);
    --bs-btn-active-border-color: var(--olymp-accent);
    background-color: transparent;
    border-color: var(--olymp-accent);
    color: var(--olymp-accent);
}

.olymp-home .btn-outline-primary:hover,
.olymp-home .btn-outline-primary:focus,
.olymp-home .btn-outline-primary:active,
.olymp-home a.btn-outline-primary:hover,
.olymp-home a.btn-outline-primary:focus {
    background-color: var(--olymp-accent);
    border-color: var(--olymp-accent);
    color: #fff;
}

/* На акцентном фоне кнопка светлая — акцент там уже занят фоном */
.olymp-home-accent .btn-light,
.olymp-home-accent a.btn-light {
    color: var(--olymp-accent);
}

.olymp-home .badge.bg-primary {
    background-color: var(--olymp-accent) !important;
}

.olymp-home a:not(.btn) {
    color: var(--olymp-accent);
}

/* Модуль стоит внутри контейнера шаблона: ширину и поля задаёт шаблон. */
.olymp-home--boxed {
    --olymp-home-max: none;
    --olymp-home-pad: 0;
}

.olymp-home--w1140 {
    --olymp-home-max: 1140px;
}

.olymp-home--wfull {
    --olymp-home-max: none;
}

/*
 * Блоки рассчитаны на широкую позицию шаблона: содержимое центрируется само
 * и получает собственные боковые поля, иначе на телефоне текст упирается в
 * край экрана. Если модуль стоит внутри контейнера шаблона и поля удваиваются,
 * обнулите их: .olymp-home { --olymp-home-pad: 0; }
 */
.olymp-home__in {
    width: 100%;
    max-width: var(--olymp-home-max);
    margin-inline: auto;
    padding-inline: var(--olymp-home-pad, 16px);
}

.olymp-home-soft {
    background: var(--olymp-soft-bg);
}

.olymp-home-accent {
    background: var(--olymp-accent);
    color: #fff;
}

.olymp-home-accent a:not(.btn) {
    color: #fff;
    text-decoration: underline;
}

.olymp-home-accent .text-muted,
.olymp-home-accent .text-body-secondary {
    color: rgba(255, 255, 255, .75) !important;
}

.olymp-home__title {
    margin-bottom: 1rem;
}

/* В Bootstrap отступов шестого уровня нет — добавляем только для широких экранов. */
@media (min-width: 992px) {
    .olymp-home.py-lg-6 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

/* ---------- 1. Первый экран ---------- */

/* Коэффициент от настройки «Размер заголовка»: классы h2…h5 к плавающему
   размеру неприменимы, поэтому множим сам размер. */
.olymp-hero__title {
    font-size: clamp(
        calc(1.5em * var(--olymp-title-scale, 1)),
        calc(1.1em * var(--olymp-title-scale, 1) + 2vw),
        calc(2.5em * var(--olymp-title-scale, 1))
    );
    line-height: 1.15;
    margin-bottom: .75rem;
}

.olymp-hero__lead {
    font-size: 1.0625em;
    max-width: 46ch;
}

.olymp-hero__image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.olymp-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin-top: 1.25rem;
    padding: .625rem .875rem;
    border: 1px solid var(--olymp-border);
    border-radius: 10px;
    background: var(--olymp-card-bg);
}

.olymp-strip__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--bs-success, #198754);
}

.olymp-strip__dot--soon {
    background: var(--olymp-accent);
}

.olymp-strip__dot--done {
    background: var(--bs-secondary, #6c757d);
}

.olymp-strip__text {
    flex: 1 1 14rem;
    min-width: 0;
}

/* Персональный экран вошедшего организатора */
.olymp-me {
    border: 1px solid var(--olymp-border);
    border-radius: 14px;
    background: var(--olymp-card-bg);
    padding: 1.25rem;
}

.olymp-me__figures {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: .75rem 0 1rem;
}

.olymp-me__value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.olymp-me__label {
    font-size: .875em;
    color: var(--olymp-muted);
}

/* ---------- 3. Шаги ---------- */

.olymp-steps {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    counter-reset: olymp-step;
}

@media (min-width: 576px) {
    .olymp-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .olymp-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.olymp-step {
    counter-increment: olymp-step;
    position: relative;
    padding-left: 3.25rem;
}

.olymp-step__icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--olymp-soft-bg);
    font-size: 1.15em;
}

.olymp-step__icon i {
    font-size: 1rem;
    color: var(--olymp-accent);
}

.olymp-step__icon::after {
    content: counter(olymp-step);
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--olymp-accent);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.olymp-step__title {
    font-size: 1rem;
    font-weight: 600;
    margin: .25rem 0 .25rem;
}

.olymp-step__text {
    font-size: .9375em;
    color: var(--olymp-muted);
    margin: 0;
}

/* ---------- 4. Форматы участия ---------- */

.olymp-formats {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .olymp-formats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.olymp-format {
    border: 1px solid var(--olymp-border);
    border-radius: 14px;
    padding: 1.25rem;
    background: var(--olymp-card-bg);
    height: 100%;
}

.olymp-format__icon {
    font-size: 1.5em;
    line-height: 1;
}

.olymp-format__icon i {
    color: var(--olymp-accent);
}

.olymp-format__points {
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .9375em;
}

.olymp-format__points li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: .35rem;
}

.olymp-format__points li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--bs-success, #198754);
    font-weight: 700;
}

/* ---------- 5. Цифры ---------- */

.olymp-stats {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: center;
}

@media (min-width: 768px) {
    .olymp-stats {
        grid-template-columns: repeat(var(--olymp-stats-cols, 4), minmax(0, 1fr));
    }
}

.olymp-stat__value {
    font-size: clamp(1.75em, 1.2em + 2vw, 2.5em);
    font-weight: 700;
    line-height: 1.05;
    color: var(--olymp-accent);
}

.olymp-home-accent {
    --olymp-text: #fff;
    --olymp-muted: rgba(255, 255, 255, .8);
    --olymp-card-bg: rgba(255, 255, 255, .12);
    --olymp-border: rgba(255, 255, 255, .35);
}

.olymp-home-accent .olymp-stat__value {
    color: #fff;
}

.olymp-stat__label {
    font-size: .9375em;
    color: var(--olymp-muted);
}

/* ---------- 6. Образцы наградных ---------- */

.olymp-awards-wrap {
    position: relative;
}

.olymp-awards {
    display: grid;
    gap: 1rem;
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 1fr);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    padding-bottom: .5rem;
}

.olymp-awards:focus-visible {
    outline: 2px solid var(--olymp-accent);
    outline-offset: 4px;
}

/* Стрелки прокрутки: по центру картинок, а не всего блока с подписями. */
.olymp-awards__nav {
    position: absolute;
    top: calc(var(--olymp-award-h, 300px) / 2);
    transform: translateY(-50%);
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--olymp-border);
    border-radius: 50%;
    background: var(--olymp-card-bg);
    color: var(--olymp-text);
    font-size: 1.5em;
    line-height: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    cursor: pointer;
    transition: opacity .15s ease;
}

.olymp-awards__nav:hover {
    background: var(--olymp-soft-bg);
}

.olymp-awards__nav:disabled {
    opacity: .35;
    cursor: default;
}

.olymp-awards__nav--prev {
    left: -.75rem;
}

.olymp-awards__nav--next {
    right: -.75rem;
}

@media (max-width: 767.98px) {
    /* На телефоне прокручивают пальцем — кнопки только мешали бы картинкам. */
    .olymp-awards__nav {
        display: none;
    }
}

.olymp-award {
    scroll-snap-align: start;
    text-align: center;
    display: flex;
    flex-direction: column;
}

/*
 * Рамка одной высоты для всех образцов. Картинка вписывается в неё целиком и
 * центруется, поэтому горизонтальная благодарность стоит посередине, а не
 * прижимается к верху, как было бы при разной высоте картинок.
 */
.olymp-award__pic {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--olymp-award-h, 300px);
}

.olymp-award img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border: 1px solid var(--olymp-border);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    background: var(--olymp-card-bg);
}

.olymp-award__caption {
    font-size: .875em;
    color: var(--olymp-muted);
    margin-top: .5rem;
    align-self: center;
}

/* ---------- 7. Вопросы ---------- */

.olymp-faq details {
    border-bottom: 1px solid var(--olymp-border);
    padding: .75rem 0;
}

.olymp-faq summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: flex;
    gap: .75rem;
    align-items: baseline;
}

.olymp-faq summary::-webkit-details-marker {
    display: none;
}

.olymp-faq summary::after {
    content: '+';
    margin-left: auto;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--olymp-muted);
}

.olymp-faq details[open] summary::after {
    content: '−';
}

.olymp-faq__answer {
    padding-top: .5rem;
    color: var(--olymp-text);
}

.olymp-faq__answer > :last-child {
    margin-bottom: 0;
}

/* ---------- 8. Призыв ---------- */

.olymp-cta {
    text-align: center;
}

.olymp-cta__title {
    font-size: clamp(
        calc(1.25em * var(--olymp-title-scale, 1)),
        calc(1em * var(--olymp-title-scale, 1) + 1.2vw),
        calc(1.875em * var(--olymp-title-scale, 1))
    );
    margin-bottom: .5rem;
}

.olymp-cta__text {
    max-width: 52ch;
    margin: 0 auto 1rem;
}

/* ---------- Переключатель состояний в блоке мероприятий ---------- */

/* .olymp-tabs и .olymp-event-card[hidden] переехали в events.css компонента:
   переключатель теперь общий со страницей списка мероприятий. */

/* ---------- 9. Новости ---------- */

.olymp-news {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 576px) {
    .olymp-news {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .olymp-news {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.olymp-news-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--olymp-border);
    border-radius: 14px;
    background: var(--olymp-card-bg);
    transition: box-shadow .15s ease, transform .15s ease;
}

.olymp-news-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}

/*
 * Картинки у новостей приходят какие угодно — от узких баннеров до сканов.
 * Рамка одной пропорции у всех карточек, поэтому текст начинается на одной
 * высоте. Картинка вписывается в рамку целиком и центруется, а пустоту по
 * бокам заполняет её же размытая копия — обрезать афишу с текстом нельзя,
 * а пустые поля выглядят дёшево.
 */
.olymp-news-card__pic {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--olymp-soft-bg);
}

.olymp-news-card__blur {
    position: absolute;
    /* Вылет за края: размытие иначе высветляет границы рамки */
    inset: -10%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(16px) saturate(1.15);
    transform: scale(1.06);
}

/* Селектор с .olymp-home перебивает общее img { height: auto } шаблона */
.olymp-home .olymp-news-card__pic img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.olymp-news-card__body {
    padding: .875rem 1rem 1rem;
}

.olymp-news-card__date {
    display: block;
    font-size: .8125em;
    color: var(--olymp-muted);
    margin-bottom: .25rem;
}

.olymp-news-card__title {
    font-size: 1.0625em;
    line-height: 1.3;
    margin: 0 0 .35rem;
}

/* Заголовок новости — обычным цветом текста: иначе карточка выглядит
   как сплошная ссылка. Селектор с .olymp-home перебивает общее правило
   для ссылок внутри блоков. */
.olymp-home .olymp-news-card__title a {
    color: var(--olymp-text);
    text-decoration: none;
}

.olymp-home .olymp-news-card__title a:hover,
.olymp-home .olymp-news-card__title a:focus {
    color: var(--olymp-accent);
}

.olymp-news-card__text {
    margin: 0;
    font-size: .9375em;
    color: var(--olymp-muted);
}