/* Destinations: listing page (.dest-*) and detail page (.dd-*).
   Brand colour comes from the theme's --theme-color so the admin colour setting still applies. */

.dest-page,
.dd-page {
    --d-ink: var(--header, #151415);
    --d-text: var(--text, #455151);
    --d-line: #e8e3d9;
    --d-soft: #f5f1e9;
    --d-brand: var(--theme-color, #e49759);
    --d-brand-soft: color-mix(in srgb, var(--theme-color, #e49759) 16%, #fff);
    --d-peak: #1d6b47;
    --d-ease: cubic-bezier(.16, 1, .3, 1);
}

.dest-page [hidden],
.dd-page [hidden] {
    display: none !important;
}

.dest-page ::selection,
.dd-page ::selection {
    background: color-mix(in srgb, var(--d-brand) 40%, #fff);
    color: var(--d-ink);
}

.dest-page h1, .dest-page h2, .dest-page h3,
.dd-page h1, .dd-page h2, .dd-page h3 {
    text-transform: none;
    text-wrap: balance;
}

.dest-page {
    padding: 72px 0 120px;
}

/* ---------- Listing: intro + filter ---------- */

.dest-intro__lead {
    max-width: 62ch;
    margin: 0 0 36px;
    font-size: 19px;
    line-height: 1.6;
    color: var(--d-text);
}

.dest-filter {
    display: grid;
    gap: 18px;
    padding-bottom: 22px;
    margin-bottom: 56px;
    border-bottom: 1px solid var(--d-line);
}

.dest-filter__circuits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dest-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border: 1px solid var(--d-line);
    border-radius: 999px;
    background: #fff;
    color: var(--d-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s var(--d-ease), border-color .2s var(--d-ease), color .2s var(--d-ease);
}

.dest-chip:hover {
    border-color: var(--d-ink);
}

.dest-chip.is-active {
    background: var(--d-ink);
    border-color: var(--d-ink);
    color: #fff;
}

.dest-chip__count {
    font-size: 13px;
    font-weight: 600;
    opacity: .6;
    font-variant-numeric: tabular-nums;
}

.dest-chip:focus-visible,
.dest-reset:focus-visible,
.dest-btn-outline:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--d-ink) 70%, transparent);
    outline-offset: 2px;
}

/* Fields show focus as one solid border plus a soft brand halo, not a second outline. */
.dest-field--search:focus-within,
.dest-field--select:has(.dest-dd__btn:focus-visible) {
    border-color: var(--d-ink);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--d-brand) 32%, transparent);
}

.dest-filter__controls {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    gap: 12px;
}

.dest-field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--d-line);
    border-radius: 14px;
    background: #fff;
    color: var(--d-text);
    transition: border-color .2s var(--d-ease);
}

.dest-field:hover {
    border-color: color-mix(in srgb, var(--d-ink) 45%, var(--d-line));
}

.dest-field i {
    color: var(--d-text);
    font-size: 15px;
}

.dest-field__label {
    font-size: 14px;
    white-space: nowrap;
}

.dest-field input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--d-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
}

.dest-field input::placeholder {
    color: #6b7473;
    font-weight: 500;
}

/* ---------- Custom dropdown (listbox over a hidden native <select>) ---------- */

.dest-field--select {
    position: relative;
    cursor: pointer;
}

.dest-field--select.is-open {
    border-color: var(--d-ink);
}

.dest-dd__native {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.dest-dd {
    display: flex;
    align-self: stretch;
    flex: 1;
    min-width: 0;
}

.dest-dd__btn {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--d-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-align: left;
    cursor: pointer;
}

.dest-dd__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dest-dd__chev {
    flex: none;
    transition: transform .25s var(--d-ease);
}

.dest-field--select.is-open .dest-dd__chev {
    transform: rotate(180deg);
}

.dest-dd__list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 40;
    min-width: max(100%, 220px);
    margin: 0;
    padding: 6px;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid var(--d-line);
    border-radius: 16px;
    box-shadow: 0 24px 48px -16px rgba(21, 20, 21, .3), 0 4px 14px rgba(21, 20, 21, .08);
    outline: 0;
    transform-origin: top left;
    animation: ddOpen .18s var(--d-ease) both;
}

.dest-dd.is-up .dest-dd__list {
    top: auto;
    bottom: calc(100% + 8px);
    transform-origin: bottom left;
}

.dest-dd.is-end .dest-dd__list {
    left: auto;
    right: 0;
    transform-origin: top right;
}

