/**
 * Author Pro Hero - Block Styles (Pure SCSS BEM)
 */

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

.awt-author-hero {
    --awt-hero-bg: #{$awt-color-paper};
    --awt-hero-shape-bg: rgba(239, 246, 255, 0.6);
    --awt-hero-accent: #{$awt-color-accent};
    --awt-hero-border: #e2e8f0;

    position: relative;
    overflow: hidden;
    background-color: var(--awt-hero-bg);
    box-sizing: border-box;

    // --- Decorative Background Shape ---
    &__shape {
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
        background-color: var(--awt-hero-shape-bg);
        border-bottom-left-radius: 100px;
        z-index: 0;
        pointer-events: none;
    }

    // --- Container ---
    &__container {
        @include awt-container-styles;
        position: relative;
        z-index: 10;
        box-sizing: border-box;
    }

    // --- Grid Layout ---
    &__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3rem;
        align-items: center;

        @include md {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 4rem;
        }
    }

    // --- Left Content Column ---
    &__content {
        display: flex;
        flex-direction: column;
        gap: 1.75rem;
        order: 2;

        @include md {
            order: 1;
        }
    }

    // --- Badge ---
    &__badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.25rem 0.875rem;
        background-color: #fef9c3;
        color: #854d0e;
        border-radius: $awt-radius-full;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        width: fit-content;
    }

    &__badge-icon {
        width: 0.875rem;
        height: 0.875rem;
        fill: currentColor;
    }

    // --- Titles & Descriptions ---
    &__title-group {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    &__title {
        font-family: $awt-font-serif;
        font-size: 2.75rem;
        font-weight: 700;
        line-height: 1.05;
        color: $awt-color-primary;
        margin: 0;

        @include md {
            font-size: 3.75rem;
        }

        @include lg {
            font-size: 4.5rem;
        }

        em,
        span.awt-author-hero__accent-text {
            color: var(--awt-hero-accent);
            font-style: italic;
        }
    }

    &__subtitle {
        font-size: 1.125rem;
        font-weight: 600;
        color: $awt-color-primary;
        margin: 0;

        @include md {
            font-size: 1.25rem;
        }
    }

    &__description {
        font-size: 1rem;
        line-height: 1.7;
        color: $awt-color-secondary;
        margin: 0;

        @include md {
            font-size: 1.125rem;
        }
    }

    // --- Store Buttons Section ---
    &__actions {
        padding-top: 1rem;
        border-top: 1px solid var(--awt-hero-border);
    }

    &__store-title {
        font-size: 0.75rem;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin: 0 0 1rem;
    }

    &__store-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    &__store-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1.5rem;
        background-color: #ffffff;
        border: 1px solid var(--awt-hero-border);
        border-radius: $awt-radius-md;
        box-shadow: $awt-shadow-sm;
        text-decoration: none;
        transition: all $awt-transition-normal;
        cursor: pointer;

        &:hover {
            border-color: var(--awt-hero-accent);
            box-shadow: $awt-shadow-md;
            text-decoration: none;

            .awt-author-hero__store-icon {
                color: var(--awt-hero-accent);
            }
        }
    }

    &__store-icon {
        width: 1.5rem;
        height: 1.5rem;
        object-fit: contain;
        color: $awt-color-primary;
        transition: color $awt-transition-fast;
    }

    &__store-labels {
        text-align: left;
    }

    &__store-label-top {
        display: block;
        font-size: 0.625rem;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        line-height: 1;
    }

    &__store-label-main {
        display: block;
        font-size: 0.875rem;
        font-weight: 700;
        color: $awt-color-primary;
        margin-top: 0.125rem;
    }

    // --- Rating ---
    &__rating {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: #64748b;
    }

    &__stars {
        color: #eab308;
        font-size: 1rem;
        letter-spacing: 0.1em;
    }

    // --- Right Media Column ---
    &__media {
        display: flex;
        justify-content: center;
        position: relative;
        order: 1;

        @include md {
            order: 2;
            justify-content: flex-end;
        }
    }

    &__media-glow {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 20rem;
        height: 20rem;
        background-color: var(--awt-hero-accent);
        opacity: 0.2;
        border-radius: $awt-radius-full;
        filter: blur(60px);
        z-index: -1;
        pointer-events: none;
    }

    &__book-wrapper {
        position: relative;
        width: 280px;
        aspect-ratio: 2/3;
        transform: rotate(-3deg);
        transition: transform 0.7s ease-out;
        cursor: pointer;

        @include sm {
            width: 340px;
        }

        @include md {
            width: 380px;
        }

        &:hover {
            transform: rotate(0deg);

            .awt-author-hero__book-shadow {
                transform: translate(1.5rem, 1.5rem);
            }
        }
    }

    &__book-shadow {
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.2);
        transform: translate(1rem, 1rem);
        filter: blur(16px);
        border-radius: $awt-radius-lg;
        z-index: -1;
        transition: transform 0.7s ease-out;
    }

    &__book-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: $awt-radius-lg;
        box-shadow: $awt-shadow-2xl;
        border: 1px solid rgba(255, 255, 255, 0.1);
        display: block;
    }

    &__book-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f1f5f9;
        border: 2px dashed #cbd5e1;
        border-radius: $awt-radius-lg;
        color: #94a3b8;
    }

    // --- Floating Sample Card ---
    &__floating-card {
        position: absolute;
        bottom: 1.5rem;
        left: -1.5rem;
        background-color: #ffffff;
        padding: 0.75rem 1.5rem;
        border-radius: $awt-radius-sm;
        box-shadow: $awt-shadow-xl;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        text-decoration: none;
        transition: transform $awt-transition-normal;
        z-index: 20;

        &:hover {
            transform: scale(1.05);
            text-decoration: none;
        }
    }

    &__floating-icon {
        width: 2rem;
        height: 2rem;
        border-radius: $awt-radius-full;
        background-color: var(--awt-hero-accent);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        svg {
            width: 1rem;
            height: 1rem;
            fill: currentColor;
        }
    }

    &__floating-labels {
        display: flex;
        flex-direction: column;
    }

    &__floating-label-top {
        display: block;
        font-size: 0.625rem;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        line-height: 1;
    }

    &__floating-label-main {
        display: block;
        font-size: 0.875rem;
        font-weight: 700;
        color: $awt-color-primary;
        margin-top: 0.125rem;
    }
}