/* ==========================================================================
   SkyTrade Aviation - Destinations
   Homepage teaser (3 cards) + full /journeys/ grid.
   ========================================================================== */

.destination-card {
position: relative;
border-radius: 12px;
overflow: hidden;
background: var(--st-navy-light);
border: 1px solid var(--st-navy-mid);
transition: transform 0.25s, box-shadow 0.25s;
}

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

.destination-card__image .skytrade-img-placeholder {
height: 220px;
}

.destination-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.destination-card__image {
position: relative;
height: 220px;
overflow: hidden;
}

.destination-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.destination-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(10, 22, 40, 0.9) 100%);
}

.destination-card__body {
padding: 20px 22px 22px;
}

.destination-card__title {
font-family: var(--st-font-display);
font-size: 20px;
font-weight: 700;
color: var(--st-white);
margin: 0 0 4px;
}

.destination-card__tagline {
font-size: 13px;
color: var(--st-white-60);
margin: 0 0 14px;
line-height: 1.5;
}

.destination-card__count {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.3px;
color: var(--st-gold);
padding-top: 12px;
border-top: 1px solid var(--st-navy-mid);
}

.destination-card__count::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--st-gold);
flex-shrink: 0;
animation: destinationPulse 1.6s ease-in-out infinite;
}

@keyframes destinationPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}

/* ---- Journeys page grid ---- */

.journeys-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}

@media (max-width: 900px) {
.journeys-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 600px) {
.journeys-grid {
grid-template-columns: 1fr;
}
}

.journeys-empty {
text-align: center;
padding: 60px 20px;
color: var(--st-white-60);
}