/* ---------------------------------------------------------------------------
   Post list — /blogs/' band of recent sector posts (ElementsKit post list
   6c4d36a7, post-1638.css + ElementsKit common.css).

   Rows padded 29px 30px, 8px radius, #000 under the featured image (cover)
   with a rgba(34,34,34,.7) veil that deepens on hover; 84px thumbnail with 8px
   radius; title 16px/24px 500 white. Each item is padded 15px, so rows sit at
   x 15-1425 and 136px apart at 1440. The section is white, 120px below.
   On mobile the inline list wraps two to a row (live: 195px items at 390).
   --------------------------------------------------------------------------- */

.mp-plist { background: #fff; }

.mp-plist__items {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mp-plist__item { width: 100%; padding: 15px; }

.mp-plist__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 29px 30px;
  overflow: hidden;
  border-radius: 8px;
  background: #000 center / cover no-repeat;
  color: #fff;
  text-decoration: none;
}
.mp-plist__row::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(34, 34, 34, .7);
  transition: background-color .4s;
}
.mp-plist__row:hover::after,
.mp-plist__row:focus-visible::after { background: rgba(34, 34, 34, .9); }

.mp-plist__thumb,
.mp-plist__title { position: relative; z-index: 1; }

.mp-plist__thumb {
  flex: 0 0 84px;
  width: 84px;
  height: auto;
  border-radius: 8px;
}

.mp-plist__title {
  font-family: var(--mp-font-ui);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
}

@media (max-width: 767px) {
  .mp-plist__item { width: 50%; }
  .mp-plist__row { flex-wrap: wrap; }
}

/* tablets: two per row, as live's inline list wraps there too */
@media (min-width: 768px) and (max-width: 1024px) {
  .mp-plist__item { width: 50%; }
}