/* ========================================================================
   TOUR DETAIL PAGE
   Shared styles for individual tour pages under /tury-v-kitaj/<slug>/
   Reuses the global system from style.css and layered helpers from tours.css.
   ======================================================================== */

/* ---------------------------------------------------------------- HERO */
/* The hero on detail pages overrides the centered listing-style hero
   with a left-aligned narrative layout: breadcrumb → tag → h1 → lead. */

.tour-detail-hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  background-color: #0a0a0a;
}

.tour-detail-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
}

.tour-detail-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(7, 7, 7, 0.9) 0%,
    rgba(7, 7, 7, 0.65) 45%,
    rgba(7, 7, 7, 0.35) 100%
  );
  z-index: -1;
}

.tour-detail-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px 56px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 40px;
  align-items: start;
}

.tour-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 18px;
}

.tour-breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.2s ease;
}

.tour-breadcrumb a:hover {
  color: gold;
}

.tour-breadcrumb-sep {
  opacity: 0.5;
}

.tour-breadcrumb-current {
  color: #fff;
}

.tour-detail-hero h1 {
  color: #fff;
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.08;
  margin: 12px 0 18px;
  letter-spacing: -0.01em;
}

.tour-detail-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 215, 0, 0.18);
  color: gold;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid rgba(255, 215, 0, 0.35);
}

.tour-detail-hero-lead {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  max-width: 580px;
  margin-bottom: 24px;
}

/* Quick-fact strip: duration · hotels · meals · group · etc. */
.tour-fact-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 28px;
  max-width: 580px;
}

.tour-fact {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  backdrop-filter: blur(4px);
}

.tour-fact-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.tour-fact-value {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}

/* Re-use the form-card styling from style.css for the right-side lead form.
   Override the inherited .hero-form-wrap from the listing-page layout so the
   form fills its grid track instead of getting the 41.67% width meant for the
   listing-page flex hero. */
