/* =====================================================================
   TRIWAYS — JOURNEYS HUB (/journeys/ only). Loaded after triways-visual.css.
   Prefix: tv-jh-   Built from the approved journeys template (2026-09-30), with every word,
   link, id and heading taken from the live page.
   Rhythm: photographic hero below the solid header → ivory "Find Your Journey" (six photographs,
           two columns) → charcoal "How Every Journey Is Built" (words left, four principles right)
           → ivory FAQ (shared .tv-faq) → charcoal close (shared .hub-close) → footer.
   Egypt comes from the photography alone — no ornament, no texture, no radius.
   ===================================================================== */

/* Journeys hub */
.tv-jh {
  --jh-cols: repeat(12, minmax(0, 1fr));
  --jh-gutter: clamp(1rem, 2vw, 2rem);
  --jh-header: 4.35rem;                             /* the fixed header bar */
  --jh-ivory-text: rgba(251, 250, 247, 0.9);        /* body copy on charcoal / photograph */
  --jh-stone-dark: rgba(244, 240, 232, 0.7);        /* secondary copy on charcoal */
}
.tv-jh .hb-section--ivory .hb-eyebrow { color: var(--tv-brass-text); }
.tv-jh .hb-heading--h2 { font-size: clamp(2.4rem, 1.7rem + 1.9vw, 3.375rem); line-height: 1.06; }

/* ---------------------------------------------------------------------
   1. HERO — a photographic band below the solid header:
      eyebrow + H1 on the left, the answer and jump links lower right
   ------------------------------------------------------------------- */
.tv-jh-hero { background: var(--hb-ink); padding-top: var(--jh-header); color: var(--hb-champagne); border-bottom: 1px solid var(--hb-line-on-dark); }
.tv-jh-hero__band {
  position: relative; isolation: isolate;
  min-height: clamp(520px, 40vw, 610px);
  display: flex; align-items: stretch;
}
.tv-jh-hero__media { position: absolute; inset: 0; z-index: 0; display: block; margin: 0; }
.tv-jh-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
/* Charcoal strongest under the H1, moderate through the centre, almost none on the right;
   a foot vignette carries the paragraph on the right */
.tv-jh-hero__band::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--tv-scrim), 0.82) 0%, rgba(var(--tv-scrim), 0.62) 26%, rgba(var(--tv-scrim), 0.28) 48%, rgba(var(--tv-scrim), 0.08) 66%, rgba(var(--tv-scrim), 0.12) 100%),
    linear-gradient(0deg, rgba(var(--tv-scrim), 0.72) 0%, rgba(var(--tv-scrim), 0.3) 34%, rgba(var(--tv-scrim), 0) 56%);
}

.tv-jh-hero__inner {
  position: relative; z-index: 2; width: 100%;
  display: grid; grid-template-columns: var(--jh-cols); column-gap: var(--jh-gutter);
  padding-top: clamp(2.25rem, 3.5vw, 3.25rem); padding-bottom: clamp(2.75rem, 4.5vw, 4rem);
}
.tv-jh-hero__lead { grid-column: 1 / span 6; display: flex; flex-direction: column; }
.tv-jh-hero .hub-crumbs { margin-bottom: auto; padding-bottom: 2.5rem; }
.tv-jh-hero .hb-eyebrow { color: var(--hb-champagne); }
.tv-jh-hero .hb-kicker { margin-bottom: 1.35rem; }
.tv-jh-hero .hb-kicker::after { background: var(--hb-champagne); opacity: 0.6; }
.tv-jh-hero__title {
  font-family: var(--hb-serif); font-weight: 500; color: #FBFAF7;
  font-size: clamp(3rem, 1.4rem + 4vw, 4.75rem); line-height: 1.02; letter-spacing: 0.002em;
  max-width: 6.6em;   /* "Luxury Egypt / Journeys" */
  margin: 0 0 clamp(0.5rem, 2vw, 1.75rem);
}
.tv-jh-hero__answer { grid-column: 8 / -1; justify-self: end; max-width: 30rem; align-self: end; }
.tv-jh-hero__answer p { font-size: 0.9375rem; line-height: 1.7; color: var(--jh-ivory-text); max-width: 25rem; }

