/* =====================================================================
   Destinations — International Trip
   Reuses tokens from style.css (:root vars, .section, .sub-title,
   .sec-title, .btn, .chip radius scale, floatY keyframe) so the page
   blends with Home & About. No new colours, fonts or radii introduced.
   ===================================================================== */

/* ---------- PAGE HERO (mirrors the existing .cta-section treatment) ---------- */
.page-hero{position:relative;padding:120px 0 110px;text-align:center;color:#fff;overflow:hidden}
.page-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.12);animation:phZoom 14s ease-out forwards}
@keyframes phZoom{to{transform:scale(1)}}
.page-hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(8,30,37,.9),rgba(17,61,72,.74))}
.page-hero-inner{position:relative;z-index:2;max-width:820px;margin:0 auto}
.page-hero .sub-title{color:#7fd0f2;justify-content:center}
.page-hero .sub-title::before{background:#7fd0f2}
.page-hero-title{font-family:var(--font-title);font-size:46px;font-weight:700;color:#fff;margin-bottom:16px}
.page-hero-text{color:rgba(255,255,255,.9);font-weight:500;margin-bottom:26px}
.page-crumb{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:rgba(255,255,255,.85)}
.page-crumb a{transition:color .3s ease}
.page-crumb a:hover{color:#7fd0f2}
.page-crumb i{font-size:10px;color:#7fd0f2}
.page-crumb span{color:#7fd0f2}

/* ---------- QUICK JUMP STRIP ---------- */
.dest-jump{background:var(--light);border-bottom:1px solid var(--border)}
.dest-jump-inner{display:flex;gap:12px;padding:22px 0;overflow-x:auto;scrollbar-width:none}
.dest-jump-inner::-webkit-scrollbar{display:none}
.dest-jump .chip{flex-shrink:0}

/* ---------- SHARED CHIP ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:50px;
  font-family:var(--font-title);font-size:13.5px;font-weight:600;color:var(--accent);
  background:#fff;border:1px solid var(--border);
  transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s ease,box-shadow .3s ease}
.chip i{font-size:11px;color:var(--sky);transition:color .3s ease}
.chip:hover{background:var(--accent);color:#fff;border-color:var(--accent);
  transform:translateY(-3px);box-shadow:0 12px 24px -12px rgba(17,61,72,.7)}
.chip:hover i{color:#fff}

/* ---------- ZIG-ZAG BAND ---------- */
.trip-band{position:relative;padding:82px 0;overflow:hidden;scroll-margin-top:24px}
.trip-band--tint{background:var(--light)}
.trip-band::before{                       /* soft brand glow, matches About */
  content:"";position:absolute;top:-160px;right:-180px;width:520px;height:520px;
  background:radial-gradient(circle,rgba(26,134,199,.12),transparent 62%);
  pointer-events:none;z-index:0}
.trip-band--tint::before{left:-180px;right:auto}
.trip-row{position:relative;z-index:1}
/* Grid, columns, gap, order, vertical alignment & responsive stacking are
   handled with Tailwind utilities in the markup so both columns stay
   equal-height and perfectly aligned. */

/* ---------- MEDIA · SLIDER ---------- */
.trip-media{position:relative}
.trip-slider{position:relative;border-radius:24px;overflow:hidden;
  box-shadow:0 34px 60px -22px rgba(9,80,130,.45)}
.trip-slide{position:relative;height:380px;overflow:hidden}
.trip-slide img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.1);transition:transform 7s ease}
.trip-slider .swiper-slide-active img{transform:scale(1)}
.trip-slide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,30,37,.42),transparent 45%)}

/* Desktop: the content column sets the row height; the slider is pinned to
   fill the media column without dictating its size, so the image and the
   content always share the same height and their top/bottom edges line up. */
@media (min-width:1024px){
  .trip-media{min-height:470px}
  .trip-slider{position:absolute;inset:0}
  .trip-slider,.trip-slider .swiper-wrapper,.trip-slide{height:100%}
}

/* arrows */
.trip-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:14px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background .3s ease,color .3s ease,transform .3s ease}
.trip-arrow:hover{background:#fff;color:var(--accent);transform:translateY(-50%) scale(1.06)}
.trip-prev{left:18px}
.trip-next{right:18px}

/* dots */
.trip-dots{position:absolute;left:0;right:0;bottom:18px;z-index:6;
  display:flex;justify-content:center;gap:8px}
.trip-dots .swiper-pagination-bullet{width:9px;height:9px;margin:0;background:#fff;opacity:.5;
  border-radius:50px;transition:width .3s ease,opacity .3s ease}
.trip-dots .swiper-pagination-bullet-active{opacity:1;width:26px}

/* duration badge */
.trip-badge{position:absolute;left:22px;top:22px;z-index:7;
  display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:14px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 20px 40px -14px rgba(9,80,130,.42);
  font-family:var(--font-title);font-weight:600;font-size:15px;color:var(--heading);
  animation:floatY 5s ease-in-out infinite}
.trip-badge i{color:var(--blue);font-size:14px}
.trip-row--content-left .trip-badge{left:auto;right:22px}

/* ---------- CONTENT ---------- */
.trip-content{position:relative}
.trip-content>*{position:relative;z-index:1}
/* declared after the rule above so the absolute watermark wins */
.trip-num{position:absolute;top:-56px;right:-4px;z-index:0;pointer-events:none;
  font-family:var(--font-title);font-weight:700;font-size:104px;line-height:1;
  color:rgba(26,134,199,.1)}
.trip-title{font-size:34px;padding:4px 0 6px}
.trip-title span{color:var(--sky)}
.trip-intro{color:var(--body-strong);font-weight:500;font-size:16.5px;line-height:1.72;margin-bottom:4px}

/* meta tiles */
.trip-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:22px 0 26px}
.trip-meta li{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;
  background:var(--light);border:1px solid var(--border);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.trip-band--tint .trip-meta li{background:#fff}
.trip-meta li:hover{transform:translateY(-4px);border-color:rgba(26,134,199,.35);
  box-shadow:0 18px 32px -18px rgba(9,80,130,.6)}
.tm-ico{flex-shrink:0;width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--blue))}
.tm-label{display:block;font-size:11px;font-weight:600;letter-spacing:.6px;
  text-transform:uppercase;color:var(--sky)}