.dest-dd__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 12px 11px 14px;
    border-radius: 10px;
    color: var(--d-ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.dest-dd__opt.is-active {
    background: var(--d-soft);
}

.dest-dd__opt[aria-selected="true"] {
    font-weight: 700;
}

.dest-dd__tick {
    flex: none;
    opacity: 0;
}

.dest-dd__opt[aria-selected="true"] .dest-dd__tick {
    opacity: 1;
}

@keyframes ddOpen {
    from { opacity: 0; transform: translateY(-6px) scale(.97); }
    to { opacity: 1; transform: none; }
}

.dest-filter__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
}

.dest-reset {
    padding: 0;
    border: 0;
    background: none;
    color: var(--d-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* ---------- Listing: circuit sections ---------- */

.dest-group + .dest-group {
    margin-top: 88px;
}

.dest-group__head {
    margin-bottom: 30px;
}

.dest-group__head h2 {
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.1;
    letter-spacing: -.01em;
}

.dest-group__head p {
    max-width: 60ch;
    margin: 12px 0 0;
    font-size: 17px;
    line-height: 1.65;
}

.dest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 32px 28px;
}

/* ---------- Destination card (listing + "more in this circuit") ---------- */

.dest-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--d-line);
    border-radius: 22px;
    overflow: hidden;
    transition: transform .35s var(--d-ease), box-shadow .35s var(--d-ease), border-color .35s var(--d-ease);
}

.dest-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: 0 22px 44px -22px rgba(21, 20, 21, .38), 0 6px 14px -8px rgba(21, 20, 21, .18);
}

.dest-card:has(a:focus-visible) {
    outline: 3px solid var(--d-ink);
    outline-offset: 3px;
}

.dest-card__media {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: var(--d-soft);
}

.dest-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--d-ease), filter .3s ease;
}

.dest-card:hover .dest-card__media img {
    transform: scale(1.05);
}

.dest-card.is-low .dest-card__media img {
    filter: saturate(.55);
}

.dest-card__season-pill {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    background: #fff;
    color: var(--d-ink);
}

.dest-card__season-pill--peak {
    background: var(--d-peak);
    color: #fff;
}

.dest-card__season-pill--low {
    background: rgba(21, 20, 21, .82);
    color: #fff;
}

.dest-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 22px 22px 20px;
}

.dest-card__title {
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
}

.dest-card__title a {
    color: var(--d-ink);
}

/* The title link covers the whole card, so the card is one big target. */
.dest-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.dest-card__place {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 8px 0 0;
    font-size: 14.5px;
    line-height: 1.4;
}

.dest-card__place i {
    color: var(--d-brand);
}

.dest-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.dest-card__tags li {
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--d-soft);
    color: var(--d-ink);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
}

.dest-card__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
}

/* Everything under the tags sits at the bottom, so cards of different content heights still align. */
.dest-card__bottom {
    margin-top: auto;
    padding-top: 18px;
}

.dest-card__tags + .dest-card__bottom,
.dest-card__desc + .dest-card__bottom {
    padding-top: 18px;
}

.dest-card__season {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 12px 0;
    border-top: 1px solid var(--d-line);
}

.dest-card__season-text {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--d-ink);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
}

.dest-card__season-text i {
    color: var(--d-brand);
}

/* Twelve bars, January to December: height and colour both follow the month's rating. */
.dest-card__strip {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 20px;
}

.dest-card__bar {
    display: block;
    width: 6px;
    border-radius: 2px;
    transition: opacity .25s var(--d-ease);
}

.dest-card__bar--peak { height: 20px; background: var(--d-peak); }
.dest-card__bar--good { height: 12px; background: color-mix(in srgb, var(--d-brand) 55%, #fff); }
.dest-card__bar--low { height: 5px; background: #dcd7cc; }

/* With a "Travelling in" month chosen, that month's bar stays solid and the rest recede. */
.dest-card.has-month .dest-card__bar {
    opacity: .3;
}

.dest-card.has-month .dest-card__bar.is-sel {
    opacity: 1;
}

.dest-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dest-card__from {
    font-weight: 700;
}

.dest-card--compact .dest-card__body {
    padding: 20px 20px 18px;
}

.dest-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--d-ink);
}

.dest-card__facts > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.dest-card__facts i {
    color: var(--d-brand);
}

.dest-card__go {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--d-ink);
    color: #fff;
    font-size: 14px;
    transition: background-color .3s var(--d-ease), transform .3s var(--d-ease);
}

