/* Trekker Monkey | Premium listing cards, November 2026
   Intentionally scoped to existing .package-item components. */
body .package-item {
  --tm-ink:#172c39;
  --tm-accent:#087e8d;
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  isolation:isolate;
  background:#fff !important;
  border:1px solid rgba(18,62,74,.095) !important;
  border-radius:22px !important;
  overflow:hidden;
  box-shadow:0 7px 24px rgba(17,48,63,.065),0 1px 3px rgba(17,48,63,.045) !important;
  transition:transform .36s cubic-bezier(.2,.7,.2,1),box-shadow .36s ease,border-color .36s ease;
}
body .package-item:hover,
body .package-item:focus-within {
  transform:translateY(-7px);
  border-color:rgba(8,126,141,.28) !important;
  box-shadow:0 22px 48px rgba(17,48,63,.16),0 4px 12px rgba(17,48,63,.065) !important;
}
body .package-item .package-img {
  height:auto !important;
  aspect-ratio: 1.53 / 1;
  flex-shrink:0;
  position:relative;
  overflow:hidden;
  background:linear-gradient(130deg,#e6f1f0,#d6e1e8);
}
body .package-item .package-img::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(5,26,39,.22) 0%,transparent 43%,rgba(4,26,39,.26) 100%);
  pointer-events:none;
  transition:opacity .3s;
}
body .package-item .package-img::after { content:none !important; display:none !important; }
body .package-item .package-img img {
  width:100%;height:100%;
  display:block;
  object-fit:cover;
  transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .45s ease;
}
body .package-item:hover .package-img img {transform:scale(1.055);filter:saturate(1.08)}
body .package-item .package-img .package-overlay {
  z-index:3;
  background:linear-gradient(180deg,transparent 30%,rgba(0,29,40,.58));
  transition:opacity .3s ease;
}
body .package-item .package-overlay .btn {
  background:#fff !important;
  color:#123d49 !important;
  border:1px solid #fff !important;
  box-shadow:0 6px 22px rgba(0,0,0,.19);
  font-weight:700;
  font-size:.83rem;
  padding:11px 22px !important;
  transition:transform .2s,background .2s;
}
body .package-item .package-overlay .btn:hover {transform:translateY(-2px);background:#e7f5f5 !important}
body .package-item > .p-4 {
  padding:23px 23px 22px !important;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:0;
}
body .package-item > .p-4 h5 {
  color:var(--tm-ink);
  font:750 clamp(1.04rem,1.2vw,1.24rem)/1.38 Montserrat,sans-serif;
  letter-spacing:-.025em;
  margin:0 0 10px !important;
}
body .package-item > .p-4 p {
  color:#667583;
  font-size:.91rem;
  line-height:1.65;
  margin:0 0 19px;
  flex-grow:1;
}
body .package-item > .p-4 > .d-flex.justify-content-between {
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
  border-top:1px solid #eaf0f1;
  padding-top:16px;
  margin-top:auto;
}
body .package-item > .p-4 > .d-flex.justify-content-between .text-primary {
  color:#067f8e !important;
  font:800 1rem/1.4 Montserrat,sans-serif;
  letter-spacing:-.018em;
}
body .package-item > .p-4 > .d-flex.justify-content-between > span:last-child {
  color:#516572;
  font-size:.82rem;
  display:inline-flex;
  align-items:center;
  gap:3px;
}
body .package-item > .p-4 > .d-flex.justify-content-between i {color:#1597a2 !important}
/* Editorial / travel-guide cards have a visible, full-width CTA. */
body .package-item > .p-4 > a.btn {
  align-self:flex-start;
  margin-top:auto;
  background:#123e51 !important;
  border-color:#123e51 !important;
  color:#fff !important;
  padding:10px 20px !important;
  font-size:.84rem;
  font-weight:750;
  box-shadow:0 5px 14px rgba(18,62,81,.13);
  transition:background .2s,transform .2s;
}
body .package-item > .p-4 > a.btn:hover {background:#087e8d !important;border-color:#087e8d !important;transform:translateY(-2px)}
@media (hover:none) {
  body .package-item .package-overlay {opacity:1 !important;background:linear-gradient(180deg,transparent 55%,rgba(0,29,40,.56));align-items:flex-end !important;justify-content:flex-end !important;padding:12px}
  body .package-item .package-overlay .btn {padding:8px 15px !important;font-size:.76rem}
  body .package-item:hover {transform:none}
}
@media (max-width:767px) {
  body .package-item {border-radius:19px !important}
  body .package-item > .p-4 {padding:19px !important}
  body .package-item .package-img::after {top:12px;left:12px;font-size:8px}
}
@media (prefers-reduced-motion:reduce) {
  body .package-item,body .package-item *,body .package-item *::before,body .package-item *::after {transition:none !important;animation:none !important}
}