/* Destinations hub — page-only additions. Shared classes live in /css/theme.css. */

.hero-figure{aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-card);background:var(--surface);border:1px solid var(--border)}
.hero-figure img{width:100%;height:100%;object-fit:cover;display:block}

/* dest-grid — 4-col destination overview grid (collapses 2-col then 1-col).
   Uses .related (cream) section background from theme.css for the wrapper. */
.dest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.dest-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:0 0 26px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;overflow:hidden;box-shadow:var(--shadow-soft)}
.dest-figure{aspect-ratio:4/3;background:var(--surface);overflow:hidden}
.dest-figure img{width:100%;height:100%;object-fit:cover;display:block}
.dest-card .num{font-family:var(--font-ui);font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--coral);padding:18px 22px 0}
.dest-card h3{font-size:1.1rem;color:var(--navy);line-height:1.3;padding:0 22px}
.dest-card p{font-family:var(--font-body);font-size:0.95rem;line-height:1.6;color:var(--body);padding:0 22px;margin-top:auto}
.dest-card .cue{font-family:var(--font-ui);font-size:0.78rem;font-weight:700;letter-spacing:0.08em;color:var(--coral);padding:14px 22px 0;border-top:1px solid var(--border);margin:14px 22px 0}

@media (max-width: 1100px){
  .dest-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 720px){
  .dest-grid{grid-template-columns:1fr}
}