/* =========================================
   ALL SERVICE PAGE SHOWCASE SECTION
========================================= */

/* TOP */

.all-service-page-showcase-top {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 50px;
    position: relative;
    z-index: 2;
}

/* Layout only - heading style from global .wla-big-text
   (the span keeps its cyan from the global file) */
.all-service-page-showcase-top h2 {
    margin: 0 0 25px;
}

/* Layout only - text style from global .wla-description-text */
.all-service-page-showcase-top p {
    margin-bottom: 0;
}

/* GRID */

.all-service-page-showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    position: relative;
    z-index: 2;
}

/* CARD */

.all-service-page-showcase-card {
    display: block;
    text-decoration: none !important;
    position: relative;
}

/* TOP BAR */

.all-service-page-showcase-card-top {
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.all-service-page-showcase-dots {
    display: flex;
    gap: 8px;
}

.all-service-page-showcase-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
}

/* Window dots, left to right: red, green, blue */
.all-service-page-showcase-dots span:nth-child(1) {
    background: #ff3b30;
}

.all-service-page-showcase-dots span:nth-child(2) {
    background: #28cd41;
}

.all-service-page-showcase-dots span:nth-child(3) {
    background: #0a84ff;
}

/* Window text style comes from global .wla-card-description-text */

/* VIDEO PREVIEW */

.all-service-page-showcase-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: transparent;
    overflow: hidden;
    position: relative;
}

.all-service-page-showcase-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* v51 (2026-11-12): the same fit for <img> previews (Premium Logo
   Design page) - the img rule was missing, so logo images rendered
   at natural size and cropped inside the preview frame instead of
   filling the card view area exactly like videos do. */
.all-service-page-showcase-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* CONTENT */

.all-service-page-showcase-content {
    padding: 25px;
}

/* Layout only - card title style from global .wla-card-medium-text */
.all-service-page-showcase-content h3 {
    margin: 0 0 12px;
}

/* Layout only - card text style from global .wla-card-description-text */
.all-service-page-showcase-content p {
    margin: 0;
}

/* TABLET */

@media (max-width: 1024px) {

    /* Heading and text sizes now come from the global file */

    .all-service-page-showcase-card {
        border-radius: 21px;
    }

    /* Card text sizes now come from the global file */

}

/* MOBILE */

@media (max-width: 767px) {

    .all-service-page-showcase-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .all-service-page-showcase-top {
        margin-bottom: 35px;
    }

    /* Heading and text sizes now come from the global file */

    .all-service-page-showcase-card {
        border-radius: 18px;
    }

    .all-service-page-showcase-content {
        padding: 20px;
    }

    /* Card text sizes now come from the global file */

}