/* ─── T&T Travel Boutique — Experiences Along the Way Page ─── */
/* Loaded only on Template: Experiences Along the Way          */

/* ── CSS vars ── */
:root {
  --dark:         #0D1B2A;
  --light:        #F0ECE3;
  --heading-dark: #0D1B2A;
  --gold:         #B8843F;
  --gold-light:   #d4a96a;
  --transition:   0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Cursor fix ── */
body.tt-exp-page,
body.tt-exp-page * { cursor: auto !important; }
body.tt-exp-page a,
body.tt-exp-page button,
body.tt-exp-page [role="button"],
body.tt-exp-page .region-card,
body.tt-exp-page .exp-item,
body.tt-exp-page .intro-pill { cursor: pointer !important; }

/* ── Suppress Avada header/footer ── */
body.tt-exp-page .fusion-tb-header,
body.tt-exp-page .fusion-header-wrapper,
body.tt-exp-page #fusion-header,
body.tt-exp-page .fusion-footer,
body.tt-exp-page .fusion-footer-widget-area,
body.tt-exp-page .fusion-copyright-footer,
body.tt-exp-page .fusion-tb-footer { display: none !important; }

/* ── Base ── */
body.tt-exp-page {
  font-family: 'Jost', sans-serif;
  background: var(--dark);
  color: var(--light);
  overflow-x: hidden;
  margin: 0; padding: 0;
}
body.tt-exp-page *, body.tt-exp-page *::before, body.tt-exp-page *::after { box-sizing: border-box; }
body.tt-exp-page ::-webkit-scrollbar { width: 4px; }
body.tt-exp-page ::-webkit-scrollbar-track { background: var(--dark); }
body.tt-exp-page ::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }

/* ── Avada blockquote reset ── */
body.tt-exp-page blockquote {
  background: transparent !important;
  border: none !important; padding: 0 !important; margin: 0 !important;
  color: inherit !important; font-style: inherit !important; box-shadow: none !important;
}
body.tt-exp-page blockquote::before, body.tt-exp-page blockquote::after { display: none !important; }

/* ── Admin bar offset ── */
body.tt-exp-page.admin-bar nav.tt-nav { top: 32px; }
@media screen and (max-width: 782px) {
  body.tt-exp-page.admin-bar nav.tt-nav { top: 46px; }
}

/* ── Active nav link ── */
body.tt-exp-page .tt-nav .nav-links a.active { opacity: 1; color: var(--gold); }
body.tt-exp-page .tt-nav .nav-links a.active::after { transform: scaleX(1); transform-origin: left; }

/* ════════════════════════════════════════════════════
   SHARED SECTION ELEMENTS
   ════════════════════════════════════════════════════ */
.section-eyebrow {
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--gold); font-weight: 500; margin-bottom: 18px;
  display: flex; align-items: center; gap: 12px;
}
.section-eyebrow::after { content: ''; flex: 1; height: 1px; background: rgba(184,132,63,0.3); max-width: 56px; }
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 4vw, 54px); font-weight: 300; line-height: 1.18;
  color: var(--light); margin: 0;
}
.section-title em { font-style: italic; color: var(--gold-light); }

/* ── Buttons ── */
.btn-primary {
  display: inline-block; background: var(--gold); color: var(--dark);
  padding: 15px 38px; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
  font-weight: 500; text-decoration: none; position: relative; overflow: hidden;
  transition: all 0.3s ease; border: none;
}
.btn-primary::before {
  content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.15);
  transform: translateX(-100%); transition: transform 0.4s ease;
}
.btn-primary:hover::before { transform: translateX(0); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(184,132,63,0.3); color: var(--dark); }

/* ── Stagger animations (8 children for exp-list) ── */
.stagger > * { opacity: 0; transform: translateY(30px); transition: opacity 0.55s ease, transform 0.55s ease; }
.stagger.visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; }
.stagger.visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.07s; }
.stagger.visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.14s; }
.stagger.visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.21s; }
.stagger.visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.28s; }
.stagger.visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.35s; }
.stagger.visible > *:nth-child(7) { opacity: 1; transform: none; transition-delay: 0.42s; }
.stagger.visible > *:nth-child(8) { opacity: 1; transform: none; transition-delay: 0.49s; }

