/* Destino — стили только для новой главной страницы (ru/index.html).
   Переиспользует переменные и компоненты style.css; здесь — только то,
   чего там ещё нет: карусель отзывов + видео, блог, декоративный квиз-скип,
   двухколоночная обёртка тарифов на главной, увеличенный max-width у h1 в hero. */

/* Hero: на главной заголовок длиннее, чем на остальных страницах —
   не трогаем глобальное правило .hero h1, а расширяем только здесь */
@media (min-width: 62rem) {
  .hero--home h1 { max-width: 24ch; }
}

/* ===== Тарифы на главной: тизер из двух карточек (турист / студент) ===== */
.home-pricing-grid { margin-top: 2.75rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 62rem) {
  .home-pricing-grid { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  /* На телефоне тарифы листаются горизонтально свайпом, как отзывы и видео */
  .home-pricing-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* запас со всех сторон, чтобы тень синей карточки не обрезалась краем прокрутки */
    margin-top: 1rem;
    padding-block: 1rem 1.75rem;
  }
  .home-pricing-grid::-webkit-scrollbar { display: none; }
  .home-pricing-grid .price-card {
    flex: 0 0 86%; scroll-snap-align: center;
    /* always — резкий свайп не проскакивает через карточку, лента
       останавливается на каждой по очереди */
    scroll-snap-stop: always;
  }
  /* тень поменьше, чем на десктопе, и без резкого «обреза» по бокам — вторая,
     ненаправленная (без сдвига) тень даёт ровное свечение вокруг всей карточки */
  .home-pricing-grid .price-card--main {
    transform: none;
    box-shadow: 0 8px 18px rgba(26,115,199,.24), 0 0 28px rgba(26,115,199,.16);
  }
}
/* Вся карточка тарифа — ссылка на страницу нужной визы */
.price-card--link { text-decoration: none; cursor: pointer; transition: box-shadow .25s, transform .15s; }
.price-card--link:active { transform: scale(.98); }
.price-card--link .price-actions .btn-ghost-lt { pointer-events: none; }

/* ===== Квиз: декоративная кнопка-скип «Написать в Telegram» ===== */
.quiz-skip { margin-top: 2rem; display: inline-flex; align-items: center; gap: .6rem; color: var(--navy-950); background: var(--buoy); font-size: .95rem; font-weight: 600; text-decoration: none; padding: .85rem 1.5rem; border: 1px solid transparent; border-radius: 999px; transition: background-color .2s; }
.quiz-skip:hover { background: var(--buoy-deep); }
.quiz-skip svg { flex: none; width: 1.15rem; height: 1.15rem; }

/* ===== Отзывы + Блог: единый фон (revblog-sec), без разделителя между блоками ===== */
.revblog-sec { background: var(--mist-50); }
.rev-feat-tag { display: inline-flex; padding: .35rem .8rem; border-radius: 999px; background: var(--coral); color: #fff; font: 600 .78rem/1.3 var(--font-body); }
.rev-steps { list-style: none; margin: 0; padding: 0 0 0 1.4rem; border-left: 2px dashed var(--mist-300); display: grid; gap: 1.15rem; }
.rev-steps li { position: relative; }
.rev-steps li::before { content: ""; position: absolute; left: calc(-1.4rem - 6px); top: .25rem; width: 11px; height: 11px; border-radius: 50%; background: var(--lagoon); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--mist-300); }
.rev-steps li.ok::before { background: var(--teal-deep); box-shadow: 0 0 0 1px var(--teal-deep); }
.rev-steps b { display: block; color: var(--coral); font-size: .8rem; font-weight: 600; }
.rev-steps li.ok b { color: var(--teal-deep); }
.rev-steps span { display: block; margin-top: .2rem; line-height: 1.5; font-size: .95rem; }
.rev-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem; }
.rev-dots { display: flex; gap: .4rem; }
.rev-dots span { width: .45rem; height: .45rem; border-radius: 50%; background: var(--mist-300); }
.rev-dots span.on { background: var(--lagoon); width: 1.3rem; border-radius: 999px; }
.rev-arrows { display: flex; gap: .6rem; }
.rev-arrows button { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--mist-300); background: #fff; color: var(--navy-900); display: grid; place-items: center; cursor: pointer; transition: background-color .15s, transform .1s, opacity .15s; }
.rev-arrows button:hover:not(:disabled) { background: var(--sky-100); }
.rev-arrows button:active:not(:disabled) { transform: scale(.92); }
.rev-arrows button:disabled { opacity: .35; cursor: default; }
.rev-dots button { padding: 0; border: 0; background: var(--mist-300); width: .45rem; height: .45rem; border-radius: 50%; cursor: pointer; transition: background-color .15s, width .2s; }
.rev-dots button.on { background: var(--lagoon); width: 1.3rem; border-radius: 999px; }

/* ===== Отзывы: единая карточка «видео сверху, история снизу» =====
   Пока видео нет, .rc-vid — светлая заглушка: метка, кнопка, имя (клик → окно «скоро»).
   Мобилка и планшет — лента с прокруткой пальцем (scroll-snap), по одной карточке,
   точки и стрелки внизу. Десктоп — три карточки в ряд, без навигации. */
