/*==================== INTERRAIL '23 — a living rail line ====================*/
/* Same atmosphere as the Personal Space page: monochrome + navy, elegant glass,
   gentle motion. The 15-stop itinerary becomes a rail line you trace down the page
   (fits the theme: interrail = rail). A completed summer-2023 journey (landmarks ✓). */

.home.section#map {
    position: relative;
    overflow: hidden;
    padding-top: 6rem;
    padding-bottom: 1.5rem;
}

@media screen and (min-width: 768px) {
    .home.section#map { padding-top: 9rem; }
}

.home.section#map::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -12%;
    left: 50%;
    width: min(700px, 92%);
    height: 500px;
    transform: translateX(-50%);
    background: radial-gradient(circle at 50% 40%, hsla(230, 69%, 30%, .07), transparent 62%);
    filter: blur(6px);
    animation: ir-float 9s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ir-float {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 24px); }
}

.ir-hero { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; padding: 0 1.4rem; }
.ir-hero span { font-style: normal; } /* neutralise the global span{italic} */

.ir-kick { display: block; font-family: var(--mono-font); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-color-light); }

.ir-hero .map__title { font-family: var(--body-font); font-weight: 800; font-size: clamp(2.4rem, 7vw, 4rem); letter-spacing: -.04em; color: var(--title-color); line-height: .95; margin: .35rem 0 0; }
.ir-dot { color: var(--first-color-second); }

.ir-quote {
    position: relative;
    margin-top: clamp(1.5rem, 4vw, 2.2rem);
    max-width: 760px;
    padding: clamp(1.4rem, 4vw, 2.2rem);
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(20, 30, 70, .10);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
}
.ir-quote .ir-big { font-family: var(--body-font); font-weight: 700; font-size: clamp(1.05rem, 2.8vw, 1.5rem); line-height: 1.4; letter-spacing: -.01em; color: var(--title-color); margin: 0; }
.ir-quote .ir-by { font-family: var(--mono-font); font-size: .74rem; font-weight: 700; color: var(--first-color); margin: 1.1rem 0 0; }

.ir-stats {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem;
    margin-top: clamp(1.2rem, 3.5vw, 1.8rem);
    font-family: var(--mono-font); font-size: .8rem; color: var(--first-color-alt);
}
.ir-stats .s { display: inline-flex; align-items: baseline; gap: .4rem; }
.ir-stats .s b { font-family: var(--body-font); font-weight: 800; font-size: 1.15rem; color: var(--first-color-second); }
.ir-stats .s span { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-color-light); }

/* ---- the rail line ---- */
/* remove the full-width section divider between the hero and the rail on this page */
.main > .interrailjourney__section { border-top: 0; }
.interrailjourney__section { padding: .5rem 0 3rem; }
.ir-wrap { max-width: 820px; margin: 0 auto; padding: 0 1.4rem; }
.ir-wrap span { font-style: normal; }

.ir-linehead { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.6rem; padding-bottom: 1.1rem; border-bottom: 2px solid rgba(20, 24, 45, .14); }
.ir-badge { flex: none; font-family: var(--mono-font); font-weight: 700; font-size: 1rem; letter-spacing: 1px; color: var(--body-color); background: var(--first-color-dark); padding: .42rem .55rem; box-shadow: 3px 3px 0 var(--first-color-second); }
.ir-lh-t { font-family: var(--body-font); font-weight: 800; font-size: 1.15rem; color: var(--title-color); letter-spacing: -.02em; line-height: 1.1; display: block; }
.ir-lh-m { font-family: var(--mono-font); font-size: .68rem; color: var(--text-color-light); margin-top: .12rem; display: block; }

.interrailsection__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* visually-hidden (kept for a11y) */

.ir-line { --code: 2.5rem; --rail: 1.7rem; --railc: calc(var(--code) + var(--rail) / 2); --infox: calc(var(--code) + var(--rail) + .55rem); }

