/* =========================================================================
   Project showcase — premium demo product gallery
   Per-card branding is driven by --brand / --brand-dark / --brand-light
   custom properties set inline in the Blade partial.
   ========================================================================= */

.tm-section-showcase {
    position: relative;
}

.showcase-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* ------------------------------- Filters ------------------------------- */
/* .vs-section-head caps its contents at 720px. That is the right measure for
   a heading and a lead, but not for the filter row: four categories plus the
   link need about 780px, and the row was putting "View All" on a line of its
   own. So the head is given the container's width and the *text* is capped
   instead — the copy wraps exactly where it did before, and the row gets the
   room it needs. */
.showcase-head.vs-section-head {
    max-width: 100%;
}
.showcase-head .showcase-title,
.showcase-head .showcase-sub {
    max-width: 720px;
    margin-inline: auto;
}

.showcase-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.showcase-filter {
    appearance: none;
    border: 1px solid var(--vs-line);
    background: var(--vs-glass-bg);
    color: var(--vs-ink-soft);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 9px 20px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.showcase-filter:hover {
    background: #fff;
    color: var(--vs-ink);
    transform: translateY(-1px);
}

.showcase-filter.is-active {
    background: var(--vs-navy);
    color: #fff;
    border-color: var(--vs-navy);
}

/* "View All" link at the end of the filter row: same pill footprint, but an
   outlined brand-blue look (and an arrow) so it reads as navigation, not a
   filter. Not a .showcase-filter, so the JS filter/rotation ignore it. */
.showcase-viewall {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 9px 20px;
    border-radius: 999px;
    color: var(--vs-brand);
    background: var(--vs-glass-bg-strong);
    border: 1px solid var(--vs-brand);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: transform 0.2s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.showcase-viewall .fa {
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.showcase-viewall:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -10px rgba(10, 99, 246, 0.45);
}
.showcase-viewall:hover .fa {
    transform: translateX(4px);
}

/* -------------------------------- Grid --------------------------------- */
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 32px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    align-items: stretch;
}

/* ------------------------------- Cards --------------------------------- */
.showcase-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--vs-radius);
    overflow: hidden;
    box-shadow: var(--vs-shadow);
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease;
    will-change: transform;
}

/* Brand accent bar along the top */
.showcase-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand), var(--brand-light));
    z-index: 3;
}

.showcase-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--vs-shadow-hover);
}

/* --------------------------- Card media -------------------------------- */
.showcase-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand-dark), var(--brand));
}

.showcase-card-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.5s ease;
}

.showcase-card:hover .showcase-card-cover {
    transform: scale(1.12);
    filter: saturate(1.05);
}

/* Brand-tinted gradient sitting over the cover for legibility */
.showcase-card-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, color-mix(in srgb, var(--brand-dark) 78%, transparent) 100%);
}

/* Imageless (DB-driven) media: brand emblem instead of a cover photo */
.showcase-card-media--emblem {
    display: flex;
    align-items: center;
    justify-content: center;
}
.showcase-card-media--emblem::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(120% 90% at 15% 10%, rgba(255, 255, 255, 0.22) 0%, transparent 45%),
        radial-gradient(80% 80% at 85% 100%, rgba(0, 0, 0, 0.28) 0%, transparent 55%);
}
.showcase-media-emblem {
    position: relative;
    z-index: 2;
    /* Full width so the logo plate below has a real percentage basis — as a
       shrink-to-fit flex item its width would depend on its own children. */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-align: center;
    padding: 16px;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.showcase-card:hover .showcase-media-emblem {
    transform: scale(1.06);
}
.showcase-media-emblem > .fa {
    font-size: 3.4rem;
    opacity: 0.95;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35));
}
/* A logo-only project (logo uploaded, no banner) shows its logo here, on a
   light plate so dark wordmarks stay readable over the brand gradient. */
.showcase-media-logo {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(230px, 60%);
    height: 62px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}
.showcase-media-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.showcase-media-name {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.showcase-card-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    background: color-mix(in srgb, var(--brand) 88%, black 12%);
    padding: 7px 14px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Fixed logo plate. Uploaded logos come in every shape (wide wordmarks, square
   app icons, tiny favicons), so the plate keeps a stable size and the image is
   contained inside it — a square logo fills the height instead of shrinking to
   an unreadable sliver, and a very wide one can no longer spill off the card. */
.showcase-card-logo {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 2;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 54px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    transition: transform 0.4s ease;
}

.showcase-card-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.showcase-card:hover .showcase-card-logo {
    transform: translateY(-2px);
}

/* Small mobile-app indicator, top-right of the media */
.showcase-card-mobile {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 0.9rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 9px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Hover overlay with CTAs (View Demo + Details) */
.showcase-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    background: color-mix(in srgb, var(--brand-dark) 58%, transparent);
    transition: opacity 0.35s ease;
}

.showcase-card:hover .showcase-card-overlay {
    opacity: 1;
}

.showcase-overlay-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px;
}