.dest-card:hover .dest-card__go {
    background: var(--d-brand);
    transform: translateX(2px);
}

/* ---------- Listing: empty state + help band ---------- */

.dest-empty {
    padding: 72px 0 24px;
    text-align: center;
}

.dest-empty i {
    font-size: 40px;
    color: var(--d-brand);
}

.dest-empty h2 {
    margin: 18px 0 8px;
    font-size: 28px;
}

.dest-empty p {
    margin: 0 0 24px;
}

.dest-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px 48px;
    margin-top: 96px;
    padding: clamp(28px, 4vw, 52px);
    border-radius: 28px;
    background: var(--d-ink);
    color: rgba(255, 255, 255, .8);
}

.dest-help h2 {
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.15;
}

.dest-help p {
    max-width: 52ch;
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
}

.dest-help__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.dest-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 24px;
    border: 1.5px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    transition: background-color .25s var(--d-ease), border-color .25s var(--d-ease);
}

.dest-btn-outline:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
    color: #fff;
}

/* ---------- Detail page ---------- */

.dd-page {
    padding: 72px 0 120px;
}

.dd-hero {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 9;
    border-radius: 26px;
    overflow: hidden;
    background: var(--d-soft);
}

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

.dd-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    margin-top: 26px;
}

.dd-circuit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--d-brand-soft);
    color: var(--d-ink);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1;
    transition: background-color .25s var(--d-ease);
}

.dd-circuit:hover {
    background: color-mix(in srgb, var(--d-brand) 30%, #fff);
    color: var(--d-ink);
}

.dd-place {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
}

.dd-place i {
    color: var(--d-brand);
}

.dd-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 22px 28px;
    margin: 30px 0 0;
    padding: 24px 0;
    border-top: 1px solid var(--d-line);
    border-bottom: 1px solid var(--d-line);
}

.dd-facts div {
    min-width: 0;
}

.dd-facts dt {
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.dd-facts dd {
    margin: 0;
    color: var(--d-ink);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.dd-section {
    margin-top: 64px;
}

.dd-section > h2 {
    margin: 0 0 20px;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.15;
    letter-spacing: -.01em;
}

.dd-known {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dd-known li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--d-brand-soft);
    color: var(--d-ink);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}

.dd-known i {
    color: var(--d-ink);
    font-size: 14px;
}

.dd-prose {
    max-width: 70ch;
    font-size: 17px;
    line-height: 1.8;
}

.dd-prose p {
    margin: 0 0 1.1em;
}

/* Admin-authored HTML often carries its own H1/H2 at full theme size; keep it
   subordinate to the section heading ("About ...") above it. */
.dd-prose h1,
.dd-prose h2,
.dd-prose h3,
.dd-prose h4,
.dd-prose h5,
.dd-prose h6 {
    margin: 1.9em 0 .6em;
    color: var(--d-ink);
    font-size: clamp(21px, 2.2vw, 25px);
    line-height: 1.25;
    letter-spacing: -.005em;
    text-wrap: balance;
}

.dd-prose h4,
.dd-prose h5,
.dd-prose h6 {
    font-size: 19px;
}

.dd-prose > :first-child {
    margin-top: 0;
}

.dd-prose > :last-child {
    margin-bottom: 0;
}

.dd-prose strong,
.dd-prose b {
    color: var(--d-ink);
    font-weight: 700;
}

.dd-prose a {
    color: var(--d-ink);
    text-decoration: underline;
    text-decoration-color: var(--d-brand);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.dd-prose ul,
.dd-prose ol {
    margin: 0 0 1.2em;
    padding-left: 1.3em;
}

.dd-prose li {
    margin-bottom: .45em;
    padding-left: .2em;
}

.dd-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
}

.dd-places {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 14px 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dd-places li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
    color: var(--d-ink);
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.5;
}

.dd-places i {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--d-brand-soft);
    color: var(--d-ink);
    font-size: 11px;
}

