.destinations { padding-top: var(--section); }

.finder { display: flex; align-items: center; padding: 6px; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line-2); }
.finder:focus-within { box-shadow: inset 0 0 0 1.5px var(--blue); }
.search { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; padding-inline-start: 14px; color: var(--ink-3); }
.search input { flex: 1; min-width: 0; height: 46px; border: 0; background: none; color: var(--ink); outline: 0; }
.search input::placeholder { color: var(--ink-3); }
.travelers { display: flex; align-items: center; gap: 10px; padding-inline-start: 18px; border-inline-start: 1px solid var(--line); color: var(--ink); font-weight: 500; }
.travelers button { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: var(--r-ctl); background: var(--tint); transition: background 0.2s, color 0.2s; }
.travelers button:hover:enabled { background: var(--blue); color: #fff; }
.travelers button:disabled { opacity: 0.4; cursor: default; }
.travelers output { min-width: 2ch; font-size: 1.0625rem; font-variant-numeric: tabular-nums; text-align: center; }
.finder-note { margin-top: 12px; }

.dest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 20px; margin-top: 36px; }
.dest { display: flex; flex-direction: column; gap: 10px; }
.dest-art { display: block; aspect-ratio: 16 / 10; }
.dest-art img { transition: scale 0.6s var(--ease); }
.dest:hover .dest-art img { scale: 1.04; }

.dest-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; }
.dest h3 { display: flex; align-items: center; gap: 10px; font-size: 1.375rem; letter-spacing: -0.025em; }
.dest h3 img { border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
.dest-price { font-size: 0.875rem; white-space: nowrap; }
.dest-price b { color: var(--ink); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.dest-tags { font-size: 0.9375rem; }
.dest-tags b { color: var(--blue); font-weight: 500; }

.dest details { border-block: 1px solid var(--line); }
.dest summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; color: var(--ink); font-size: 0.9375rem; font-weight: 500; cursor: pointer; list-style: none; }
.dest summary::-webkit-details-marker { display: none; }
.dest summary::after { content: "+"; font-size: 1.125rem; font-weight: 400; color: var(--ink-3); transition: rotate 0.25s var(--ease); }
.dest details[open] summary::after { rotate: 45deg; }
.dest details ul { display: grid; gap: 6px; padding-bottom: 12px; font-size: 0.9375rem; }
.dest dl { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink); font-size: 0.9375rem; }
.dest dl div { display: flex; justify-content: space-between; }
.dest dt { color: var(--ink-2); }
.dest dd { font-variant-numeric: tabular-nums; }
.dest .button { margin-top: auto; justify-content: space-between; white-space: normal; text-align: start; }
.dest-guide { align-self: start; font-size: 0.875rem; color: var(--ink-3); text-underline-offset: 4px; }
.dest-guide:hover { color: var(--ink); }

.dest-empty { margin-top: 36px; padding: 36px; border-radius: var(--r-card); background: var(--tint); text-align: center; }
.dest-more { display: flex; align-items: center; gap: 8px; margin: 40px auto 0; padding: 12px 18px; border: 0; border-radius: var(--r-ctl); background: var(--tint); color: var(--ink); font-weight: 500; transition: background 0.2s, color 0.2s; }
.dest-more:hover { background: var(--ink); color: #fff; }
.dest-terms { margin-top: 28px; text-align: center; }
.dest-terms + .dest-terms { margin-top: 6px; }
.dest-terms a, .dest-empty a, .roadmap a { color: var(--ink); font-weight: 500; text-underline-offset: 4px; }

.roadmap { display: grid; justify-items: center; gap: 16px; margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--line); text-align: center; }
.roadmap .kicker { color: var(--ink-3); }
.roadmap ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; max-width: 760px; color: var(--ink); font-size: clamp(1.25rem, 2.2vw, 1.625rem); font-weight: 500; letter-spacing: -0.025em; }
.roadmap .soon { color: var(--ink-3); font-weight: 400; }

@media (max-width: 980px) { .dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .dest-grid { grid-template-columns: minmax(0, 1fr); }
  .finder { flex-direction: column; align-items: stretch; }
  .travelers { justify-content: space-between; padding: 8px 4px 0; padding-inline-start: 14px; border-top: 1px solid var(--line); border-inline-start: 0; }
}