/* =====================================================================
   Beyond Journey - Offer pages design system
   ---------------------------------------------------------------------
   One card system shared by all four offer pages:
     hotels-offers.html
     flights-offers.html
     holiday-packages-offers.html
     tours-&-attractions-offers.html

   SCOPING: every rule is nested under .bjo. The offer cards reuse the
   template's .trend-item markup, and that class appears on 41 other
   pages across the site - restyling it globally would change all of
   them. The .bjo wrapper keeps these changes to the offer pages only.

   FONTS: nothing here declares a font-family. The family is inherited
   from css/style.css exactly as before.

   The palette and 8px grid below mirror the values in bj-booking.css so
   the offer pages read as the same product as the booking journey. They
   are restated rather than imported because these are light marketing
   pages that do not need the full booking stylesheet.
   ===================================================================== */

.bjo {
  /* brand */
  --bjo-navy: #17233e;
  --bjo-navy-700: #22315a;
  --bjo-orange: #f5761a;
  --bjo-orange-600: #dd660f;
  --bjo-orange-50: #fff6ee;
  --bjo-orange-100: #fdf1e6;

  /* neutrals */
  --bjo-ink: #17233e;
  --bjo-muted: #56607a;
  --bjo-faint: #8a93a8;
  --bjo-line: #e7e6e1;
  --bjo-surface: #ffffff;

  /* status */
  --bjo-ok: #1a7f4b;
  --bjo-ok-bg: #edf8f1;
  --bjo-ok-line: #bfe3cd;

  /* 8px spacing system */
  --bjo-s1: 4px;  --bjo-s2: 8px;  --bjo-s3: 12px; --bjo-s4: 16px;
  --bjo-s5: 24px; --bjo-s6: 32px; --bjo-s7: 40px; --bjo-s8: 48px;

  /* radii - 20px card corner as specified */
  --bjo-r: 20px;
  --bjo-r-sm: 10px;
  --bjo-r-pill: 999px;

  /* elevation */
  --bjo-e1: 0 1px 2px rgba(23, 35, 62, .05), 0 6px 18px -10px rgba(23, 35, 62, .18);
  --bjo-e2: 0 6px 14px -6px rgba(23, 35, 62, .16), 0 22px 44px -18px rgba(23, 35, 62, .30);

  --bjo-ease: cubic-bezier(.4, 0, .2, 1);
}

/* The site stylesheet puts `section { padding: 4.5rem 0 5rem }` on every
   section. :where() has zero specificity, so this hands spacing control
   back to the rules below without needing to out-specify anything. */
.bjo :where(section) { padding: 0; }

.bjo *, .bjo *::before, .bjo *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------
   Section rhythm - 48px between blocks, 8px system throughout
   --------------------------------------------------------------- */
.bjo-section { padding: var(--bjo-s8) 0; }
.bjo-section + .bjo-section { padding-top: 0; }

.bjo-head { text-align: center; max-width: 720px; margin: 0 auto var(--bjo-s6); }
.bjo-head h2 {
  font-size: 36px;              /* spec: section heading */
  line-height: 1.25;
  font-weight: 700;
  color: var(--bjo-ink);
  letter-spacing: -.4px;
  margin: 0 0 var(--bjo-s3);
}
.bjo-head p {
  font-size: 16px;              /* spec: body */
  line-height: 1.7;
  color: var(--bjo-muted);
  margin: 0;
}
.bjo-kicker {
  display: inline-block;
  font-size: 14px;              /* spec: caption */
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bjo-orange);
  margin-bottom: var(--bjo-s2);
}

/* ---------------------------------------------------------------
   Grid - 4 across on desktop, 24px gutters
   Bootstrap's default gutter is 30px; these override it to the 24px
   the spec calls for without touching the global .row.
   --------------------------------------------------------------- */
.bjo-grid { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.bjo-grid > [class*="col-"] {
  padding: 0 12px;
  margin-bottom: var(--bjo-s5);
  display: flex;                /* lets the card stretch to full height */
}
.bjo-grid > [class*="col-"] > * { width: 100%; }

/* ---------------------------------------------------------------
   Offer card
   Height is equalised by making the card a flex column and letting the
   body grow, so the footer (price + CTA) always sits on the baseline
   no matter how long the title runs.
   --------------------------------------------------------------- */
.bjo .trend-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bjo-surface);
  border: 1px solid var(--bjo-line);
  border-radius: var(--bjo-r);
  box-shadow: var(--bjo-e1);
  overflow: hidden;
  transition: transform .3s var(--bjo-ease), box-shadow .3s var(--bjo-ease), border-color .3s var(--bjo-ease);
}
.bjo .trend-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--bjo-e2);
  border-color: rgba(245, 118, 26, .4);
}
.bjo .trend-item:focus-within {
  border-color: var(--bjo-orange);
  box-shadow: 0 0 0 3px rgba(245, 118, 26, .18), var(--bjo-e2);
}

