/* =============================================================================
   TOURBIRTH — SHARED TRAVEL COMPONENTS
   css/travel.css

   The cinematic, image-first components that were first built for the homepage,
   extracted here so EVERY page can use them. Loaded site-wide in header.php,
   AFTER styles.css and BEFORE the per-page stylesheet + theme.css (so theme.css
   light/dark overrides still win).

   Components: hero carousel · fixed-background parallax bands · ken-burns photo
   bands · image pathway cards · full-bleed gallery · "moments" timeline.

   NOTE: css/pages/home.css still carries its own copies of some of these so the
   homepage is self-contained; the declarations are identical, so the duplicate
   load on the homepage is harmless (last-in wins, same values).
   ============================================================================= */


/* ── Hero background film ─────────────────────────────────────────────────── */
.hero__video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    0;
  transform:  scale(1.06);
  transition: var(--transition-hero-img, transform 1800ms cubic-bezier(0.23, 1, 0.32, 1));
}
.hero.is-visible .hero__video { transform: scale(1); }

/* Photographic hero (travel still with a slow ken-burns drift) */
.hero__media-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media-photo img {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center 42%;
  animation:       heroDrift 28s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(0, -1.5%, 0); }
}


/* ── Hero carousel — cross-fading video/image slides ──────────────────────── */
.hero-carousel { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-carousel__slide {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center;
  opacity:             0;
  transition:          opacity 1500ms ease-in-out;
  /* GPU-layer promotion — without this, cross-fading several stacked
     full-viewport background-image layers can drop to a hard cut (no
     visible transition) under compositing pressure on lower-power mobile
     GPUs, even though the same transition is smooth on desktop. */
  will-change:         opacity;
  transform:           translateZ(0);
  backface-visibility: hidden;
}
.hero-carousel__slide.is-active { opacity: 1; }
.hero-carousel__video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) {
  .hero-carousel__slide { transition: none; }
}

/* Cinematic carousel heroes (interior pages) — stronger veil + legible copy
   over the photos, in BOTH themes (theme.css excludes .hero--cinematic from the
   light-theme flat-hero flip, so these rules govern). */
.hero--cinematic .hero__overlay {
  background: linear-gradient(
    to bottom,
    rgba(11, 29, 42, 0.55) 0%,
    rgba(11, 29, 42, 0.48) 38%,
    rgba(11, 29, 42, 0.88) 100%
  );
}
.hero--cinematic .hero__content h1,
.hero--cinematic .hero__content .lead,
.hero--cinematic .hero__content .eyebrow,
.hero--cinematic .hero__content .credential {
  text-shadow: 0 2px 26px rgba(11, 29, 42, 0.55);
}

/* Visually-hidden but screen-reader-accessible. Used by the TB12 carousel's
   live region (js/tourbirth12-slider.js) — without this the announced slide
   title rendered as visible text below the carousel controls. */
.sr-only {
  position:    absolute !important;
  width:       1px;
  height:      1px;
  padding:     0;
  margin:      -1px;
  overflow:    hidden;
  clip:        rect(0, 0, 0, 0);
  white-space: nowrap;
  border:      0;
}


/* ── Image pathway cards ──────────────────────────────────────────────────── */
.home-pathway { position: relative; }
.home-pathway__media {
  display:       block;
  position:      relative;
  width:         100%;
  aspect-ratio:  4 / 5;
  margin-bottom: var(--space-md);
  overflow:      hidden;
  border-radius: 14px;
  border:        1px solid color-mix(in srgb, var(--gold) 18%, transparent);
}
.home-pathway__media img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     saturate(1.06) contrast(1.02);   /* keep travel colour VIVID */
  transform:  scale(1.02);
  transition: transform 1200ms var(--ease-cinematic),
              filter    800ms  var(--ease-luxury);
}
.home-pathway__media::after {
  content:        '';
  position:       absolute;
  inset:          0;
  pointer-events: none;
  background:     linear-gradient(to top, rgba(11, 29, 42, 0.32), transparent 42%);
}
.home-pathway:hover .home-pathway__media img,
.home-pathway:focus-within .home-pathway__media img {
  transform: scale(1.08);
  filter:    saturate(1.14) contrast(1.04) brightness(1.03);
}
.home-pathway .roman-numeral,
.home-pathway .pathway-card__numeral {
  position:    relative;
  z-index:     1;
  display:     block;
  margin-top:  calc(-1 * var(--space-lg));
  margin-left: var(--space-xs);
}

/* When an existing .pathway-card is upgraded to an image card: bleed the photo
   to the card's top + side borders as a header, and tidy the numeral spacing. */