.tour-detail-hero .hero-form-wrap {
  flex: none;
  width: 100%;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.tour-detail-hero .form-card {
  width: 100%;
  max-width: 460px;
}

@media (max-width: 1025px) {
  .tour-detail-hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px 20px 40px;
  }
  .tour-detail-hero .hero-form-wrap {
    justify-content: stretch;
  }
  .tour-detail-hero .form-card {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .tour-fact-strip {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------- HIGHLIGHTS */
/* "Why this tour" — 3–4 reasons that differentiate this route. */

.tour-why-section {
  background: #fff;
}

.tour-why-section .section-inner > h2 {
  text-align: center;
  margin-bottom: 12px;
}

.tour-why-lede {
  text-align: center;
  color: #5a5a5a;
  max-width: 700px;
  margin: 0 auto 36px;
}

.tour-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.tour-why-card {
  background: #fafafa;
  border: 1px solid #ededed;
  border-radius: 14px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.tour-why-card:hover {
  transform: translateY(-2px);
  border-color: gold;
  box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.2);
}

.tour-why-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: gold;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 17px;
  color: #070707;
  margin-bottom: 4px;
}

.tour-why-card h3 {
  font-size: clamp(17px, 1.7vw, 19px);
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}

.tour-why-card p {
  font-size: 14px;
  color: #5a5a5a;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 1025px) {
  .tour-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .tour-why-grid {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------- DAY-BY-DAY ITIN */
/* Vertical timeline. A column of yellow dots + connecting line on the
   left, day cards on the right. Collapses gracefully on mobile. */

.tour-itinerary-section {
  background: #f5f5f5;
}

.tour-itinerary-section .section-inner > h2 {
  text-align: center;
}

.tour-itinerary-lede {
  text-align: center;
  color: #5a5a5a;
  max-width: 700px;
  margin: 12px auto 40px;
}

.tour-itinerary {
  position: relative;
  padding-left: 28px;
  max-width: 920px;
  margin: 0 auto;
}

/* Continuous timeline line. */
.tour-itinerary::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 9px;
  width: 2px;
  background: linear-gradient(
    180deg,
    rgba(255, 215, 0, 0.8) 0%,
    rgba(255, 215, 0, 0.5) 60%,
    rgba(255, 215, 0, 0.2) 100%
  );
  border-radius: 2px;
}

.tour-day {
  position: relative;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 22px 22px 20px;
  margin-bottom: 14px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.tour-day:hover {
  box-shadow: 0 18px 38px -22px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

/* Yellow dot marker */
.tour-day::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 26px;
  width: 12px;
  height: 12px;
  background: gold;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.4);
}

/* Day-card header uses CSS Grid so the heading always starts at the same
   column edge regardless of whether transport is present, and the optional
   transport span is always pinned to the right.

   Grid layout:
     | day-num |    heading (1fr)    | transport |
*/
/* Day-card header uses CSS Grid so the heading always starts at the same
   column edge regardless of whether transport is present, and the optional
   transport span is always pinned to the right.

   Grid layout:
     | day-num |    heading (1fr)    | transport |

   IMPORTANT: this is a `<header>` element, and `style.css` has a global
   `header { ... }` rule for the site nav that leaks onto every <header> in
   the document — including this one. We must explicitly reset every leaked
   property (padding, height, position: sticky, fixed font-size, flex layout,
   white background, gap, transition) before applying our own layout.
*/
.tour-day-head {
  padding: 0;
  height: auto;
  background: transparent;
  position: static;
  top: auto;
  z-index: auto;
  font-size: inherit;
  transition: none;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 6px;
  margin-bottom: 14px;
}

.tour-day-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a6d00;
  background: rgba(255, 215, 0, 0.18);
  border: 1px solid rgba(255, 215, 0, 0.5);
  padding: 4px 10px;
  border-radius: 100px;
  justify-self: start;
  white-space: nowrap;
}

.tour-day-place {
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 500;
  color: #070707;
  line-height: 1.3;
  margin: 0;
  text-align: left;
  /* Prevent ugly mid-word hyphenated wraps like "по-" / "пекінськи".
     Browser will only break at spaces, never inside hyphenated words. */
  hyphens: manual;
  word-break: normal;
  overflow-wrap: break-word;
}

.tour-day-transport {
  font-size: 13px;
  color: #6a6a6a;
  text-align: right;
  white-space: nowrap;
  justify-self: end;
}

/* Meta block: clearly visible info strip with a gold accent bar so the
   reader's eye registers it as a distinct "facts" zone separate from the
   heading and body. The accent bar is tied to the brand and works on every
   screen brightness — unlike a faint cream tint, which can disappear on
   low-saturation mobile displays. */
.tour-day-meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 8px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #555;
  padding: 12px 14px;
  background: #fbf7e3;
  border: 1px solid #e8d98a;
  border-left: 4px solid gold;
  border-radius: 4px 8px 8px 4px;
  margin: 0 0 16px;
}

.tour-day-meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.tour-day-meta-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: gold;
  fill: none;
}

.tour-day-meta-item strong {
  font-weight: 600;
  color: #1a1a1a;
}

.tour-day-body {
  font-size: 14.5px;
  color: #2a2a2a;
  line-height: 1.6;
}

.tour-day-body p {
  margin: 0 0 10px;
}

.tour-day-body p:last-child {
  margin: 0;
}

.tour-day-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 4px 0 0;
}

.tour-day-points li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.55;
  color: #2a2a2a;
}

.tour-day-points li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: gold;
  margin-top: 8px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .tour-itinerary {
    padding-left: 22px;
  }
  /* Generous card padding so every internal element has room to breathe. */
  .tour-day {
    padding: 24px 20px;
  }
  .tour-day::before {
    left: -19px;
    top: 28px;
  }
  /* Stack head items vertically with a clear pill -> heading rhythm. */
  .tour-day-head {
    grid-template-columns: 1fr;
    row-gap: 14px;
    margin-bottom: 22px;
  }
  .tour-day-place {
    font-size: 17px;
    line-height: 1.4;
  }
  .tour-day-place,
  .tour-day-transport {
    justify-self: start;
    text-align: left;
    white-space: normal;
  }
  /* Meta items get real vertical separation from each other AND from the
     heading above and body below. Re-declare box styles explicitly so they
     can't be lost to any inherited reset. */
  .tour-day-meta {
    flex-direction: column;
    column-gap: 0;
    row-gap: 10px;
    padding: 14px 16px;
    margin: 0 0 22px;
    background: #fbf7e3;
    border: 1px solid #e8d98a;
    border-left: 4px solid gold;
    border-radius: 4px 8px 8px 4px;
    font-size: 13px;
  }
  .tour-day-body {
    font-size: 14.5px;
    line-height: 1.65;
  }
  .tour-day-body p {
    margin: 0 0 14px;
  }
  .tour-day-body p:last-child {
    margin: 0;
  }
}

