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

.awt-fun-facts {
    position: relative;
    width: 100%;
    padding-top: 6rem;
    padding-bottom: 6rem;
    box-sizing: border-box;

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

    &__container {
        @include awt-container;
    }

    &__title {
        text-align: center;
        line-height: 1.2;
    }

    &__grid {
        display: grid;
        grid-template-columns: 1fr;

        @include md {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    // --- FUN VARIANT STYLES ---
    &--fun {
        background-color: var(--awt-fun-facts-bg, $awt-color-coral-pop);
        color: #ffffff;

        .awt-fun-facts__container {
            max-width: 56rem;
        }

        .awt-fun-facts__title {
            font-family: $awt-font-sans;
            font-size: clamp(2rem, 5vw, 3rem);
            font-weight: 900;
            color: var(--awt-fun-facts-heading, #ffffff);
            margin-bottom: 3rem;
        }

        .awt-fun-facts__grid {
            gap: 2rem;
            font-size: 1.25rem;
            font-weight: 700;
        }
    }

    // --- ELEGANT VARIANT STYLES ---
    &--elegant {
        background-color: var(--awt-fun-facts-bg, #1e293b);
        color: #ffffff;

        .awt-fun-facts__container {
            max-width: 64rem;
        }

        .awt-fun-facts__title {
            font-family: $awt-font-serif;
            font-size: clamp(1.875rem, 4vw, 2.5rem);
            font-weight: 700;
            color: var(--awt-fun-facts-heading, #ffffff);
            margin-bottom: 4rem;
        }

        .awt-fun-facts__grid {
            gap: 1.5rem;
        }
    }
}