/* ==========================================================================
   Rinjani Atlas — trips.css  (Our Trips page only; requires main.css)
   Shared patterns used here (main.css): .text-hero/.page-hero__head/.h1, .split-head
   Sections: Hero · Trips (filter + grid) · On every trip · How to book
   ========================================================================== */

/* Intro elements stay hidden until trips.js animates them */
.js-motion:not(.ra-ready) :is(.site-header > *, .page-hero__title > *, .page-hero__side > *, .trips__bar) { visibility: hidden; }

/* ==========================================================================
   2. TRIPS — segmented filter + count, card grid (rinjani/trip-grid block)
   ========================================================================== */
.trips { padding: clamp(32px, 6vw, 48px) var(--gutter) clamp(72px, 12vw, 104px); scroll-margin-top: 24px; }
.trip-grid { display: contents; }
.trips__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }

/* Segmented control with sliding pill */
.seg { position: relative; flex: 1 1 300px; max-width: 480px; display: flex; padding: 5px; border-radius: 999px; background: var(--pill); }
.seg__ind {
  position: absolute; left: 5px; top: 5px; width: calc((100% - 10px) / var(--n, 3)); height: 48px; border-radius: 999px; background: var(--white);
  box-shadow: 0 1px 2px rgba(20,20,18,.06), 0 6px 16px -8px rgba(20,20,18,.18);
  transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .6s var(--ease);
}
.seg__btn {
  position: relative; flex: 1; min-width: 0; height: 48px; border: none; background: transparent; cursor: pointer; padding: 0;
  font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--text-3); transition: color .4s;
}
.seg__btn[aria-selected="true"] { color: var(--ink); }

.trips__count { display: flex; align-items: center; gap: 14px; font-family: var(--serif); font-style: italic; font-size: 20px; }
.trips__count-line { width: 40px; height: 1px; background: var(--line-3); }

.trips__grid { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }

