@use '../../../styles/variables' as *;
@use '../../../styles/mixins' as *;

.awt-events {
    background-color: var(--awt-events-bg, #F8FAFC);
    padding-top: var(--awt-events-pt, 6rem);
    padding-bottom: var(--awt-events-pb, 6rem);
    position: relative;
    box-sizing: border-box;

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

    &__container {
        @include awt-container;
        max-width: 1024px;
    }

    &__header {
        text-align: center;
        margin-bottom: 4rem;
    }

    &__badge {
        display: inline-block;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--awt-events-accent, #ea580c);
        margin-bottom: 0.5rem;
    }

    &__title {
        font-family: $awt-font-serif;
        font-size: clamp(2rem, 4vw, 2.5rem);
        font-weight: 700;
        color: var(--awt-events-primary, #0f172a);
        line-height: 1.2;
        margin: 0.5rem 0 0 0;
    }

    &__description {
        font-size: 1rem;
        line-height: 1.7;
        color: var(--awt-events-text, #475569);
        margin: 1rem auto 0 auto;
        max-width: 42rem;
    }

    &__list {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    &__item {
        background-color: #ffffff;
        padding: 1.5rem;
        border-radius: $awt-radius-xl;
        border: 1px solid #f1f5f9;
        box-shadow: $awt-shadow-sm;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        transition: transform $awt-transition-normal, box-shadow $awt-transition-normal, border-color $awt-transition-normal;

        @include md {
            flex-direction: row;
            padding: 2rem;
            gap: 3rem;
        }

        &:hover {
            box-shadow: $awt-shadow-lg;
            border-color: var(--awt-events-accent, #ea580c);
            transform: translateY(-2px);

            .awt-events__date-day {
                color: var(--awt-events-accent, #ea580c);
            }
        }
    }

    &__date-badge {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 80px;
        text-align: center;
    }

    &__date-day {
        font-family: $awt-font-serif;
        font-size: 2rem;
        font-weight: 700;
        color: var(--awt-events-primary, #0f172a);
        line-height: 1;
        transition: color $awt-transition-fast;
    }

    &__date-month {
        font-size: 0.75rem;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-top: 0.25rem;
    }

    &__details {
        flex: 1;
        width: 100%;
        text-align: center;
        border-top: 1px solid #f1f5f9;
        padding-top: 1rem;

        @include md {
            text-align: left;
            border-top: none;
            border-left: 1px solid #f1f5f9;
            padding-top: 0;
            padding-left: 2.5rem;
        }
    }

    &__category {
        display: block;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--awt-events-accent, #ea580c);
        margin-bottom: 0.25rem;
        letter-spacing: 0.05em;
    }

    &__event-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--awt-events-primary, #0f172a);
        margin: 0 0 0.5rem 0;
        line-height: 1.3;
    }

    &__meta {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
        font-size: 0.875rem;
        color: var(--awt-events-text, #475569);

        @include md {
            justify-content: flex-start;
        }
    }

    &__meta-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    &__meta-icon {
        color: #94a3b8;
        font-size: 0.875rem;
    }

    &__cta-btn {
        display: inline-block;
        padding: 0.75rem 1.5rem;
        border: 1px solid var(--awt-events-primary, #0f172a);
        background-color: #ffffff;
        color: var(--awt-events-primary, #0f172a);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-radius: $awt-radius-sm;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color $awt-transition-fast, color $awt-transition-fast, border-color $awt-transition-fast;

        &:hover {
            background-color: var(--awt-events-primary, #0f172a);
            color: #ffffff;
        }

        &--disabled {
            opacity: 0.6;
            cursor: default;

            &:hover {
                background-color: #ffffff;
                color: var(--awt-events-primary, #0f172a);
            }
        }
    }
}