/* ==========================================================================
   Beyond Borders — layered on top of style.css
   Reuses the global tokens, nav, brand, .btn, .reveal and footer.
   ========================================================================== */

/* .slab, the serif body face and the text-led CTA are redeclared here rather
   than pulled out of the other page stylesheets, so those pages stay untouched. */
:root {
  --f-slab:       'Alfa Slab One', Georgia, serif;
  --f-serif-body: 'Lora', Georgia, 'Times New Roman', serif;
}

.slab {
  display: block;
  font-family: var(--f-slab);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .015em;
  line-height: 1;
  filter: url(#distress-heavy);
}
.slab--accent { color: var(--red); }


/* ==========================================================================
   Section hero
   ========================================================================== */
.bhero {
  position: relative;
  /* clears the fixed header when arrived at via #beyond-borders */
  scroll-margin-top: var(--nav-h);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--black);
  overflow: hidden;
  padding: calc(var(--nav-h) + 46px) 0 140px;
}

.bhero__photo {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 56%;
}
.bhero__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* tall stage frame — hold the window low so she stays in view */
  object-position: 50% 72%;
}

.bhero__grade {
  position: absolute;
  inset: 0;
  /* a left-edge blend only: solid at the edge, gone by 40% across the photo,
     so the subject and the right of the frame carry no scrim at all.
     The second wash is the nav band — the header is transparent until it sticks. */
  background:
    linear-gradient(90deg,
      var(--black)          0%,
      var(--black)          8%,
      rgba(10,10,10,.78)   16%,
      rgba(10,10,10,.4)    24%,
      rgba(10,10,10,.12)   32%,
      rgba(10,10,10,0)     40%),
    linear-gradient(180deg, rgba(10,10,10,.24) 0%, rgba(10,10,10,0) 12%);
}

.bhero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1420px;
  margin-inline: auto;
  padding-inline: 44px;
}

.bhero__title {
  margin: 20px 0 0;
  font-size: clamp(3.4rem, 7.8vw, 6.8rem);
  line-height: .84;
}

.bhero__lede {
  max-width: 34ch;
  margin: 30px 0 36px;
  font-family: var(--f-serif-body);
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--text);
}

.bhero__tear {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  z-index: 3;
  width: 100%;
  height: 104px;
  fill: var(--black);
}


/* ==========================================================================
   Destinations — vertical journey on a thin red spine
   ========================================================================== */
.journeys { padding: 88px 0 96px; background: var(--black); }

/* a wider measure than the default wrap — the photographs are the content here */
.journeys .wrap { max-width: 1320px; }

.dests {
  position: relative;
  margin: 0; padding: 0;
  list-style: none;
}

/* the spine */
.dests::before {
  content: "";
  position: absolute;
  top: 10px; bottom: 10px; left: 50%;
  width: 1px;
  margin-left: -.5px;
  background: linear-gradient(180deg,
    rgba(230,48,48,0) 0%,
    rgba(230,48,48,.4) 5%,
    rgba(230,48,48,.4) 95%,
    rgba(230,48,48,0) 100%);
}

.dest {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
  grid-template-areas: "plates spine head" "plates spine body";
  align-content: center;
  align-items: center;
  margin-bottom: 78px;
}
.dest:last-child { margin-bottom: 0; }

/* node on the spine */
.dest::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 5px rgba(230, 48, 48, .15);
  transition: box-shadow .45s var(--ease);
}
.dest:hover::before { box-shadow: 0 0 0 9px rgba(230, 48, 48, .2); }

.dest__plates { grid-area: plates; }
.dest__head   { grid-area: head; }
.dest__body   { grid-area: body; }

/* flipped rows — photographs right, type left */
.dest--flip { grid-template-areas: "head spine plates" "body spine plates"; }
.dest--flip .dest__head,
.dest--flip .dest__body { text-align: right; }
.dest--flip .dest__text { margin-left: auto; }
.dest--flip .viewbtn { flex-direction: row-reverse; }

