/* ═══════════════════════════════════════════════════════════════
   WEBY ARCHIVE — Portfolio webů
   Grid layout with dark cards and hover reveal effect.
   Uses theme design tokens from main.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── Grid ──────────────────────────────────────────────────────── */

.weby-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
}

@media (max-width: 960px) {
    .weby-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-5);
    }
}

@media (max-width: 580px) {
    .weby-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
    }
}

/* ── Card ──────────────────────────────────────────────────────── */

.weby-card {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface-1);
    transition: transform var(--dur-normal) var(--ease-out),
                box-shadow var(--dur-normal) var(--ease-out);
}

.weby-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4),
                0 0 30px var(--c-neon-dim);
}

.weby-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* ── Image wrapper ────────────────────────────────────────────── */

.weby-card__image-wrap {
    position: relative;
    aspect-ratio: 900 / 476;
    overflow: hidden;
    background: var(--surface-2);
}

.weby-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slower) var(--ease-out),
                filter var(--dur-normal) var(--ease-out);
}

.weby-card:hover .weby-card__image {
    transform: scale(1.06);
    filter: brightness(0.55);
}

/* ── Overlay with "visit" CTA ──────────────────────────────────── */

.weby-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--dur-normal) var(--ease-out);
    pointer-events: none;
    z-index: 2;
}

.weby-card:hover .weby-card__overlay {
    opacity: 1;
}

.weby-card__visit {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.65em 1.4em;
    background: var(--c-neon);
    color: var(--c-bg);
    font-family: var(--ff-body);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    border-radius: var(--r-full);
    transform: translateY(12px);
    transition: transform var(--dur-normal) var(--ease-spring);
}

.weby-card:hover .weby-card__visit {
    transform: translateY(0);
}

.weby-card__visit svg {
    flex-shrink: 0;
}

/* ── Card body (industry + name) ───────────────────────────────── */

.weby-card__body {
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
}

.weby-card__industry {
    display: block;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--c-neon);
    margin-bottom: var(--sp-1);
}

.weby-card__name {
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: var(--leading-snug);
    color: var(--c-white);
    margin: 0;
    transition: color var(--dur-fast) var(--ease-out);
}

.weby-card:hover .weby-card__name {
    color: var(--c-off-white);
}

/* ── Stagger reveal animation ──────────────────────────────────── */

[data-stagger].will-animate .weby-card {
    opacity: 0;
    transform: translateY(30px);
}

[data-stagger].animate-in .weby-card {
    animation: webyFadeUp 0.6s var(--ease-out) forwards;
}

[data-stagger].animate-in .weby-card:nth-child(1)  { animation-delay: 0.05s; }
[data-stagger].animate-in .weby-card:nth-child(2)  { animation-delay: 0.12s; }
[data-stagger].animate-in .weby-card:nth-child(3)  { animation-delay: 0.19s; }
[data-stagger].animate-in .weby-card:nth-child(4)  { animation-delay: 0.26s; }
[data-stagger].animate-in .weby-card:nth-child(5)  { animation-delay: 0.33s; }
[data-stagger].animate-in .weby-card:nth-child(6)  { animation-delay: 0.40s; }
[data-stagger].animate-in .weby-card:nth-child(7)  { animation-delay: 0.47s; }
[data-stagger].animate-in .weby-card:nth-child(8)  { animation-delay: 0.54s; }
[data-stagger].animate-in .weby-card:nth-child(9)  { animation-delay: 0.61s; }
[data-stagger].animate-in .weby-card:nth-child(10) { animation-delay: 0.68s; }
[data-stagger].animate-in .weby-card:nth-child(11) { animation-delay: 0.75s; }
[data-stagger].animate-in .weby-card:nth-child(12) { animation-delay: 0.82s; }

@keyframes webyFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}