/* Best time to visit: a 12-month bar strip. Height, colour and the written level all carry the meaning. */
.dd-calendar {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dd-month {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    text-align: center;
}

.dd-month__track {
    display: flex;
    align-items: flex-end;
    height: 104px;
}

.dd-month__bar {
    width: 100%;
    max-width: 56px;
    margin-inline: auto;
    border-radius: 9px;
    transform-origin: bottom;
    animation: ddGrow .8s var(--d-ease) both;
    animation-delay: calc(var(--i) * 45ms);
}

.dd-month--peak .dd-month__bar { height: 100%; background: var(--d-peak); }
.dd-month--good .dd-month__bar { height: 62%; background: color-mix(in srgb, var(--d-brand) 55%, #fff); }
.dd-month--low .dd-month__bar { height: 26%; background: #dcd7cc; }

.dd-month__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--d-ink);
    line-height: 1;
}

.dd-month__level {
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

.dd-month.is-now .dd-month__name {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.dd-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.dd-legend li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dd-legend span {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

.dd-note {
    max-width: 66ch;
    margin: 18px 0 0;
    font-size: 16.5px;
    line-height: 1.7;
}

.dd-map {
    height: 400px;
    border: 1px solid var(--d-line);
    border-radius: 22px;
    overflow: hidden;
}

.dd-more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: var(--d-ink);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.dd-packages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 24px;
}

.dd-packages .tour-box-items {
    margin: 0;
    height: 100%;
}

.dd-nearby {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 24px;
}

/* ---------- Detail: sidebar + inline CTA ---------- */

.dd-aside {
    position: sticky;
    top: 110px;
    display: grid;
    gap: 24px;
}

.dd-plan {
    padding: 30px 28px 28px;
    border: 1px solid var(--d-line);
    border-radius: 24px;
    background: #fff;
}

.dd-plan h2 {
    margin: 0 0 10px;
    font-size: 26px;
    line-height: 1.2;
}

.dd-plan > p {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.6;
}

.dd-plan__rows {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--d-line);
}

.dd-plan__rows li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--d-line);
    font-size: 15px;
    line-height: 1.4;
}

.dd-plan__rows strong {
    color: var(--d-ink);
    text-align: right;
}

.dd-plan__actions {
    display: grid;
    gap: 12px;
}

.dd-plan .theme-btn,
.dd-cta-inline .theme-btn {
    width: 100%;
    text-align: center;
}

.dd-btn-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 24px;
    border: 1.5px solid var(--d-ink);
    border-radius: 999px;
    color: var(--d-ink);
    font-size: 16px;
    font-weight: 700;
    transition: background-color .25s var(--d-ease), color .25s var(--d-ease);
}

.dd-btn-line:hover {
    background: var(--d-ink);
    color: #fff;
}

.dd-btn-line:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--d-ink) 70%, transparent);
    outline-offset: 2px;
}

.dd-cta-inline {
    display: none;
    gap: 12px;
    margin-top: 24px;
}

.dd-offer img {
    display: block;
    width: 100%;
    border-radius: 24px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {
    .dest-page,
    .dd-page {
        padding: 56px 0 96px;
    }

    .dd-aside {
        position: static;
        margin-top: 8px;
    }

    .dd-cta-inline {
        display: grid;
    }

    .dd-plan .dd-plan__actions {
        display: none;
    }
}

@media (max-width: 767px) {
    .dest-filter__controls {
        grid-template-columns: 1fr 1fr;
    }

    .dest-field--search {
        grid-column: 1 / -1;
    }

    .dest-group + .dest-group {
        margin-top: 64px;
    }

    .dd-section {
        margin-top: 52px;
    }

    .dd-hero {
        border-radius: 20px;
    }

    .dd-calendar {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        row-gap: 18px;
    }

    .dd-month__track {
        height: 64px;
    }

    .dd-map {
        height: 320px;
    }
}

@media (max-width: 479px) {
    .dest-filter__controls {
        grid-template-columns: 1fr;
    }

    .dest-card__body {
        padding: 20px 18px 18px;
    }

    .dd-facts {
        grid-template-columns: 1fr 1fr;
    }
}

@keyframes ddGrow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
    .dest-card,
    .dest-card__media img,
    .dest-card__go,
    .dest-chip,
    .dest-dd__chev,
    .dest-dd__list,
    .dd-month__bar {
        transition: none;
        animation: none;
    }

    .dest-card:hover,
    .dest-card:hover .dest-card__media img,
    .dest-card:hover .dest-card__go {
        transform: none;
    }
}

/* On the dark help band the theme button's hover wave must not match the band: it turns white instead. */
.dest-help a.theme-btn:hover {
    background-color: #fff;
    color: var(--d-ink) !important;
}

.dest-help .theme-btn::before,
.dest-help .theme-btn::after {
    background-color: #fff;
}

.dest-help .theme-btn:hover span {
    color: var(--d-ink);
}

.dest-help .theme-btn:hover i {
    background-color: var(--d-ink);
    color: #fff;
}