/*!
 * author v1.0.2 (Agus Muhammad Teguh)
 * Copyright 2026 The Bootstrap Authors
 */

.promo-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* ===== LINK WRAPPER ===== */
.promo-link {
  text-decoration: none;
  color: inherit;
  display: block;
  height: 100%;
}

/* ===== CARD ===== */
.promo-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  height: 100%;
}
.promo-link:hover .promo-card {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}

/* ===== IMAGE ===== */
.promo-image img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* ===== CONTENT ===== */
.promo-content {
  padding: 18px;
}

.promo-content h3 {
     font-size: 16px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0px;
    line-height: 1.4;
}


.price {
    font-size: 18px;
    font-weight: 800;
    color: #f39c12;
}

/* ===== ACCESSIBILITY ===== */
.promo-link:focus-visible .promo-card {
  outline: 3px solid #2b7cff;
  outline-offset: 2px;
}

/* ============================= */
/* 📱 TABLET */
/* ============================= */
@media (max-width: 1024px) {
  .promo-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================= */
/* 📱 MOBILE (2 per row) */
/* ============================= */
@media (max-width: 600px) {
  .promo-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .promo-image img {
    height: 140px;
  }

  .promo-content {
    padding: 14px;
  }

  .promo-content h3 {
    font-size: 14px;
  }

  .price {
    font-size: 16px;
  }
}