/* ── Keyframes ── */
@keyframes fadeUp     { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn     { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroZoomOut { 0% { transform: scale(1.08); } 100% { transform: scale(1.0); } }
@keyframes scrollPulse { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }

.scroll-line {
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollPulse 2s infinite;
}

/* ════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════ */
.tt-exp-hero {
  min-height:86vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  position:relative; overflow:hidden; padding:140px 40px 80px; text-align:center;
}
.tt-exp-hero .hero-bg {
  position:absolute; inset:-4%; z-index:0; width:108%; height:108%;
  background-size:cover; background-position:center 40%;
  animation:heroZoomOut 20s ease-out infinite; will-change:transform;
}
.tt-exp-hero .hero-overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom,rgba(13,27,42,.35) 0%,rgba(13,27,42,.12) 38%,rgba(13,27,42,.32) 72%,rgba(13,27,42,.6) 100%),
             linear-gradient(135deg,rgba(13,27,42,.15) 0%,transparent 60%);
}
.tt-exp-hero .hero-overlay::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 90% 70% at 50% 50%,transparent 40%,rgba(13,27,42,.25) 100%);
}
.tt-exp-hero > *:not(.hero-bg):not(.hero-overlay) { position:relative; z-index:2; }
.tt-exp-hero .hero-eyebrow {
  font-size:10px; letter-spacing:4.5px; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:16px; margin-bottom:36px;
  opacity:0; animation:fadeUp 1s .3s forwards;
}
.tt-exp-hero .hero-eyebrow::before,
.tt-exp-hero .hero-eyebrow::after { content:''; width:36px; height:1px; background:var(--gold); opacity:.5; }
.tt-exp-hero .hero-title {
  font-family:'Cormorant Garamond',serif; font-size:clamp(48px,6.5vw,88px); font-weight:300; line-height:1.1;
  color:var(--light); max-width:820px; text-shadow:0 2px 48px rgba(13,27,42,.5);
  opacity:0; animation:fadeUp 1s .5s forwards;
}
.tt-exp-hero .hero-title em { font-style:italic; color:var(--gold-light); }
.tt-exp-hero .hero-sub {
  margin-top:24px; font-size:16px; font-weight:200; line-height:1.7;
  color:rgba(240,236,227,.7); max-width:520px; opacity:0; animation:fadeUp 1s .7s forwards;
}
.tt-exp-hero .hero-scroll {
  position:absolute; bottom:44px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  z-index:2; opacity:0; animation:fadeIn 1s 1.3s forwards;
}
.tt-exp-hero .hero-scroll span { font-size:9px; letter-spacing:4px; text-transform:uppercase; opacity:.4; }

/* ════════════════════════════════════════════════════
   INTRO — LIGHT
   ════════════════════════════════════════════════════ */
.tt-exp-intro {
  background:var(--light); padding:96px 80px;
  display:grid; grid-template-columns:1fr 1fr; gap:96px; align-items:center;
  position:relative; overflow:hidden;
}
.tt-exp-intro::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(150deg,rgba(184,132,63,.04) 0%,transparent 55%),
             radial-gradient(ellipse 60% 70% at 95% 50%,rgba(184,132,63,.05) 0%,transparent 60%);
  pointer-events:none;
}
.tt-exp-intro::after {
  content:'Moments'; font-family:'Cormorant Garamond',serif; font-size:200px; font-weight:300; line-height:1;
  color:rgba(184,132,63,.04); position:absolute; bottom:-20px; right:-10px;
  z-index:0; user-select:none; white-space:nowrap;
}
.tt-exp-intro > * { position:relative; z-index:1; }

.intro-pill {
  display:flex; align-items:center; gap:20px; padding:22px 28px;
  border-bottom:1px solid rgba(184,132,63,.12);
  transition:background .35s ease,border-color .35s ease;
}
.intro-pill:first-child { border-top:1px solid rgba(184,132,63,.12); }
.intro-pill:hover { background:rgba(184,132,63,.05); border-color:rgba(184,132,63,.25); }
.intro-pill-dot { width:8px; height:8px; background:var(--gold); transform:rotate(45deg); flex-shrink:0; }
.intro-pill-text { font-size:16px; font-weight:300; color:rgba(30,44,56,.72); }

/* ════════════════════════════════════════════════════
   EXPERIENCES — editorial numbered list, DARK
   ════════════════════════════════════════════════════ */
