/* =========================================================
   VELO VITAL — Trip detail page
   Reisdagboek / travel journal feel
   ========================================================= */

/* ---------- trip hero ---------- */
.trip-hero{
  position:relative;min-height:50vh;display:flex;align-items:flex-end;
  padding:10rem clamp(1.1rem,4vw,2.2rem) 3.5rem;overflow:hidden;isolation:isolate;
  background:var(--purple);
}
.trip-hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 20% 70%,rgba(255,47,178,.5),transparent 55%),
    radial-gradient(ellipse at 80% 20%,rgba(255,140,35,.45),transparent 50%);
  pointer-events:none;
}
.trip-hero__content{position:relative;max-width:var(--maxw);width:100%;margin:0 auto}
.trip-hero__back{
  display:inline-flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.8);
  font-size:.85rem;font-weight:600;margin-bottom:1.6rem;transition:color .3s;
}
.trip-hero__back:hover{color:#fff}
.trip-hero__back svg{transition:transform .3s var(--ease)}
.trip-hero__back:hover svg{transform:translateX(-4px)}
.trip-hero__route{
  display:flex;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap;
}
.trip-hero__from,.trip-hero__to{
  font-family:var(--font-d);font-size:clamp(2.6rem,7vw,5rem);font-weight:500;color:#fff;line-height:1.15;
}
.trip-hero__arrow{color:var(--orange);flex-shrink:0}
.trip-hero__subtitle{font-size:1.1rem;color:rgba(255,255,255,.88);margin-bottom:2rem;max-width:50ch}

.trip-hero__stats{display:flex;gap:2rem;flex-wrap:wrap}
.trip-hero__stat{display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.9);font-weight:600;font-size:.92rem}
.trip-hero__stat svg{color:var(--orange);flex-shrink:0}

.trip-hero__dl{
  margin-top:2rem;display:inline-flex;align-items:center;gap:.6rem;
  background:rgba(255,255,255,.16);backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,.4);padding:.8rem 1.4rem;border-radius:100px;
  color:#fff;font-weight:700;font-size:.92rem;transition:background .3s,transform .3s var(--ease);
}
.trip-hero__dl:hover{background:rgba(255,255,255,.28);transform:translateY(-2px)}

/* ---------- etappes timeline ---------- */
.etappes{max-width:var(--maxw);margin:0 auto;padding:4rem clamp(1.1rem,4vw,2.2rem) 2rem}
.etappes__head{text-align:center;margin-bottom:3.5rem}
.etappes__head h2{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:.6rem}
.etappes__head p{font-size:1.05rem;color:rgba(26,11,24,.65)}

.etappes__list{position:relative;display:flex;flex-direction:column;gap:0}

/* vertical timeline line */
.etappes__list::before{
  content:"";position:absolute;left:28px;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--pink),var(--orange));border-radius:2px;
}

.etappe{position:relative;display:grid;grid-template-columns:60px 1fr;gap:1.8rem;padding-bottom:3rem}
.etappe:last-child{padding-bottom:0}

/* timeline dot */
.etappe__dot{
  position:relative;z-index:2;width:58px;height:58px;border-radius:50%;
  background:var(--grad);color:#fff;display:grid;place-items:center;
  font-family:var(--font-d);font-size:1.1rem;font-weight:500;
  box-shadow:0 6px 20px -6px rgba(255,47,178,.5);
  border:3px solid var(--cream);
}

.etappe__content{
  background:#fff;border-radius:var(--r-lg);padding:2rem;
  border:1.5px solid rgba(128,0,255,.08);box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.etappe__content:hover{transform:translateY(-4px);box-shadow:var(--shadow)}

.etappe__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.etappe__title{font-size:1.4rem;color:var(--ink)}
.etappe__meta{display:flex;gap:1rem;flex-wrap:wrap}
.etappe__km,.etappe__tag{
  display:flex;align-items:center;gap:.35rem;font-size:.82rem;font-weight:700;
  color:var(--purple);background:rgba(128,0,255,.08);padding:.3rem .7rem;border-radius:100px;
}
.etappe__km svg{width:14px;height:14px}

.etappe__story{font-size:1rem;color:rgba(26,11,24,.72);line-height:1.7;margin-bottom:1.2rem}
.etappe__story strong{color:var(--ink);font-weight:600}

.etappe__highlights{
  list-style:none;display:flex;flex-direction:column;gap:.45rem;
  padding:1rem 0;border-top:1px solid rgba(128,0,255,.08);
}
.etappe__highlights li{
  position:relative;padding-left:1.5rem;font-size:.9rem;color:rgba(26,11,24,.68);
}
.etappe__highlights li::before{
  content:"";position:absolute;left:0;top:.4em;width:8px;height:8px;
  border-radius:50%;background:var(--grad);
}

.etappe__gpx{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;
  font-weight:700;font-size:.85rem;color:var(--purple);transition:transform .3s var(--ease);
}
.etappe__gpx:hover{transform:translateY(-2px)}
.etappe__gpx svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.etappe__gpx:hover svg{transform:translateY(2px)}

/* ---------- praktisch ---------- */
.trip-praktisch{
  background:var(--purple);position:relative;overflow:hidden;
  padding:5rem clamp(1.1rem,4vw,2.2rem);
}
.trip-praktisch::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 80% 30%,rgba(255,140,35,.35),transparent 50%),
              radial-gradient(circle at 20% 70%,rgba(255,47,178,.35),transparent 50%);
  pointer-events:none;
}
.trip-praktisch__inner{position:relative;max-width:var(--maxw);margin:0 auto}
.trip-praktisch h2{color:#fff;font-size:clamp(2rem,5vw,3rem);margin-bottom:2.5rem;text-align:center}
.trip-praktisch__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.trip-prak{
  background:rgba(255,255,255,.1);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r);padding:1.6rem;color:#fff;
}
.trip-prak__label{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin-bottom:.5rem}
.trip-prak__value{font-family:var(--font-d);font-size:1.5rem;font-weight:500;margin-bottom:.3rem}
.trip-prak__note{font-size:.88rem;color:rgba(255,255,255,.8)}

