/* ============================================================
   REFLECTING JOURNEYS — Brand asset integration (final pass)
   New image components. Design language unchanged; these only
   place the supplied brand artwork into the existing sections.
   ============================================================ */

/* ---- Poster: a full brand poster shown in its entirety (never cropped) ---- */
.poster-moment { display: grid; place-items: center; padding-block: clamp(3rem, 6vw, 5.5rem); }
/* Centre standalone posters (they were left-aligned in the container, leaving a
   big empty gap on the right) and give them more presence on desktop. */
.poster-moment .poster-figure { margin: 0 auto; width: 100%; max-width: 560px; }
.poster-moment--wide .poster-figure { max-width: 620px; }
/* Calmer, controlled size on phones so standalone posters don't dominate */
@media (max-width: 600px) { .poster-moment .poster-figure { max-width: 320px; } }
.poster-figure {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); background: var(--surface-2);
  aspect-ratio: 4 / 5;
}
.poster-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster-figure figcaption {
  margin-top: 0; position: absolute; left: 0; right: 0; bottom: 0;
}
/* Optional small kicker above a poster moment */
.poster-moment .poster-kicker {
  text-align: center; margin-bottom: 1.4rem; max-width: 40ch;
}

/* Split: poster beside a short intro (keeps breathing room, no duplicate copy) */
.poster-split {
  display: grid; grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.poster-split .poster-figure { max-width: 440px; }
.poster-split--reverse .poster-figure { order: 2; }
@media (max-width: 820px) {
  .poster-split { grid-template-columns: 1fr; }
  .poster-split .poster-figure { max-width: 360px; margin-inline: auto; }
  .poster-split--reverse .poster-figure { order: -1; }
}

/* ---- R/R/R triptych: three glyph/word posters ---- */
.rrr-triptych {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.8rem); margin-top: clamp(2rem, 4vw, 3rem);
}
.rrr-triptych .poster-figure { max-width: none; }
@media (max-width: 760px) {
  .rrr-triptych { grid-auto-flow: column; grid-template-columns: none;
    grid-auto-columns: 74%; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: 1rem; }
  .rrr-triptych .poster-figure { scroll-snap-align: center; }
}

/* ---- Butterfly series: small editorial horizontal carousel (reduced dominance) ---- */
.butterfly-story { padding-block: clamp(2.5rem, 4vw, 3.5rem); }
.butterfly-story .section-heading { margin-bottom: clamp(1.2rem, 2.5vw, 2rem); }
.butterfly-strip {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: 86vw;                 /* mobile: ~1 poster at a time */
  gap: clamp(1rem, 2vw, 1.6rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  padding: 0.5rem clamp(1.25rem, 5vw, 3rem) 0.75rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  scrollbar-width: none; cursor: grab;
}
.butterfly-strip.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.butterfly-strip::-webkit-scrollbar { display: none; }
@media (min-width: 700px)  { .butterfly-strip { grid-auto-columns: 46vw; } }   /* ~2 posters */
@media (min-width: 1100px) { .butterfly-strip { grid-auto-columns: 34rem; } }  /* ~2–2.5 posters, text readable */
.butterfly-strip .poster-figure {
  max-width: none; width: 100%; aspect-ratio: 4 / 5;
  scroll-snap-align: center; border-radius: var(--radius);
  background: transparent; box-shadow: none;
}
/* Show the full poster — never crop the embedded text */
.butterfly-strip .poster-figure img { object-fit: contain; }

/* Controls row (arrows + hint) */
.butterfly-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 1.25rem; margin-top: 1.4rem;
}
.butterfly-hint {
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-on-dark-mute);
}
.butterfly-hint--mobile { display: none; }
@media (max-width: 699px) {
  .butterfly-arrow { display: none; }            /* swipe on mobile */
  .butterfly-hint--desktop { display: none; }
  .butterfly-hint--mobile { display: inline; }
}

/* ---- Full-bleed brand band (e.g. logo lockup poster) ---- */
.brand-band {
  position: relative; display: grid; place-items: center;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}
.brand-band .poster-figure { max-width: 480px; }

/* ---- Emblem line motif reused as an image (contact) ---- */
.contact-emblem { max-width: 300px; opacity: 0.95; }

/* ============================================================
   LOGO — full lockup (footer / brand), recreated from the
   official reference: emblem · REFLECTING · JOURNEYS · tagline
   ============================================================ */
.logo-lockup { display: inline-grid; justify-items: center; gap: 0.55rem; color: currentColor; text-align: center; }
.logo-lockup__mark {
  width: 74px; height: 42px; background: currentColor;
  -webkit-mask: url("images/rj-emblem.png") center / contain no-repeat;
          mask: url("images/rj-emblem.png") center / contain no-repeat;
}
.logo-lockup__reflecting {
  font-family: var(--font-body); font-weight: 300;
  font-size: 0.92rem; letter-spacing: 0.5em; text-indent: 0.5em;
  text-transform: uppercase; line-height: 1;
}
.logo-lockup__journeys {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.8rem, 4vw, 2.5rem); letter-spacing: 0.14em; text-indent: 0.14em;
  text-transform: uppercase; line-height: 0.9;
}
.logo-lockup__tag {
  font-family: var(--font-body); font-weight: 300;
  font-size: 0.62rem; letter-spacing: 0.32em; text-indent: 0.32em;
  text-transform: uppercase; color: var(--text-on-dark-mute); margin-top: 0.2rem;
}