/** SWD Parallax Card: square, layered content cards with progressive tilt. */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 22rem));
    justify-content: center;
    gap: clamp(var(--space-3), 3vw, var(--space-5));
    width: 100%;
}

.swd-parallax-card {
    --card-rotate-x: 0deg;
    --card-rotate-y: 0deg;
    --card-shadow-x: 0rem;
    --card-shadow-y: 1rem;
    position: relative;
    display: grid;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-width: 0;
    padding: clamp(1rem, 4vw, var(--space-4));
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    transform: perspective(50rem) rotateX(var(--card-rotate-x)) rotateY(var(--card-rotate-y));
    transform-style: preserve-3d;
    isolation: isolate;
}

.swd-parallax-card__depth,
.swd-parallax-card__surface,
.swd-parallax-card__accent {
    position: absolute;
    border-radius: inherit;
    pointer-events: none;
}

.swd-parallax-card__depth {
    z-index: -3;
    inset: 0.55rem;
    background: #050505;
    box-shadow: var(--card-shadow-x) var(--card-shadow-y) 1.8rem rgb(0 0 0 / 48%);
    transform: translateZ(-2rem) scale(1.035);
}

.swd-parallax-card__surface {
    z-index: -2;
    inset: 0;
    border: 1px solid var(--color-border);
    background: linear-gradient(145deg, color-mix(in srgb, var(--color-surface) 92%, var(--color-accent)), var(--color-surface) 38%, var(--color-bg));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%), inset 0 -1rem 2rem rgb(0 0 0 / 18%);
}

.swd-parallax-card__accent {
    z-index: -1;
    inset: clamp(0.7rem, 3vw, 1.15rem);
    border-inline: 1px solid color-mix(in srgb, var(--color-accent) 76%, transparent);
    border-block-end: 1px solid color-mix(in srgb, var(--color-accent) 76%, transparent);
    transform: translateZ(2rem);
}

.swd-parallax-card__icon {
    position: absolute;
    z-index: 1;
    inset-block-start: clamp(1rem, 4vw, 1.6rem);
    inset-inline-end: clamp(1rem, 4vw, 1.6rem);
    width: clamp(2.8rem, 9vw, 4.6rem);
    height: auto;
    color: var(--color-accent);
    filter: drop-shadow(0 0.55rem 0.65rem rgb(0 0 0 / 42%));
    transform: translateZ(4rem);
    pointer-events: none;
}

.swd-parallax-card__content {
    position: relative;
    z-index: 2;
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;
    padding-block-start: clamp(3.6rem, 14vw, 5.5rem);
    transform: translateZ(5rem);
}

.swd-parallax-card h3 {
    margin-block-end: clamp(0.55rem, 2vw, var(--space-2));
    padding-inline-end: clamp(0rem, 5vw, 1.25rem);
    font-size: clamp(1.05rem, 3.8vw, 1.32rem);
    line-height: 1.18;
}

.swd-parallax-card h3 a { color: var(--color-text); text-decoration: none; }
.swd-parallax-card h3 a::after { position: absolute; z-index: 3; inset: 0; border-radius: var(--radius-md); content: ""; }
.swd-parallax-card p { flex: 1; margin: 0 0 var(--space-2); color: var(--color-muted); font-size: clamp(0.82rem, 2.8vw, 0.94rem); line-height: 1.38; }
.swd-parallax-card .text-link { position: relative; z-index: 4; width: fit-content; font-size: 0.9rem; }
.swd-parallax-card:focus-within .swd-parallax-card__surface { border-color: var(--color-accent); }

@media (hover: hover) and (pointer: fine) {
    .swd-parallax-card {
        transition: transform 80ms linear;
        will-change: transform;
    }

    .swd-parallax-card__depth { transition: box-shadow 100ms linear; }
}

@media (max-width: 23.99rem) {
    .swd-parallax-card { padding: 0.9rem; }
    .swd-parallax-card__content { padding-block-start: 3.25rem; }
    .swd-parallax-card h3 { font-size: 1rem; }
    .swd-parallax-card p { font-size: 0.78rem; line-height: 1.32; }
}

@media (max-width: 47.99rem) {
    .card-grid { grid-template-columns: minmax(0, 1fr); }
    .swd-parallax-card {
        aspect-ratio: auto;
        min-height: 0;
        padding: var(--space-3);
        transform: none;
    }
    .swd-parallax-card__icon { inset-block-start: var(--space-3); inset-inline-end: var(--space-3); width: 3.25rem; }
    .swd-parallax-card__content { height: auto; padding-block-start: 3.7rem; transform: none; }
    .swd-parallax-card p { flex: 0 1 auto; font-size: 0.9rem; line-height: 1.42; }
}

@media (prefers-reduced-motion: reduce) {
    .swd-parallax-card {
        --card-rotate-x: 0deg !important;
        --card-rotate-y: 0deg !important;
        transition: none;
        transform: perspective(50rem) rotateX(0deg) rotateY(0deg);
        will-change: auto;
    }

    .swd-parallax-card__depth { transition: none; }
}