/* Set to full viewport width */
.ia-c241f28a-container {
    display: flex;
    flex-direction: row;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    /* Ensure a minimum height if 100vh isn't applied or is overridden */
    min-height: 400px;
    overflow: hidden;
    gap: 10px;
    border-radius: 0; /* No border radius */
    transform: translateZ(0); 
}

.ia-c241f28a-container.is-100vh {
    /* The --e-header-height variable is now updated dynamically by JS using ResizeObserver */
    height: calc(100vh - var(--e-header-height, 100px)) !important;
    margin-top: var(--e-header-height, 100px);
}

.ia-c241f28a-item {
    position: relative;
    flex: 1;
    overflow: hidden;
    transition: flex 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    border-radius: 0; /* No border radius */
    /* Increase min-width slightly to ensure items don't collapse completely */
    min-width: 80px;
    will-change: flex;
    text-decoration: none; /* remove link underline */
    color: inherit; /* inherit color */
    cursor: pointer;
    /* Important for arts cursor */
    display: block; 
}


/* Hover state styling - Reduced flex value to 2 instead of 5 */
.ia-c241f28a-item:hover {
    flex: 2;
}

.ia-c241f28a-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: width 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
    will-change: width;
}

.ia-c241f28a-item:hover .ia-c241f28a-bg {
    width: 100%;
}


.ia-c241f28a-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    pointer-events: none; /* Let clicks pass through to the anchor */
}

/* Vertical text reading from top to bottom (sideways), aligned exactly on the right edge */
.ia-c241f28a-title {
    position: absolute;
    top: 20px;
    right: 0; /* Strictly aligned to the right edge */
    margin: 0;
    padding-right: 20px; /* Internal spacing instead of right margin to ensure it sits on the edge */
    font-size: 24px;
    font-weight: 700;
    writing-mode: vertical-rl; /* Changed from sideways-lr to read downwards */
    white-space: nowrap;
    transition: transform 0.4s ease;
    transform-origin: top right;
}

/* Add scaling effect to the inner span */
.ia-c241f28a-title span {
    display: inline-block;
    transition: transform 0.4s ease;
    transform-origin: top center;
}

/* Enlarge title by 10% on hover */
.ia-c241f28a-item:hover .ia-c241f28a-title span {
    transform: scale(1.1);
}

/* Specific override for the 4th item */
.ia-c241f28a-item.is-fourth-item .ia-c241f28a-title {
    top: auto;
    bottom: 20px;
    transform-origin: bottom right;
}

/* Fix transform origin for 4th item span scaling */
.ia-c241f28a-item.is-fourth-item .ia-c241f28a-title span {
    transform-origin: bottom center;
}

@media (max-width: 767px) {
    .ia-c241f28a-container {
        flex-direction: column;
        height: auto !important;
        min-height: 800px;
        margin-top: 0; /* Reset margin on mobile if needed, or keep it */
    }
    .ia-c241f28a-container.is-100vh {
        height: calc(100vh - var(--e-header-height, 100px)) !important;
        min-height: auto;
    }
    .ia-c241f28a-item {
        min-height: 80px;
    }
    .ia-c241f28a-item:hover {
        flex: 2;
    }
    .ia-c241f28a-title {
        writing-mode: horizontal-tb;
        top: 20px;
        right: 20px;
        padding-right: 0;
        transform-origin: center right;
    }
    .ia-c241f28a-title span {
        transform-origin: center right;
    }
    /* Reset 4th item position on mobile to match others or keep it unique */
    .ia-c241f28a-item.is-fourth-item .ia-c241f28a-title {
        top: auto;
        bottom: 20px;
    }
}