.tt-exp-list-section {
  background:var(--dark); padding:96px 80px; position:relative; overflow:hidden;
}
.tt-exp-list-section::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse 70% 50% at 50% 50%,rgba(184,132,63,.04) 0%,transparent 70%);
  pointer-events:none;
}
.exp-list-header { text-align:center; margin-bottom:72px; position:relative; z-index:1; }
.exp-list-eyebrow {
  font-size:10px; letter-spacing:4px; text-transform:uppercase; color:var(--gold); font-weight:500;
  margin-bottom:16px; display:flex; align-items:center; justify-content:center; gap:12px;
}
.exp-list-eyebrow::before,
.exp-list-eyebrow::after { content:''; flex:1; height:1px; background:rgba(184,132,63,.3); max-width:56px; }
.exp-list-title {
  font-family:'Cormorant Garamond',serif; font-size:clamp(32px,4vw,52px); font-weight:300;
  line-height:1.18; color:var(--light);
}
.exp-list-title em { font-style:italic; color:var(--gold-light); }
.exp-list-subtitle {
  margin:14px auto 0; font-size:16px; font-weight:300;
  color:rgba(240,236,227,.5); max-width:560px; line-height:1.75;
}

.exp-list {
  display:grid; grid-template-columns:1fr 1fr;
  gap:0; position:relative; z-index:1;
}
.exp-item {
  display:grid; grid-template-columns:260px 1fr;
  border-top:1px solid rgba(184,132,63,.12);
  transition:background .4s ease;
}
.exp-item:nth-child(even) { direction:rtl; }
.exp-item:nth-child(even) > * { direction:ltr; }
.exp-item:nth-last-child(-n+2) { border-bottom:1px solid rgba(184,132,63,.12); }
.exp-item:nth-child(odd) { border-right:1px solid rgba(184,132,63,.12); }
.exp-item:hover { background:rgba(184,132,63,.03); }
.exp-item-img { position:relative; overflow:hidden; }
.exp-item-img img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:brightness(.78) saturate(.88);
  transition:transform .9s ease,filter .6s ease;
}
.exp-item:hover .exp-item-img img { transform:scale(1.05); filter:brightness(.68) saturate(1); }
.exp-item-body { padding:36px 40px; display:flex; flex-direction:column; justify-content:center; }
.exp-item-num { font-size:11px; letter-spacing:3px; color:var(--gold); font-weight:500; margin-bottom:12px; display:block; }
.exp-item-title {
  font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:400;
  color:var(--light); line-height:1.25; margin-bottom:12px; transition:color .3s ease;
}
.exp-item:hover .exp-item-title { color:var(--gold-light); }
.exp-item-desc { font-size:15px; line-height:1.8; font-weight:300; color:rgba(240,236,227,.55); }

/* ════════════════════════════════════════════════════
   BY REGION — LIGHT, stacked full-width cards
   ════════════════════════════════════════════════════ */
.tt-exp-regions {
  background:var(--light); padding:96px 80px; position:relative; overflow:hidden;
}
.tt-exp-regions::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(135deg,rgba(184,132,63,.04) 0%,transparent 55%),
             radial-gradient(ellipse 60% 80% at 95% 30%,rgba(184,132,63,.05) 0%,transparent 60%);
  pointer-events:none;
}
.region-stack { display:flex; flex-direction:column; gap:2px; position:relative; z-index:1; margin-top:56px; }
.region-card {
  position:relative; overflow:hidden; cursor:pointer;
  display:grid; grid-template-columns:1fr 1fr; height:480px;
  transition:box-shadow .5s ease;
}
.region-card:nth-child(even) { direction:rtl; }
.region-card:nth-child(even) > * { direction:ltr; }
.region-card:hover { box-shadow:0 16px 48px rgba(0,0,0,.15); }
.region-img-wrap { position:relative; overflow:hidden; }
.region-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.75) saturate(.88); transition:transform 1s ease,filter .7s ease; }
.region-card:hover .region-img { transform:scale(1.05); filter:brightness(.62) saturate(1); }
.region-img-wrap::before,
.region-img-wrap::after { content:''; position:absolute; z-index:2; width:40px; height:40px; transition:all .5s ease; pointer-events:none; }
.region-img-wrap::before { top:20px; left:20px; border-top:1px solid var(--gold); border-left:1px solid var(--gold); opacity:.7; }
.region-img-wrap::after  { bottom:20px; right:20px; border-bottom:1px solid var(--gold); border-right:1px solid var(--gold); opacity:.7; }
.region-card:hover .region-img-wrap::before,
.region-card:hover .region-img-wrap::after { width:54px; height:54px; opacity:1; }
.region-body {
  background:var(--heading-dark); padding:56px 64px;
  display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden; transition:background .4s ease;
}
.region-card:hover .region-body { background:#243748; }
.region-body::before { content:''; position:absolute; inset:0; z-index:0; background:linear-gradient(135deg,rgba(184,132,63,.05) 0%,transparent 55%); pointer-events:none; }
.region-body > * { position:relative; z-index:1; }
.region-body::after {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--transition);
}
.region-card:hover .region-body::after { transform:scaleX(1); }
.region-tag { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); font-weight:500; margin-bottom:16px; }
.region-heading { font-family:'Cormorant Garamond',serif; font-size:clamp(22px,2.2vw,32px); font-weight:300; color:var(--light); line-height:1.25; }
.region-heading em { font-style:italic; color:var(--gold-light); }
.region-rule { width:32px; height:1px; background:var(--gold); margin:20px 0; opacity:.6; }
.region-desc { font-size:13px; line-height:1.75; font-weight:300; color:rgba(240,236,227,.55); }

