/* ─── Destinations Section ──────────────────────────────────────── */
.mk-destinations {
  min-block-size: 79vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--green-900);
  padding-block: var(--space-24);
}

.mk-section-header--light .mk-section-header__title {
  color: var(--paper);
}

.mk-section-header--light .mk-section-header__subtitle {
  color: var(--paper);
  opacity: 0.7;
}

.mk-destinations .mk-section-header__title,
.mk-destinations .mk-section-header__subtitle {
  color: var(--paper-warm);
}

/* Wider than the shared container so the four cards have more room to
   grow, matching the bigger/more-spaced layout requested for this
   section specifically. inline-size:100% is required here: .mk-destinations
   is a column-direction flex container, and a flex item with auto
   inline margins (from .mk-container) never gets the default stretch
   behaviour — without an explicit size it shrinks to fit its content
   instead of filling up to max-inline-size. */
.mk-destinations > .mk-container {
  inline-size: 100%;
  max-inline-size: 1400px;
}

/* ─── Grid ──────────────────────────────────────────────────────── */
.mk-destinations__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  margin-block-start: var(--space-8);
}

/* ─── Card ──────────────────────────────────────────────────────── */
.mk-dest-card {
  position: relative;
  aspect-ratio: 3 / 4.4;
  cursor: pointer;
}

/* Rounded/clipped photo frame, kept separate from the card box so the
   best-seller badge (a sibling) can hang outside its corner instead of
   being clipped along with the photo. */
.mk-dest-card__frame {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.mk-dest-card__img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.mk-dest-card:hover .mk-dest-card__img {
  transform: scale(1.05);
}

.mk-dest-card__img--zoom {
  transform: scale(1.05);
}

.mk-dest-card:hover .mk-dest-card__img--zoom {
  transform: scale(1.1);
}

.mk-dest-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.75) 0%,
    rgb(0 0 0 / 0.15) 50%,
    transparent 100%
  );
}

.mk-dest-card__name {
  position: absolute;
  inset-block-end: var(--space-4);
  inset-inline: var(--space-4);
  font-size: clamp(1.25rem, 1.6vw, 1.625rem);
  font-weight: var(--fw-bold);
  color: var(--paper-warm);
  text-align: center;
}

/* ─── BEST SELLER badge: hangs off the card's top corner ──────────── */
.mk-dest-card__badge {
  position: absolute;
  inset-block-start: -2.25rem;
  inset-inline-start: -2.25rem;
  z-index: 2;
}

/* ─── Tablet (2 columns) ────────────────────────────────────────── */
@media (max-width: 768px) {
  .mk-destinations__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}