.showcase-overlay-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    color: var(--brand-dark);
    font-weight: 700;
    font-size: 0.92rem;
    padding: 12px 22px;
    border-radius: 999px;
    text-decoration: none;
    transform: translateY(10px);
    transition: transform 0.35s ease, box-shadow 0.35s ease, background-color 0.25s ease, color 0.25s ease;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.showcase-card:hover .showcase-overlay-btn {
    transform: translateY(0);
}

.showcase-overlay-btn:hover {
    color: var(--brand-dark);
    text-decoration: none;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}

/* Secondary (Details) overlay button: translucent glass */
.showcase-overlay-btn--ghost {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.showcase-overlay-btn--ghost:hover {
    background: #fff;
    color: var(--brand-dark);
}

/* ---------------------------- Card body -------------------------------- */
.showcase-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 26px 26px 28px;
}

.showcase-card-titlerow {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 12px;
}

.showcase-card-title {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--vs-ink);
    margin: 0;
    line-height: 1.1;
}

.showcase-card-tagline {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand);
}

.showcase-card-desc {
    color: var(--vs-ink-soft);
    font-size: 0.96rem;
    line-height: 1.65;
    margin: 0 0 18px;
}

/* Feature list */
.showcase-features {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: grid;
    gap: 9px;
}

.showcase-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--vs-ink-soft);
    line-height: 1.5;
}

.showcase-features .fa {
    color: var(--brand);
    margin-top: 2px;
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* Tech chips */
.showcase-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.showcase-chip {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-dark);
    background: color-mix(in srgb, var(--brand) 12%, white);
    border: 1px solid color-mix(in srgb, var(--brand) 26%, white);
    padding: 5px 11px;
    border-radius: 7px;
    white-space: nowrap;
}

/* Actions */
.showcase-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.showcase-btn-primary {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 13px 20px;
    border-radius: 11px;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 40%, transparent);
}

.showcase-btn-primary:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--brand) 50%, transparent);
}

.showcase-btn-primary .fa {
    transition: transform 0.25s ease;
}

.showcase-btn-primary:hover .fa {
    transform: translateX(4px);
}

.showcase-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    border: 1.5px solid color-mix(in srgb, var(--brand) 35%, white);
    color: var(--brand);
    border-radius: 11px;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.showcase-btn-ghost:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    text-decoration: none;
}

/* Details variant: shows a label, so it sizes to content instead of a square */
.showcase-btn-details {
    width: auto;
    gap: 8px;
    padding: 13px 18px;
    font-weight: 700;
    font-size: 0.95rem;
}

/* --------------------- Filter hide / reveal animations ----------------- */
.showcase-card.is-hidden {
    display: none;
}

[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.showcase-card[data-reveal]:nth-child(2) {
    transition-delay: 0.1s;
}

/* ------------------------------ Responsive ----------------------------- */
@media (max-width: 767px) {
    .showcase-wrap {
        padding: 64px 0;
    }

    .showcase-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .showcase-card-title {
        font-size: 1.45rem;
    }

    /* On touch devices, surface the overlay CTAs without hover */
    .showcase-card-overlay {
        opacity: 1;
        align-items: flex-end;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, color-mix(in srgb, var(--brand-dark) 72%, transparent) 100%);
    }

    .showcase-overlay-actions {
        padding: 0 14px 16px;
    }

    .showcase-card:hover .showcase-overlay-btn,
    .showcase-overlay-btn {
        transform: none;
    }

    /* The overlay CTAs are always on for touch and sit along the bottom of the
       media, so the logo plate moves up under the category badge instead of
       being painted over by them. */
    .showcase-card-logo {
        top: 58px;
        bottom: auto;
        width: 92px;
        height: 46px;
    }

    /* Same reason: the emblem is anchored into the band between the badge and
       the CTA row rather than centred over both. */
    .showcase-card-media--emblem {
        align-items: flex-start;
        padding-top: 52px;
    }
    .showcase-media-emblem {
        gap: 6px;
        padding: 0 16px;
    }
    .showcase-media-emblem > .fa {
        font-size: 2.2rem;
    }
    .showcase-media-name {
        font-size: 1rem;
    }
    .showcase-media-logo {
        height: 44px;
    }
}

/* Fallback for browsers without color-mix() support */
@supports not (background: color-mix(in srgb, red 50%, white)) {
    .showcase-chip {
        background: #f2f4ea;
        border-color: #dfe4cf;
    }
    .showcase-card-badge {
        background: var(--brand);
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .showcase-card,
    .showcase-card-cover,
    .showcase-overlay-btn,
    [data-reveal] {
        transition: none !important;
    }
    [data-reveal] {
        opacity: 1;
        transform: none;
    }
}