/*
 * Package listing grid: online-courses, offline_courses, practice-packs and their
 * ajax filter/load-more results (all render into .onlinePackResultDiv.pack-grid).
 * 3 cards per row on desktop, 2 on tablet, 1 on mobile; equal-height cards with the
 * price/buy bar pinned to the bottom. Overrides the global.css card rules that fixed
 * the text box at 250px (with an inner scrollbar) and the image at 185px.
 */
.pack-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin: 10px 0 30px !important;
}
/* Bootstrap's .row clearfix pseudo-elements would otherwise take up grid cells. */
.pack-grid:before,
.pack-grid:after { display: none !important; }

/* Card wrappers coming from the old column markup. */
.pack-grid > [class*="col-"],
.pack-grid > .grid-card-container {
  width: auto;
  float: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}
/* Full-width children, e.g. "No package found" messages. */
.pack-grid > .text-center,
.pack-grid > .col-md-12,
.pack-grid > .col-sm-12,
.pack-grid > .col-xs-12 { grid-column: 1 / -1; }

.pack-grid .grid-card,
.pack-grid > [class*="col-"] > a,
.pack-grid .service-block > a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.pack-grid > .grid-card-container { height: 100%; }
.pack-grid .grid-card-container .grid-card { width: auto; margin: 0; }   /* global.css fixes it at 263px */

.pack-grid .service-block {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0 !important;
}

/* Image: fixed shape, cropped to fit. */
.pack-grid .service-block .thumb { background: #eef1f4; }
.pack-grid .service-block .thumb img {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.pack-grid .service-block .content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.pack-grid .service-block .content .disc {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  padding: 14px 12px 8px;
}
/* Titles cut off after two lines so rows stay aligned. */
.pack-grid .service-block .content .disc h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 40px;
}

/* Price / buy bar always at the bottom of the card. */
.pack-grid .service-block .content .ftr-btm {
  position: static !important;
  transform: none !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-top: auto;
}
.pack-grid .service-block .content .ftr-btm .pull-left,
.pack-grid .service-block .content .ftr-btm .pull-right { float: none !important; }
.pack-grid .service-block .content .ftr-btm .purchase { margin-top: 0; }

/* Filter status line (result count / loading / errors) and Reset, driven by js/pack-filters.js. */
.pack-status-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  clear: both;
}
.pack-status { min-height: 20px; }
.pack-link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.pack-link-btn.pack-reset { text-decoration: none; }
.pack-link-btn:hover,
.pack-link-btn:focus-visible { color: #d72a22; }

/* No results. */
.pack-grid > .pack-empty {
  grid-column: 1 / -1;
  padding: 40px 16px;
  text-align: center;
}
.pack-empty p { margin-bottom: 14px; font-size: 16px; }

@media (max-width: 991px) {
  .pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 767px) {
  .pack-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pack-grid .service-block .content .ftr-btm .more-info { padding-left: 10px; }
  .pack-grid .service-block .content .ftr-btm .purchase { width: auto; border-radius: 0 0 10px 0; }
}