.rc { margin-top: 1.75rem; }
.rc-track { position: relative; display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.rc-track::-webkit-scrollbar { display: none; }
.rc-card { flex: 0 0 100%; scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--mist-300); border-radius: 1.5rem; overflow: hidden; }

.rc-vid { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; border: 0; border-bottom: 1px solid var(--mist-100); cursor: pointer; color: var(--navy-900); text-align: left; font: inherit; overflow: hidden;
  background: radial-gradient(110% 90% at 15% 0%, #FFFFFF 0%, transparent 55%), radial-gradient(90% 90% at 100% 100%, #D6E7F6 0%, transparent 60%), var(--sky-100); }
.rc-vid .rev-feat-tag { position: absolute; z-index: 2; left: 1rem; top: 1rem; }
.rc-play { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--buoy); color: var(--navy-950); display: grid; place-items: center; box-shadow: 0 8px 22px rgba(10,37,64,.18); transition: transform .15s; }
.rc-play svg { width: 1.3rem; height: 1.3rem; margin-left: .15rem; fill: currentColor; }
.rc-vid:hover .rc-play { transform: translate(-50%, -50%) scale(1.06); }
.rc-cap { position: absolute; z-index: 2; left: 1rem; right: 1rem; bottom: .95rem; display: block; }
.rc-who { display: block; font: 600 1.05rem/1.25 var(--font-display); color: var(--navy-900); }
.rc-what { display: block; margin-top: .15rem; font-size: .82rem; color: var(--ink-soft); }

.rc-body { padding: 1.35rem 1.4rem 1.6rem; }
.rc-body h3 { margin: 0 0 1.15rem; font: 600 1.25rem/1.25 var(--font-display); color: var(--navy-900); }
.rc-body .rev-steps { gap: .95rem; }

.rc .rev-nav { margin-top: 1.25rem; }

@media (min-width: 62.01rem) {
  .rc-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; overflow: visible; scroll-snap-type: none; }
  .rc-card { box-shadow: 0 14px 34px rgba(10,37,64,.06); }
  .rc .rev-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rc-track { scroll-behavior: auto; }
}

