/*
 * Homepage destination map.
 *
 * Scoped entirely under .ivs-dmap. The --v5-* tokens live in pages/homepage.css
 * and are not global, so every one below carries a fallback.
 */

.ivs-dmap {
    background: #fff;
    padding: clamp(2.4rem, 4.5vw, 3.8rem) 0;
}

/* Wider than the 1230px Bootstrap container, matching the Featured Tours strip
   above: the map needs the room, and the two sections then line up. */
.ivs-dmap > .container {
    width: min(1680px, calc(100% - 3rem));
    max-width: none;
}

/* ── Heading ── */

.ivs-dmap .ivs-dmap-head {
    text-align: center;
    max-width: 46rem;
    margin: 0 auto clamp(1.8rem, 3.5vw, 2.6rem);
}

.ivs-dmap .ivs-dmap-eyebrow {
    display: block;
    margin-bottom: 0.85rem;
    font-family: var(--v5-font-label, 'Inter', sans-serif);
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--v5-olive-700, #4a5e2f);
}

.ivs-dmap .ivs-dmap-title {
    margin: 0 0 0.75rem;
    font-family: var(--v5-font-display, 'Playfair Display', Georgia, serif);
    font-weight: 500;
    font-size: clamp(1.85rem, 3vw, 2.7rem);
    line-height: 1.2;
    color: var(--v5-ink, #201f1d);
}

.ivs-dmap .ivs-dmap-sub {
    margin: 0;
    font-family: var(--v5-font-body, 'Lora', Georgia, serif);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--v5-stone, #5b574d);
}

/* ── Map and preview ── */

/* List, map, preview.
   The map takes the smallest share of the three: Italy is tall and narrow, so a
   wide map is mostly empty sea. Giving that width to the list and the preview
   instead lets the list show all 36 places without a scrollbar and makes the
   photograph considerably larger. */
.ivs-dmap .ivs-dmap-stage {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.32fr) minmax(0, 0.82fr);
    gap: 1.4rem;
    align-items: stretch;
}

