/* =============================================================================
   TOURBIRTH 12 — PAGE STYLES
   css/pages/tourbirth-12.css

   Rebuilt to mirror the live tourbirth.com/tourbirth-12 format:
   cinematic video hero · chapter rail · premise · six split-editorial sessions
   · monogram divider · Why-Lagos parallax duotone · interactive Legacy Box.
   Loaded AFTER css/styles.css, so rules here intentionally govern the page.
   ============================================================================= */


/* ===========================================================================
   SHARED — inline gold hairline used beside eyebrows / labels
=========================================================================== */

.tb12-inline-rule {
  display:          inline-block;
  width:            32px;
  height:           1px;
  background-color: color-mix(in srgb, var(--gold) 55%, transparent);
  vertical-align:   middle;
  flex:             0 0 auto;
}


/* ===========================================================================
   HERO — full-bleed background film
=========================================================================== */

.hero--tb12 {
  align-items: center;
  text-align:  center;
}

.hero__video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    0;
  /* Slow Ken-Burns settle, matched to the site's hero-image treatment */
  transform:  scale(1.06);
  transition: var(--transition-hero-img, transform 1800ms cubic-bezier(0.23, 1, 0.32, 1));
}

.hero--tb12.is-visible .hero__video { transform: scale(1); }

.hero--tb12 .hero__overlay {
  background: linear-gradient(
                180deg,
                rgba(11, 29, 42, 0.52) 0%,
                rgba(11, 29, 42, 0.44) 45%,
                rgba(11, 29, 42, 0.66) 100%
              );
}

.hero__monogram {
  position:       absolute;
  top:            4vh;
  right:          -4vh;
  z-index:        1;
  font-family:    var(--font-logo);   /* TB monogram — League Spartan */
  font-weight:    700;
  font-size:      44vh;
  line-height:    1;
  color:          rgba(245, 243, 238, 0.06);
  pointer-events: none;
  user-select:    none;
}

.hero--tb12 .hero__content {
  max-width:     880px;
  margin-inline: auto;
  text-align:    center;
}

.hero--tb12 .hero__content h1 {
  margin-inline: auto;
  max-width:     18ch;
}

.hero--tb12 .hero__content p {
  margin-inline: auto;
}

.hero__eyebrow {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             14px;
  color:           var(--gold) !important;
  opacity:         1 !important;
  font-family:     var(--font-body);
  font-size:       var(--fs-label);
  letter-spacing:  var(--ls-eyebrow);
  text-transform:  uppercase;
}

.hero__eyebrow-rule {
  display:          inline-block;
  width:            32px;
  height:           1px;
  background-color: color-mix(in srgb, var(--gold) 55%, transparent);
}


/* ===========================================================================
   CHAPTER RAIL — fixed left-edge running index (xl+ only)
=========================================================================== */

.tb12-rail {
  position:        fixed;
  left:            clamp(1rem, 2vw, 1.75rem);
  top:             50%;
  transform:       translateY(-50%);
  z-index:         var(--z-above, 10);
  display:         none;
  flex-direction:  column;
  gap:             1rem;
}

@media (min-width: 1280px) {
  .tb12-rail { display: flex; }
}

.tb12-rail__item {
  display:         flex;
  align-items:     center;
  gap:             0.625rem;
  text-decoration: none;
  font-family:     var(--font-display);
  font-size:       0.7rem;
  letter-spacing:  0.22em;
  text-transform:  uppercase;
  color:           color-mix(in srgb, var(--obsidian) 55%, transparent);
  opacity:         0.6;
  transition:      opacity 300ms var(--ease-luxury), color 300ms var(--ease-luxury);
}

.tb12-rail__item:hover { opacity: 1; }

.tb12-rail__dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  border:        1px solid var(--sage);
  transition:    transform 300ms var(--ease-luxury),
                 background-color 300ms var(--ease-luxury),
                 border-color 300ms var(--ease-luxury);
}

.tb12-rail__label {
  opacity:    0;
  transform:  translateX(-4px);
  transition: opacity 300ms var(--ease-luxury), transform 300ms var(--ease-luxury);
}

.tb12-rail__item:hover .tb12-rail__label,
.tb12-rail__item.is-active .tb12-rail__label {
  opacity:   1;
  transform: none;
}

.tb12-rail__item.is-active {
  opacity: 1;
  color:   var(--obsidian);
}

