/**
 * Space Info Sticky Block Styles
 */

.space-info-sticky-block {
    border-top: 1px solid rgba(13, 13, 13, 0.1);
    border-bottom: 1px solid rgba(13, 13, 13, 0.1);
    /* Keep borders, let the block grow with images */
    height: auto;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.space-info-sticky-wrapper {
    display: flex;
    height: auto;
    position: relative;
    isolation: isolate;
}

/* Left Side - Content */
.space-info-sticky__content {
    width: 50%;
    padding: 150px 80px 90px 60px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: sticky;
    top: 0;
    align-self: flex-start;
    background: #F2EEE5;
    max-width: 600px;
    margin-left: auto;
}

.space-info-sticky__content-inner {
    width: 100%;
    max-width: 520px;
}

.space-info-sticky__title {
    font-family: 'Panama', serif;
    font-size: 60px;
    font-weight: 400;
    line-height: 90%;
    color: #0D0D0D;
    text-transform: uppercase;
    margin: 0 0 24px 0;
    letter-spacing: -0.01em;
    text-align: left;
}

.space-info-sticky__description {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    color: #0D0D0D;
    margin: 0 0 48px 0;
    max-width: 100%;
}

/* Statistics */
.space-info-sticky__stats {
    display: flex;
    gap: 50px;
    margin-bottom: 40px;
}

.space-info-sticky__stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.space-info-sticky__stat-icon {
    width: 13px;
    height: 13px;
    margin-bottom: 6px;
    opacity: 1;
}

.space-info-sticky__stat-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 150%;
    color: rgba(13, 13, 13, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.space-info-sticky__stat-value {
    font-family: 'Panama', serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 100%;
    color: #0D0D0D;
}

/* Features */
.space-info-sticky__features {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

.space-info-sticky__feature {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 150%;
    color: #0D0D0D;
    text-transform: uppercase;
    margin-bottom: 12px;
    padding-left: 22px;
    position: relative;
    letter-spacing: 0.01em;
}

.space-info-sticky__feature:last-child {
    margin-bottom: 0;
}

.space-info-sticky__feature::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.1607 10.2102L3.33203 7.38091L4.2747 6.43825L6.1607 8.32358L9.93136 4.55225L10.8747 5.49558L6.1607 10.2102Z' fill='%230D0D0D'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 7.33333C0 3.28333 3.28333 0 7.33333 0C11.3833 0 14.6667 3.28333 14.6667 7.33333C14.6667 11.3833 11.3833 14.6667 7.33333 14.6667C3.28333 14.6667 0 11.3833 0 7.33333ZM7.33333 13.3333C6.5454 13.3333 5.76519 13.1781 5.03723 12.8766C4.30928 12.5751 3.64784 12.1331 3.09069 11.576C2.53354 11.0188 2.09158 10.3574 1.79006 9.62943C1.48853 8.90148 1.33333 8.12126 1.33333 7.33333C1.33333 6.5454 1.48853 5.76519 1.79006 5.03723C2.09158 4.30928 2.53354 3.64784 3.09069 3.09069C3.64784 2.53354 4.30928 2.09158 5.03723 1.79006C5.76519 1.48853 6.5454 1.33333 7.33333 1.33333C8.92463 1.33333 10.4508 1.96547 11.576 3.09069C12.7012 4.21591 13.3333 5.74203 13.3333 7.33333C13.3333 8.92463 12.7012 10.4508 11.576 11.576C10.4508 12.7012 8.92463 13.3333 7.33333 13.3333Z' fill='%230D0D0D'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Right Side - Gallery */
.space-info-sticky__gallery {
    width: 50%;
    height: auto;
    position: relative;
    overflow: visible;
}

.space-info-sticky__gallery-wrapper {
    width: 100%;
}

.space-info-sticky__gallery-track {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Right column should never shrink when left is taller */
.space-info-sticky__gallery,
.space-info-sticky__content {
    flex: 0 0 50%;
}

.space-info-sticky__gallery-item {
    width: 100%;
    height: 100vh;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.space-info-sticky__gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .space-info-sticky-block {
        height: auto;
        padding-left: 20px;
        padding-right: 20px;
    }

    .space-info-sticky-wrapper {
        flex-direction: column;
    }

    .space-info-sticky__content {
        width: 100%;
        padding: 60px 0 40px;
        justify-content: flex-start;
        position: relative;
        top: auto;
        align-self: stretch;
    }

    .space-info-sticky__content-inner {
        max-width: 100%;
    }

    .space-info-sticky__title {
        font-size: 50px;
        margin-bottom: 32px;
    }

    .space-info-sticky__description {
        margin-bottom: 32px;
    }

    .space-info-sticky__stats {
        justify-content: space-between;
        margin-bottom: 32px;
    }

    .space-info-sticky__features {
        margin-bottom: 32px;
    }

    .space-info-sticky__gallery {
        width: 100%;
        height: 390px;
        padding-bottom: 60px;
    }

    .space-info-sticky__gallery-item {
        height: 390px;
    }
}

/* Container Adjustments */
.space-info-sticky-block .container {
    max-width: 100%;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* Ensure wrapper takes full height */
.space-info-sticky-block > .container {
    height: 100%;
}