/* =========================================================
   JOURNEY PAGE
   Editorial destination stories for Little Hoi An Group.
========================================================= */

.journey-hero,
.journey-hero *,
.journey-intro,
.journey-intro *,
.journey-feature,
.journey-feature *,
.journey-grid-section,
.journey-grid-section *,
.journey-articles,
.journey-articles *,
.journey-cta,
.journey-cta *{
  box-sizing:border-box;
}

.journey-hero{
  position:relative;
  min-height:75vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#0f0b09;
  color:#fff8ee;
}

.journey-hero-media{
  position:absolute;
  inset:0;
  z-index:0;
}

.journey-hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
  filter:saturate(.92) contrast(1.02);
}

.journey-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(12,10,9,.22), rgba(12,10,9,.38) 48%, rgba(12,10,9,.68)),
    rgba(80,30,20,.16);
}

.journey-hero-content{
  position:relative;
  z-index:2;
  width:min(760px,calc(100% - 48px));
  padding:132px 0 84px;
  text-align:center;
}

.journey-eyebrow,
.journey-section-kicker,
.journey-meta{
  display:block;
  font-family:var(--font-body, Montserrat, Arial, sans-serif);
  line-height:1;
  font-weight:700;
  text-transform:uppercase;
}

.journey-eyebrow{
  margin:0 0 18px;
  color:rgba(255,248,238,.82);
  font-size:11px;
  letter-spacing:.28em;
}

.journey-hero h1{
  margin:0 0 22px;
  color:#fff8ee;
  font-size:clamp(46px,7vw,88px);
  line-height:.92;
  text-shadow:0 8px 36px rgba(0,0,0,.34);
}

.journey-hero p{
  width:min(630px,100%);
  margin:0 auto;
  color:rgba(255,248,238,.88);
  font-size:15px;
  line-height:1.86;
}