/* --- head --- */
.dest__index {
  display: block;
  margin-bottom: 10px;
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .3em;
  color: var(--red);
}

.dest__city {
  margin: 0 0 6px;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: .98;
}

.dest__country {
  margin: 0 0 10px;
  font-family: var(--f-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
}

.dest__date {
  margin: 0;
  font-family: var(--f-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red);
}

/* --- body --- */
.dest__body { padding-top: 20px; }

.dest__event {
  margin: 0 0 8px;
  font-family: var(--f-serif-body);
  font-style: italic;
  font-size: 15px;
  color: var(--text);
}

.dest__text {
  max-width: 38ch;
  margin: 0 0 18px;
  font-family: var(--f-serif-body);
  font-size: 14.5px;
  line-height: 1.74;
  color: var(--muted);
}

/* --- the VIEW PHOTOS control --- */
.viewbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 0 0 4px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  font-family: var(--f-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  transition: color .32s var(--ease), border-color .32s var(--ease);
}
.viewbtn:hover,
.viewbtn:focus-visible {
  color: var(--red);
  border-bottom-color: rgba(230, 48, 48, .7);
}
/* invisible 44px hit area so the control is comfortably tappable,
   without changing how the text or its hairline underline look */
.viewbtn::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.viewbtn__arrow {
  color: var(--red);
  transition: transform .32s var(--ease);
}
.viewbtn:hover .viewbtn__arrow { transform: translateX(5px); }
.dest--flip .viewbtn:hover .viewbtn__arrow { transform: translateX(-5px); }

/* --- plates --- */
.plate {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--panel);
}
.plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.004);
  transition: transform 1.25s var(--ease);
}
.plate:hover img { transform: scale(1.045); }

/* every ratio matches its source exactly, so nothing is cropped */
.plate--169    { aspect-ratio: 16 / 9; }
.plate--43     { aspect-ratio: 4 / 3; }
.plate--tall   { aspect-ratio: 9 / 16; max-width: 380px; }
.plate--pano   { aspect-ratio: 500 / 231; }
.plate--madrid { aspect-ratio: 690 / 904; max-width: 420px; }


/* ==========================================================================
   Lightbox
   ========================================================================== */
.lbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 64px 24px;
  background: rgba(6, 6, 6, .95);
  opacity: 0;
  transition: opacity .32s var(--ease);
}
.lbox[hidden] { display: none; }
.lbox.is-open { opacity: 1; }

