/* The visa country card, shared by /flights (sideways rail) and /visa (grid). Markup: resources/views/legacy/partials/visa_card.blade.php */
@keyframes vpop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes vglow { 50% { text-shadow: 0 0 14px rgba(110, 231, 183, .85); color: #6EE7B7; } }
@keyframes vcIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.vcard { cursor: pointer; outline: none; }
.vcard .dest-media { aspect-ratio: 3 / 3.9; }
.vcard .dest-name { font-family: 'Playfair Display', Georgia, serif !important; font-weight: 700; text-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
.vcard .dest-media { box-shadow: 0 6px 18px rgba(15, 23, 42, .22); transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease; }
.vcard:hover .dest-media, .vcard:focus-visible .dest-media { transform: translateY(-6px); box-shadow: 0 24px 44px rgba(15, 23, 42, .38); }
.vcard:focus-visible .dest-media { outline: 2px solid #9CA3AF; outline-offset: 3px; }

/* the text under the photo follows the page theme */
.vc-cap { color: #6B7280; }
.vc-date { color: #111827; transition: color .2s; }
.vcard:hover .vc-date { color: #4B5563; }
html[data-theme=dark] .vc-cap { color: #9CA3AF; }
html[data-theme=dark] .vc-date { color: #F3F4F6; }
html[data-theme=dark] .vcard:hover .vc-date { color: #D1D5DB; }
html[data-theme=dark] .vcard .dest-media { box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
html[data-theme=dark] .vcard:hover .dest-media { box-shadow: 0 24px 44px rgba(0, 0, 0, .55); }

.vimg { transition: transform .9s ease-out, filter .5s; }
.vcard:hover .vimg, .vcard.open .vimg { transform: scale(1.12); filter: blur(2px) brightness(.7); }
.vpanel { color: #fff; background: linear-gradient(170deg, rgba(17, 24, 39, .94), rgba(3, 7, 18, .97)); backdrop-filter: blur(10px); transform: translateY(101%); transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
.vcard:hover .vpanel, .vcard:focus-within .vpanel, .vcard.open .vpanel { transform: translateY(0); }
.vpanel .vopen { color: #111827; }
.vhint { transition: opacity .3s; }
.vcard:hover .vhint, .vcard.open .vhint { opacity: 0; }
.vchip, .vlist.on li { opacity: 0; transform: translateY(10px); }
.vcard:hover .vchip, .vcard.open .vchip, .vcard:focus-within .vchip { animation: vpop .5s cubic-bezier(.34, 1.56, .64, 1) calc(.18s + var(--i, 0) * .09s) both; }
.vcard:hover .vlist.on li, .vcard.open .vlist.on li, .vcard:focus-within .vlist.on li { animation: vpop .45s ease calc(.3s + var(--i, 0) * .07s) both; }
.vcard:hover .vprice, .vcard.open .vprice { animation: vglow 1.6s ease .5s 2; }
.vlist { display: none; }
.vlist.on { display: block; }
.vtab { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .6); transition: background .2s, color .2s, transform .2s; }
.vtab:hover { color: #fff; transform: translateY(-1px); }
.vtab.on { background: #fff; color: #111827; }

@media (max-width: 639px) {
    .vcard .dest-media { aspect-ratio: 3 / 4.6; }
    .vpanel > div:first-child { display: none; }
    .vpanel { justify-content: center; gap: .1rem; padding: .6rem; }
    .vtab span { display: none; }
    .vtab { padding: .4rem 0; }
    .vlist li { font-size: 9.5px; }
}

/* grid of cards (/visa): same card, filtered live by the country search */
.vgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem .75rem; }
@media (min-width: 640px) { .vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 1rem; } }
@media (min-width: 1024px) { .vgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.25rem 1.25rem; } }
.vgrid .vcard { animation: vcIn .5s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--k, 0) * 55ms); }
.vgrid .vcard[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .vgrid .vcard { animation: none; } .vpanel, .vimg { transition: none; } }