/* Collection listing cards: "Book now" on bookable ranges, "Enquiry" on stays and enquiry-only ranges.
   Same orange pill and forest icon as the floating CTA on range and stay pages (detail-hero.css). */
.card-cta{display:inline-flex;align-items:center;gap:12px;margin-top:16px;padding:6px 6px 6px 20px;border-radius:999px;background:var(--orange);color:var(--forest);font:600 14px/1 var(--body);letter-spacing:.02em;text-decoration:none;box-shadow:0 6px 18px #1b2a1e26;transition:background .2s,box-shadow .25s,transform .25s var(--tv-ease-reveal,ease)}
.card-cta-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--forest);color:var(--cream);font-size:14px;transition:transform .3s var(--tv-ease-reveal,ease)}
.card-cta:hover,.card-cta:focus-visible{background:var(--sand);box-shadow:0 10px 26px #1b2a1e3d}
.card-cta:hover .card-cta-icon,.card-cta:focus-visible .card-cta-icon{transform:rotate(45deg)}
.card-cta-enquire:hover .card-cta-icon,.card-cta-enquire:focus-visible .card-cta-icon{transform:translateY(3px)}
.card-cta:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
@media(max-width:600px){.card-cta{display:flex;justify-content:space-between;width:100%;min-height:46px}}
@media(prefers-reduced-motion:reduce){.card-cta,.card-cta *{transition:none!important}}
html.reduce-motion .card-cta,html.reduce-motion .card-cta *{transition:none!important}
/* Ranges and stays collection pages (Kaziranga and Manas) and "More to explore nearby": a light price ticket with the
   button beside it, in the site's own style (cream paper, thin forest outline, hard sand offset, an orange star on the
   label, the display face for the price). Safaris show the Indian and, when approved, the foreign price per jeep; stays
   their nightly price from Studio; without a price it reads "On enquiry". */
.card-buy{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 2px;padding:12px 12px 12px 18px;border:1px solid var(--forest);border-radius:2px;background:linear-gradient(135deg,#fffdf8 0%,#f7efe0 100%);box-shadow:4px 4px 0 #e2c9a3}

.card-buy .card-cta{margin-top:0;flex:none}
.card-price{flex:1 1 auto;display:grid;gap:3px;min-width:0;padding-right:16px;border-right:1px dashed #c9b28c;color:var(--forest)}
.card-price small{display:flex;align-items:center;gap:6px;color:var(--green);font:700 10px/1.2 var(--body);letter-spacing:.18em;text-transform:uppercase}
.card-price small::before{content:"\2726";color:var(--orange);font-size:11px;letter-spacing:0}
.card-price b{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;font:600 clamp(19px,1.55vw,23px)/1.15 var(--display);letter-spacing:-.015em;white-space:nowrap}
.card-price b.is-foreign{font-size:clamp(15px,1.15vw,17px);color:#3c5a41}
.card-price b.is-quiet{font:italic 600 clamp(17px,1.35vw,19px)/1.2 var(--display);color:#3c5a41}
.card-price i{padding:0;border:0;background:none;color:var(--green);font:700 9px/1.4 var(--body);font-style:normal;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:600px){.card-buy{flex-wrap:wrap}.card-price{flex-basis:100%;padding:0 0 10px;border-right:0;border-bottom:1px dashed #c9b28c}.card-buy .card-cta{width:auto;flex:1 1 auto;justify-content:space-between}}
/* The collection pages' cards get the same slim card boundary as the homepage and "More to explore" cards. */
.hub-collection .hub-card{box-sizing:border-box;border:1px solid #dccbab;border-radius:6px;background:#fffdf8;padding:10px 10px 16px;box-shadow:0 16px 30px -26px #1b2a1e4d}
.hub-collection .hub-card>:not(.card-image){padding-inline:6px}
.hub-collection .hub-card>.card-buy{margin-inline:6px}
.hub-collection .hub-card>.card-image{border-radius:3px}
/* Stay cards: the stay's gallery photos fade in one after another over the cover photo (card-slides.js). */
.card-image[data-card-slides]{position:relative;overflow:hidden}
.card-slides{position:absolute;inset:0;z-index:1;pointer-events:none}
/* Each photo slides in from the right over the one on show, which stays still underneath. */
.card-slides{overflow:hidden}
.card-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translateX(101%);transition:transform 1.15s cubic-bezier(.65,0,.35,1)}
.card-slides img.is-on{transform:none}
.card-slides img.is-out{transform:translateX(-101%)}
.card-slides img.is-reset{transition:none}
.card-image[data-card-slides] .card-index,.card-image[data-card-slides] .card-open{z-index:2}
@media(prefers-reduced-motion:reduce){.card-slides{display:none}}
html.reduce-motion .card-slides{display:none}
/* One look everywhere the price ticket appears (collection pages and "More to explore nearby"): the square,
   forest-outlined button with a hard offset, as on the collection pages. */
.card-buy .card-cta{border:1px solid var(--forest);border-radius:2px;box-shadow:4px 4px 0 var(--forest)}
.card-buy .card-cta:hover,.card-buy .card-cta:focus-visible{box-shadow:6px 6px 0 var(--forest)}
.card-buy .card-cta-icon{border-radius:2px}
/* On the collection pages the card photos also zoom in as the card appears (hub.css); that rule is more specific and
   replaced the slide, so the photos jumped in. Keep both here: the slide and the reveal zoom. */
html.motion-enabled .hub-collection .experience-card.reveal .card-image .card-slides img{transition:transform 1.15s cubic-bezier(.65,0,.35,1),scale 1.6s cubic-bezier(.22,1,.36,1)}
html.motion-enabled .hub-collection .experience-card.reveal .card-image .card-slides img.is-reset{transition:none}
/* Swiping back brings the earlier photo in from the left. Swipeable cards keep up/down page scrolling for the finger. */
.card-slides img.from-left{transform:translateX(-101%)}
.card-slides img.from-left.is-on{transform:none}
.card-image.is-swipeable{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.card-image.is-swipeable img{-webkit-user-drag:none}
/* A swipe by hand answers with a quick, smooth slide (autoplay keeps its calm one). */
.card-slides img.is-quick,html.motion-enabled .hub-collection .experience-card.reveal .card-image .card-slides img.is-quick{transition:transform .4s cubic-bezier(.22,1,.36,1),scale 1.6s cubic-bezier(.22,1,.36,1)}
/* The slideshow photos are not checked one by one by the on-screen watermark (media-guard.js): with many photos
   stacked in each card that froze the page for seconds. The card's cover keeps its mark, shown above the slideshow,
   so every photo shown in the card still carries the Travella mark (.wm-overlay sits above the slideshow). */