.tb12-rail__item.is-active .tb12-rail__dot {
  border-color: var(--gold);
  background:   var(--gold);
  transform:    scale(1.2);
}

.tb12-rail__item:focus-visible {
  outline:        2px solid var(--gold);
  outline-offset: 4px;
}


/* ===========================================================================
   SECTION 01 — PREMISE
=========================================================================== */

.tb12-premise__grid {
  display: grid;
  gap:     var(--space-md) var(--space-2xl);
}

@media (min-width: 1024px) {
  .tb12-premise__grid {
    grid-template-columns: 0.4fr 0.6fr;
    align-items:           start;
  }
}

.tb12-premise__label {
  display:     flex;
  align-items: center;
  gap:         12px;
  color:       var(--gold-deep);
  margin:      0;
}

@media (min-width: 1024px) {
  .tb12-premise__label { padding-top: 0.4rem; }
}

.tb12-premise__lead {
  font-family: var(--font-display);
  font-size:   clamp(1.9rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.28;
  color:       var(--charcoal);
  margin:      0;
}

.tb12-premise__copy {
  font-size:   clamp(1rem, 1.4vw, 1.15rem);
  line-height: var(--lh-body);
  color:       color-mix(in srgb, var(--charcoal) 80%, transparent);
  max-width:   40rem;
}


/* ===========================================================================
   SECTION 02 — SESSIONS (six, split-editorial carousel)
=========================================================================== */

.tb12-sessions__intro {
  text-align:    center;
  max-width:     620px;
  margin:        0 auto clamp(2.5rem, 5vw, 4rem);
}

.tb12-sessions__eyebrow {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  color:           var(--gold-deep);
  font-family:     var(--font-body);
  font-size:       var(--fs-label);
  letter-spacing:  var(--ls-eyebrow);
  text-transform:  uppercase;
}

.tb12-carousel {
  max-width: 1120px;
  margin:    0 auto;
}

/* ── Stage: clips slides, draws the framed card ──────────────────────────── */
.tb12-carousel__stage {
  position:      relative;
  height:        760px;
  overflow:      hidden;
  border:        1px solid rgba(122, 143, 133, 0.28);
  border-radius: 22px;
  background:    var(--white);
}

@media (min-width: 640px)  { .tb12-carousel__stage { height: 600px; } }
@media (min-width: 1024px) { .tb12-carousel__stage { height: 520px; } }

/* ── Slide: photo on one half, copy on a solid legible panel ─────────────── */
.tb12-slide {
  position:              absolute;
  inset:                 0;
  display:               grid;
  grid-template-columns: 1fr;
  opacity:               0;
  pointer-events:        none;
  transition:            opacity 700ms ease-in-out;
}

.tb12-slide.is-active {
  opacity:        1;
  pointer-events: auto;
}

@media (min-width: 1024px) {
  .tb12-slide { grid-template-columns: 1fr 1fr; }
}

.tb12-slide__media {
  position: relative;
  height:   200px;
  overflow: hidden;
}

@media (min-width: 640px)  { .tb12-slide__media { height: 240px; } }
@media (min-width: 1024px) {
  .tb12-slide__media {
    height: 100%;
    order:  2;            /* photo to the right on desktop */
  }
}

.tb12-slide__media img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* Soft seam toward the copy panel */
.tb12-slide__media::after {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     linear-gradient(to top, rgba(11, 29, 42, 0.28), transparent 60%);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .tb12-slide__media::after {
    background: linear-gradient(to right, rgba(11, 29, 42, 0.22), transparent 55%);
  }
}

/* Inset hairline frame — a quiet couture detail */
.tb12-slide__frame {
  position:       absolute;
  inset:          18px;
  border:         1px solid rgba(255, 255, 255, 0.16);
  pointer-events: none;
}

.tb12-slide__panel {
  position:        relative;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  overflow:        hidden;
  padding:         clamp(1.75rem, 4vw, 4rem);
}

/* Oversized faint numeral — editorial watermark */
.tb12-slide__numeral {
  position:       absolute;
  top:            0.25rem;
  right:          -0.4rem;
  font-family:    var(--font-display);
  font-size:      clamp(6rem, 11vw, 11rem);
  line-height:    1;
  color:          color-mix(in srgb, var(--gold) 14%, transparent);
  pointer-events: none;
  user-select:    none;
}

/* Session labels removed by request — visitors don't need "Session 0X". */
.tb12-slide__label {
  display: none;
}

.tb12-slide__title {
  position:    relative;
  font-family: var(--font-display);
  font-size:   clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 1.15;
  color:       var(--charcoal);
  margin:      1.2rem 0 0;
}

.tb12-slide__hr {
  display:    block;
  width:      48px;
  height:     1px;
  margin:     1.2rem 0;
  background: color-mix(in srgb, var(--gold) 45%, transparent);
}

.tb12-slide__desc {
  font-size:   clamp(0.95rem, 1.1vw, 1.02rem);
  line-height: var(--lh-body);
  color:       color-mix(in srgb, var(--charcoal) 72%, transparent);
  max-width:   30rem;
  margin:      0;
}

/* ── Dot pagination ──────────────────────────────────────────────────────── */
.tb12-carousel__dots {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  margin-top:      var(--space-lg);
}

.tb12-carousel__dot {
  appearance:         none;
  -webkit-appearance: none;
  width:              8px;
  height:             8px;
  padding:            0;
  border:             none;
  border-radius:      999px;
  background-color:   rgba(122, 143, 133, 0.45);
  cursor:             pointer;
  transition:         width 300ms var(--ease-cinematic),
                      background-color 300ms var(--ease-cinematic);
}

.tb12-carousel__dot:hover { background-color: rgba(198, 169, 107, 0.65); }

.tb12-carousel__dot.is-active {
  width:            24px;
  background-color: var(--gold);
}

.tb12-carousel__dot:focus-visible {
  outline:        2px solid var(--gold);
  outline-offset: 3px;
}

/* ── Controls: prev / counter / next ─────────────────────────────────────── */
.tb12-carousel__controls {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-lg);
  margin-top:      var(--space-md);
}

