/* =====================================================================
   Beyond Journey - the two-card "who else can we help" band (bjgb-)
   ---------------------------------------------------------------------
   A pair of cards above the FAQ: one navy, one warm. Each names a kind
   of traveller the page's search does not serve well on its own and
   gives them one button, which opens the callback form (bj-enquiry.js)
   with a named specialist.

   Used by hotels.html (groups / BJ Desk corporate stays) and
   holiday-packages.html (group holidays / Golden Journeys 60+). The
   markup is the same on both; only the words and the data-specialist
   differ. Colours are declared in place: neither page loads
   bj-tokens.css.
   ===================================================================== */
.bjgb { padding: 64px 0 0; background: #fff; }
.bjgb__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.bjgb__card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 28px 28px 26px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(135deg, #17233e 0%, #22315a 100%); color: #fff;
}
.bjgb__card::after {
  content: ""; position: absolute; right: -50px; top: -50px; width: 180px; height: 180px;
  border-radius: 50%; background: rgba(245, 118, 26, .16); pointer-events: none;
}
.bjgb__card--light { background: #fdf1e6; color: #17233e; border: 1px solid #f7d9bf; }
.bjgb__card--light::after { background: rgba(245, 118, 26, .12); }
.bjgb__ico {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px;
  background: rgba(255, 255, 255, .12); color: #f5761a; font-size: 18px;
}
.bjgb__card--light .bjgb__ico { background: #fff; }
.bjgb__card h3 { margin: 4px 0 0; font-size: 21px; font-weight: 700; color: inherit; text-transform: none; }
.bjgb__card p { margin: 0; font-size: 14px; line-height: 1.65; color: inherit; opacity: .88; }
.bjgb__foot {
  margin-top: auto; padding-top: 8px; position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
}
.bjgb__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; border: 0; cursor: pointer;
  background: linear-gradient(90deg, #f5761a, #dd660f); color: #fff;
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  box-shadow: 0 8px 20px -8px rgba(245, 118, 26, .6); transition: transform .2s ease;
}
.bjgb__btn:hover { transform: translateY(-2px); color: #fff; }
.bjgb__link { font-size: 13px; font-weight: 600; color: inherit; text-decoration: underline; opacity: .85; }
.bjgb__link:hover { color: #f5761a; opacity: 1; }
@media (max-width: 767px) {
  .bjgb { padding-top: 44px; }
  .bjgb__grid { grid-template-columns: 1fr; gap: 14px; }
  .bjgb__card { padding: 22px 20px; }
  .bjgb__card h3 { font-size: 18px; }
}