/* Home UX refresh: product-first hero (activity select in the search capsule, a live route card
   instead of an article, calmer map link, two-line headline), account/app strip under "ways to start",
   language switch for guests in the footer, and a readable search hint.
   Loaded last on purpose; hero rules are desktop-only so the phone hero (mobile-ux.css) is untouched. */

/* The sixth menu item needs room; below 1180px the planner stays reachable from the banner and the tab/drawer menus. */
@media (max-width: 1180px) {
    .tt-home-nav__links a[data-nav-ai] {
        display: none;
    }
}

/* ---------- "Ways to start": account + app strip ---------- */
.tt-home-tasks__more {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.tt-home-tasks__chip {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 14px 18px;
    border: 1px dashed #c9d2da;
    border-radius: 16px;
    background: var(--tt-home-soft, #f5f7f8);
    color: var(--tt-home-ink, #121922);
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.tt-home-tasks__chip strong {
    font-size: 14px;
    font-weight: 850;
    line-height: 1.3;
}

.tt-home-tasks__chip span {
    color: var(--tt-home-muted, #667085);
    font-size: 13px;
    line-height: 1.4;
}

.tt-home-tasks__chip--primary {
    border-style: solid;
    border-color: #ffd2b8;
    background: #fff4ec;
}

.tt-home-tasks__chip--primary strong {
    color: var(--tt-home-orange-dark, #e95612);
}

.tt-home-tasks__chip:hover,
.tt-home-tasks__chip:focus-visible {
    border-color: #ff9a62;
    transform: translateY(-1px);
}

.tt-home-tasks__chip:focus-visible {
    outline: 3px solid rgba(255, 103, 29, .3);
    outline-offset: 3px;
}

@media (min-width: 768px) {
    .tt-home-tasks__more {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }
}

html[data-theme="dark"] .tt-home-tasks__chip {
    border-color: #2a3b4e;
    background: #0f1a28;
    color: #e8eef5;
}

html[data-theme="dark"] .tt-home-tasks__chip span {
    color: #a8b4c4;
}

html[data-theme="dark"] .tt-home-tasks__chip--primary {
    border-color: rgba(255, 122, 56, .5);
    background: rgba(255, 103, 29, .12);
}

html[data-theme="dark"] .tt-home-tasks__chip--primary strong {
    color: #ff9460;
}

/* ---------- Search hint contrast ---------- */
.tt-route-finder__input-hint {
    color: #5a6572;
}

/* ---------- Footer: language for everyone ---------- */
.tt-home-footer__lang {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.tt-home-footer__lang label {
    color: #9aa8b6;
}

.tt-home-footer__lang select {
    min-height: 36px;
    padding: 0 28px 0 12px;
    border: 1px solid #2a3b4e;
    border-radius: 10px;
    background-color: #111d2c;
    color: #e8eef5;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.tt-home-footer__lang select:focus-visible {
    outline: 3px solid rgba(255, 103, 29, .5);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .tt-home-footer__bottom {
        flex-wrap: wrap;
    }

    .tt-home-footer__lang {
        width: 100%;
    }
}

/* ---------- Hero: one search capsule = activity + place + action ---------- */
.tt-home-hero__search .tt-route-finder__kind {
    display: none;
}

/* Let the place field shrink instead of sliding under the submit button. */
@media (min-width: 768px) {
    body.page-home-redesign .tt-home-hero__search .tt-route-finder__ai-control,
    body.page-home-redesign .tt-home-hero__search .tt-route-finder__input-copy {
        min-width: 0;
    }

    body.page-home-redesign .tt-home-hero__search .tt-route-finder__input-copy {
        flex: 1 1 auto;
    }

    body.page-home-redesign .tt-home-hero__search .tt-route-finder__input-copy input {
        width: 100%;
        min-width: 0;
        text-overflow: ellipsis;
    }
}

/* The capsule must fit the text column, never run under the route card. */
@media (min-width: 861px) and (max-width: 1180px) {
    body.page-home-redesign .tt-home-v2 .tt-home-hero__copy > form.tt-home-hero__search {
        width: 100%;
        max-width: 100%;
    }
}

/* Tablets: no room for a third field, the catalogue filters cover activities there. */
@media (min-width: 768px) and (max-width: 1023px) {
    body.page-home-redesign .tt-home-hero__search .tt-route-finder__kind {
        display: none;
    }

    body.page-home-redesign .tt-home-hero__search .tt-route-finder__kind + img {
        display: block;
    }
}

@media (min-width: 1181px) {
    body.page-home-redesign .tt-home-v2 .tt-home-hero__copy > form.tt-home-hero__search {
        width: 740px;
        max-width: calc(100vw - 96px);
    }
}

@media (min-width: 768px) {
    body.page-home-redesign .tt-home-hero__search .tt-route-finder__kind {
        position: relative;
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        margin-right: 12px;
        padding-right: 12px;
        border-right: 1px solid #dfe5ea;
    }

    body.page-home-redesign .tt-home-hero__search .tt-route-finder__kind select {
        max-width: 142px;
        min-height: 40px;
        padding: 0 22px 0 2px;
        border: 0;
        border-radius: 8px;
        background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5' fill='none' stroke='%23556070' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 2px center / 12px;
        color: #17212b;
        font: inherit;
        font-size: 14px;
        font-weight: 800;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    body.page-home-redesign .tt-home-hero__search .tt-route-finder__kind select:focus-visible {
        outline: 3px solid rgba(255, 103, 29, .45);
        outline-offset: 3px;
    }

    /* The select already says "what for"; the magnifier would be a third icon in one row. */
    body.page-home-redesign .tt-home-hero__search .tt-route-finder__kind + img {
        display: none;
    }

    html[data-theme="dark"] body.page-home-redesign .tt-home-hero__search .tt-route-finder__kind {
        border-right-color: #34465b;
    }

    html[data-theme="dark"] body.page-home-redesign .tt-home-hero__search .tt-route-finder__kind select {
        color: #f2f6fb;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5' fill='none' stroke='%23c4d0de' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    html[data-theme="dark"] body.page-home-redesign .tt-home-hero__search .tt-route-finder__kind option {
        background: #152337;
        color: #f2f6fb;
    }

    /* The map is a quiet second path, not a rival button next to the search. */
    body.page-home-redesign .tt-home-v2 .tt-home-hero__buttons {
        margin-top: 18px;
    }

    body.page-home-redesign .tt-home-v2 .tt-home-hero__buttons .tt-home-button--white {
        min-height: 0;
        padding: 4px 2px;
        border: 0;
        background: none;
        box-shadow: none;
        color: #fff;
        font-size: 15px;
        font-weight: 750;
        text-shadow: 0 1px 14px rgba(5, 12, 18, .6);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.page-home-redesign .tt-home-v2 .tt-home-hero__buttons .tt-home-button--white img {
        filter: brightness(0) invert(1);
    }

    body.page-home-redesign .tt-home-v2 .tt-home-hero__buttons .tt-home-button--white::after {
        content: "→";
        transition: transform .2s ease;
    }

    body.page-home-redesign .tt-home-v2 .tt-home-hero__buttons .tt-home-button--white:hover,
    body.page-home-redesign .tt-home-v2 .tt-home-hero__buttons .tt-home-button--white:focus-visible {
        transform: none;
        text-decoration: underline;
        text-underline-offset: 5px;
    }

    body.page-home-redesign .tt-home-v2 .tt-home-hero__buttons .tt-home-button--white:hover::after {
        transform: translateX(3px);
    }
}

/* Two-line headline on wide screens: the old 590px cap produced four ragged lines. */
@media (min-width: 1181px) {
    body.page-home-redesign .tt-home-v2 .tt-home-hero__copy {
        max-width: 760px;
    }

    body.page-home-redesign .tt-home-v2 .tt-home-hero__copy h1 {
        max-width: 720px;
        font-size: 54px;
        line-height: 1.08;
    }

    body.page-home-redesign .tt-home-v2 .tt-home-hero__copy > p {
        max-width: 560px;
    }
}

/* ---------- Hero: a real route instead of an article ---------- */
.tt-home-hero-route {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-self: start;
    margin-top: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(14, 27, 36, .88), rgba(8, 17, 24, .95));
    box-shadow: 0 24px 50px rgba(9, 19, 24, .36);
    color: #fff;
    text-decoration: none;
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    animation: tt-home-card-enter .8s .1s ease both;
    transition: transform .25s ease, box-shadow .25s ease;
}

.tt-home-hero-route:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px rgba(9, 19, 24, .4);
}

.tt-home-hero-route:focus-visible {
    outline: 3px solid rgba(255, 103, 29, .7);
    outline-offset: 3px;
}

.tt-home-hero-route__badge {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #ff5a14;
    box-shadow: 0 6px 16px rgba(255, 90, 20, .35);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .02em;
    line-height: 1.2;
}

.tt-home-hero-route__map {
    position: relative;
    display: block;
    height: 204px;
    overflow: hidden;
    background:
        radial-gradient(110% 90% at 24% 18%, rgba(63, 169, 92, .26), transparent 62%),
        radial-gradient(90% 80% at 88% 92%, rgba(70, 130, 180, .3), transparent 62%),
        linear-gradient(180deg, #14323c, #0d212a);
}

/* A real photo of the route takes the whole top of the card. */
.tt-home-hero-route__map--photo::before {
    z-index: 1;
    background: linear-gradient(180deg, rgba(8, 17, 24, .28) 0%, transparent 34%, transparent 70%, rgba(8, 17, 24, .55) 100%);
}

.tt-home-hero-route__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.tt-home-hero-route:hover .tt-home-hero-route__photo {
    transform: scale(1.04);
}

/* Faint survey grid: reads as a map without pretending to be one. */
.tt-home-hero-route__map::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 24px);
}

.tt-home-hero-route__map > svg:first-child {
    position: absolute;
    top: 40px;
    right: 0;
    bottom: 44px;
    left: 0;
    width: 100%;
    height: calc(100% - 84px);
}

.tt-home-hero-route__glow,
.tt-home-hero-route__track {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tt-home-hero-route__glow {
    stroke: rgba(255, 122, 61, .32);
    stroke-width: 9;
}

.tt-home-hero-route__track {
    stroke: #ff8a4f;
    stroke-width: 3.4;
}

.tt-home-hero-route__start {
    fill: #fff;
    stroke: #0d212a;
    stroke-width: 2.5;
}

.tt-home-hero-route__finish {
    fill: #ff5a14;
    stroke: #fff;
    stroke-width: 2.5;
}

.tt-home-hero-route__profile {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 44px;
}

.tt-home-hero-route__profile-area {
    fill: rgba(255, 122, 61, .24);
}

.tt-home-hero-route__profile-line {
    fill: none;
    stroke: rgba(255, 255, 255, .8);
    stroke-width: 1.6;
    vector-effect: non-scaling-stroke;
}

.tt-home-hero-route__body {
    display: grid;
    gap: 5px;
    padding: 18px 20px 20px;
}

.tt-home-hero-route__body strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 20px;
    font-weight: 850;
    line-height: 1.22;
}

.tt-home-hero-route__body small {
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    line-height: 1.35;
}

.tt-home-hero-route__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 6px;
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
}

.tt-home-hero-route__metrics b {
    color: #fff;
    font-size: 15px;
    font-weight: 850;
}

.tt-home-hero-route__body em {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    transition: background .2s ease, border-color .2s ease;
}

.tt-home-hero-route:hover .tt-home-hero-route__body em,
.tt-home-hero-route:focus-visible .tt-home-hero-route__body em {
    border-color: #ff5a14;
    background: #ff5a14;
}

@media (max-width: 860px) {
    .tt-home-hero-route__map {
        height: 150px;
    }

    .tt-home-hero-route__body {
        padding: 14px 16px 16px;
    }

    .tt-home-hero-route__body strong {
        font-size: 17px;
    }
}

/* Phones keep the existing hero: the card would push the search below the tab bar. */
@media (max-width: 767px) {
    .tt-home-hero-route {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tt-home-hero-route,
    .tt-home-hero-route__body em {
        animation: none;
        transition: none;
    }
}

/* ---------- Hero search: typed example queries ---------- */
/* The animated placeholder replaces the static "Например: …" line, so the capsule does not jump on focus. */
.tt-home-hero__search.is-live-search .tt-route-finder__input-hint {
    display: none;
}

.tt-home-hero__search.has-typewriter .tt-route-finder__ai-control input::placeholder {
    color: #56616e;
    opacity: 1;
}

html[data-theme="dark"] .tt-home-hero__search.has-typewriter .tt-route-finder__ai-control input::placeholder {
    color: #aab7c7;
}