/* ── Carousel CTA — conversion moment inside the sessions carousel ───────── */
.tb12-carousel__cta {
  display:         flex;
  justify-content: center;
  margin-top:      var(--space-xl);
}

.tb12-carousel__arrow {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           48px;
  height:          48px;
  border-radius:   50%;
  border:          1px solid rgba(122, 143, 133, 0.45);
  background:      transparent;
  color:           var(--charcoal);
  cursor:          pointer;
  transition:      border-color var(--dur-medium) var(--ease-luxury),
                   color        var(--dur-medium) var(--ease-luxury);
}

.tb12-carousel__arrow:hover {
  border-color: var(--gold);
  color:        var(--gold-deep);
}

.tb12-carousel__arrow:focus-visible {
  outline:        2px solid var(--gold);
  outline-offset: 3px;
}

.tb12-carousel__counter {
  min-width:      5rem;
  margin:         0;
  text-align:     center;
  font-family:    var(--font-display);
  font-size:      0.85rem;
  letter-spacing: 0.3em;
  color:          color-mix(in srgb, var(--charcoal) 55%, transparent);
}

.tb12-carousel__current { color: var(--gold-deep); }


/* ===========================================================================
   MONOGRAM DIVIDER
=========================================================================== */

.tb12-divider {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-lg);
  padding:         clamp(3rem, 7vw, 6rem) var(--gutter);
}

.tb12-divider__line {
  height:     1px;
  width:      min(220px, 26vw);
  background: linear-gradient(
                to right,
                transparent,
                color-mix(in srgb, var(--gold) 50%, transparent),
                transparent
              );
}

.tb12-divider__mark {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           48px;
  height:          48px;
  border-radius:   50%;
  border:          1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  color:           var(--gold-deep);
  font-family:     var(--font-logo);   /* TB monogram — League Spartan */
  font-weight:     700;
  font-size:       1.05rem;
}


/* ===========================================================================
   SECTION 03 — WHY LAGOS (parallax duotone)
=========================================================================== */

.tb12-lagos {
  background-color: color-mix(in srgb, var(--gold) 5%, var(--offwhite));
}

.tb12-lagos__grid {
  display:     grid;
  gap:         clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .tb12-lagos__grid { grid-template-columns: 1fr 1fr; }
}

.tb12-parallax {
  position:      relative;
  overflow:      hidden;
  width:         100%;
  max-width:     30rem;
  margin:        0 auto;
  aspect-ratio:  4 / 5;
  border-radius: 20px;
}