.journey-intro{
  padding:94px 0 76px;
  background:var(--cream, #f4f1e9);
}

.journey-intro-inner{
  width:min(1120px,calc(100% - 96px));
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(280px,.9fr) minmax(360px,1fr);
  gap:88px;
  align-items:start;
}

.journey-section-kicker{
  margin:0 0 18px;
  color:var(--red, #8b0304);
  font-size:11px;
  letter-spacing:.24em;
}

.journey-intro h2,
.journey-grid-head h2,
.journey-cta h2{
  margin:0;
  color:var(--ink, #2b2723);
  font-size:clamp(32px,4vw,54px);
  line-height:1.02;
}

.journey-intro p{
  margin:5px 0 0;
  color:var(--body, #4e4e4e);
  font-size:15px;
  line-height:1.9;
}

.journey-feature{
  width:min(1120px,calc(100% - 96px));
  margin:0 auto;
  padding:18px 0 106px;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
  gap:54px;
  align-items:center;
  background:var(--cream, #f4f1e9);
}

.journey-feature-media{
  height:490px;
  overflow:hidden;
  background:#d9d2c8;
}

.journey-feature-media img,
.journey-card-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease, ease), filter .5s ease;
}

.journey-feature-copy{
  padding:18px 0;
}

.journey-meta{
  margin:0 0 18px;
  color:rgba(139,3,4,.82);
  font-size:10px;
  letter-spacing:.22em;
}

.journey-feature-copy h2{
  margin:0 0 24px;
  color:var(--ink, #2b2723);
  font-size:clamp(34px,4.2vw,60px);
  line-height:1.01;
}

.journey-feature-copy p,
.journey-card-copy p,
.journey-article-body p,
.journey-cta p{
  margin:0;
  color:var(--body, #4e4e4e);
  font-size:15px;
  line-height:1.88;
}

.journey-link,
.journey-cta-actions a{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:30px;
  padding-bottom:7px;
  color:var(--ink, #2b2723);
  font-size:12px;
  line-height:1;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.journey-link::after,
.journey-cta-actions a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:var(--red, #8b0304);
  transform:scaleX(1);
  transform-origin:left center;
  transition:transform .34s var(--ease, ease);
}

.journey-link:hover,
.journey-cta-actions a:hover{
  color:var(--red, #8b0304);
}

.journey-link:hover::after,
.journey-cta-actions a:hover::after{
  transform:scaleX(1.18);
}

.journey-grid-section{
  padding:92px 0 108px;
  background:var(--cream-alt, #edeae5);
}

.journey-grid-head{
  width:min(1120px,calc(100% - 96px));
  margin:0 auto 42px;
}

.journey-grid{
  width:min(1120px,calc(100% - 96px));
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}

.journey-card{
  min-width:0;
}

.journey-card-media{
  display:block;
  height:310px;
  overflow:hidden;
  background:#d9d2c8;
}

.journey-card:hover .journey-card-media img{
  transform:scale(1.055);
  filter:saturate(1.02) contrast(1);
}

.journey-card-copy{
  padding:24px 0 0;
}

.journey-card-copy h3{
  margin:0 0 14px;
  color:var(--ink, #2b2723);
  font-size:28px;
  line-height:1.08;
}

.journey-card-copy h3 a:hover{
  color:var(--red, #8b0304);
}

.journey-card-copy p{
  font-size:14px;
  line-height:1.72;
}

.journey-articles{
  padding:108px 0 92px;
  background:var(--cream, #f4f1e9);
}

.journey-article{
  width:min(1040px,calc(100% - 96px));
  margin:0 auto;
  padding:0 0 72px;
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:74px;
  border-bottom:1px solid rgba(43,39,35,.13);
}

.journey-article + .journey-article{
  padding-top:72px;
}

.journey-article-label{
  position:sticky;
  top:120px;
  align-self:start;
}

.journey-article-label span{
  display:block;
  margin:0 0 16px;
  color:var(--red, #8b0304);
  font-family:var(--font-title, Georgia, serif);
  font-size:56px;
  line-height:1;
}

.journey-article-label small{
  display:block;
  color:var(--muted, #68625c);
  font-size:10px;
  line-height:1.5;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.journey-article-body{
  max-width:760px;
}

.journey-article-body h2{
  margin:0 0 26px;
  color:var(--ink, #2b2723);
  font-size:clamp(34px,4vw,54px);
  line-height:1.04;
}

.journey-article-body p + p{
  margin-top:20px;
}

.journey-cta{
  position:relative;
  overflow:hidden;
  padding:98px 0 112px;
  background:#2b2723 url("../img/our-story/banner-ourstory.jpg") center / cover no-repeat;
  color:#fff8ee;
  text-align:center;
}

.journey-cta::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(180deg, rgba(18,14,12,.62), rgba(18,14,12,.74)),
    rgba(43,39,35,.48);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.journey-cta-inner{
  position:relative;
  z-index:1;
  width:min(760px,calc(100% - 48px));
  margin:0 auto;
}

.journey-cta .journey-section-kicker{
  color:#c99a55;
}

.journey-cta h2{
  color:#fff8ee;
}

.journey-cta p{
  width:min(620px,100%);
  margin:24px auto 0;
  color:rgba(255,248,238,.82);
}

.journey-cta-actions{
  display:flex;
  justify-content:center;
  gap:30px;
  flex-wrap:wrap;
  margin-top:8px;
}

.journey-cta-actions a{
  color:#fff8ee;
}

.journey-cta-actions a::after{
  background:#c99a55;
}

@media(max-width:980px){
  .journey-intro-inner,
  .journey-feature{
    width:min(760px,calc(100% - 56px));
    grid-template-columns:1fr;
    gap:38px;
  }

  .journey-feature{
    padding-bottom:86px;
  }

  .journey-feature-media{
    height:420px;
  }

  .journey-grid,
  .journey-grid-head{
    width:min(760px,calc(100% - 56px));
  }

  .journey-grid{
    grid-template-columns:1fr;
    gap:42px;
  }

  .journey-card-media{
    height:360px;
  }

  .journey-article{
    width:min(760px,calc(100% - 56px));
    grid-template-columns:1fr;
    gap:22px;
  }

  .journey-article-label{
    position:static;
    display:flex;
    align-items:flex-end;
    gap:18px;
  }
}

@media(max-width:560px){
  .journey-hero{
    min-height:68vh;
  }

  .journey-hero-content{
    width:calc(100% - 44px);
    padding:120px 0 68px;
    text-align:left;
  }

  .journey-hero h1{
    font-size:54px;
  }

  .journey-intro{
    padding:70px 0 56px;
  }

  .journey-intro-inner,
  .journey-feature,
  .journey-grid,
  .journey-grid-head,
  .journey-article{
    width:calc(100% - 44px);
  }

  .journey-intro h2,
  .journey-feature-copy h2,
  .journey-grid-head h2,
  .journey-article-body h2,
  .journey-cta h2{
    font-size:38px;
  }

  .journey-feature{
    padding:0 0 72px;
  }

  .journey-feature-media,
  .journey-card-media{
    min-height:0;
    height:300px;
  }

  .journey-grid-section{
    padding:72px 0 82px;
  }

  .journey-card-copy h3{
    font-size:26px;
  }

  .journey-articles{
    padding:78px 0 70px;
  }

  .journey-article{
    padding-bottom:58px;
  }

  .journey-article + .journey-article{
    padding-top:58px;
  }

  .journey-article-label span{
    font-size:42px;
  }

  .journey-cta{
    padding:78px 0 88px;
  }

  .journey-cta-actions{
    justify-content:flex-start;
    gap:22px;
  }
}

/* Title scale aligned with the refined typography used on Our Story. */
.journey-hero h1{
  margin:0;
  font-size:30px;
  line-height:1.08;
}

.journey-intro h2,
.journey-feature-copy h2,
.journey-grid-head h2,
.journey-article-body h2,
.journey-cta h2{
  font-size:31px;
  line-height:1.08;
}

.journey-card-copy h3{
  font-size:24px;
  line-height:1.14;
}

@media(max-width:560px){
  .journey-hero h1{
    font-size:30px;
    line-height:1.08;
  }

  .journey-intro h2,
  .journey-feature-copy h2,
  .journey-grid-head h2,
  .journey-article-body h2,
  .journey-cta h2{
    font-size:28px;
    line-height:1.12;
  }

  .journey-card-copy h3{
    font-size:22px;
    line-height:1.16;
  }
}

/* Lower hero copy to match the inner-page banner position. */
.journey-hero-content{
  position:absolute;
  inset:auto 0 clamp(84px,13.5vh,132px);
  width:min(760px,calc(100% - 48px));
  margin:0 auto;
  padding:0;
  text-align:center;
}

@media(max-width:560px){
  .journey-hero-content{
    inset:auto 0 clamp(72px,12vh,108px);
    width:calc(100% - 44px);
  }
}

/* Inline editorial link: fixed underline, no expanding hover animation. */
.journey-link{
  display:inline-block;
  padding:0 0 4px;
  color:#4e4e4e;
  border-bottom:1px solid currentColor;
  font-size:11px;
  line-height:1.2;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:none;
  transition:color .2s ease;
}

.journey-link::after{
  content:none;
  display:none;
}

.journey-link:hover{
  color:var(--red, #8b0304);
}

/* Smooth, restrained page reveals. */
.journey-hero.fadein-up{
  opacity:0;
  transform:none;
  filter:none;
  animation:none;
  transition:opacity 1.25s cubic-bezier(.22,.72,.22,1);
}

.journey-hero.fadein-up.is-visible{
  opacity:1;
  transform:none;
  filter:none;
}

.journey-hero-content h1{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:
    opacity 1s cubic-bezier(.22,.72,.22,1) .2s,
    transform 1s cubic-bezier(.22,.72,.22,1) .2s;
}

.journey-hero.is-visible .journey-hero-content h1{
  opacity:1;
  transform:translate3d(0,0,0);
}

.journey-intro.fadein-up,
.journey-feature.fadein-up,
.journey-grid-section.fadein-up,
.journey-article.fadein-up,
.journey-cta.fadein-up{
  opacity:0;
  transform:translate3d(0,16px,0);
  filter:none;
  animation:none;
  transition:
    opacity 1.08s cubic-bezier(.22,.72,.22,1),
    transform 1.08s cubic-bezier(.22,.72,.22,1);
  transition-delay:0s;
}

.journey-intro.fadein-up.is-visible,
.journey-feature.fadein-up.is-visible,
.journey-grid-section.fadein-up.is-visible,
.journey-article.fadein-up.is-visible,
.journey-cta.fadein-up.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
  filter:none;
}