/* --- image: locked 5:4 so no card is ever taller than its neighbour --- */
.bjo .trend-image {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: #eceef2;
  flex: none;
}
.bjo .trend-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;            /* never stretch */
  object-position: center;
  display: block;
  transition: transform .55s var(--bjo-ease);
}
.bjo .trend-item:hover .trend-image img { transform: scale(1.06); }

/* Older browsers without aspect-ratio still get a fixed frame. */
@supports not (aspect-ratio: 5 / 4) {
  .bjo .trend-image { height: 0; padding-bottom: 80%; }
  .bjo .trend-image img { position: absolute; inset: 0; }
}

.bjo .trend-image .color-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 35, 62, 0) 45%, rgba(23, 35, 62, .55) 100%);
  pointer-events: none;
}

/* --- badges on the image --- */
.bjo-badges {
  position: absolute;
  top: var(--bjo-s3);
  left: var(--bjo-s3);
  right: var(--bjo-s3);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bjo-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 5px 11px;
  border-radius: var(--bjo-r-pill);
  background: rgba(255, 255, 255, .94);
  color: var(--bjo-navy);
  backdrop-filter: blur(4px);
  line-height: 1.4;
}
.bjo-badge i { font-size: 10px; }
.bjo-badge--save { background: var(--bjo-orange); color: #fff; }
.bjo-badge--limited { background: var(--bjo-navy); color: #fff; }
.bjo-badge--best { background: #fff; color: var(--bjo-orange); }
.bjo-badge--best i { color: var(--bjo-orange); }
.bjo-badge--instant { background: var(--bjo-ok-bg); color: var(--bjo-ok); }
.bjo-badge--rating { background: var(--bjo-navy); color: #fff; margin-left: auto; }
.bjo-badge--rating i { color: var(--bjo-orange); }

/* --- body: 24px padding as specified --- */
.bjo .trend-content {
  padding: var(--bjo-s5) !important;   /* template ships p-4 pt-5 utilities */
  display: flex;
  flex-direction: column;
  gap: var(--bjo-s2);
  flex: 1 1 auto;               /* grow so the footer pins to the bottom */
  position: relative;
}

/* Coupon chip - the template's .trend-meta, restyled in place. */
.bjo .trend-meta {
  position: static !important;
  align-self: flex-start;
  background: var(--bjo-orange-50) !important;
  border: 1px dashed var(--bjo-orange-100);
  color: var(--bjo-navy) !important;
  padding: 6px 12px !important;
  border-radius: var(--bjo-r-pill) !important;
  font-size: 12.5px;
  margin: 0 0 var(--bjo-s1);
}
.bjo .trend-meta .entry-author { display: flex; align-items: center; gap: 7px; }
.bjo .trend-meta i { color: var(--bjo-orange); font-size: 12px; }
.bjo .trend-meta .fw-bold { font-size: 12.5px; font-weight: 700; letter-spacing: .01em; }

/* Kicker line above the title */
.bjo .trend-content h5 {
  font-size: 14px;              /* spec: caption */
  font-weight: 700;
  color: var(--bjo-orange) !important;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.45;
}
.bjo .trend-content h5 i { font-size: 12px; }

/* Card title */
.bjo .trend-content h3 {
  font-size: 22px;              /* spec: card title */
  line-height: 1.35;
  /* Reserve the full three lines the clamp allows, so a short title and a
     long one produce the same card height in every row, not just within one. */
  min-height: calc(1.35em * 3);
  font-weight: 700;
  letter-spacing: -.2px;
  margin: 0;
  color: var(--bjo-ink);
  /* Clamp to three lines so a long title cannot unbalance the row. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bjo .trend-content h3 a { color: inherit; text-decoration: none; }
.bjo .trend-item:hover .trend-content h3 a { color: var(--bjo-orange); }

/* Short description */
.bjo-desc {
  font-size: 14px;              /* spec: caption */
  line-height: 1.65;
  color: var(--bjo-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- footer: validity + CTA, always on the card baseline --- */
.bjo-foot {
  margin-top: auto;             /* pushes the footer down */
  padding-top: var(--bjo-s4);
  border-top: 1px solid var(--bjo-line);
  display: flex;
  flex-direction: column;
  gap: var(--bjo-s3);
}
.bjo-valid {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;              /* spec: caption */
  color: var(--bjo-muted);
  line-height: 1.4;
}
.bjo-valid i { color: var(--bjo-orange); font-size: 12px; }
.bjo-valid strong { color: var(--bjo-ink); font-weight: 600; }

.bjo-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bjo-s2);
  width: 100%;
  min-height: 46px;             /* equal button height across every card */
  padding: 12px var(--bjo-s5);
  border: 0;
  border-radius: var(--bjo-r-pill);
  background: linear-gradient(90deg, var(--bjo-orange) 0%, var(--bjo-orange-600) 100%);
  color: #fff !important;
  font-family: inherit;
  font-size: 16px;              /* spec: button text */
  font-weight: 700;
  letter-spacing: .2px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(245, 118, 26, .6);
  transition: transform .25s var(--bjo-ease), box-shadow .25s var(--bjo-ease), filter .25s var(--bjo-ease);
}
.bjo-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(245, 118, 26, .7); color: #fff !important; }
.bjo-cta:active { transform: translateY(0); }
.bjo-cta i { font-size: 12px; transition: transform .25s var(--bjo-ease); }
.bjo-cta:hover i { transform: translateX(3px); }
.bjo-cta:focus-visible { outline: 3px solid rgba(245, 118, 26, .45); outline-offset: 2px; }

/* Neutralise template utilities that fight the layout above. */
.bjo .trend-item::before,
.bjo .trend-item1::before,
.bjo .trend-item2::before { display: none !important; }
.bjo .trend-content .entry-meta { margin: 0; }
.bjo .trend-content > p:empty { display: none; }   /* stray empty <p> made cards uneven */

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.bjo-hero h1,
.bjo h1 {
  font-size: 48px;              /* spec: hero heading */
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -1px;
}

/* ---------------------------------------------------------------
   Responsive
   Desktop 1200+  : 4 per row
   Laptop 992-1199: 4 per row, slightly smaller
   Tablet 768-991 : 2 per row
   Mobile <768    : 1 per row
   --------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .bjo .trend-content { padding: var(--bjo-s4) !important; }
  .bjo .trend-content h3 { font-size: 20px; }
  .bjo-head h2 { font-size: 32px; }
  .bjo-hero h1, .bjo h1 { font-size: 42px; }
}

@media (max-width: 991.98px) {
  .bjo-section { padding: var(--bjo-s6) 0; }
  .bjo-head { margin-bottom: var(--bjo-s5); }
  .bjo-head h2 { font-size: 28px; }
  .bjo-hero h1, .bjo h1 { font-size: 36px; }
  .bjo .trend-content h3 { font-size: 21px; }
}

@media (max-width: 767.98px) {
  .bjo-head h2 { font-size: 26px; }
  .bjo-hero h1, .bjo h1 { font-size: 30px; }
  .bjo .trend-content { padding: var(--bjo-s5) !important; }
  .bjo .trend-content h3 { font-size: 20px; -webkit-line-clamp: 4; min-height: 0; }
  .bjo-grid > [class*="col-"] { margin-bottom: var(--bjo-s4); }
}

@media (prefers-reduced-motion: reduce) {
  .bjo .trend-item,
  .bjo .trend-image img,
  .bjo-cta, .bjo-cta i { transition: none !important; }
  .bjo .trend-item:hover { transform: none; }
  .bjo .trend-item:hover .trend-image img { transform: none; }
  .bjo-cta:hover { transform: none; }
  .bjo-cta:hover i { transform: none; }
}

/* A kicker is a short category label. Holding it to one line stops a long
   one from making its whole row 20px taller than the rest of the grid. */
.bjo .trend-content h5 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.bjo .trend-content h5 i { margin-right: 6px; }

/* The coupon chip is a single token. Letting it wrap made one card in a
   row 20px taller and forced its three neighbours to stretch to match. */
.bjo .trend-meta { max-width: 100%; }
.bjo .trend-meta .entry-author { min-width: 0; }
.bjo .trend-meta .fw-bold {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The validity line is one short fact. At laptop width the card narrows to
   ~216px and a longer date ("30 September 2026") wrapped to a second line,
   making that whole row 20px taller than its neighbours. Hold it to one
   line; the date itself is what gets ellipsised if space runs out. */
.bjo-valid { flex-wrap: nowrap; min-width: 0; white-space: nowrap; }
.bjo-valid i { flex: none; }
.bjo-valid strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ---------------------------------------------------------------
   Buttons as wide as their words, on phones (2026-09-26)
   The owner's rule for every button on a phone: "View flights" was a
   292px, 50px-tall slab for a 120px label. It now sits under the
   validity line at its own width, a size down.
   --------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .bjo-cta {
    align-self: flex-start; width: auto; min-height: 38px;
    padding: 8px 18px; font-size: 14px;
  }
}