@media (min-width: 1024px) {
  .tb12-parallax { max-width: none; }
}

.tb12-parallax__inner {
  position:    absolute;
  left:        0;
  right:       0;
  top:         -8%;
  height:      116%;
  will-change: transform;
}

/* Absolute-fill (like the session images) so height doesn't depend on the
   inline <picture> wrapper — a plain height:100% would collapse to 0. */
.tb12-parallax__inner picture {
  display: block;
  height:  100%;
}

.tb12-parallax__inner img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     grayscale(1) brightness(0.95) contrast(1.05);
}

.tb12-duotone {
  position:       absolute;
  inset:          0;
  mix-blend-mode: multiply;
  pointer-events: none;
  background:     linear-gradient(
                    155deg,
                    rgba(11, 29, 42, 0.92),
                    rgba(11, 29, 42, 0.42) 45%,
                    rgba(201, 162, 75, 0.50)
                  );
}


/* ===========================================================================
   SECTION 04 — LEGACY (closing + interactive Legacy Box)
=========================================================================== */

.tb12-legacy .lead {
  max-width:     40rem;
  margin-inline: auto;
}

.tb12-legacy .investment-note {
  max-width:     36rem;
  margin-inline: auto;
  font-size:     var(--fs-small);
  color:         color-mix(in srgb, var(--charcoal) 55%, transparent);
}

/* ── Interactive Legacy Box — lid lifts to reveal the contents ───────────── */
.legacy-box {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--space-lg);
  margin-top:      var(--space-2xl);
}

.legacy-box__btn {
  position:    relative;
  width:       440px;
  height:      310px;
  max-width:   100%;
  padding:     0;
  border:      none;
  background:  none;
  cursor:      pointer;
  perspective: 1300px;
}

.legacy-box__btn:focus-visible {
  outline:        2px solid var(--gold);
  outline-offset: 6px;
}

.legacy-box__base {
  position:      absolute;
  inset-inline:  0;
  bottom:        0;
  height:        220px;
  border:        1px solid rgba(198, 169, 107, 0.40);
  border-radius: 8px;
  background:    linear-gradient(to bottom, #13283a, var(--obsidian));
  box-shadow:    0 32px 60px -22px rgba(0, 0, 0, 0.55);
}

.legacy-box__contents {
  position:        absolute;
  inset-inline:    34px;
  bottom:          34px;
  z-index:         1;
  display:         flex;
  justify-content: center;
  gap:             20px;
  transform:       translateY(22px);
  opacity:         0;
  transition:      transform 700ms var(--ease-luxury), opacity 700ms var(--ease-luxury);
}

.legacy-box.is-open .legacy-box__contents {
  transform:       translateY(0);
  opacity:         1;
  transition-delay: 200ms;
}

.legacy-box__item {
  flex:           1;
  padding:        12px 9px;
  border:         1px solid rgba(198, 169, 107, 0.35);
  border-radius:  4px;
  background:     rgba(255, 255, 255, 0.06);
  text-align:     center;
  font-family:    var(--font-display);
  font-size:      12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--offwhite);
}

.legacy-box__lid {
  position:         absolute;
  inset-inline:     0;
  top:              50px;
  z-index:          2;
  height:           104px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  border:           1px solid rgba(198, 169, 107, 0.50);
  border-radius:    8px;
  background:       linear-gradient(to bottom, #16314a, #0e2233);
  transform-origin: top center;
  transition:       transform 700ms cubic-bezier(0.76, 0, 0.24, 1);
}

.legacy-box.is-open .legacy-box__lid {
  transform: rotateX(-115deg);
}

.legacy-box__monogram {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           52px;
  height:          52px;
  border-radius:   50%;
  background:      var(--gold);
  color:           var(--obsidian);
  font-family:     var(--font-logo);   /* TB monogram — League Spartan */
  font-size:       16px;
  font-weight:     700;
}

.legacy-box__caption {
  font-family:    var(--font-display);
  font-size:      13px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color:          var(--sage-dark);
}


/* ===========================================================================
   REDUCED MOTION
=========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .hero__video,
  .tb12-slide,
  .legacy-box__lid,
  .legacy-box__contents {
    transition: none !important;
  }

  .tb12-parallax__inner {
    top:    0;
    height: 100%;
  }

}