.trip-card { display: flex; flex-direction: column; padding: 6px; border-radius: 26px; background: var(--cream); }
.trip-card[hidden] { display: none; }
.trip-card__photo { display: block; height: clamp(200px, 52vw, 240px); border-radius: 21px; }
.trip-card__photo img { transition: transform 1.1s var(--ease); }
.trip-card__photo::before, .trip-card__grade, .trip-card__photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.trip-card__photo::before { background: #B49A72; mix-blend-mode: soft-light; opacity: .55; }
.trip-card__grade { background: #D9CFBF; mix-blend-mode: color; opacity: .22; }
.trip-card__photo::after { background: linear-gradient(180deg, rgba(28,24,18,0) 50%, rgba(28,24,18,.45) 100%); }
.trip-card__dur { position: absolute; z-index: 1; left: 14px; top: 14px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--white); display: flex; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--ink); }
.trip-card__point { position: absolute; z-index: 1; left: 14px; bottom: 14px; height: 32px; padding: 0 12px 0 10px; gap: 7px; font-size: 12px; text-transform: none; letter-spacing: 0; }
.trip-card__body { flex: 1; display: flex; flex-direction: column; padding: 20px 14px 10px; }
.trip-card__via { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--kicker); }
.trip-card__title { margin-top: 4px; font-size: 23px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; }
.trip-card__title a { color: var(--ink); }
.trip-card__hl { list-style: none; margin: 16px 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.trip-card__hl li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.4; color: var(--text-body); }
.trip-card__hl li::before { content: ''; flex: none; width: 2px; height: 12px; border-radius: 2px; background: var(--ink); transform: rotate(18deg); }
/* "From USD 180 per person" — the lowest price of the trip (Trip details → Prices per person) */
.trip-card__price { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--text-3); }
.trip-card__amount { display: flex; align-items: baseline; gap: 6px; }
.trip-card__amount b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.trip-card__amount em { font-family: var(--serif); font-size: 15px; color: var(--text-3); }
.trip-card__price + .trip-card__diff { margin-top: 12px; padding-top: 12px; }
.trip-card__diff { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--text-3); }
.trip-card__level { display: flex; align-items: center; gap: 12px; }
.trip-card__level b { font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.trip-card__actions { margin-top: 18px; display: flex; align-items: center; gap: 8px; }
.trip-card__view {
  flex: 1; height: 52px; padding: 0 7px 0 22px; border-radius: 999px; background: var(--ink); color: var(--white);
  display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600; transition: background .3s;
}
.trip-card__view:hover { background: var(--ink-hover); color: var(--white); }
.trip-card__view-ico { width: 38px; height: 38px; border-radius: 50%; background: var(--white); color: var(--ink); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.trip-card__view-ico svg { transition: transform .55s var(--ease); }
.trip-card__wa { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--chip-2); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .3s, color .3s; }
.trip-card__wa:hover { background: var(--ink); color: var(--white); }

@media (min-width: 1280px) {
  .trips { padding: 64px 48px 128px; }
  .trips__bar { flex-wrap: nowrap; gap: 24px; }
  .seg { flex: none; max-width: none; }
  .seg__ind { width: 168px; height: 50px; }
  .seg__btn { flex: none; width: 168px; height: 50px; font-size: 15px; }
  .trips__count { gap: 16px; font-size: 22px; }
  .trips__count-line { width: 56px; }
  .trips__grid { margin-top: 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .trip-card { border-radius: 30px; transition: translate .6s var(--ease), box-shadow .6s var(--ease); }
  .trip-card:hover { translate: 0 -6px; box-shadow: 0 28px 50px -30px rgba(20,20,18,.35); }
  .trip-card:hover .trip-card__photo img { transform: scale(1.06); }
  .trip-card:hover .trip-card__view-ico svg { transform: translateX(3px); }
  .trip-card__photo { height: 300px; border-radius: 24px; }
  .trip-card__dur { left: 16px; top: 16px; height: 32px; padding: 0 13px; font-size: 13px; }
  .trip-card__point { left: 16px; bottom: 16px; height: 34px; padding: 0 14px 0 11px; gap: 8px; font-size: 13px; }
  .trip-card__body { padding: 22px 18px 12px; }
  .trip-card__via { font-size: 16px; }
  .trip-card__title { font-size: 25px; }
  .trip-card__hl { margin: 18px 0 24px; }
  .trip-card__view { padding: 0 8px 0 22px; }
}

/* ==========================================================================
   3. ON EVERY TRIP — 6 included items + "Not included" strip
   ========================================================================== */
.incl { padding: 0 var(--inset) var(--inset); }
.incl__panel { border-radius: var(--r-panel); background: var(--cream); padding: clamp(56px, 10vw, 88px) clamp(12px, 3.6vw, 32px) clamp(12px, 3.6vw, 32px); }
.incl__head { padding: 0 8px; max-width: 680px; }
.incl__grid { margin: clamp(32px, 6vw, 44px) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px; }
.incl__panel .incl__grid { margin-top: clamp(32px, 6vw, 44px); }
/* mobile/tablet: horizontal row card (icon left) */
.incl-card { padding: 20px 20px 22px 18px; border-radius: 22px; background: var(--white); display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; align-items: start; align-content: start; }
.incl-card .wp-block-icon { grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 50%; background: var(--pill); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.incl-card .wp-block-icon svg { width: 26px; height: 26px; }
.incl-card__title { grid-column: 2; margin-top: 4px; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }
.incl-card__text { grid-column: 2; margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--text-3); text-wrap: pretty; }

.not-incl { margin-top: 8px; padding: 20px 22px; border-radius: 22px; border: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; }
.not-incl p:first-child { flex: 1 1 300px; font-size: 15px; line-height: 1.55; color: var(--text-3); }
.not-incl strong { font-weight: 600; color: var(--ink); }
.not-incl .is-style-link-arrow { flex: none; align-self: flex-start; }
.not-incl .is-style-link-arrow a { padding-bottom: 5px; }
.not-incl .is-style-link-arrow a::after { width: 24px; height: 11px; }

@media (min-width: 1280px) {
  .incl__panel { padding: 96px 40px 40px; }
  .incl__head { padding: 0; max-width: none; }
  .incl__panel .incl__grid { margin-top: 64px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  /* desktop: vertical card, title at the bottom */
  .incl-card { min-height: 236px; padding: 28px 28px 30px; border-radius: 26px; display: flex; flex-direction: column; align-items: flex-start; }
  .incl-card .wp-block-icon { width: 56px; height: 56px; }
  .incl-card .wp-block-icon svg { width: 28px; height: 28px; }
  .incl-card__title { margin-top: auto; padding-top: 36px; font-size: 22px; line-height: 1.2; }
  .incl-card__text { margin-top: 10px; }
  .incl__panel .not-incl { margin-top: 16px; padding: 22px 28px; flex-wrap: nowrap; gap: 32px; }
  .not-incl p:first-child { flex: 1 1 auto; }
}

/* ==========================================================================
   4. HOW TO BOOK — 3 steps on a slanted-tick rail (rail added on the server) + CTA row
   ========================================================================== */
.book { padding: clamp(80px, 14vw, 112px) var(--gutter) 0; scroll-margin-top: 0; }

.steps { margin: 48px 0 0; display: flex; flex-direction: column; counter-reset: step; }
.book .steps { margin-top: 48px; }
/* mobile: vertical rail */
.steps__item { counter-increment: step; display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 22px; align-content: start; }
.steps__item > * { grid-column: 2; }
.steps__item::before { content: counter(step, decimal-leading-zero); grid-column: 2; grid-row: 1; font-family: var(--serif); font-style: italic; font-size: 44px; line-height: 1; }
.steps__rail { grid-column: 1; grid-row: 1 / span 3; display: flex; flex-direction: column; align-items: center; padding-top: 16px; }
.steps__dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.steps__item:last-child .steps__dot { background: var(--white); border: 1.4px solid var(--ink); }
.steps__ticks { flex: 1; display: flex; flex-direction: column; justify-content: space-around; align-items: center; padding: 12px 0 4px; }
.steps__ticks .tick { height: 10px; }
.steps__ticks .tick:nth-child(n+8) { display: none; }
.steps__item:last-child .steps__ticks { flex: none; height: 96px; padding-bottom: 0; -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent); mask-image: linear-gradient(180deg, #000 20%, transparent); }
.steps__item:last-child .steps__ticks .tick:nth-child(n+5) { display: none; }
.steps__title { margin-top: 16px; font-size: 20px; font-weight: 500; line-height: normal; letter-spacing: -0.02em; }
.steps__text { margin-top: 8px; padding-bottom: 36px; font-size: 15px; line-height: 1.6; color: var(--text-3); text-wrap: pretty; }

.book__cta { margin-top: 16px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.book .book__cta { margin-top: 16px; }
.book__cta .wp-block-buttons { flex: 1 1 240px; max-width: 320px; }
.book__cta .wp-block-button, .book__cta .wp-block-button__link { width: 100%; }
.book__cta .is-style-link-arrow { align-self: flex-start; }

@media (min-width: 700px) {
  /* tablet + desktop: 3 columns, one continuous rail */
  .book .steps { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps__item { display: flex; flex-direction: column; padding-right: 28px; }
  .steps__rail { order: -1; flex-direction: row; padding-top: 0; margin-right: -28px; }
  .steps__ticks, .steps__item:last-child .steps__ticks { flex: 1; height: auto; flex-direction: row; justify-content: space-between; padding: 0 16px; }
  .steps__item:last-child .steps__ticks { padding: 0 28px 0 16px; -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent); mask-image: linear-gradient(90deg, #000 30%, transparent); }
  .steps__ticks .tick { height: 12px; }
  .steps__ticks .tick:nth-child(n+8), .steps__item:last-child .steps__ticks .tick:nth-child(n+5) { display: block; }
  .steps__ticks .tick:nth-child(n+11), .steps__item:last-child .steps__ticks .tick:nth-child(n+11) { display: none; }
  .steps__text { padding-bottom: 0; }
  .steps__item::before { margin-top: 30px; font-size: 50px; }
  .steps__title { margin-top: 18px; font-size: 21px; }
  .book .book__cta { margin-top: 56px; }
}
@media (min-width: 1280px) {
  .book { padding: 128px 48px 32px; }
  .book .steps { margin-top: 88px; }
  .steps__item { padding-right: 48px; }
  .steps__rail { margin-right: -48px; }
  .steps__ticks { padding: 0 22px; }
  .steps__item:last-child .steps__ticks { padding: 0 48px 0 22px; }
  .steps__ticks .tick:nth-child(n+11), .steps__item:last-child .steps__ticks .tick:nth-child(n+11) { display: block; }
  .steps__item::before { margin-top: 36px; font-size: 56px; }
  .steps__title { margin-top: 22px; font-size: 22px; }
  .steps__text { margin-top: 10px; }
  .book .book__cta { margin-top: 72px; padding-top: 36px; flex-wrap: nowrap; gap: 28px; }
  .book__cta .wp-block-buttons { flex: none; max-width: none; }
  .book__cta .wp-block-button__link { width: auto; }
}

/* Reveal-on-scroll targets (trips.js) */
.js-motion :is(
  .incl__head .is-style-kicker, .incl__head .is-style-section, .incl__head .is-style-lead, .incl-card, .not-incl,
  .book .split-head .is-style-kicker, .book .split-head .is-style-section, .book .split-head .is-style-lead, .steps__item, .book__cta
):not(.is-in) { opacity: 0; }