.lbox__stage {
  grid-column: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.lbox__stage img {
  max-width: 100%;
  max-height: calc(100vh - 180px);
  width: auto; height: auto;
  object-fit: contain;   /* never crop, never distort in the lightbox */
  display: block;
}

.lbox__cap {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.lbox__place { color: var(--text); }
.lbox__count { color: var(--red); }

.lbox__close {
  position: absolute;
  top: 20px; right: 24px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none;
  border: 1px solid rgba(255, 255, 255, .2);
  color: var(--white);
  cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.lbox__close:hover,
.lbox__close:focus-visible { border-color: var(--red); color: var(--red); }
.lbox__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

.lbox__nav {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: none;
  border: 1px solid rgba(255, 255, 255, .2);
  color: var(--white);
  cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.lbox__nav[hidden] { visibility: hidden; display: grid; }
.lbox__nav:hover,
.lbox__nav:focus-visible { border-color: var(--red); color: var(--red); }
.lbox__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lbox__nav--prev { grid-column: 1; }
.lbox__nav--next { grid-column: 3; }


/* ==========================================================================
   Closing CTA — text-led, matching the Contact page treatment
   ========================================================================== */
.bcta { padding: 0 0 104px; background: var(--black); }

.bcta__inner {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  padding-top: 58px;
  border-top: 1px solid rgba(230, 48, 48, .28);
}

.bcta__title {
  margin: 0 0 16px;
  font-size: clamp(2rem, 4.1vw, 3.1rem);
  line-height: .96;
}
.bcta__title .slab { margin-top: .04em; }

.bcta__lede {
  margin: 0 0 34px;
  font-family: var(--f-serif-body);
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--muted);
}

.bookcta {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  gap: 22px;
  padding: 0 2px 16px;
  color: var(--white);
  text-decoration: none;
  text-align: left;
}
.bookcta__lines { display: block; }
.bookcta__line {
  display: block;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.02;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.bookcta__line--accent { color: var(--red); transition: color .4s var(--ease); }

.bookcta__arrow {
  display: block;
  width: 58px;
  margin-bottom: .34em;
  color: var(--red);
  transition: transform .45s var(--ease);
}
.bookcta__arrow svg {
  display: block; width: 100%; height: auto;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

.bookcta__rule {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: rgba(255, 255, 255, .22);
}
.bookcta__rule::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--ease);
}
.bookcta:hover .bookcta__rule::after,
.bookcta:focus-visible .bookcta__rule::after { transform: scaleX(1); }
.bookcta:hover .bookcta__arrow,
.bookcta:focus-visible .bookcta__arrow { transform: translateX(9px); }
.bookcta:hover .bookcta__line--accent { color: var(--white); }


/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .bhero__content { padding-inline: 28px; }
  .dest { grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr); margin-bottom: 64px; }
}

@media (max-width: 900px) {
  .bhero {
    align-items: flex-end;
    padding: calc(var(--nav-h) + 200px) 0 126px;
  }
  .bhero__photo { width: 100%; }
  .bhero__photo img { object-position: 45% 70%; }
  .bhero__grade {
    background:
      linear-gradient(0deg, var(--black) 20%, rgba(10,10,10,.66) 44%, rgba(10,10,10,.06) 70%),
      linear-gradient(180deg, rgba(10,10,10,.34) 0%, rgba(10,10,10,0) 20%);
  }
  .bhero__title { font-size: clamp(3rem, 12.5vw, 4.9rem); }
  .bhero__tear { height: 64px; }

  .journeys { padding-top: 68px; }

  /* spine moves to the left rail; every row reads the same way */
  .dests::before { left: 5px; margin-left: 0; }

  .dest,
  .dest--flip {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "plates" "body";
    gap: 18px;
    padding-left: 34px;
    margin-bottom: 56px;
  }
  .dest::before { left: 5px; top: 8px; margin: 0 0 0 -5.5px; }

  .dest--flip .dest__head,
  .dest--flip .dest__body { text-align: left; }
  .dest--flip .dest__text { margin-left: 0; }
  .dest--flip .viewbtn { flex-direction: row; }
  .dest--flip .viewbtn:hover .viewbtn__arrow { transform: translateX(5px); }

  .dest__body { padding-top: 0; }
  .plate--tall, .plate--madrid { max-width: 100%; }

  .lbox { padding: 56px 16px; gap: 10px; }
  .lbox__stage img { max-height: calc(100vh - 170px); }
}

@media (max-width: 600px) {
  .bhero__content { padding-inline: 22px; }
  .bhero { padding-top: calc(var(--nav-h) + 158px); }
  .bhero__lede { max-width: 30ch; font-size: 15.5px; }

  .dest { padding-left: 26px; margin-bottom: 48px; }
  .dests::before { left: 4px; }
  .dest::before { left: 4px; }

  .dest__text { max-width: 100%; }

  /* the panorama is very wide — give it a taller window on phones */
  .plate--pano { aspect-ratio: 4 / 3; }
  .plate--pano img { object-position: 64% 40%; }

  .lbox { grid-template-columns: auto minmax(0,1fr) auto; padding: 52px 10px; }
  .lbox__nav { width: 40px; height: 40px; }
  .bookcta { gap: 16px; }
  .bookcta__line { font-size: 1.75rem; }
  .bookcta__arrow { width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .plate img, .viewbtn__arrow, .bookcta__arrow,
  .bookcta__rule::after, .lbox { transition: none; }
}