/* =====================================================================
   Главная (landing.php) — редизайн 2026, DESIGN.md «ГЛАВНАЯ».
   Сначала телефон 390, потом 768 и 1024+. Токены — css/site.css, общие компоненты — css/ab-base.css.
   Все правила привязаны к body.home: файл подключает и tours.php, там они ничего не задевают.
   ===================================================================== */

body.home { margin: 0; overflow-x: clip; font-size: var(--step-body); line-height: 1.5; }
body.home *, body.home *::before, body.home *::after { box-sizing: border-box; }
body.home img { max-width: 100%; display: block; }
body.home main#main { margin-top: 0; padding-top: var(--sh-bar-h, var(--header-h)); }

/* ---------- 1. Первый экран ---------- */
.home .hero { padding-block: var(--s-2) var(--s-6); }
.home .hero__grid { display: grid; }
.home .hero__photos {
    position: relative; margin: 0; overflow: hidden;
    height: clamp(180px, 26svh, 220px);
    background: var(--surface);
}
.home .hero__photo { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 900ms ease; }
.home .hero.is-fast .hero__photo { transition-duration: var(--dur-ui-max); }
.home .hero__photo.is-active { opacity: 1; }
.home .hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.home .hero__caption {
    position: absolute; inset-inline-start: 8px; bottom: 32px; z-index: 1;
    padding: 6px 10px; background: var(--scrim); color: #fff;
    font: 400 var(--step-small)/1.3 var(--font);
}
.home .hero__card { position: relative; z-index: 1; margin-top: -24px; background: var(--surface); }
.home .hero__body { padding: var(--s-5) var(--s-4) var(--s-4); }
.home .hero__title {
    margin: 0 0 var(--s-3);
    font: 400 var(--step-head)/1.02 var(--font); letter-spacing: -.025em; color: var(--ink);
    max-width: 14ch;
}
.home .hero__lead { margin: 0; max-width: 46ch; font: 400 var(--step-body)/1.45 var(--font); color: var(--muted); }

.home .resorts { margin: var(--s-5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-1); }
.home .resort-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px var(--s-3);
    min-height: 68px; padding: var(--s-3) var(--s-4);
    background: var(--bg); color: var(--ink); text-decoration: none;
    transition: background-color var(--dur-fast) ease;
    -webkit-tap-highlight-color: transparent;
}
.home .resort-row:focus-visible { outline-offset: -3px; background: var(--surface-2); }
@media (hover: hover) { .home .resort-row:hover { background: var(--surface-2); } }
.home .resort-row:active { background: var(--surface-2); }
.home .resort-row__name { font: 500 var(--step-lead)/1.15 var(--font); letter-spacing: -.01em; min-width: 0; }
.home .resort-row__price { font: 600 var(--step-lead)/1.15 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: end; }
.home .resort-row__meta, .home .resort-row__count { font: 400 var(--step-small)/1.35 var(--font); color: var(--muted); }
.home .resort-row__meta { grid-column: 1; }
.home .resort-row__count { grid-column: 2; text-align: end; white-space: nowrap; }
.home .hero__all { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-3); }

@media (min-width: 768px) {
    .home .hero__photos { height: 40svh; }
}
@media (min-width: 1024px) {
    .home .hero { padding-block: var(--s-5) var(--s-9); }
    .home .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
    .home .hero__card { grid-column: 1 / span 6; grid-row: 1; margin-top: 0; }
    .home .hero__stage {
        grid-column: 7 / -1; grid-row: 1;
        position: sticky; top: calc(var(--header-h) + 24px);
        height: calc(100svh - var(--header-h) - 48px); min-height: 560px;
    }
    .home .hero__photos { height: 100%; }
    .home .hero__caption { bottom: var(--s-4); inset-inline-start: var(--s-4); }
    .home .hero__tent { height: 56px; }
    .home .hero__body { padding: var(--s-7) var(--s-7) var(--s-6); }
    .home .hero__title { margin-bottom: var(--s-5); }
    .home .resorts { margin-top: var(--s-6); }
    .home .resort-row { min-height: 76px; padding: var(--s-4) var(--s-5); }
}