/* ===== Блог — на одном фоне с отзывами (revblog-sec), без отдельной секции ===== */
.blog-inner { margin-top: 5rem; }
.blog-sec .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; max-width: none; }
.all-link { flex: none; display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; color: var(--lagoon); text-decoration: none; }
.all-link svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bl-layout { margin-top: 2.25rem; display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: stretch; }
.bl-feat { position: relative; border-radius: 1.75rem; padding: 3rem 2.5rem; background: linear-gradient(155deg, var(--lagoon) 0%, var(--lagoon-deep) 100%); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; min-height: 22rem; overflow: hidden; text-decoration: none; }
.bl-feat::before { content: ""; position: absolute; right: -4rem; top: -4rem; width: 14rem; height: 14rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); }
.bl-feat-tag { align-self: flex-start; font-size: .75rem; font-weight: 600; padding: .32rem .75rem; border-radius: 999px; background: rgba(255,255,255,.14); margin-bottom: auto; position: relative; z-index: 1; }
.bl-feat h3 { font: 600 1.5rem/1.3 var(--font-display); margin: 1.75rem 0 .6rem; max-width: 22rem; position: relative; z-index: 1; }
.bl-feat p { margin: 0 0 1.25rem; font-size: .88rem; color: rgba(255,255,255,.72); max-width: 24rem; position: relative; z-index: 1; }
.bl-feat-go { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-weight: 600; font-size: .88rem; position: relative; z-index: 1; }
.bl-list { display: flex; flex-direction: column; justify-content: center; }
.bl-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.6rem 0; border-bottom: 1px solid var(--mist-300); text-decoration: none; color: var(--ink); transition: transform .12s, opacity .15s; }
.bl-row:first-child { padding-top: 0; }
.bl-row:hover .bl-row-title { color: var(--lagoon); }
.bl-row:hover .bl-row-go { background: var(--lagoon); color: #fff; border-color: var(--lagoon); }
.bl-row:active { transform: scale(.985); opacity: .85; }
.bl-row-title { flex: 1; font: 500 1.1rem/1.4 var(--font-display); color: var(--navy-900); transition: color .15s; }
.bl-row-go { flex: none; font-size: .85rem; font-weight: 600; color: var(--lagoon); padding: .55rem 1.05rem; border: 1px solid var(--sky-100); border-radius: 999px; transition: background-color .15s, color .15s, border-color .15s; }
.bl-feat { transition: transform .15s, box-shadow .25s; }
.bl-feat:hover { box-shadow: 0 20px 45px rgba(20,95,163,.35); }
.bl-feat:active { transform: scale(.99); }

@media (max-width: 62rem) {
  .bl-layout { grid-template-columns: 1fr; }
  .blog-sec .section-head { flex-wrap: wrap; }
}

/* ===== «Испания, ради которой всё это»: белый блок между синим первым экраном
   и синим «Как мы работаем». Две карточки с фото на всю площадь: учёба и поездка,
   каждая ведёт на страницу своей визы. Текст поверх фото на затемнении. ===== */
.es-full { background: #fff; }
.es-full .section-head h2 { color: var(--navy-900); }
.esf-grid { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.esf-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 34rem; border-radius: 1.75rem; overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; background: var(--navy-900); }
.esf-card picture, .esf-card img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -2; }
.esf-card img { object-fit: cover; transition: transform .6s ease; }
.esf-card:hover img { transform: scale(1.04); }
.esf-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,27,48,0) 30%, rgba(7,27,48,.55) 58%, rgba(7,27,48,.92) 100%); }
.esf-card--study img { object-position: 28% 40%; }
.esf-card--travel img { object-position: 72% 40%; }
.esf-body { padding: 1.75rem 1.9rem 1.9rem; display: flex; flex-direction: column; gap: .75rem; }
.esf-tag { align-self: flex-start; font: 600 .78rem/1.3 var(--font-body); color: #fff; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: .35rem .8rem; border-radius: 999px; }
.esf-body h3 { font: 600 clamp(2rem, 1.6rem + 1.6vw, 2.8rem)/1.05 var(--font-display); color: #fff; letter-spacing: -0.01em; }
.esf-body p { margin: 0; max-width: 28rem; color: rgba(255,255,255,.86); line-height: 1.5; }
.esf-facts { display: flex; flex-wrap: wrap; gap: .5rem; margin: .35rem 0 0; padding: 0; list-style: none; }
.esf-facts li { display: flex; align-items: baseline; gap: .4rem; padding: .5rem .8rem; border-radius: .9rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .88rem; line-height: 1.25; }
.esf-facts b { font: 600 1.15rem/1 var(--font-display); color: var(--buoy); }
.esf-go { margin-top: .4rem; font-weight: 600; color: #fff; display: inline-flex; align-items: center; gap: .45rem; }
.esf-go::after { content: "→"; transition: transform .2s; }
.esf-card:hover .esf-go::after { transform: translateX(4px); }
/* Телефон: карточки лентой, листаются пальцем; край второй виден справа */
@media (max-width: 48rem) {
  .esf-grid { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .esf-grid::-webkit-scrollbar { display: none; }
  .esf-card { flex: 0 0 86%; min-height: 0; aspect-ratio: 4 / 6; scroll-snap-align: start; }
  .esf-card img { object-position: 30% 0; }
  .esf-card--travel img { object-position: 78% 0; }
  .esf-body { padding: 1.4rem 1.4rem 1.5rem; }
  .esf-body p { display: none; }
  .esf-facts li { font-size: .82rem; padding: .45rem .7rem; }
}

/* Отзывы: обложка видео из кадра (.rc-vid--photo). Картинка под меткой,
   кнопкой и подписью; снизу затемнение, чтобы белая подпись читалась. */
.rc-vid--photo { color: #fff; }
.rc-poster, .rc-poster img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.rc-poster img { object-fit: cover; }
.rc-vid--photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 45%, rgba(7,27,48,.72)); }
.rc-vid--photo .rc-who { color: #fff; }
.rc-vid--photo .rc-what { color: rgba(255,255,255,.8); }
/* На фото кнопка воспроизведения уходит в правый нижний угол, чтобы не закрывать лицо */
.rc-vid--photo .rc-play { left: auto; top: auto; right: 1rem; bottom: 1rem; transform: none; width: 3.1rem; height: 3.1rem; }
.rc-vid--photo:hover .rc-play { transform: scale(1.06); }
.rc-vid--photo .rc-cap { right: 5rem; }

/* Города под карточками «Испании» и строчка-подсказка про квиз.
   Города не кликабельны — это справка, а не меню. На телефоне листаются пальцем. */
.esc { margin-top: 2.5rem; }
.esc-title { font: 600 1.25rem/1.2 var(--font-display); color: var(--navy-900); }
.esc-list { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
.esc-city { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.05rem 1.1rem; border-radius: 1.1rem; background: var(--mist-50); border: 1px solid var(--mist-100); }
.esc-name { position: relative; padding-left: 1rem; font: 600 1.05rem/1.2 var(--font-display); color: var(--navy-900); }
.esc-name::before { content: ""; position: absolute; left: 0; top: .42em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--buoy); box-shadow: 0 0 0 3px rgba(244,183,64,.22); }
.esc-txt { font-size: .86rem; line-height: 1.45; color: var(--ink-soft); }
.es-quiz { margin: 2rem 0 0; font-size: 1rem; color: var(--ink-soft); }
.es-quiz a { margin-left: .35rem; font-weight: 600; color: var(--lagoon); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--buoy); }
.es-quiz a::after { content: " →"; }
.es-quiz a:hover { text-decoration-thickness: 3px; }
@media (max-width: 62rem) { .esc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 48rem) {
  .esc { margin-top: 2rem; }
  .esc-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .esc-list::-webkit-scrollbar { display: none; }
  .esc-city { flex: 0 0 11.5rem; scroll-snap-align: start; }
  .es-quiz a { display: inline-block; margin: .35rem 0 0; }
}