/* ----------------------------------------------------- PRICING SECTION */

.tour-pricing-section {
  background: #fff;
}

.tour-pricing-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.tour-pricing-wrap .section-inner > h2 {
  margin-bottom: 16px;
}

.tour-price-table {
  background: #fafafa;
  border: 1px solid #ededed;
  border-radius: 16px;
  padding: 26px 26px 22px;
}

.tour-price-table h3 {
  font-size: clamp(18px, 1.8vw, 22px);
  margin-bottom: 8px;
  font-weight: 500;
}

.tour-price-table-lede {
  font-size: 14px;
  color: #5a5a5a;
  margin-bottom: 18px;
  line-height: 1.55;
}

.tour-price-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tour-price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 10px;
  padding: 14px 18px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.tour-price-row:hover {
  border-color: rgba(255, 215, 0, 0.5);
  transform: translateX(2px);
}

.tour-price-row.is-best {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.02));
  border-color: rgba(255, 215, 0, 0.4);
}

.tour-price-row-group {
  font-size: 14px;
  color: #2a2a2a;
}

.tour-price-row-group strong {
  font-weight: 500;
}

.tour-price-row-best-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: gold;
  color: #070707;
  padding: 2px 8px;
  border-radius: 100px;
  margin-left: 8px;
}

.tour-price-row-amount {
  font-size: 18px;
  font-weight: 600;
  color: #070707;
}

.tour-price-row-amount span {
  font-size: 13px;
  font-weight: 400;
  color: #5a5a5a;
  margin-left: 2px;
}

.tour-price-table-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #ececec;
  font-size: 13px;
  color: #5a5a5a;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tour-price-table-foot strong {
  color: #070707;
  font-weight: 500;
}

/* What's included / not included blocks (re-styled compact pair) */
.tour-included-pair {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tour-included-pair .included-block {
  margin: 0;
}

.tour-included-pair .included-block h3 {
  font-size: 17px;
  margin-bottom: 12px;
}

.tour-included-pair .included-list li {
  font-size: 13.5px;
}

@media (max-width: 1025px) {
  .tour-pricing-wrap {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ------------------------------------------------ "OTHER TOURS" SECTION */
/* Compact 4-up grid linking to the four sibling tours. */

.tour-other-section {
  background: #f5f5f5;
}

.tour-other-section .section-inner > h2 {
  text-align: center;
  margin-bottom: 12px;
}

.tour-other-lede {
  text-align: center;
  color: #5a5a5a;
  max-width: 620px;
  margin: 0 auto 36px;
}

.tour-other-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.tour-other-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  isolation: isolate;
}

.tour-other-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 215, 0, 0.5);
  box-shadow: 0 18px 36px -22px rgba(0, 0, 0, 0.18);
}

.tour-other-cover {
  height: 130px;
  background-size: cover;
  background-position: center;
  background-color: #1a1a2e;
  position: relative;
}

.tour-other-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.45) 100%);
}

.tour-other-cover-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(7, 7, 7, 0.65);
  color: gold;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid rgba(255, 215, 0, 0.4);
  z-index: 1;
}

.tour-other-body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}

.tour-other-body h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}

.tour-other-body .tour-other-meta {
  font-size: 12px;
  color: #6a6a6a;
}

.tour-other-body .tour-other-price {
  font-size: 14px;
  color: #070707;
  font-weight: 500;
  margin-top: 6px;
}

.tour-other-body .tour-other-price strong {
  font-weight: 600;
}

@media (max-width: 1025px) {
  .tour-other-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .tour-other-grid {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------- TOUR FAQ + CTA helpers */

.tour-detail-faq-section {
  background: #fff;
}

.tour-detail-faq-section .accordion {
  max-width: 920px;
  margin: 0 auto;
}

.tour-detail-faq-section .section-inner > h2 {
  text-align: center;
}

/* Make the linked "View all tours" pill at top of pricing section
   easy to spot. */
.tour-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #2a2a2a;
  text-decoration: none;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 100px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.tour-back-link:hover {
  border-color: gold;
  transform: translateX(-2px);
}

.tour-back-link::before {
  content: "←";
  color: gold;
  font-size: 14px;
}