/* ============================================================
   M.P Events & Tours — Destination Page Styles
   destination.css — Shared styles for all destination pages
   ============================================================ */

/* ── Quick Info Strip ────────────────────────────────────────── */
.dest-quickinfo {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding-block: var(--sp-4);
}
.dest-quickinfo__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  flex: 1;
  min-width: 180px;
  border-right: 1px solid var(--clr-border-light);
}
.dest-quickinfo__item:last-child { border-right: none; }
.dest-quickinfo__item svg { color: var(--clr-primary); flex-shrink: 0; margin-top: 2px; }
.dest-quickinfo__label {
  display: block;
  font-size: var(--fs-xxs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-bottom: var(--sp-1);
}
.dest-quickinfo__value {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--clr-text);
}

@media (max-width: 768px) {
  .dest-quickinfo { flex-direction: column; }
  .dest-quickinfo__item {
    border-right: none;
    border-bottom: 1px solid var(--clr-border-light);
    padding: var(--sp-4);
  }
  .dest-quickinfo__item:last-child { border-bottom: none; }
}

/* ── Attractions Grid ────────────────────────────────────────── */
.attractions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: var(--grid-gap);
  margin-top: var(--sp-4);
}

.attraction-card {
  background: var(--clr-white);
  border-radius: var(--radius-xl);
  padding: var(--sp-7);
  border: 1px solid var(--clr-border-light);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: box-shadow var(--transition-slow), transform var(--transition-slow);
}
.attraction-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.attraction-card--featured {
  background: var(--clr-primary-soft);
  border-color: rgba(181, 69, 27, 0.2);
  grid-column: span 1;
}
.attraction-card__icon {
  font-size: 1.75rem;
  line-height: 1;
}
.attraction-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--clr-secondary);
  margin: 0;
}
.attraction-card__desc {
  font-size: var(--fs-sm);
  color: var(--clr-text-secondary);
  line-height: var(--lh-relaxed);
  flex: 1;
  max-width: none;
}
.attraction-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

/* ── Info boxes (practical info section) ─────────────────────── */
.info-box {
  background: var(--clr-white);
  border-radius: var(--radius-xl);
  padding: var(--sp-7);
  border: 1px solid var(--clr-border-light);
  box-shadow: var(--shadow-xs);
}
.info-box__title {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--clr-secondary);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.info-box__title svg { color: var(--clr-primary); }

/* ── Nearby cards ────────────────────────────────────────────── */
.nearby-card {
  background: var(--clr-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--clr-border-light);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  display: block;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}
.nearby-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  text-decoration: none;
}
.nearby-card:hover h3 { color: var(--clr-primary); }