/* ---------- 2. Популярные экскурсии ---------- */
.home .hits { background: var(--surface); padding-block: var(--section-y); }
.home .hits__title { margin-bottom: var(--s-5); }
.home .hits__tabs {
    gap: var(--s-5); margin: 0 calc(-1 * var(--margin)) var(--s-5); padding-inline: var(--margin);
}
.home .hits__tab {
    flex: none; min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer;
    color: var(--muted); font: 500 18px/1 var(--font);
    text-decoration: underline 2px transparent; text-underline-offset: 8px;
    transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
}
.home .hits__tab[aria-pressed="true"] { color: var(--ink); text-decoration-color: var(--ink); }
@media (hover: hover) { .home .hits__tab:hover { color: var(--ink); } }
.home .hit.is-active { animation: abHomeFade var(--dur) var(--ease-out); }
@keyframes abHomeFade { from { opacity: 0; } to { opacity: 1; } }
.home .hit__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface-2); }
.home .hit__media img { width: 100%; height: 100%; object-fit: cover; }
.home .hit__badge { position: absolute; top: var(--s-2); inset-inline-start: var(--s-2); }
.home .hit__place { margin: var(--s-4) 0 var(--s-1); font-size: var(--step-small); color: var(--muted); }
.home .hit__name {
    margin: 0; font: 500 var(--step-lead)/1.2 var(--font); letter-spacing: -.01em;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.home .hit__name a { color: inherit; text-decoration: none; }
@media (hover: hover) { .home .hit__name a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } }
.home .hit__meta { margin: var(--s-2) 0 0; font-size: var(--step-small); color: var(--muted); }
.home .hit__price { margin: var(--s-3) 0 0; font: 600 var(--step-lead)/1.2 var(--font); font-variant-numeric: tabular-nums; }
.home .hit__price s { font-weight: 400; font-size: var(--step-small); color: var(--muted); }
.home .hit__price--ask { font-weight: 400; font-size: var(--step-body); color: var(--muted); }
.home .hit__actions { display: grid; gap: var(--s-2); margin-top: var(--s-5); }
.home .hits .btn--soft { background-color: var(--bg); }
@media (hover: hover) { .home .hits .btn--soft:hover { background-color: var(--surface-2); } }
.home .hit__actions .btn { width: 100%; white-space: normal; text-align: center; }
.home .hit-row {
    display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-4); align-items: start;
    margin-top: var(--s-6); padding: var(--s-2); margin-inline: calc(-1 * var(--s-2));
    color: var(--ink); text-decoration: none; transition: background-color var(--dur-fast) ease;
}
@media (hover: hover) { .home .hit-row:hover { background: var(--surface-2); } }
.home .hit-row__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-2); }
.home .hit-row__media img { width: 100%; height: 100%; object-fit: cover; }
.home .hit-row__text { display: grid; gap: var(--s-1); min-width: 0; }
.home .hit-row__name { font: 500 var(--step-body)/1.3 var(--font); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.home .hit-row__meta { font-size: var(--step-small); color: var(--muted); }
.home .hit-row__price { margin-top: var(--s-1); font: 600 var(--step-lead)/1.2 var(--font); font-variant-numeric: tabular-nums; }
.home .hit-row__price s { font-weight: 400; font-size: var(--step-small); color: var(--muted); }

@media (min-width: 768px) {
    .home .hit-row { grid-template-columns: 160px minmax(0, 1fr); }
    .home .hit__actions { display: flex; flex-wrap: wrap; }
    .home .hit__actions .btn { width: auto; }
}
@media (min-width: 1024px) {
    .home .hits__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
    .home .hits__title { grid-column: 1 / -1; grid-row: 1; margin-bottom: var(--s-6); }
    .home .hits__tabs { grid-column: 7 / -1; grid-row: 2; margin: 0 0 var(--s-5); padding: 0; flex-wrap: wrap; }
    .home .hit:not([hidden]) { display: contents; }
    .home .hit__media { grid-column: 1 / span 6; grid-row: 2 / span 2; }
    .home .hit__body { grid-column: 7 / -1; grid-row: 3; }
    .home .hit__place { margin-top: 0; }
    .home .hit__name { font-size: min(var(--step-head), 3rem); line-height: 1.08; letter-spacing: -.02em; -webkit-line-clamp: 2; }
    .home .hit__price { font-size: min(var(--step-head), 3rem); font-weight: 400; letter-spacing: -.02em; }
    .home .hit-row { margin-top: var(--s-7); }
}

/* ---------- 3. Как проходит экскурсия ---------- */
.home .how { background: var(--sea); color: var(--on-sea); padding-block: var(--section-y); }
.home .how__text { margin-top: var(--s-4); color: var(--on-sea); }
.home .how__photo { margin: var(--s-5) 0 var(--s-6); aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.home .how__photo img { width: 100%; height: 100%; object-fit: cover; }
.home .how__ticket { color: var(--ink); }
.home .how__note { margin: calc(12px + var(--s-4)) 0 0; max-width: 60ch; font-size: var(--step-small); line-height: 1.5; color: var(--on-sea-muted); }
@media (min-width: 1024px) {
    .home .how__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
    .home .how__intro { grid-column: 1 / span 5; }
    .home .how__text { max-width: 30ch; }
    .home .how__photo { aspect-ratio: 4 / 5; margin-bottom: 0; max-width: 460px; }
    .home .how__ticket-wrap { grid-column: 7 / span 5; padding-top: var(--s-2); }
    .home .how__ticket .ab-ticket__body { padding: var(--s-6) var(--s-6) var(--s-5); }
}

/* ---------- 4. Отзывы: имя и цитата ---------- */
.home .rv__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-3) var(--s-6); margin-bottom: var(--s-6); }
.home .rv__sub { margin-top: var(--s-3); }
.home .rv__all { display: inline-flex; align-items: center; min-height: 44px; }
.home .rv__slide { margin: 0 0 var(--s-4); display: grid; }
.home .rv.is-ready .rv__slide { margin-bottom: 0; }
.home .rv.is-ready .rv__slide:not(.is-active) { display: none; }
.home .rv.is-ready .rv__slide.is-active { animation: abHomeFade var(--dur) var(--ease-out); }
.home .rv__who {
    display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-1);
    min-height: 160px; padding: var(--s-5); background: var(--ink); color: #fff;
}
.home .rv__stars { color: var(--sun); letter-spacing: 2px; font-size: 18px; }
.home .rv__name { font: 500 var(--step-lead)/1.2 var(--font); }
.home .rv__place { font-size: var(--step-small); color: var(--on-sea-muted); }
.home .rv__tour { margin-top: var(--s-2); font-size: var(--step-small); }
.home .rv__quote { padding: var(--s-5); background: var(--surface); }
.home .rv__quote blockquote { margin: 0; }
.home .rv__quote p { margin: 0; font: 400 var(--step-lead)/1.35 var(--font); letter-spacing: -.005em; max-width: 40ch; }
.home .rv__more { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-4); }
.home .rv__nav { display: none; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
.home .rv.is-ready .rv__nav { display: flex; }
.home .rv__count { margin: 0; margin-inline-end: auto; font-size: var(--step-small); color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) {
    .home .rv__slide { grid-template-columns: 5fr 7fr; min-height: 56svh; }
    .home .rv__who { padding: var(--s-7); }
    .home .rv__quote { display: flex; flex-direction: column; justify-content: center; padding: var(--s-7) var(--s-8); }
}

/* ---------- 5. Полезно перед поездкой ---------- */
.home .arts { padding-top: 0; }
.home .arts__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); }
.home .arts__head .ab-link { display: inline-flex; align-items: center; min-height: 44px; }
.home .arts__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.home .art {
    display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-4); align-items: center;
    padding: var(--s-2); margin-inline: calc(-1 * var(--s-2));
    color: var(--ink); text-decoration: none; transition: background-color var(--dur-fast) ease;
}
@media (hover: hover) { .home .art:hover { background: var(--surface); } }
.home .art__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
.home .art__media img { width: 100%; height: 100%; object-fit: cover; }
.home .art__text { display: grid; gap: 2px; min-width: 0; }
.home .art__title { font: 500 var(--step-body)/1.3 var(--font); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home .art__excerpt { font-size: var(--step-small); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1024px) {
    .home .arts__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
    .home .arts__head { grid-column: 1 / span 3; flex-direction: column; align-items: start; }
    .home .arts__title { font-size: min(var(--step-head), 3rem); }
    .home .arts__list { grid-column: 4 / -1; gap: var(--s-4); }
    .home .art { grid-template-columns: 160px minmax(0, 1fr); gap: var(--s-5); }
}

/* ---------- 6. Вопросы: ответы текстом ---------- */
.home .faqx { padding-top: 0; }
.home .faqx__title { margin-bottom: var(--s-5); }
.home .faqx__item { margin: 0 0 18px; max-width: 64ch; font: 400 var(--step-body)/1.5 var(--font); color: var(--ink); }
.home .faqx__item strong { font-weight: 500; }
.home .faqx__rest { margin-top: var(--s-2); }
.home .faqx__rest > summary { list-style: none; cursor: pointer; }
.home .faqx__rest > summary::-webkit-details-marker { display: none; }
.home .faqx__rest[open] > summary { display: none; }
.home .faqx__more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); }
.home .faqx__more p { margin: 0; color: var(--muted); }
@media (min-width: 1024px) {
    .home .faqx__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
    .home .faqx__title { grid-column: 1 / span 3; font-size: min(var(--step-head), 3rem); }
    .home .faqx__body { grid-column: 5 / -1; }
    .home .faqx__cols { columns: 2; column-gap: 56px; }
    .home .faqx__item { break-inside: avoid; margin-bottom: var(--s-5); }
    .home .faqx__rest { margin-top: 0; }
}