/* ---------- trip finish photo ---------- */
.trip-finish{
  max-width:var(--maxw);margin:0 auto;
  padding:1rem clamp(1.1rem,4vw,2.2rem) 4rem;
}
.trip-finish__frame{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow);
}
.trip-finish__img{
  width:100%;height:auto;display:block;
  aspect-ratio:16/9;object-fit:cover;
}
.trip-finish__caption{
  position:absolute;bottom:0;left:0;right:0;
  padding:2.5rem 2rem 1.4rem;
  background:linear-gradient(0deg,rgba(26,11,24,.72) 0%,transparent 100%);
  color:#fff;font-size:1rem;font-weight:600;
  display:flex;align-items:center;gap:.5rem;
}
.trip-finish__caption svg{color:var(--orange);flex-shrink:0}

/* ---------- tips voor onderweg ---------- */
.trip-tips{
  background:var(--purple);position:relative;overflow:hidden;
  padding:5rem clamp(1.1rem,4vw,2.2rem) 4rem;
}
.trip-tips::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 60%,rgba(255,47,178,.3),transparent 50%),
              radial-gradient(circle at 70% 20%,rgba(255,140,35,.3),transparent 50%);
  pointer-events:none;
}
.trip-tips__inner{position:relative;max-width:var(--maxw);margin:0 auto}
.trip-tips h2{color:#fff;font-size:clamp(2rem,5vw,3rem);margin-bottom:.6rem;text-align:center}
.trip-tips__intro{text-align:center;color:rgba(255,255,255,.8);font-size:1.05rem;margin-bottom:2.5rem}
.trip-tips__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem}

.trip-tip{
  display:flex;align-items:flex-start;gap:1rem;
  background:rgba(255,255,255,.1);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r);padding:1.4rem 1.6rem;
  color:#fff;text-decoration:none;
  transition:background .3s,transform .3s var(--ease),border-color .3s;
}
.trip-tip:hover{
  background:rgba(255,255,255,.18);transform:translateY(-3px);
  border-color:rgba(255,255,255,.4);
}
.trip-tip__icon{
  flex-shrink:0;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);display:grid;place-items:center;
  color:var(--orange);
}
.trip-tip__body{flex:1;min-width:0}
.trip-tip__label{
  font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--orange);margin-bottom:.35rem;
}
.trip-tip__text{font-size:.92rem;color:rgba(255,255,255,.85);line-height:1.5}
.trip-tip__ext{
  flex-shrink:0;color:rgba(255,255,255,.4);margin-top:.2rem;
  transition:color .3s,transform .3s var(--ease);
}
.trip-tip:hover .trip-tip__ext{color:rgba(255,255,255,.8);transform:translate(2px,-2px)}

.trip-tips__disclaimer{
  text-align:center;font-size:.75rem;color:rgba(255,255,255,.45);margin-top:2rem;
}

/* ---------- trip cta ---------- */
.trip-cta{padding:4rem clamp(1.1rem,4vw,2.2rem);text-align:center;background:var(--grad)}
.trip-cta__inner{max-width:550px;margin:0 auto;color:#fff}
.trip-cta h2{font-size:clamp(2rem,5vw,3rem);margin-bottom:1rem}
.trip-cta p{font-size:1.05rem;color:rgba(255,255,255,.92);margin-bottom:1.8rem}
.trip-cta .btn{--bg:#fff;color:var(--purple)}
.trip-cta .btn:hover{background:#fff;color:var(--purple-d)}

/* ---------- responsive ---------- */
@media(max-width:760px){
  .trip-hero{padding-top:7rem}
  .trip-hero__route{flex-direction:column;gap:.3rem}
  .trip-hero__arrow{transform:rotate(90deg)}
  .trip-praktisch__grid{grid-template-columns:1fr}
  .trip-tips__grid{grid-template-columns:1fr}
  .etappe{grid-template-columns:44px 1fr;gap:1rem}
  .etappe__dot{width:44px;height:44px;font-size:.9rem}
  .etappes__list::before{left:20px}
  .nav__links{display:none}
  .nav__cta{display:none}
  .nav__burger{display:flex}
}