.ir-st { position: relative; display: flow-root; }
.ir-st::before { content: ""; position: absolute; left: var(--railc); top: 0; bottom: 0; width: 3px; background: var(--first-color); transform: translateX(-50%); z-index: 0; }
.ir-st:first-child::before { top: 1.25rem; }
.ir-st.last::before { bottom: auto; height: 1.25rem; }

.ir-st > .ir-row { display: grid; grid-template-columns: var(--code) var(--rail) 1fr; align-items: start; padding: .5rem 0 1.5rem; }
.ir-cc { grid-column: 1; justify-self: end; padding: .62rem .5rem 0 0; font-family: var(--mono-font); font-weight: 700; font-size: .72rem; letter-spacing: .5px; color: var(--text-color-light); }

.ir-rail { grid-column: 2; position: relative; align-self: stretch; }
.ir-dotm { position: absolute; left: 50%; top: .6rem; width: 17px; height: 17px; border-radius: 50%; background: var(--first-color-second); border: 4px solid var(--first-color-second); transform: translateX(-50%); z-index: 2; box-shadow: 0 0 0 3px var(--body-color); }
.ir-st:first-child .ir-dotm, .ir-st.last .ir-dotm { animation: ir-pulse 2.4s ease-in-out infinite; }
@keyframes ir-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--body-color), 0 0 0 0 rgba(23, 36, 79, .4); } 70% { box-shadow: 0 0 0 3px var(--body-color), 0 0 0 9px rgba(23, 36, 79, 0); } }
.ir-tick { position: absolute; left: 50%; top: 1.15rem; transform: translateY(-50%); height: 3px; width: 1.1rem; background: var(--first-color); z-index: 1; }

.ir-info { grid-column: 3; min-width: 0; padding-left: .55rem; }
.ir-top { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.ir-city { font-family: var(--body-font); font-weight: 700; font-size: 1.22rem; color: var(--title-color); letter-spacing: -.01em; line-height: 1.15; }
.ir-date { margin-left: auto; font-family: var(--mono-font); font-size: .64rem; font-weight: 700; color: var(--body-color); background: var(--first-color-second); padding: .16rem .45rem; white-space: nowrap; align-self: center; }
.ir-cap { font-family: var(--mono-font); font-size: .56rem; font-weight: 700; letter-spacing: .05em; color: var(--first-color); border: 1.5px solid var(--first-color); padding: .08rem .35rem; text-transform: uppercase; }
.ir-country { font-family: var(--mono-font); font-size: .74rem; color: var(--first-color-alt); margin-top: .22rem; }

.ir-marks { list-style: none; margin: .55rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.ir-marks li { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--first-color); line-height: 1.4; }
.ir-marks .ck { color: var(--first-color-second); font-weight: 700; }

/* reveal on load — CSS-driven so it ALWAYS completes (never leaves content hidden) */
.ir-rv { animation: ir-up .7s cubic-bezier(.22, 1, .36, 1) both; }
.ir-st.ir-rv { animation-name: ir-fade; } /* stations fade only — keeps the rail line aligned */
.ir-hero .ir-rv:nth-child(1) { animation-delay: .05s; }
.ir-hero .ir-rv:nth-child(2) { animation-delay: .13s; }
.ir-hero .ir-rv:nth-child(3) { animation-delay: .21s; }
.ir-hero .ir-rv:nth-child(4) { animation-delay: .29s; }

@keyframes ir-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ir-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .home.section#map::before, .ir-st:first-child .ir-dotm, .ir-st.last .ir-dotm { animation: none; }
    .ir-rv { animation: none; opacity: 1; transform: none; }
}

@media screen and (max-width: 480px) {
    .ir-line { --code: .4rem; --rail: 1.4rem; --railc: calc(var(--code) + var(--rail) / 2); --infox: calc(var(--code) + var(--rail) + .5rem); }
    .ir-cc { display: none; }
    .ir-city { font-size: 1.1rem; }
    .ir-marks li { font-size: .8rem; }
}