.pathway-card.home-pathway { padding-top: 0; }
.pathway-card.home-pathway .home-pathway__media {
  margin:        0 calc(-1 * var(--space-lg));   /* flush to the card's side borders */
  width:         auto;
  aspect-ratio:  16 / 10;
  border:        0;
  border-bottom: 1px solid rgba(198, 169, 107, 0.18);
  border-radius: 0;
}
.pathway-card.home-pathway .pathway-card__numeral { margin-top: var(--space-sm); }


/* ── Ken-burns photo bands (tb12 / house / quote variants) ────────────────── */
@keyframes homeBandDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(0, -2%, 0); }
}
.home-tb12-band,
.home-house-band,
.home-quote-band { position: relative; overflow: hidden; }
.home-tb12-band__bg,
.home-house-band__bg,
.home-quote-band__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.home-tb12-band__bg img,
.home-house-band__bg img,
.home-quote-band__bg img {
  width: 100%; height: 100%; object-fit: cover;
  transform-origin: center;
  animation: homeBandDrift 28s ease-in-out infinite alternate;
}
.home-tb12-band__bg img   { filter: brightness(0.64) contrast(1.04) saturate(1.05); }
.home-house-band__bg img  { filter: brightness(0.42) contrast(1.05) saturate(1.05); }
.home-quote-band__bg img  { filter: brightness(0.52) contrast(1.05) saturate(1.06); }
.home-tb12-band__bg::after,
.home-house-band__bg::after,
.home-quote-band__bg::after { content: ''; position: absolute; inset: 0; }
.home-tb12-band__bg::after {
  background: linear-gradient(120deg, rgba(11,29,42,0.88), rgba(11,29,42,0.62) 55%, rgba(198,169,107,0.22));
}
.home-house-band__bg::after {
  background: linear-gradient(110deg, rgba(11,29,42,0.88), rgba(11,29,42,0.55) 60%, rgba(11,29,42,0.72));
}
.home-quote-band__bg::after {
  background: linear-gradient(120deg, rgba(11,29,42,0.78), rgba(11,29,42,0.40) 55%, rgba(198,169,107,0.28));
}
.home-tb12-band > .container,
.home-house-band > .container,
.home-quote-band > .container { position: relative; z-index: 1; }
.home-quote-band .pull-quote {
  color: var(--offwhite); font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.18; max-width: 22ch; margin-inline: auto;
}
.home-quote-band .gold-rule { background-color: rgba(245, 243, 238, 0.45); }


/* ── "Moments" timeline grid ──────────────────────────────────────────────── */
.home-day__moments {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-lg);
  margin-top:            var(--space-xl);
}
@media (min-width: 768px)  { .home-day__moments { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .home-day__moments { grid-template-columns: repeat(4, 1fr); } }
.home-day__moment {
  padding-top: var(--space-md);
  border-top:  1px solid color-mix(in srgb, var(--gold) 32%, transparent);
}
.home-day__time {
  display:        block;
  font-family:    var(--font-display);
  font-size:      0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color:          var(--gold-deep);
}
.home-day__moment-title {
  margin-top:  var(--space-sm);
  font-family: var(--font-display);
  font-weight: 400;
  font-size:   clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.2;
}
.home-day__moment p { margin-top: var(--space-sm); line-height: var(--lh-body); }
.home-day__included { margin-top: var(--space-2xl); text-align: left; }
.home-day__included-list {
  list-style: none; margin: var(--space-md) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: flex-start;
  gap: var(--space-sm) var(--space-lg);
}
.home-day__included-list li {
  position: relative; padding-left: 1.4rem;
  font-size: var(--fs-small); letter-spacing: 0.04em;
}
.home-day__included-list li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
}
.home-day__cta { margin-top: var(--space-2xl); }


/* ── Full-bleed cinematic gallery ─────────────────────────────────────────── */
.home-gallery {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   2px;
  background:            var(--obsidian);
}
@media (max-width: 760px) { .home-gallery { grid-template-columns: repeat(2, 1fr); } }
.home-gallery__item {
  position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3;
}
.home-gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.06);
  transition: transform 1100ms var(--ease-cinematic), filter 600ms var(--ease-luxury);
}
.home-gallery__item:hover img { transform: scale(1.07); filter: saturate(1.16) brightness(1.04); }
.home-gallery__item::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(11, 29, 42, 0.30), transparent 55%);
}
.home-gallery__label {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 0.25rem; padding: var(--space-md);
  background: linear-gradient(to top, rgba(11, 29, 42, 0.82), transparent);
  transform: translateY(10px); opacity: 0.94;
  transition: transform 520ms var(--ease-cinematic), opacity 400ms var(--ease-luxury);
}
.home-gallery__item:hover .home-gallery__label,
.home-gallery__item:focus-visible .home-gallery__label { transform: translateY(0); opacity: 1; }
.home-gallery__label-name {
  font-family: var(--font-display); font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 400; letter-spacing: 0.02em; color: var(--offwhite);
}
.home-gallery__label-cta {
  font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--gold);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 400ms var(--ease-luxury), transform 400ms var(--ease-cinematic);
}
.home-gallery__item:hover .home-gallery__label-cta,
.home-gallery__item:focus-visible .home-gallery__label-cta { opacity: 1; transform: none; }