/* Jump links: tracked caps on a hairline, thin rules between them */
.tv-jh-jumps {
  display: flex; flex-wrap: wrap; row-gap: 0.55rem;
  margin: 1.4rem 0 0 -1.1rem; padding-top: 1rem; position: relative;
  clip-path: inset(-6px -6px -6px 1.1rem);
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.5;
}
.tv-jh-jumps::before { content: ""; position: absolute; top: 0; left: 1.1rem; right: 0; height: 1px; background: rgba(200, 183, 156, 0.45); }
.tv-jh-jumps li { position: relative; margin-left: 1.1rem; padding-right: 0.05rem; }
.tv-jh-jumps li::before { content: ""; position: absolute; left: -0.55rem; top: 0.25em; bottom: 0.25em; width: 1px; background: rgba(200, 183, 156, 0.5); }
.tv-jh-jumps a {
  color: var(--hb-champagne); padding-bottom: 0.2rem;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.4s var(--hb-ease), color 0.3s var(--hb-ease);
}
.tv-jh-jumps a:hover, .tv-jh-jumps a:focus-visible { color: #FBFAF7; background-size: 100% 1px; }
.tv-jh-hero a:focus-visible { outline: 2px solid var(--hb-champagne); outline-offset: 4px; }

/* ---------------------------------------------------------------------
   2. FIND YOUR JOURNEY — six photographs in two columns on ivory
   ------------------------------------------------------------------- */
.tv-jh-find { padding-top: clamp(4rem, 3rem + 3.5vw, 6.5rem); }
.tv-jh-find__head { margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.tv-jh-find__head .hb-heading { margin-bottom: 0.9rem; }
.tv-jh-find__sub { font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); line-height: 1.65; color: var(--hb-text-dim); max-width: 33rem; }

.tv-jh-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.75rem, 3.4vw, 3rem); row-gap: clamp(3rem, 4.5vw, 4rem);
}
.tv-jh-grid__item { scroll-margin-top: calc(var(--jh-header) + 1.5rem); }

.tv-jh-card { position: relative; height: 100%; display: flex; flex-direction: column; }
.tv-jh-card__media { display: block; overflow: hidden; aspect-ratio: 5 / 2; background: #E6DFD2; margin-bottom: 1.3rem; }
.tv-jh-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s var(--hb-ease); }
.tv-jh-card__for {
  margin: 0 0 0.6rem;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.4;
  color: var(--tv-brass-text);
}
.tv-jh-card__name {
  font-family: var(--hb-serif); font-weight: 500; color: var(--hb-ink);
  font-size: clamp(1.75rem, 1.45rem + 0.7vw, 2rem); line-height: 1.12; margin: 0 0 0.65rem;
}
.tv-jh-card__name a {
  color: inherit;
  background: linear-gradient(var(--hb-gold), var(--hb-gold)) 0 100% / 0 1px no-repeat;
  transition: background-size 0.4s var(--hb-ease);
}
.tv-jh-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* the whole card is the link */
.tv-jh-card__name a:focus-visible { outline: none; background-size: 100% 1px; }
.tv-jh-card__name a:focus-visible::after { outline: 2px solid var(--hb-gold); outline-offset: 6px; }
.tv-jh-card__desc { font-size: 0.9375rem; line-height: 1.6; color: var(--hb-text-dim); max-width: 27rem; }
.tv-jh-card__go {
  display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.05rem;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tv-brass-text);
}
.tv-jh-card__go .hb-arrow { transition: transform 0.4s var(--hb-ease); }
/* The one secondary link (Nile Cruise) sits above the card's cover link */
.tv-jh-card__more {
  position: relative; z-index: 2; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.85rem;
  font-size: 0.8125rem; line-height: 1.5; color: var(--hb-text-dim);
  border-bottom: 1px solid rgba(125, 99, 57, 0.35);
}
.tv-jh-card__more:hover, .tv-jh-card__more:focus-visible { color: var(--hb-ink); border-color: var(--hb-ink); }
.tv-jh-card__more:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: 3px; }

@media (hover: hover) {
  .tv-jh-card:hover .tv-jh-card__media img { transform: scale(1.025); }
  .tv-jh-card:hover .tv-jh-card__name a { background-size: 100% 1px; }
  .tv-jh-card:hover .tv-jh-card__go .hb-arrow { transform: translateX(4px); }
}

/* ---------------------------------------------------------------------
   3. HOW EVERY JOURNEY IS BUILT — charcoal, a far-back photograph;
      words left, four principles in a 2 × 2 ledger right
   ------------------------------------------------------------------- */
.tv-jh-built { position: relative; isolation: isolate; overflow: hidden; padding: clamp(4.5rem, 3rem + 4.5vw, 7.5rem) 0; }
.tv-jh-built__media { position: absolute; inset: 0; z-index: -2; display: block; margin: 0; }
.tv-jh-built__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0% 60%; opacity: 0.6; }
.tv-jh-built::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(21, 21, 21, 0.4) 0%, rgba(21, 21, 21, 0.82) 40%, rgba(21, 21, 21, 0.93) 100%),
    linear-gradient(180deg, rgba(21, 21, 21, 0.9) 0%, rgba(21, 21, 21, 0.3) 62%, rgba(21, 21, 21, 0.7) 100%);
}
.tv-jh-built__grid { display: grid; grid-template-columns: var(--jh-cols); column-gap: var(--jh-gutter); row-gap: 3rem; align-items: start; }
.tv-jh-built__head { grid-column: 1 / span 5; }
.tv-jh-built__head .hb-heading { color: #FBFAF7; max-width: 8.4em; margin-bottom: 1.4rem; }   /* How Every Journey / Is Built */
.tv-jh-built__copy { font-size: 0.9375rem; line-height: 1.75; color: var(--jh-stone-dark); max-width: 25.5rem; }
.tv-jh-built__cta { margin-top: 2.25rem; }
.tv-jh-built .tv-btn:hover, .tv-jh-built .tv-btn:focus-visible { background: transparent; border-color: var(--hb-champagne); color: var(--hb-champagne); }
.tv-jh-built a:focus-visible { outline: 2px solid var(--hb-champagne); outline-offset: 4px; }

.tv-jh-built__list {
  grid-column: 6 / -1; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--hb-line-on-dark);
}
.tv-jh-built__item {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 1.1rem; align-items: start;
  padding: 1.9rem 1.75rem 1.9rem 0; border-bottom: 1px solid var(--hb-line-on-dark);
}
.tv-jh-built__item:nth-child(even) { padding-left: 1.75rem; padding-right: 0; border-left: 1px solid var(--hb-line-on-dark); }
.tv-jh-built__icon {
  width: 2rem; height: 2rem; margin-top: 0.1rem;
  fill: none; stroke: var(--hb-champagne); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round;
}
.tv-jh-built__term {
  font-family: var(--hb-serif); font-weight: 500; color: #FBFAF7;
  font-size: 1.375rem; line-height: 1.2; margin: 0 0 0.5rem;
}
.tv-jh-built__term a { color: inherit; border-bottom: 1px solid rgba(200, 183, 156, 0.4); transition: color 0.3s var(--hb-ease), border-color 0.3s var(--hb-ease); }
.tv-jh-built__term a:hover, .tv-jh-built__term a:focus-visible { color: var(--hb-champagne); border-color: var(--hb-champagne); }
.tv-jh-built__item p { font-size: 0.875rem; line-height: 1.65; color: var(--jh-stone-dark); }

