/* Premium venue cards: full-bleed photo, navy fade, gold frame, details rise on hover (always shown on touch screens) */
.vc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(1.1rem, 2.4vw, 1.8rem); }

.vc {
    position: relative; isolation: isolate; overflow: hidden; border-radius: 30px; aspect-ratio: 4 / 5; min-height: 430px;
    background: linear-gradient(160deg, #0a0e27, #162044); color: #fff;
    box-shadow: 0 2px 4px rgba(10,14,39,.12), 0 28px 50px -24px rgba(10,14,39,.55);
    transition: transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s ease;
}
.vc:hover { transform: translateY(-8px); box-shadow: 0 4px 8px rgba(10,14,39,.14), 0 40px 64px -26px rgba(10,14,39,.65); }

.vc-media { position: absolute; inset: 0; z-index: -2; }
.vc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform 1.4s cubic-bezier(.16,1,.3,1); }
.vc:hover .vc-media img { transform: scale(1.1); }
.vc-noimg {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(212,175,55,.8); font-size: 2.6rem;
    background:
        radial-gradient(circle at 80% 15%, rgba(212,175,55,.28), transparent 45%),
        radial-gradient(circle at 15% 90%, rgba(212,175,55,.16), transparent 50%),
        linear-gradient(160deg, #0a0e27, #1a2552);
}

/* barely-there fade at rest; the navy deepens on hover when the text appears */
.vc::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: opacity .6s ease;
    background: linear-gradient(180deg, rgba(10,14,39,.06) 0%, rgba(10,14,39,0) 45%, rgba(10,16,48,.2) 100%);
}
.vc::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .6s ease;
    background: linear-gradient(180deg, rgba(10,14,39,.4), rgba(8,12,34,.9));
}
.vc:hover::after { opacity: 1; }

/* thin gold frame */
.vc-frame { position: absolute; inset: 12px; border-radius: 22px; border: 1px solid rgba(212,175,55,.38); pointer-events: none; transition: inset .6s cubic-bezier(.16,1,.3,1), border-color .6s ease; }
.vc:hover .vc-frame { inset: 9px; border-color: rgba(240,216,120,.75); }

.vc-price {
    position: absolute; top: 22px; right: 22px; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05;
    padding: 9px 15px; border-radius: 16px; background: rgba(10,14,39,.55); border: 1px solid rgba(212,175,55,.5);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.vc-price small { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(240,216,120,.95); font-weight: 700; }
.vc-price b { font-family: 'Playfair Display', Georgia, serif; font-size: 1.25rem; color: #fff; font-weight: 700; margin-top: 3px; }

.vc-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 28px 28px; display: flex; flex-direction: column; gap: 10px; }
.vc-kicker { font-size: .66rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #e6c860; }
.vc h3 {
    margin: 0; font-family: 'Playfair Display', Georgia, serif !important; font-weight: 700; font-size: clamp(1.45rem, 2.2vw, 1.85rem);
    line-height: 1.12; color: #fff !important; text-shadow: 0 4px 22px rgba(0,0,0,.45); letter-spacing: -.005em;
}
.vc h3::after { display: none !important; }
.vc p {
    margin: 0; color: rgba(255,255,255,.84); font-size: .93rem; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vc-cap { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vc-cap li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: .78rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #fff; }
.vc-cap i { color: #f0d878; font-size: .74rem; } .vc-cap b { font-weight: 700; }
.vc-cta {
    align-self: flex-start; margin-top: 6px; display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 8px 0 22px; border-radius: 999px;
    background: #D4AF37; color: #14110b !important; font-weight: 800; font-size: .86rem; letter-spacing: .02em; text-decoration: none;
    transition: gap .4s cubic-bezier(.16,1,.3,1), filter .2s ease;
}
.vc-cta .vc-ar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #14110b; color: #f0d878; font-size: .8rem; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.vc-cta:hover { gap: 16px; filter: brightness(1.06); } .vc-cta:hover .vc-ar { transform: translateX(3px); }

/* Everything (name, text, capacity, button) stays hidden until the card is hovered, focused or tapped */
.vc { cursor: pointer; }
.vc-body { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.vc:hover .vc-body, .vc.is-open .vc-body, .vc:focus-within .vc-body { opacity: 1; transform: none; }
.vc-hint {
    position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
    font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(10,14,39,.38); border: 1px solid rgba(255,255,255,.35);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; transition: opacity .35s ease;
}
.vc-hint i { color: #f0d878; font-size: .7rem; }
.vc:hover .vc-hint, .vc.is-open .vc-hint, .vc:focus-within .vc-hint { opacity: 0; }
@media (max-width: 640px) { .vc { aspect-ratio: auto; min-height: 460px; border-radius: 26px; } .vc-body { padding: 0 22px 24px; } }
@media (prefers-reduced-motion: reduce) { .vc, .vc-media img, .vc-cta, .vc-cta .vc-ar, .vc-body { transition: none; } .vc:hover { transform: none; } }

/* dark theme: a faint light edge so the card still separates from the page */
[data-theme="dark"] .vc { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 28px 50px -24px rgba(0,0,0,.8); }