/* =====================================================================
   Your Trip (hub) — v2 (navy/teal) — grade de cards
   ===================================================================== */
.yt-sec { padding: 40px 0 0; }
.yt-lead {
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-cream);
  margin: 0 0 var(--space-3);
}

.yt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
@media (max-width: 900px) { .yt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .yt-grid { grid-template-columns: 1fr; } }

.yt-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 280px;
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255,255,255,0.12);
}
.yt-card__img {
  position: absolute; inset: 0; z-index: 1;
  background-size: cover; background-position: center;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.yt-card__img--ph {
  background-color: rgba(255,255,255,0.06);
  background-image: radial-gradient(rgba(235,237,230,0.10) 1.4px, transparent 1.4px);
  background-size: 16px 16px;
}
.yt-card:hover .yt-card__img { transform: scale(1.06); }
.yt-card__grad {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(39,44,76,0.1) 30%, rgba(39,44,76,0.92) 100%);
}
.yt-card__body { position: relative; z-index: 3; padding: var(--space-2); }
.yt-card__title {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--text-lg); line-height: 1.15;
  color: var(--color-white); margin: 0;
  transition: color .2s ease;
}
.yt-card:hover .yt-card__title { color: var(--color-teal); }
.yt-card__desc {
  font-size: var(--text-sm); line-height: 1.45;
  color: var(--color-cream); opacity: 0.9; margin: 6px 0 0;
}