/* ---------- 7. Номер как вывеска ---------- */
.home .sign { background: var(--ink); color: #fff; }
.home .sign__inner {
    display: flex; flex-direction: column; gap: var(--s-6);
    padding-block: var(--s-7);
}
.home .sign__phrase { margin: 0; max-width: 24ch; font: 400 var(--step-lead)/1.3 var(--font); letter-spacing: -.01em; }
.home .sign__number {
    margin-block: var(--s-5); display: block; color: #fff; text-decoration: none;
    font: 400 var(--step-display)/.95 var(--font); letter-spacing: -.04em; font-variant-numeric: tabular-nums;
    text-decoration: underline 4px transparent; text-underline-offset: 12px;
    transition: text-decoration-color var(--dur-fast) ease;
}
.home .sign__number span { white-space: nowrap; }
[dir="rtl"] .home .sign__number { text-align: right; }
@media (hover: hover) { .home .sign__number:hover { text-decoration-color: #fff; } }
.home .sign__number:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
.home .sign__reply { margin: 0; font-size: var(--step-small); color: var(--on-sea-muted); }
.home .sign__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.home .sign__links ul { margin: 0; padding: 0; list-style: none; display: grid; }
.home .sign__links a {
    display: inline-flex; align-items: center; min-height: 44px;
    color: #fff; font-size: var(--step-small); text-decoration: underline 1px; text-underline-offset: 4px;
}
@media (hover: hover) { .home .sign__links a:hover { color: var(--on-sea-muted); } }
@media (min-width: 1024px) {
    .home .sign__inner { min-height: 100svh; padding-block: var(--s-8); }
    .home .sign__number { margin-block: auto; }
    .home .sign__number { font-size: min(var(--step-display), 9.4vw); }
    .home .sign__links { max-width: 760px; }
    .home .sign__links a { font-size: var(--step-body); }
}