.ivs-dmap .ivs-dmap-canvas {
    position: relative;
    min-height: 620px;
    background: var(--v5-parchment, #f2efe8);
    border: 1px solid var(--v5-line, #e4e0d5);
}

.ivs-dmap .ivs-dmap-gl {
    position: absolute;
    inset: 0;
}

/* Shown only when Mapbox cannot run; the list below still works. */
.ivs-dmap .ivs-dmap-fallback {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 2rem;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--v5-stone, #5b574d);
}

.ivs-dmap .ivs-dmap-canvas.is-unavailable .ivs-dmap-gl {
    display: none;
}

.ivs-dmap .ivs-dmap-canvas.is-unavailable .ivs-dmap-fallback {
    display: flex;
}

/* Appears once the map has flown in to a destination. */
.ivs-dmap .ivs-dmap-reset {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2;
    padding: 0.55em 1em;
    border: 1px solid var(--v5-line, #e4e0d5);
    background: rgba(255, 255, 255, 0.94);
    font-family: var(--v5-font-label, 'Inter', sans-serif);
    font-weight: 600;
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--v5-olive-900, #33421f);
    cursor: pointer;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.14);
    transition: background 0.25s ease, color 0.25s ease;
}

.ivs-dmap .ivs-dmap-reset:hover {
    background: var(--v5-olive-900, #33421f);
    color: var(--v5-ivory, #faf9f6);
}

.ivs-dmap .ivs-dmap-reset[hidden] {
    display: none;
}

.ivs-dmap .ivs-dmap-pin {
    width: 13px;
    height: 13px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--v5-amber, #fcb913);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.25s ease;
}

.ivs-dmap .ivs-dmap-pin:hover,
.ivs-dmap .ivs-dmap-pin.is-active {
    transform: scale(1.5);
}

.ivs-dmap .ivs-dmap-pin.is-active {
    background: var(--v5-olive-700, #4a5e2f);
}

.ivs-dmap .ivs-dmap-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--v5-ivory, #faf9f6);
    border: 1px solid var(--v5-line, #e4e0d5);
}

.ivs-dmap .ivs-dmap-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--v5-parchment, #f2efe8);
}

.ivs-dmap .ivs-dmap-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.45s ease;
}

.ivs-dmap .ivs-dmap-media img.is-shown {
    opacity: 1;
}

.ivs-dmap .ivs-dmap-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.15rem 1.2rem 1.3rem;
}

.ivs-dmap .ivs-dmap-kicker {
    margin-bottom: 0.5rem;
    font-family: var(--v5-font-label, 'Inter', sans-serif);
    font-weight: 600;
    font-size: 0.58rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--v5-olive-700, #4a5e2f);
}

/* Two lines reserved. "Gran Sasso National Park Abruzzo Region Italy" needs
   them; "Rome" does not, and without the reservation the panel jumped by the
   height of a line every time the name changed length. */
.ivs-dmap .ivs-dmap-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.25em);
    margin: 0 0 0.55rem;
    font-family: var(--v5-font-display, 'Playfair Display', Georgia, serif);
    font-weight: 500;
    font-size: 1.3rem;
    line-height: 1.25;
    color: var(--v5-ink, #201f1d);
}

/* A label, not a count: the old cards claimed "100+" for every one of them. */
.ivs-dmap .ivs-dmap-tours {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 0.75rem;
    padding: 0.32em 0.7em;
    border: 1px solid var(--v5-line, #e4e0d5);
    font-family: var(--v5-font-label, 'Inter', sans-serif);
    font-weight: 600;
    font-size: 0.56rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--v5-stone, #5b574d);
}

.ivs-dmap .ivs-dmap-tours[hidden] {
    display: none;
}

/* The destination's own description, pinned to four lines. The service already
   cuts the text to about 190 characters, but that still lands anywhere between
   two and five lines depending on the words; reserving the space keeps every
   card the same height. */
.ivs-dmap .ivs-dmap-note {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(4 * 1.6em);
    margin: 0 0 1rem;
    font-family: var(--v5-font-body, 'Lora', Georgia, serif);
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--v5-stone, #5b574d);
}

.ivs-dmap .ivs-dmap-note[hidden] {
    display: none;
}

/* What we promise wherever you go. Hairline rows rather than boxes: the copy is
   written as sentences, and sentences need the width. */
.ivs-dmap .ivs-dmap-facts {
    margin: 0 0 1.15rem;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--v5-line, #e4e0d5);
}

.ivs-dmap .ivs-dmap-facts li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.62rem 0;
    border-bottom: 1px solid var(--v5-line, #e4e0d5);
}

.ivs-dmap .ivs-dmap-facts svg {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--v5-olive-700, #4a5e2f);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ivs-dmap .ivs-dmap-facts span {
    font-family: var(--v5-font-body, 'Lora', Georgia, serif);
    font-size: 0.83rem;
    line-height: 1.4;
    color: var(--v5-stone, #5b574d);
}

/* One line, whatever the destination is called: "Explore Gran Sasso National
   Park Abruzzo Region Italy" would otherwise wrap to three and push the panel
   taller than its neighbours. */
.ivs-dmap .ivs-dmap-cta {
    position: relative;
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
    margin-top: auto;
    padding-bottom: 0.28rem;
    font-family: var(--v5-font-label, 'Inter', sans-serif);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v5-olive-900, #33421f);
    text-decoration: none;
}

.ivs-dmap .ivs-dmap-cta::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--v5-amber, #fcb913);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ivs-dmap .ivs-dmap-cta:hover::after,
.ivs-dmap .ivs-dmap-cta:focus-visible::after {
    transform: scaleX(1);
}

.ivs-dmap .ivs-dmap-cta > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ivs-dmap .ivs-dmap-cta i {
    flex: 0 0 auto;
    font-style: normal;
    transition: transform 0.3s ease;
}

.ivs-dmap .ivs-dmap-cta:hover i {
    transform: translateX(4px);
}

/* ── The list: what search engines read ── */

/* All 36 places at once, no scrollbar: the four groups flow into two columns
   that the browser balances, and the whole block is only as tall as the map. */
.ivs-dmap .ivs-dmap-list {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ivs-dmap .ivs-dmap-list-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--v5-line, #e4e0d5);
}

.ivs-dmap .ivs-dmap-list-head p {
    margin: 0;
    font-family: var(--v5-font-label, 'Inter', sans-serif);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--v5-mist, #8b877c);
}

/* Two balanced columns. A group is kept whole so a heading never ends up at the
   foot of one column with its places at the top of the next. */
.ivs-dmap .ivs-dmap-groups {
    column-count: 2;
    column-gap: 1.6rem;
}

.ivs-dmap .ivs-dmap-group {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 1.15rem;
}

.ivs-dmap .ivs-dmap-group:last-child {
    margin-bottom: 0;
}

.ivs-dmap .ivs-dmap-group h3 {
    margin: 0 0 0.5rem;
    font-family: var(--v5-font-label, 'Inter', sans-serif);
    font-weight: 600;
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--v5-olive-700, #4a5e2f);
}

.ivs-dmap .ivs-dmap-group ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ivs-dmap .ivs-dmap-group a {
    position: relative;
    display: block;
    padding: 0.34rem 0;
    font-family: var(--v5-font-body, 'Lora', Georgia, serif);
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--v5-stone, #5b574d);
    text-decoration: none;
    transition: color 0.3s ease;
}

.ivs-dmap .ivs-dmap-group a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0.18rem;
    width: 100%;
    height: 1px;
    background: var(--v5-amber, #fcb913);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ivs-dmap .ivs-dmap-group a:hover,
.ivs-dmap .ivs-dmap-group a:focus-visible,
.ivs-dmap .ivs-dmap-group a.is-active {
    color: var(--v5-olive-900, #33421f);
}

.ivs-dmap .ivs-dmap-group a:hover::after,
.ivs-dmap .ivs-dmap-group a:focus-visible::after {
    transform: scaleX(1);
}

.ivs-dmap .ivs-dmap-group a.is-active {
    font-weight: 600;
}

/* ── Foot ── */

.ivs-dmap .ivs-dmap-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
    padding-top: clamp(1.4rem, 2.5vw, 2rem);
    border-top: 1px solid var(--v5-line, #e4e0d5);
    text-align: center;
}

.ivs-dmap .ivs-dmap-foot p {
    margin: 0;
    font-family: var(--v5-font-body, 'Lora', Georgia, serif);
    font-size: 0.98rem;
    color: var(--v5-stone, #5b574d);
}

/* Shape/voice from the shared .ivs-btn (css/components/ivs-buttons.css).
   Colours stay this section's own: ink-dark olive-900 resting, LIGHTENING to
   700 on hover — the reverse of the house primary, chosen for the dark panel. */
.ivs-dmap .ivs-dmap-btn {
    padding: 0.85rem 1.6rem;
    background: var(--v5-olive-900, #33421f);
    color: var(--v5-ivory, #faf9f6);
}

.ivs-dmap .ivs-dmap-btn:hover,
.ivs-dmap .ivs-dmap-btn:focus-visible {
    background: var(--v5-olive-700, #4a5e2f);
    color: var(--v5-ivory, #faf9f6);
}

.ivs-dmap .ivs-dmap-btn i {
    font-style: normal;
    transition: transform 0.3s ease;
}

.ivs-dmap .ivs-dmap-btn:hover i {
    transform: translateX(4px);
}

/* ── Narrower ── */

/* Below the widest layout the preview drops under the map, so the two of them
   share the right-hand column and the list keeps its place on the left. */
@media (max-width: 1199px) {
    .ivs-dmap .ivs-dmap-stage {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .ivs-dmap .ivs-dmap-panel {
        grid-column: 2;
    }
    .ivs-dmap .ivs-dmap-canvas {
        min-height: 480px;
    }
    .ivs-dmap .ivs-dmap-list {
        grid-row: span 2;
    }
    .ivs-dmap .ivs-dmap-media {
        aspect-ratio: 16 / 9;
    }
}

/* One column: map first, preview under it, then the full list. */
@media (max-width: 991px) {
    .ivs-dmap .ivs-dmap-stage {
        grid-template-columns: 1fr;
    }
    .ivs-dmap .ivs-dmap-canvas {
        min-height: 400px;
        order: 1;
    }
    .ivs-dmap .ivs-dmap-panel {
        grid-column: auto;
        order: 2;
    }
    .ivs-dmap .ivs-dmap-list {
        order: 3;
        grid-row: auto;
        margin-top: 0.6rem;
    }
    .ivs-dmap .ivs-dmap-media {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 575px) {
    .ivs-dmap .ivs-dmap-canvas {
        min-height: 330px;
    }
    /* A single column: two would leave the longer place names wrapping awkwardly
       on a phone. */
    .ivs-dmap .ivs-dmap-groups {
        column-count: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ivs-dmap .ivs-dmap-pin,
    .ivs-dmap .ivs-dmap-media img,
    .ivs-dmap .ivs-dmap-cta::after,
    .ivs-dmap .ivs-dmap-cta i,
    .ivs-dmap .ivs-dmap-group a,
    .ivs-dmap .ivs-dmap-group a::after,
    .ivs-dmap .ivs-dmap-btn i {
        transition: none !important;
    }
}