/* ==========================================================================
   Transfer routes "La Finestra" (destination pages, Oct 2026)
   A signpost whose post opens into a photo window. Departure cities sit left
   or right of the window by their real bearing; hovering one draws its leader
   line and cross-fades the window to that city's banner. On phones the window
   sits above the list and follows the row nearest the middle of the screen.
   Scoped under main.destination-city.modernpage to outrank destinations.css.
   ========================================================================== */

main.destination-city.modernpage .ivs-tr {
    display: grid;
    grid-template-columns: 1fr clamp(250px, 29vw, 380px) 1fr;
    grid-auto-flow: row dense;
    align-items: center;
    max-width: 1040px;
    margin: 0 auto;
}
main.destination-city.modernpage .ivs-tr__item {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 10px 0;
    min-height: 84px;
    color: inherit;
    text-decoration: none;
}
main.destination-city.modernpage .ivs-tr__item--l { grid-column: 1; justify-content: flex-end; text-align: right; }
main.destination-city.modernpage .ivs-tr__item--r { grid-column: 3; justify-content: flex-start; text-align: left; }
main.destination-city.modernpage .ivs-tr__txt { min-width: 0; }
/* modern-base.css forces --font-body (!important) on every span and p under
   main.modernpage, so each voice here redefines that variable as well as
   font-family (same cure as .dv5-eyebrow in destinations-v5.css). */
