/* Bento Grid Case Studies — 531ce050 */

.bgcs-531ce050-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

/* Card base */
.bgcs-531ce050-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    cursor: pointer;
    transition-property: transform, box-shadow;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-duration: 400ms;
    box-sizing: border-box;
}

/* Size variants — desktop */
.bgcs-531ce050-size-small {
    flex: 1 1 calc(33.333% - 16px);
    min-width: 250px;
}

.bgcs-531ce050-size-medium {
    flex: 1.5 1 calc(40% - 16px);
    min-width: 300px;
}

.bgcs-531ce050-size-large {
    flex: 2 1 calc(55% - 16px);
    min-width: 350px;
}

/* Background image */
.bgcs-531ce050-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-duration: 400ms;
    z-index: 1;
}

/* Overlay */
.bgcs-531ce050-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        var(--bgcs-overlay-start, rgba(0,0,0,0)),
        var(--bgcs-overlay-end, rgba(0,0,0,0.82))
    );
    z-index: 2;
    transition-property: opacity;
    transition-timing-function: ease;
    transition-duration: 400ms;
}

/* Content */
.bgcs-531ce050-content {
    position: relative;
    z-index: 3;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

/* Category tag */
.bgcs-531ce050-category {
    display: inline-block;
    width: fit-content;
    padding: 0.3em 0.75em;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Title */
.bgcs-531ce050-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.25;
}

/* Excerpt */
.bgcs-531ce050-excerpt {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
}

/* Meta */
.bgcs-531ce050-meta {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4em;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.bgcs-531ce050-meta-sep {
    opacity: 0.5;
}

/* ===== Hover Effects ===== */

/* Zoom image */
.bgcs-531ce050-hover-zoom:hover .bgcs-531ce050-bg {
    transform: scale(1.08);
}

/* Lift card */
.bgcs-531ce050-hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}

/* Brighten overlay */
.bgcs-531ce050-hover-brighten:hover .bgcs-531ce050-overlay {
    opacity: 0.7;
}

/* ===== Responsive ===== */

/* Tablet */
@media (max-width: 1024px) {
    .bgcs-531ce050-size-large {
        flex: 1 1 calc(50% - 16px);
        min-width: 280px;
    }
    .bgcs-531ce050-size-medium {
        flex: 1 1 calc(50% - 16px);
        min-width: 260px;
    }
    .bgcs-531ce050-size-small {
        flex: 1 1 calc(50% - 16px);
        min-width: 240px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .bgcs-531ce050-size-large,
    .bgcs-531ce050-size-medium,
    .bgcs-531ce050-size-small {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .bgcs-531ce050-content {
        padding: 1.25rem;
    }

    .bgcs-531ce050-title {
        font-size: 1.15rem;
    }
}