/* ── ONE FIXED BACKGROUND — cinematic parallax bands ──────────────────────── */
.home-fixed-band {
  position:              relative;
  background-image:      url('../assets/images/travel/aerial.webp');
  background-size:       cover;
  background-position:   center;
  background-attachment: fixed;
}
.home-fixed-band::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(115deg,
                rgba(11, 29, 42, 0.82),
                rgba(11, 29, 42, 0.55) 55%,
                rgba(11, 29, 42, 0.74));
}
.home-fixed-band > .container { position: relative; z-index: 1; }

/* Band copy stays light over the dark-veiled image — both themes */
.home-fixed-band h2,
.home-fixed-band h3,
.home-fixed-band .headline-display,
.home-fixed-band .headline-hero,
.home-fixed-band .blueprint-stage__numeral,
.home-fixed-band .thank-you__heading,
.home-fixed-band .pull-quote,
.home-fixed-band .accent-line,
.home-fixed-band blockquote,
.home-fixed-band blockquote p,
.home-fixed-band .lead { color: var(--offwhite); }
.home-fixed-band p,
.home-fixed-band .thank-you__body { color: rgba(245, 243, 238, 0.88); }
.home-fixed-band .section-eyebrow,
.home-fixed-band .eyebrow { color: var(--gold); }
.home-fixed-band .credential,
.home-fixed-band .caption,
.home-fixed-band .investment-note,
.home-fixed-band figcaption { color: rgba(245, 243, 238, 0.60); }
.home-fixed-band .btn-outline { color: var(--offwhite); border-color: rgba(198, 169, 107, 0.6); }
.home-fixed-band .btn-outline:hover { color: var(--obsidian); background-color: var(--gold); border-color: var(--gold); }
.home-fixed-band .home-day__time { color: var(--gold); }
.home-fixed-band .home-day__included-list li { color: rgba(245, 243, 238, 0.88); }
.home-fixed-band .home-day__moment { border-top-color: rgba(198, 169, 107, 0.4); }
.home-fixed-band .credibility-line__text { position: relative; z-index: 1; }

/* Per-band background image overrides (use a data-bg attribute for variety) */
.home-fixed-band[data-bg="valley"]    { background-image: url('../assets/images/travel/valley.webp'); }
.home-fixed-band[data-bg="lake"]      { background-image: url('../assets/images/travel/lake.webp'); }
.home-fixed-band[data-bg="shore"]     { background-image: url('../assets/images/travel/shore.webp'); }
.home-fixed-band[data-bg="embrace"]   { background-image: url('../assets/images/travel/embrace.webp'); }
.home-fixed-band[data-bg="wave"]      { background-image: url('../assets/images/travel/wave.webp'); }
.home-fixed-band[data-bg="desert"]    { background-image: url('../assets/images/travel/desert.webp'); }
.home-fixed-band[data-bg="santorini"] { background-image: url('../assets/images/travel/santorini.webp'); }
.home-fixed-band[data-bg="resort"]    { background-image: url('../assets/images/travel/resort.webp'); }
.home-fixed-band[data-bg="cabin"]     { background-image: url('../assets/images/travel/cabin.webp'); }
.home-fixed-band[data-bg="relax"]     { background-image: url('../assets/images/travel/relax.webp'); }
.home-fixed-band[data-bg="roadtrip"]  { background-image: url('../assets/images/travel/roadtrip.webp'); }

/* Mobile: background-attachment:fixed is janky on touch — fall back to scroll */
@media (max-width: 900px) {
  .home-fixed-band { background-attachment: scroll; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__video { transition: none; }
  .hero__media-photo img { animation: none; transform: scale(1.04); }
  .home-tb12-band__bg img,
  .home-house-band__bg img,
  .home-quote-band__bg img { animation: none; transform: scale(1.06); }
  .home-pathway__media img,
  .home-gallery__item img { transition: none; }
}