/* ---------------------------------------------------------------------
   4. FAQ — ivory; layout from the shared .tv-faq (triways-visual.css)
   5. CLOSE — the live .hub-close on charcoal, a brass hairline to the footer
   ------------------------------------------------------------------- */
.tv-jh-faq .hb-faq__item > summary::after { color: var(--hb-gold); }
.tv-jh-close { border-bottom: 1px solid rgba(166, 138, 91, 0.3); }
.tv-jh-close .hb-heading { font-size: clamp(2.2rem, 1.5rem + 1.8vw, 2.875rem); line-height: 1.12; max-width: 13em; text-wrap: balance; }
.tv-jh-close .hb-copy { color: var(--jh-stone-dark); }
.tv-jh-close .tv-btn:hover, .tv-jh-close .tv-btn:focus-visible { background: transparent; border-color: var(--hb-champagne); color: var(--hb-champagne); }

/* ---------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .tv-jh-hero__lead { grid-column: 1 / span 7; }
  .tv-jh-hero__answer { grid-column: 8 / -1; }
  /* Built: the words above, the four principles below in two columns */
  .tv-jh-built__head, .tv-jh-built__list { grid-column: 1 / -1; }
  .tv-jh-built__head .hb-heading { max-width: none; }
  .tv-jh-built__copy { max-width: 34rem; }
  .tv-jh-built__item { padding-right: 1.25rem; }
  .tv-jh-built__item:nth-child(even) { padding-left: 1.25rem; }
}

@media (max-width: 991.98px) {
  /* Hero: the photograph on top at 4:3, the words on solid charcoal below */
  .tv-jh-hero__band { display: block; min-height: 0; }
  .tv-jh-hero__band::before { display: none; }
  .tv-jh-hero__media { position: relative; aspect-ratio: 4 / 3; }
  .tv-jh-hero__media img { object-position: 46% 50%; }   /* the guide's gesture and the three travellers */
  .tv-jh-hero__inner { padding-top: 2rem; padding-bottom: 3.25rem; row-gap: 1.5rem; }
  .tv-jh-hero .hub-crumbs { margin-bottom: 1.75rem; padding-bottom: 0; }
  .tv-jh-hero__lead, .tv-jh-hero__answer { grid-column: 1 / -1; }
  .tv-jh-hero__title { max-width: none; margin-bottom: 0; }
  .tv-jh-hero__answer p { max-width: 34rem; }

  /* Built: the words, then the principles */
  .tv-jh-built__head, .tv-jh-built__list { grid-column: 1 / -1; }
  .tv-jh-built__head .hb-heading { max-width: none; }
  .tv-jh-built__copy { max-width: 34rem; }
}

@media (max-width: 767.98px) {
  .tv-jh-hero__media { aspect-ratio: 5 / 4; }
  .tv-jh-hero__title { font-size: clamp(2.6rem, 1.6rem + 5vw, 3.2rem); }

  .tv-jh-grid { grid-template-columns: 1fr; row-gap: 3rem; }
  .tv-jh-card__media { aspect-ratio: 16 / 9; margin-bottom: 1.15rem; }
  .tv-jh-card__name a:focus-visible::after { outline-offset: 2px; }

  .tv-jh-built__list { grid-template-columns: 1fr; }
  .tv-jh-built__item, .tv-jh-built__item:nth-child(even) { padding: 1.6rem 0; border-left: 0; }
  .tv-jh-built .tv-btn { width: 100%; justify-content: space-between; }

  .tv-jh-close .tv-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .tv-jh-card__media img, .tv-jh-card__name a, .tv-jh-card__go .hb-arrow, .tv-jh-jumps a,
  .tv-jh-built__term a { transition: none !important; transform: none !important; }
}