/* =====================================================
   Maestro Lux Moto — TOURS booking cards (light theme)
   Shared by the Elementor "Tours" widget, the CPT archive
   and the [mlm_tours_grid] shortcode.

   Colours use var(--mlm-*, <theme default>) WITHOUT defining
   the variable on the grid itself — so the Elementor Style tab
   can set --mlm-* on the widget wrapper and have it inherit
   down into the cards. Outside Elementor the fallback wins.
   ===================================================== */
.mlm-tours-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  align-items: stretch;
}
.mlm-tours-grid.mlm-cols-1 { grid-template-columns: 1fr; }
.mlm-tours-grid.mlm-cols-2 { grid-template-columns: repeat(2, 1fr); }
.mlm-tours-grid.mlm-cols-3 { grid-template-columns: repeat(3, 1fr); }
.mlm-tours-grid.mlm-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── CARD ── */
.mlm-tcard {
  display: flex; flex-direction: column; height: 100%;
  background: var(--mlm-card-bg, #ffffff);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .08);
  transition: transform .28s ease, box-shadow .28s ease;
}
.mlm-tcard:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(16, 24, 40, .16); }

/* Media */
.mlm-tcard-media { position: relative; display: block; aspect-ratio: 16 / 11; overflow: hidden; }
.mlm-tcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mlm-tcard:hover .mlm-tcard-media img { transform: scale(1.06); }
.mlm-tcard-noimg {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  background: linear-gradient(135deg, #fdf1df, #f6f7f9);
}
.mlm-tcard-noimg i { font-size: 46px; color: var(--mlm-accent, #e5a141); opacity: .65; }

/* Discount badge */
.mlm-tcard-badge {
  position: absolute; top: 16px; left: 16px;
  background: var(--mlm-accent, #e5a141); color: var(--mlm-badge-text, #ffffff);
  font-size: 13px; font-weight: 700; letter-spacing: .2px;
  padding: 7px 15px; border-radius: 22px;
  box-shadow: 0 6px 16px rgba(229, 161, 65, .35);
}

/* Body */
.mlm-tcard-body { display: flex; flex-direction: column; gap: 13px; padding: 22px 24px 26px; flex: 1; }
.mlm-tcard-title { margin: 0; font-size: 23px; font-weight: 800; line-height: 1.2; }
.mlm-tcard-title a {
  color: var(--mlm-title, #16202f); text-decoration: none;
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mlm-tcard-title a:hover { color: var(--mlm-accent, #e5a141); }

.mlm-tcard-loc { display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--mlm-muted, #6b7280); }
.mlm-tcard-loc i { color: var(--mlm-accent, #e5a141); font-size: 15px; }

.mlm-tcard-meta { display: flex; align-items: center; gap: 16px; font-size: 14.5px; color: var(--mlm-muted, #6b7280); }
.mlm-tcard-meta-item { display: inline-flex; align-items: center; gap: 8px; }
.mlm-tcard-meta-item i { color: var(--mlm-accent, #e5a141); }
.mlm-tcard-meta-sep { width: 1px; height: 16px; background: rgba(16, 24, 40, .14); }

/* Footer: price + button */
.mlm-tcard-foot {
  margin-top: auto; padding-top: 6px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.mlm-tcard-price { display: flex; flex-direction: column; line-height: 1.15; }
.mlm-tcard-from { font-size: 14px; color: var(--mlm-muted, #6b7280); }
.mlm-tcard-from s { opacity: .85; }
.mlm-tcard-now { font-size: 28px; font-weight: 800; color: var(--mlm-price, var(--mlm-accent, #e5a141)); }
.mlm-tcard-now small { font-size: 14px; font-weight: 500; color: var(--mlm-muted, #6b7280); }
.mlm-tcard-onreq { font-size: 16px; font-weight: 700; color: var(--mlm-title, #16202f); }

.mlm-tcard-btn {
  flex: none;
  border: 1.5px solid var(--mlm-accent, #e5a141); color: var(--mlm-btn-text, var(--mlm-accent, #e5a141)); background: transparent;
  padding: 12px 22px; border-radius: 30px; font-size: 15px; font-weight: 600;
  text-decoration: none; white-space: nowrap; transition: all .25s ease;
}
.mlm-tcard-btn:hover { background: var(--mlm-accent, #e5a141); color: #fff; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .mlm-tours-grid.mlm-cols-3,
  .mlm-tours-grid.mlm-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .mlm-tours-grid,
  .mlm-tours-grid.mlm-cols-2,
  .mlm-tours-grid.mlm-cols-3,
  .mlm-tours-grid.mlm-cols-4 { grid-template-columns: 1fr; }
}