/* ════════════════════════════════════════════════════
   CTA
   ════════════════════════════════════════════════════ */
.tt-exp-cta { position:relative; overflow:hidden; padding:160px 80px; text-align:center; }
.tt-exp-cta .cta-bg { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center 35%; filter:brightness(.3) saturate(.7); }
.tt-exp-cta::before {
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom,rgba(13,27,42,.72) 0%,rgba(13,27,42,.38) 50%,rgba(13,27,42,.88) 100%),
             radial-gradient(ellipse 80% 60% at 50% 50%,rgba(184,132,63,.07) 0%,transparent 70%);
}
.tt-exp-cta > * { position:relative; z-index:2; }
.exp-cta-eyebrow {
  font-size:10px; letter-spacing:4.5px; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:20px;
}
.exp-cta-eyebrow::before,
.exp-cta-eyebrow::after { content:''; width:40px; height:1px; background:var(--gold); opacity:.5; }
.exp-cta-title {
  font-family:'Cormorant Garamond',serif; font-size:clamp(36px,4.5vw,60px);
  font-weight:300; line-height:1.15; color:var(--light);
}
.exp-cta-title em { font-style:italic; color:var(--gold-light); }
.exp-cta-rule { display:flex; align-items:center; gap:14px; justify-content:center; margin:28px auto 28px; max-width:260px; }
.exp-cta-rule::before,
.exp-cta-rule::after { content:''; flex:1; height:1px; background:rgba(184,132,63,.4); }
.exp-cta-diamond { width:5px; height:5px; background:var(--gold); transform:rotate(45deg); }
.exp-cta-text { font-size:15px; font-weight:300; color:rgba(240,236,227,.58); max-width:560px; margin:0 auto 32px; line-height:1.78; }
.exp-cta-note { margin-top:20px; font-size:11px; color:rgba(240,236,227,.32); letter-spacing:1px; }

/* ════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .tt-exp-intro { grid-template-columns: 1fr; gap: 48px; padding: 72px 48px; }
  .tt-exp-intro::after { display: none; }
  .tt-exp-list-section, .tt-exp-regions { padding: 72px 48px; }
  .exp-list { grid-template-columns: 1fr; }
  .exp-item { grid-template-columns: 220px 1fr; }
  .exp-item:nth-child(even) { direction: ltr; }
  .exp-item:nth-child(odd) { border-right: none; }
  .exp-item:nth-last-child(-n+2) { border-bottom: none; }
  .exp-item { border-bottom: 1px solid rgba(184,132,63,.12); }
  .region-card { grid-template-columns: 1fr; height: auto; }
  .region-card:nth-child(even) { direction: ltr; }
  .region-img-wrap { height: 280px; }
  .region-img { position: relative; inset: auto; width: 100%; height: 100%; }
  .region-body { padding: 44px 48px; }
}

@media (max-width: 768px) {
  .tt-exp-hero { padding: 100px 24px 80px; }
  .tt-exp-intro, .tt-exp-list-section, .tt-exp-regions { padding: 64px 24px; }
  .exp-item { grid-template-columns: 1fr; }
  .exp-item-img { height: 200px; }
  .exp-item:nth-child(even) { direction: ltr; }
  .region-body { padding: 36px 24px; }
  .tt-exp-cta { padding: 96px 24px; }
}