/*
 * Route page hero (resources/views/components/route-hero.blade.php).
 * Light, like the home hero (hero.css): white background, no images.
 * Solid colours only: the project does not use gradients (.cursor/rules/no-gradients.mdc).
 * Brand colours: green #306B34, teal #1C5253, white #FFFFFF, light grey #F5F8F7.
 */

/* ---------- Section ---------- */
/* The header floats over the page (position: absolute),
   so the big top padding keeps the title clear of it. */
.route-hero {
    position: relative;
    padding: 180px 0 50px;
    background: #FFFFFF;
    border-bottom: 1px solid #E1E8E5; /* thin line separates the hero from the map below */
    text-align: center;
    overflow: hidden;
}

/* The section below already has its own top padding; a little less looks tighter. */
.route-hero + .route-overview {
    padding-top: 60px;
}

/* ---------- Breadcrumb ---------- */
.route-hero-crumbs {
    font-size: 14px;
    color: #505050;
    margin-bottom: 18px;
}

.route-hero-crumbs a {
    color: #1C5253;
    font-weight: 600;
}

.route-hero-crumbs a:hover {
    color: #306B34;
}

.route-hero-crumbs .sep {
    margin: 0 8px;
    color: #A0B3AD;
}

/* ---------- Accent + title ---------- */
/* Handwritten font, same as the home hero accent. */
.route-hero-accent {
    font-family: 'Corinthia', cursive;
    font-size: 44px;
    line-height: 1;
    color: #306B34;
    margin-bottom: 6px;
    animation: route-hero-rise 700ms ease-out both;
}

.route-hero-title {
    max-width: 900px;
    margin: 0 auto 35px;
    font-size: 46px;
    line-height: 1.2;
    font-weight: 700;
    color: #1C5253;
    /* Starts a little later than the accent, so they come in one after the other. */
    animation: route-hero-rise 700ms ease-out 150ms both;
}

/* ---------- The road: A ---- car ---- B ---------- */
.route-hero-road {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 760px;
    margin: 0 auto;
    animation: route-hero-rise 700ms ease-out 300ms both;
}

/* Start and end points: a round letter badge + the place name. */
.route-hero-stop {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #1C5253;
    white-space: nowrap;
}

.route-hero-stop b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #1C5253;
    color: #FFFFFF;
    font-size: 14px;
}

.route-hero-stop b.b {
    background: #306B34;
}

/* The track takes all the free space between A and B. */
.route-hero-track {
    position: relative;
    flex: 1;
    height: 30px;
}

/* Dashed line in the middle of the track, like road markings.
   It "draws" itself from A to B (scaleX from 0 to 1). */
.route-hero-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 3px dashed #A0B3AD;
    transform-origin: left center;
    animation: route-hero-draw 900ms ease-out 600ms both;
}

/* The car sits on the line and drives A -> B, again and again. */
.route-hero-car {
    position: absolute;
    top: 50%;
    inset-inline-start: 0;
    margin-top: -14px;
    fill: #306B34;
    animation: route-hero-drive 4s ease-in-out 1.5s infinite both;
}

/* Windows and wheels: white parts of the car. */
.route-hero-car .window {
    fill: #FFFFFF;
}

.route-hero-car circle {
    fill: #1C5253;
    stroke: #FFFFFF;
    stroke-width: 2;
}

/* ---------- Right-to-left (Hebrew) ---------- */
/* B is on the left, so the line draws from the right and the car faces left. */
[dir="rtl"] .route-hero-line {
    transform-origin: right center;
}

[dir="rtl"] .route-hero-car {
    transform: scaleX(-1);
}

/* ---------- Animations ---------- */
/* Slide up a little and fade in. */
@keyframes route-hero-rise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* The line grows from A to B. */
@keyframes route-hero-draw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* The car fades in at A, drives to B, then fades out at B.
   "100% - 44px" = the end of the track minus the car width. */
@keyframes route-hero-drive {
    0%   { inset-inline-start: 0; opacity: 0; }
    10%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { inset-inline-start: calc(100% - 44px); opacity: 0; }
}

/* Respect visitors who turn off animations in their system settings:
   show the final picture (line drawn, car parked in the middle). */
@media (prefers-reduced-motion: reduce) {
    .route-hero-accent,
    .route-hero-title,
    .route-hero-road,
    .route-hero-line,
    .route-hero-car {
        animation: none;
    }

    .route-hero-car {
        inset-inline-start: calc(50% - 22px);
    }
}

/* ---------- Smaller screens ---------- */
@media (max-width: 991px) {
    .route-hero { padding: 150px 0 40px; }
    .route-hero-title { font-size: 36px; }
}

/* On phones the place names go above and below the road, so long names fit. */
@media (max-width: 575px) {
    .route-hero { padding: 130px 0 35px; }
    .route-hero-accent { font-size: 36px; }
    .route-hero-title { font-size: 28px; margin-bottom: 25px; }
    .route-hero-road { flex-direction: column; gap: 8px; }
    .route-hero-track { width: 100%; flex: none; }
    .route-hero-stop { white-space: normal; }
}