/* ===============================
   FONT
================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ===============================
   ROOT THEME
================================ */
:root {
  --border:#e5e7eb;
  --text-dark:#111827;
  --text-muted:#6b7280;
}

/* ===============================
   GRID
================================ */
.tour-list {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:18px;
}

/* ===============================
   CARD
================================ */
.tour-card {
  background:#ffffff;
  border-radius:22px;
  overflow:hidden; /* 🔑 CRITICAL */
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, .08);
  transition:.25s ease;
  padding: 0;          /* 🔑 REMOVE any padding */
  overflow: hidden;    /* 🔑 clip image to rounded*/
}

.tour-card:hover {
  transform:translateY(-4px);
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, .08);
}

.tour-link {
  display:block;
  color:inherit;
  text-decoration:none;
}

/* ===============================
   IMAGE (CRITICAL FIX)
================================ */
.tour-image {
  position:relative;
  height:150px;
  margin:0;              /* 🔑 remove gaps */
  padding:0;
}

.tour-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;

  /* ❌ REMOVE rounding from image */
  border-radius:0;
}

/* ===============================
   RIBBON (TOP RIGHT)
================================ */
.tour-ribbon {
  position:absolute;
  top:12px;
  right:12px;

  font-size:12px;
  font-weight:700;
  padding:6px 12px;
  border-radius:999px;
  color:#fff;
  z-index:3;
}

.tour-ribbon-highlight { background:#2563eb; }
.tour-ribbon-ranked   { background:#0f766e; }

/* ===============================
   CATEGORY BADGE (BOTTOM LEFT)
================================ */
.tour-badge {
  position:absolute;
  bottom:10px;
  left:10px;

  background:#fff;
  border:1px solid var(--border);
  padding:6px 12px;
  border-radius:999px;

  font-size:12px;
  font-weight:600;
  color:#111827;
}

/* ===============================
   CONTENT – TIGHTER
================================ */
.tour-info {
padding: 14px 16px 16px; /* padding ONLY below image */
}

.tour-title {
  font-size:15px;
  font-weight:700;
  line-height:1.32;
  margin:0 0 6px 0; /* 🔑 ensure no left margin */
  padding:0;
  color:#0f172a;
}

.tour-meta {
  font-size:13px;
  color:#64748b;
  margin-bottom:6px;
}

/* ===============================
   RATING
================================ */
.tour-rating {
  font-size:14px;
  margin-bottom:8px;
}

.stars {
  color:#f59e0b;
  font-weight:700;
}

.reviews {
  font-size:13px;
  color:#6b7280;
  margin-left:4px;
}

/* ===============================
   PRICE
================================ */
.tour-price {
  display:flex;
  align-items:baseline;
  gap:8px;
}

.tour-price .old {
  font-size:13px;
  color:#9ca3af;
  text-decoration:line-through;
}

.tour-price .new {
  font-size:19px;
  font-weight:800;
  color:#dc2626;
}

.tour-price .per {
  font-size:12px;
  color:#6b7280;
}












/* =================================================
   🔒 RELATED TOURS – FINAL HARD ISOLATION
   NOTHING from tour-details can override this
================================================= */

.related-isolated {
  padding-left: 16px;
  padding-right: 16px;
}

/* CARD */
.related-isolated .tour-card {
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  padding: 0 !important;
}

/* IMAGE MUST TOUCH CARD EDGES */
.related-isolated .tour-image {
  margin: 0 !important;
  padding: 0 !important;
  height: 150px;
}

/* IMAGE – NO ROUNDING, NO GAP */
.related-isolated .tour-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
}

/* PREVENT HERO / GLOBAL IMAGE RULES */
.related-isolated img {
  border-radius: 0 !important;
}

/* TITLE – FORCE BOLD & ALIGNMENT */
.related-isolated .tour-title {
  font-size: 15px;
  font-weight: 700 !important;
  line-height: 1.32;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  color: #0f172a;
}

/* CONTENT SPACING */
.related-isolated .tour-info {
  padding: 14px 16px 16px !important;
}

/* META / PRICE PROTECTION */
.related-isolated .tour-meta,
.related-isolated .tour-rating,
.related-isolated .tour-price {
  margin-left: 0 !important;
}

/* DESKTOP SPACING */
@media (min-width: 1024px) {
  .related-isolated {
    padding-left: 24px;
    padding-right: 24px;
  }
}