/* ==========================================================================
   PEM Show Description — v1.0.3
   ========================================================================== */

.psd-card {
    position: relative !important;
    width: 100% !important;
    max-width: var(--psd-max-width, none);
    min-height: var(--psd-min-height, 295px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box !important;
    overflow: visible !important;
    isolation: isolate;
    z-index: 0;
}

.psd-card.psd-card--square {
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
}

.psd-card.psd-card--square .psd-card-box,
.psd-card.psd-card--square .psd-inner {
    height: 100% !important;
    min-height: 0 !important;
}

.psd-card::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(var(--psd-shadow-y, 2px) * -1);
    width: var(--psd-shadow-w, 86%);
    height: var(--psd-shadow-h, 30px);
    border-radius: 50%;
    background: var(--psd-shadow-color, rgba(10, 10, 10, 0.40));
    filter: blur(var(--psd-shadow-blur, 22px));
    opacity: 0;
    transform: translate(-50%, 50%) scale(0.72);
    transition:
        opacity var(--psd-transition, 560ms) cubic-bezier(0.22, 1, 0.36, 1),
        transform var(--psd-transition, 560ms) cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 0;
    will-change: opacity, transform;
}

.psd-card--lift-shadow:hover::after,
.psd-card--lift-shadow:focus-within::after {
    opacity: 1;
    transform: translate(-50%, 50%) scale(1);
}

.psd-card-box {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    min-height: var(--psd-min-height, 295px);
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: var(--psd-radius, 16px) !important;
    border: var(--psd-border-width, 1px) solid var(--psd-border-color, rgba(255,255,255,0.14));
    box-shadow: var(--psd-box-shadow, 0 10px 28px -14px rgba(0,0,0,0.18));
    transform: translateY(0);
    transition:
        transform var(--psd-transition, 560ms) cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow var(--psd-transition, 560ms) cubic-bezier(0.22, 1, 0.36, 1),
        border-color var(--psd-transition, 560ms) ease;
    text-decoration: none !important;
    color: inherit !important;
    isolation: isolate;
    background: #0f1115;
}

.psd-card:hover .psd-card-box,
.psd-card:focus-within .psd-card-box {
    transform: translateY(var(--psd-lift, -6px));
    box-shadow: var(--psd-box-shadow-hover, 0 22px 46px -18px rgba(0,0,0,0.28));
    border-color: var(--psd-border-hover, rgba(255,255,255,0.24));
}

.psd-media-stage {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    border-radius: inherit !important;
    overflow: hidden !important;
    transform: scale(var(--psd-media-scale, 1));
    transform-origin: center center;
    transition: transform var(--psd-transition, 560ms) cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.psd-card:hover .psd-media-stage,
.psd-card:focus-within .psd-media-stage {
    transform: scale(var(--psd-media-scale-hover, 1.06));
}

.psd-media,
.psd-native-overlay,
.psd-shade {
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
}

.psd-media {
    z-index: 0 !important;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.psd-native-overlay {
    z-index: 1 !important;
    background-color: transparent;
}

.psd-shade {
    z-index: 2 !important;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.01) 0%,
        rgba(0,0,0,0.02) 40%,
        var(--psd-overlay, rgba(0,0,0,0.28)) 100%
    );
    transition: background var(--psd-transition, 560ms) ease;
}

.psd-card:hover .psd-shade,
.psd-card:focus-within .psd-shade {
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.02) 0%,
        rgba(0,0,0,0.06) 34%,
        var(--psd-overlay-hover, rgba(0,0,0,0.48)) 100%
    );
}

.psd-inner {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    width: 100% !important;
    min-height: var(--psd-min-height, 295px);
    padding:
        var(--psd-pad-t, 28px)
        var(--psd-pad-r, 28px)
        var(--psd-pad-b, 28px)
        var(--psd-pad-l, 28px) !important;
    box-sizing: border-box !important;
}

.psd-heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.psd-number {
    display: inline-block;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    margin: 0 0 var(--psd-number-mb, 10px) 0 !important;
    padding:
        var(--psd-number-pad-t, 0px)
        var(--psd-number-pad-r, 0px)
        var(--psd-number-pad-b, 0px)
        var(--psd-number-pad-l, 0px) !important;
    border-radius: var(--psd-number-radius, 0px);
    background-color: var(--psd-number-bg, transparent);
    color: #f09a3e;
    font-size: 12px;
    line-height: 1em;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: normal;
}

.psd-title {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff;
    font-size: 20px;
    line-height: 1.22em;
    font-weight: 600;
    text-wrap: balance;
}

.psd-desc-wrap {
    display: grid !important;
    grid-template-rows: 0fr;
    width: 100%;
    margin-top: 0;
    opacity: 0;
    transform: translateY(var(--psd-desc-offset, 8px));
    transition:
        grid-template-rows var(--psd-reveal, 650ms) cubic-bezier(0.22, 1, 0.36, 1),
        margin-top var(--psd-reveal, 650ms) cubic-bezier(0.22, 1, 0.36, 1),
        opacity 320ms ease,
        transform var(--psd-reveal, 650ms) cubic-bezier(0.22, 1, 0.36, 1);
}

.psd-desc {
    min-height: 0 !important;
    overflow: hidden !important;
    width: 100%;
    margin: 0 0 var(--psd-desc-mb, 0px) 0 !important;
    padding: 0 !important;
    color: rgba(255,255,255,0.88);
    font-size: 15px;
    line-height: 1.55em;
    font-weight: 400;
}

.psd-desc p {
    margin: 0 !important;
    padding: 0 0 0.65em 0 !important;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

.psd-desc p:last-child {
    padding-bottom: 0 !important;
}

.psd-card.psd-card--has-desc:hover .psd-desc-wrap,
.psd-card.psd-card--has-desc:focus-within .psd-desc-wrap {
    grid-template-rows: 1fr;
    margin-top: var(--psd-title-mb, 10px);
    opacity: 1;
    transform: translateY(0);
}

a.psd-card-box,
a.psd-card-box:hover,
a.psd-card-box:focus {
    text-decoration: none !important;
}

a.psd-card-box:focus-visible {
    outline: 2px solid rgba(255,255,255,0.95);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .psd-card::after,
    .psd-card-box,
    .psd-media-stage,
    .psd-shade,
    .psd-desc-wrap {
        transition: none !important;
    }

    .psd-card:hover .psd-card-box,
    .psd-card:focus-within .psd-card-box,
    .psd-card:hover .psd-media-stage,
    .psd-card:focus-within .psd-media-stage,
    .psd-card.psd-card--has-desc:hover .psd-desc-wrap,
    .psd-card.psd-card--has-desc:focus-within .psd-desc-wrap {
        transform: none !important;
    }
}