/* Главная в стиле макета: баннер с готовым логотипом, белая панель поиска,
   полоса преимуществ, крупные фото-карточки с бейджем расстояния, синяя полоса. */

/* ---------- Шапка: логотип-квадрат + двухстрочный знак ---------- */
.site-header {
  background: #fff;
  box-shadow: 0 3px 15px rgba(25, 54, 91, 0.07);
  border-bottom: 0;
}
.site-header .wrap { min-height: 70px; gap: 18px; }
.logo {
  gap: 10px;
  font-weight: 900;
  font-size: 16px;
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: #202d4b;
  font-family: var(--sans);
}
.logo .logo-mark {
  background: linear-gradient(140deg, #0b9aff, #0758ca);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 20px;
  flex: none;
}
.logo b { color: #ffb400; font-weight: 900; }
.nav { gap: clamp(12px, 1.7vw, 26px); }
.nav a { font-size: 12.5px; font-weight: 800; color: #35435f; white-space: nowrap; }
.nav a:hover, .nav a[aria-current='page'] { color: #087cf0; }
.city-pill, .login-pill {
  border: 1px solid #dce4ef;
  border-radius: 30px;
  padding: 10px 18px;
  font-size: 12.5px;
  font-weight: 800;
  color: #202d4b;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.city-pill:hover, .login-pill:hover { border-color: #087cf0; color: #087cf0; }

/* ---------- Герой с баннером ---------- */
.banner-hero {
  position: relative;
  min-height: 620px;
  background: #0785e7 url('/img/hero-banner.jpg') center 34% / cover no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 22px;
  overflow: hidden;
}
.banner-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 54, 108, 0.16), transparent 70%);
}
.banner-hero .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hero-search {
  position: relative;
  z-index: 2;
  width: min(680px, 92%);
  background: #fff;
  border-radius: 50px;
  padding: 8px;
  display: flex;
  align-items: stretch;
  box-shadow: 0 10px 26px rgba(8, 46, 93, 0.34);
  gap: 4px;
}
.hero-search label { display: flex; align-items: center; gap: 10px; padding: 8px 16px; flex: 1 1 42%; min-width: 0; }
.hero-search label > i {
  width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center;
  background: #eaf4ff; color: #087cf0; font-style: normal; font-size: 13px; font-weight: 900;
}
.hero-search .period { border-left: 1px solid #dce4ef; }
.hero-search small { display: block; color: #7c899f; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.hero-search select {
  border: 0; outline: 0; background: transparent; font: inherit; font-weight: 800;
  font-size: 13.5px; width: 100%; color: #253450; cursor: pointer;
}
.hero-search .search-go {
  border: 0; border-radius: 40px; padding: 0 26px; height: 50px;
  background: linear-gradient(#ffda43, #ffb400);
  box-shadow: 0 4px 0 #df9000;
  color: #342800; font-weight: 900; font-size: 13.5px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap; text-decoration: none;
}
.hero-search .search-go:hover { color: #342800; filter: brightness(1.03); }

/* ---------- Полоса преимуществ ---------- */
.benefits {
  max-width: 1260px;
  margin: 0 auto;
  padding: 16px 18px;
  min-height: 86px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  background: #fff;
  box-shadow: 0 8px 24px rgba(23, 47, 77, 0.08);
  border-radius: 0 0 20px 20px;
  position: relative;
  z-index: 3;
  width: calc(100% - 40px);
}
.benefits > * {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 45px; border-right: 1px solid #dce3ed; text-decoration: none; color: inherit;
  padding: 0 6px;
}
.benefits > *:last-child { border-right: 0; }
.benefits .benefit-icon { font-size: 26px; line-height: 1; }
.benefits b { font-size: 12.5px; line-height: 1.12; font-weight: 800; }

/* ---------- Фото-карточки с расстоянием ---------- */
.photo-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.photo-card {
  position: relative; display: block; height: 210px; border-radius: 17px; overflow: hidden;
  color: #fff; text-decoration: none; box-shadow: 0 6px 16px rgba(23, 47, 77, 0.16);
  transition: transform 0.18s ease;
}
.photo-card:hover { transform: translateY(-4px); color: #fff; }
.photo-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(3, 20, 43, 0.88), rgba(3, 20, 43, 0) 68%);
}
.photo-card .distance {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  background: rgba(21, 40, 73, 0.85); border-radius: 20px; padding: 7px 11px;
  font-size: 11px; font-weight: 800;
}
.photo-card .pc-info { position: absolute; left: 15px; bottom: 14px; z-index: 2; display: flex; flex-direction: column; gap: 2px; }
.photo-card .pc-info b { font-size: 17px; font-weight: 900; }
.photo-card .pc-info small { font-size: 11px; font-weight: 700; opacity: 0.92; }
.photo-card .round-arrow {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #183354;
  display: grid; place-items: center; font-size: 16px; font-weight: 900;
}

/* ---------- Синяя полоса «Планируй путешествия» ---------- */
.weekend-band {
  max-width: 1320px; min-height: 118px; margin: 34px auto;
  padding: 18px 44px; display: flex; align-items: center; gap: 24px;
  background: linear-gradient(90deg, #d9efff, #f5fbff 55%, #d9efff);
  border-radius: 18px; position: relative; overflow: hidden;
}
.weekend-band .band-icon {
  width: 96px; height: 78px; flex: none; background: #fff8dc; border: 7px solid #fff;
  box-shadow: 0 6px 13px rgba(41, 75, 109, 0.14); border-radius: 8px;
  transform: rotate(-7deg); display: grid; place-items: center; color: #72a886; font-size: 26px;
}
.weekend-band h2 { font-size: 21px; margin: 0 0 3px; font-weight: 900; }
.weekend-band p { font-size: 12.5px; font-weight: 700; color: #53617a; margin: 0; }
.weekend-band .band-cta {
  margin-left: auto; border: 0; border-radius: 40px; padding: 14px 24px;
  background: linear-gradient(#ffda43, #ffb400); box-shadow: 0 4px 0 #df9000;
  color: #342800; font-weight: 900; font-size: 13px; white-space: nowrap; text-decoration: none;
}
.weekend-band .band-cta:hover { color: #342800; }
.weekend-band .compass {
  width: 62px; height: 62px; border-radius: 50%; background: #e2f3ff; border: 6px solid #fff;
  display: grid; place-items: center; color: #087cf0; font-size: 26px; flex: none;
}

/* ---------- Полоса «не сиди дома» ---------- */
.ideas-band {
  max-width: 1260px; margin: 0 auto 46px; padding: 0 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.ideas-band small { font-size: 10.5px; letter-spacing: 0.18em; color: #087cf0; font-weight: 900; }
.ideas-band h2 { font-size: 24px; line-height: 1.22; margin: 6px 0 0; letter-spacing: -0.02em; }
.ideas-band a {
  border: 2px solid #087cf0; border-radius: 25px; padding: 12px 20px;
  color: #087cf0; font-size: 12.5px; font-weight: 800; white-space: nowrap; text-decoration: none;
}
.ideas-band a:hover { background: #087cf0; color: #fff; }

/* ---------- Подвал в одну строку ---------- */
.site-footer { background: #172b4b; color: #fff; }
.site-footer h4 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #8fb0d8; margin: 0 0 12px; font-weight: 800; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.site-footer ul a { font-size: 13px; color: #d7e3f5; }
.site-footer ul a:hover { color: #fff; }
.site-footer .footer-brandline .logo { color: #fff; }
.site-footer .logo { color: #fff; }
.site-footer p, .site-footer small { font-size: 12.5px; color: #c1d1e8; margin: 0; }
.site-footer .footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer .footer-links a { font-size: 11.5px; color: #e0eafa; font-weight: 700; }
.site-footer .footer-links a:hover { color: #fff; }

/* ---------- Адаптив ---------- */
@media (max-width: 950px) {
  .photo-cards { grid-template-columns: repeat(2, 1fr); }
  .benefits { grid-template-columns: repeat(3, 1fr); }
  .benefits > *:nth-child(3) { border-right: 0; }
  .weekend-band { flex-wrap: wrap; padding: 18px 24px; }
  .weekend-band .compass { display: none; }
  .ideas-band { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px) {
  .site-header .wrap { min-height: 62px; }
  .banner-hero { min-height: 560px; background-position: 43% center; padding-bottom: 18px; }
  .hero-search {
    width: 93%; border-radius: 18px; display: grid; grid-template-columns: 1fr 1fr; padding: 8px; gap: 0;
  }
  .hero-search label { padding: 6px 8px; gap: 8px; }
  .hero-search .period { border-left: 1px solid #dce4ef; }
  .hero-search .search-go { grid-column: span 2; height: 46px; margin-top: 4px; }
  .benefits { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px 10px; }
  .benefits > * { border-right: 0; justify-content: flex-start; }
  .benefits b { font-size: 11.5px; }
  .photo-cards { grid-template-columns: 1fr; }
  .photo-card { height: 180px; }
  .weekend-band { margin: 24px 16px; }
  .weekend-band .band-icon { width: 64px; height: 54px; font-size: 20px; }
  .weekend-band h2 { font-size: 17px; }
  .weekend-band .band-cta { margin-left: 0; }
  .ideas-band h2 { font-size: 20px; }
}

/* ---------- Мобильный баннер: свой кадр вместо обрезки широкой картинки ---------- */
.hero-art { display: none; }

@media (max-width: 700px) {
  .banner-hero {
    min-height: 0;
    display: block;
    padding: 0;
    background: #eaf4ff;
    overflow: visible;
  }
  .banner-hero::before { display: none; }
  .hero-art {
    display: block;
    width: 100%;
    height: auto;
    max-height: 62vh;
    object-fit: cover;
    object-position: center 40%;
  }
  .hero-search {
    width: calc(100% - 24px);
    margin: 12px auto 14px;
    border-radius: 22px;
    flex-wrap: wrap;
    gap: 2px;
    padding: 10px;
    box-shadow: 0 14px 30px rgba(8, 46, 93, 0.22);
  }
  .hero-search label { flex: 1 1 100%; padding: 9px 10px; }
  .hero-search .period { border-left: 0; border-top: 1px solid #e9eff8; }
  .hero-search .search-go { width: 100%; margin-top: 8px; }
}