main.destination-city.modernpage .ivs-tr__name {
    display: block;
    --font-body: var(--v5-font-display, 'Playfair Display', Georgia, serif);
    font-family: var(--v5-font-display, 'Playfair Display', Georgia, serif);
    font-weight: 500;
    font-size: 1.38rem;
    line-height: 1.2;
    color: var(--v5-ink, #201f1d);
    transition: color .25s;
}
main.destination-city.modernpage .ivs-tr__meta {
    display: block;
    --font-body: var(--v5-font-label, 'Inter', 'Segoe UI', sans-serif);
    font-family: var(--v5-font-label, 'Inter', 'Segoe UI', sans-serif);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--v5-mist, #8b877c);
    margin-top: 4px;
}

/* leader line: hairline with a ring at the window end, drawn olive on hover */
main.destination-city.modernpage .ivs-tr__lead {
    flex: 0 0 clamp(36px, 7vw, 96px);
    height: 1px;
    background: var(--v5-line, #e4e0d5);
    position: relative;
}
main.destination-city.modernpage .ivs-tr__item--l .ivs-tr__lead { margin-left: 20px; }
main.destination-city.modernpage .ivs-tr__item--r .ivs-tr__lead { margin-right: 20px; }
main.destination-city.modernpage .ivs-tr__lead::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50% !important;
    border: 1px solid var(--v5-olive-500, #6b8051);
    background: #fff;
    transform: translateY(-50%);
    transition: background .25s;
}
/* The ring is filled with the band colour, so it reads as a hollow ring on
   both rhythm beats (white .cv5-w, parchment .cv5-p). */
main.destination-city.modernpage .cv5-p .ivs-tr__lead::before { background: var(--v5-parchment, #f2efe8); }
main.destination-city.modernpage .ivs-tr__item--l .ivs-tr__lead::before { left: -4px; }
main.destination-city.modernpage .ivs-tr__item--r .ivs-tr__lead::before { right: -4px; }
main.destination-city.modernpage .ivs-tr__lead::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--v5-olive-700, #4a5e2f);
    transform: scaleX(0);
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
main.destination-city.modernpage .ivs-tr__item--l .ivs-tr__lead::after { transform-origin: left; }
main.destination-city.modernpage .ivs-tr__item--r .ivs-tr__lead::after { transform-origin: right; }
main.destination-city.modernpage .ivs-tr__item:hover .ivs-tr__lead::after,
main.destination-city.modernpage .ivs-tr__item:focus-visible .ivs-tr__lead::after,
main.destination-city.modernpage .ivs-tr__item.is-on .ivs-tr__lead::after { transform: scaleX(1); }
main.destination-city.modernpage .ivs-tr__item:hover .ivs-tr__lead::before,
main.destination-city.modernpage .ivs-tr__item.is-on .ivs-tr__lead::before { background: var(--v5-olive-700, #4a5e2f); }
main.destination-city.modernpage .ivs-tr__item:hover .ivs-tr__name,
main.destination-city.modernpage .ivs-tr__item.is-on .ivs-tr__name { color: var(--v5-olive-700, #4a5e2f); }
main.destination-city.modernpage .ivs-tr__item:focus-visible { outline: 2px solid var(--v5-olive-700, #4a5e2f); outline-offset: 3px; }

/* the window */
main.destination-city.modernpage .ivs-tr__win {
    grid-column: 2;
    grid-row: 1 / span 4;
    position: relative;
    align-self: center;
}
main.destination-city.modernpage .ivs-tr__post {
    position: absolute;
    left: 50%;
    width: 1px;
}
main.destination-city.modernpage .ivs-tr__post--t { bottom: 100%; height: 30px; background: linear-gradient(to top, var(--v5-line, #e4e0d5), transparent); }
main.destination-city.modernpage .ivs-tr__post--b { top: 100%; height: 34px; background: linear-gradient(to bottom, var(--v5-line, #e4e0d5), transparent); }
main.destination-city.modernpage .ivs-tr__frame {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--v5-parchment, #f2efe8);
    box-shadow: 0 0 0 1px var(--v5-line, #e4e0d5);
    border-radius: 0;
}
main.destination-city.modernpage .ivs-tr__frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform 1.6s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}
main.destination-city.modernpage .ivs-tr__frame img.is-on { opacity: 1; transform: scale(1); }
main.destination-city.modernpage .ivs-tr__scrim {
    position: absolute;
    left: -30%;
    right: -10%;
    bottom: -45%;
    height: 95%;
    background: radial-gradient(ellipse at 30% 100%, rgba(32, 31, 29, .78), rgba(32, 31, 29, 0) 70%);
    filter: blur(22px);
    pointer-events: none;
}
main.destination-city.modernpage .ivs-tr__cap {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    margin: 0 !important;
    color: var(--v5-ivory, #faf9f6);
    text-shadow: 0 1px 2px rgba(32, 31, 29, .35);
    line-height: 1.2;
}
main.destination-city.modernpage .ivs-tr__cap > span {
    display: block;
    transition: opacity .35s cubic-bezier(.22, .61, .36, 1), transform .45s cubic-bezier(.22, .61, .36, 1);
}
main.destination-city.modernpage .ivs-tr__cap.is-swapping > span { opacity: 0; transform: translateY(6px); }
main.destination-city.modernpage .ivs-tr__cap .k {
    display: block;
    --font-body: var(--v5-font-label, 'Inter', 'Segoe UI', sans-serif);
    font-family: var(--v5-font-label, 'Inter', 'Segoe UI', sans-serif);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: .82;
    margin-bottom: 3px;
}
main.destination-city.modernpage .ivs-tr__cap .t {
    display: block;
    --font-body: var(--v5-font-display, 'Playfair Display', Georgia, serif);
    font-family: var(--v5-font-display, 'Playfair Display', Georgia, serif);
    font-weight: 500;
    font-size: 1.22rem;
}

/* closing line + button */
main.destination-city.modernpage .ivs-tr-cta { text-align: center; margin-top: 40px; }
/* Same cure as the search button in destinations-v5.css: modern-base.css
   forces --font-body on every link, which beats the ivs-btn component and
   left this label in Lora. Both variables plus the label voice from tombol.md. */
main.destination-city.modernpage .ivs-tr-cta .ivs-btn {
    --font-body: var(--v5-font-label, 'Inter', sans-serif);
    --font-heading: var(--v5-font-label, 'Inter', sans-serif);
    font-family: var(--v5-font-label, 'Inter', sans-serif);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: 3px;
}
main.destination-city.modernpage .ivs-tr-cta p {
    margin: 0 0 16px !important;
    font-style: italic;
    color: var(--v5-stone, #5b574d);
}

@media (max-width: 760px) {
    main.destination-city.modernpage .ivs-tr { grid-template-columns: 1fr; max-width: 560px; row-gap: 0; }
    main.destination-city.modernpage .ivs-tr__win { grid-column: 1; grid-row: 1; margin-bottom: 8px; }
    main.destination-city.modernpage .ivs-tr__frame { aspect-ratio: 16 / 10; }
    main.destination-city.modernpage .ivs-tr__post--t,
    main.destination-city.modernpage .ivs-tr__post--b { display: none; }
    main.destination-city.modernpage .ivs-tr__item--l,
    main.destination-city.modernpage .ivs-tr__item--r {
        grid-column: 1;
        justify-content: flex-start;
        text-align: left;
        padding: 13px 0;
        min-height: 0;
        border-bottom: 1px solid var(--v5-line, #e4e0d5);
    }
    main.destination-city.modernpage .ivs-tr__item--l { flex-direction: row-reverse; justify-content: flex-end; }
    main.destination-city.modernpage .ivs-tr__item--l .ivs-tr__lead,
    main.destination-city.modernpage .ivs-tr__item--r .ivs-tr__lead { flex-basis: 26px; margin: 0 16px 0 0; }
    main.destination-city.modernpage .ivs-tr__item--l .ivs-tr__lead::before,
    main.destination-city.modernpage .ivs-tr__item--r .ivs-tr__lead::before { left: -4px; right: auto; }
    main.destination-city.modernpage .ivs-tr__item--l .ivs-tr__lead::after,
    main.destination-city.modernpage .ivs-tr__item--r .ivs-tr__lead::after { transform-origin: left; }
    main.destination-city.modernpage .ivs-tr__name { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    main.destination-city.modernpage .ivs-tr__frame img { transition: opacity .2s; transform: none; }
    main.destination-city.modernpage .ivs-tr__lead::after,
    main.destination-city.modernpage .ivs-tr__cap > span { transition: none; }
}