// Room Box Block Styles
// Both editor and frontend styles

.bw-room-box {
    display: block;
    text-decoration: none;
    overflow: hidden;
    background: var(--global-palette1, #ffffff);

    &:hover {
        text-decoration: none;
    }

    // Image wrapper with aspect ratio
    &__image-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
        background: var(--global-palette7, #f5f5f5);
    }

    // Image container (editor only)
    &__image-container {
        position: relative;
        width: 100%;
        height: 100%;
    }

    // Image with zoom effect
    &__image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: transform;
        transform: scale(1.01);
    }

    // Hover zoom effect - only on frontend wrapper
    &:hover &__image {
        transform: scale(var(--bw-room-box-zoom, 1.05));
    }

    // Bottom bar with title and button
    &__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem;
        background: var(--global-palette1, #ffffff);
        gap: 1rem;
    }

    // Room title
    &__title {
        font-size: 1.25rem;
        font-weight: 500;
        color: var(--global-palette9, #1a1a1a);
        line-height: 1.3;
        flex: 1;
        margin: 0;
    }

    // View More button
    &__button {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
        font-weight: 500;
        white-space: nowrap;
        transition: gap 0.3s ease;
    }

    &:hover &__button {
        gap: 0.75rem;
    }

    &__button-text {
        color: #ffffff !important;
    }

    &__button-icon {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
        transition: transform 0.3s ease;
        color: #ffffff !important;
        stroke: #ffffff !important;
    }

    &:hover &__button-icon {
        transform: translateX(3px);
    }
}

// Editor-specific styles
.bw-room-box-editor {
    .bw-room-box {
        cursor: default;

        // Prevent hover effects in editor
        &:hover {
            .bw-room-box__image {
                transform: none;
            }
            .bw-room-box__button {
                gap: 0.5rem;
            }
            .bw-room-box__button-icon {
                transform: none;
            }
        }
    }

    // Image controls overlay
    .bw-room-box__image-controls {
        position: absolute;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 0.5rem;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 10;
    }

    .bw-room-box__image-container:hover .bw-room-box__image-controls {
        opacity: 1;
    }

    // Placeholder for no image
    .bw-room-box__placeholder {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--global-palette7, #f5f5f5);
        cursor: pointer;
        transition: background 0.2s ease;

        &:hover {
            background: var(--global-palette6, #e5e5e5);
        }
    }

    // Editable title in editor
    .bw-room-box__title {
        cursor: text;
        min-width: 100px;

        &:focus {
            outline: 2px solid var(--wp-admin-theme-color, #007cba);
            outline-offset: 2px;
            border-radius: 2px;
        }
    }
}

// Frontend wrapper - high specificity overrides
.bw-room-box-wrapper {
    .bw-room-box {
        border-radius: 0 !important;

        // Link styles
        &:focus {
            outline: 2px solid var(--global-palette-highlight, var(--global-palette3, #2563eb));
            outline-offset: 2px;
        }

        &:focus:not(:focus-visible) {
            outline: none;
        }

        &:focus-visible {
            outline: 2px solid var(--global-palette-highlight, var(--global-palette3, #2563eb));
            outline-offset: 2px;
        }
    }

    .bw-room-box__button,
    .bw-room-box__button-text {
        color: #ffffff !important;
    }

    .bw-room-box__button-icon {
        color: #ffffff !important;
        stroke: #ffffff !important;
    }
}

// Responsive adjustments
@media (max-width: 767px) {
    .bw-room-box {
        &__bar {
            padding: 0.875rem 1rem;
        }

        &__title {
            font-size: 1.0625rem;
        }

        &__button {
            font-size: 0.8125rem;
        }
    }
}