/**
 * Top Works Component Styles
 *
 * Includes a copy of .case-study-card rules from assets/css/case-studies.css
 * because that file is only enqueued on case-study singular/archive pages,
 * not on the top page where this component renders.
 *
 * @package RIKAI_Marketing
 * @since 1.0.0
 */

/* ==================================================
   Case Study Card
   (copied from assets/css/case-studies.css)
   ================================================== */

.case-study-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    transition: box-shadow 0.3s ease;
    padding: 20px;
}

.case-study-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.case-study-card a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.case-study-card a:hover {
    color: unset;
}

.case-study-card .case-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0px 10px;
    margin-bottom: 10px;
}

.case-study-card .case-header .case-header--texts {
    display: flex;
    flex-direction: column;
}

.case-study-card .case-image {
    min-height: 250px;
    max-height: 250px;
}

.case-study-card .case-image img {
    width: 100%;
    height: 100%;
    min-height: 250px;
    object-fit: cover;
    display: block;
}

.case-study-card .case-meta {
    display: flex;
    flex-direction: column;
    padding: 20px 10px 10px;
}

.case-study-card .case-dev-type {
    letter-spacing: 0.05em;
}

.case-study-card .case-title {
    font-weight: 700;
    margin-bottom: 12px;
}

.case-study-card .case-scale,
.case-study-card .case-tech {
    font-size: 13px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--secondary-border-color);
}

.case-study-card .case-scale span.label {
    min-width: 38px;
    white-space: nowrap;
}

.case-study-card .case-tech span.label {
    min-width: 64px;
    white-space: nowrap;
}

/* ==================================================
   Cases Block (mirrors .top-voices-interviews)
   ================================================== */

.top-works-cases {
    /* margin-top: 20px; */
}

/* Mobile Horizontal Scroll (identical to top-voices-interviews) */
@media (max-width: 991px) {
    #top-works-cases-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        cursor: grab;
        padding-bottom: 12px;
    }

    #top-works-cases-grid.is-grabbing {
        cursor: grabbing;
    }

    #top-works-cases-grid > [class*="col-"] {
        flex: 0 0 80%;
        max-width: 420px;
    }

    .top-works-cases {
        padding: 0 10px;
    }
}

@media (max-width: 767px) {
    .top-works-cases {
        margin-top: 40px;
        padding: 0 35px;
    }
}

@media (max-width: 567px) {
    .top-works-cases {
        padding: 0 10px;
    }

    #top-works-cases-grid > [class*="col-"] {
        min-width: 350px;
    }
}