.tm-value{display:block;font-family:var(--font-title);font-weight:600;font-size:15px;
  color:var(--heading);line-height:1.35}

/* block headings */
.trip-block{margin-top:24px}
.trip-block:first-child{margin-top:0}
.trip-block-title{display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-family:var(--font-title);font-size:16px;font-weight:600;color:var(--heading)}
.trip-block-title i{color:var(--sky);font-size:14px}
.trip-block-title::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--border),transparent)}
.trip-chips{display:flex;flex-wrap:wrap;gap:10px}
.trip-band--tint .trip-chips .chip{background:#fff}

/* experiences */
.trip-exp{display:grid;gap:11px}
.trip-exp li{position:relative;padding-left:30px;font-size:15.2px;line-height:1.65;color:var(--body)}
.trip-exp li::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;font-size:10px;color:#fff;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--blue))}

/* ---------- READ MORE (expandable) ---------- */
.trip-more{max-height:0;overflow:hidden;
  transition:max-height .55s cubic-bezier(.65,.05,.36,1)}
.trip-more-inner{padding-top:8px;opacity:0;transform:translateY(12px);
  transition:opacity .45s ease .08s,transform .45s ease .08s}
.trip-more.is-open .trip-more-inner{opacity:1;transform:translateY(0)}

.trip-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:28px}
.trip-toggle{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:50px;
  cursor:pointer;background:transparent;border:2px solid rgba(17,61,72,.18);color:var(--accent);
  font-family:var(--font-title);font-weight:600;font-size:15px;
  transition:background .35s ease,color .35s ease,border-color .35s ease,transform .35s ease,box-shadow .35s ease}
.trip-toggle:hover{background:var(--accent);color:#fff;border-color:var(--accent);
  transform:translateY(-3px);box-shadow:0 14px 26px -12px rgba(17,61,72,.6)}
.trip-toggle i{font-size:12px;transition:transform .4s ease}
.trip-toggle[aria-expanded="true"] i{transform:rotate(180deg)}

/* ---------- DOMESTIC · PLACEHOLDER ---------- */
.soon{text-align:center}
.soon-inner{max-width:660px;margin:0 auto}
.soon-ico{width:96px;height:96px;margin:0 auto 26px;border-radius:28px;
  display:flex;align-items:center;justify-content:center;font-size:38px;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--blue));
  box-shadow:0 24px 46px -18px rgba(9,80,130,.6);animation:floatY 5s ease-in-out infinite}
.soon-text{margin-bottom:30px}
.soon-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:34px}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .page-hero-title{font-size:38px}
  .trip-title{font-size:30px}
}
@media (max-width:992px){
  .trip-band{padding:60px 0}
  .trip-badge,.trip-row--content-left .trip-badge{left:18px;right:auto}
  .trip-num{top:-44px;font-size:86px}
}
@media (max-width:600px){
  .page-hero{padding:80px 0 74px}
  .page-hero-title{font-size:29px}
  .trip-slide{height:260px}
  .trip-arrow{width:40px;height:40px;font-size:13px}
  .trip-prev{left:12px}
  .trip-next{right:12px}
  .trip-meta{grid-template-columns:1fr}
  .trip-num{display:none}
  .trip-title{font-size:26px}
  .trip-actions .btn,.trip-toggle{width:100%;justify-content:center}
}