/* ---------------------------------------------------------------------------
   Post grid — the /blogs/ listing and its rail, ported from Elementor section
   1aae54da (post-1638.css, Elementor Pro's posts and search-form widget CSS,
   ElementsKit's category list).

   Band      white; padding 5em 0 7em (3em tablet, 2em mobile); full width (the
             kit container is 1500px, wider than a 1440 viewport).
   Columns   70% (padding 1em 3em 1em 1em; 1em on tablet) and 29.333% (1em);
             they stack on mobile.
   Cards     Elementor Pro cards skin: 3 columns, 30px column / 35px row gaps.
   Rail      50px search with a square #3146CB button; pink gradient Welcome
             panel; #F4F4F4 Popular Post panel with the thumbnail on the right
             at 25%; pink gradient category list with 30px white glyphs.
   Pagination is the deliberate divergence (live's Load More was inert).
   --------------------------------------------------------------------------- */

.mp-block--post-grid.mp-archive {
  padding-block: 80px 112px;
  background: #fff;
  color: #292929;
}
.mp-block--post-grid .mp-inner { max-width: 1500px; padding-inline: 0; }

.mp-block--post-grid .mp-archive__head h2 { margin-bottom: .4em; font-size: var(--mp-fs-section); color: #000; }
.mp-block--post-grid .mp-archive__intro { font-size: 17px; line-height: var(--mp-lh-body); }

.mp-archive__cols { display: block; }
.mp-archive--railed .mp-archive__cols {
  display: grid;
  grid-template-columns: 70% 29.333%;
  align-items: start;
}
.mp-archive--railed .mp-archive__main { min-width: 0; padding: 16px 48px 16px 16px; }
.mp-archive--railed .mp-rail { min-width: 0; padding: 16px; }

/* cards ------------------------------------------------------------------- */
.mp-block--post-grid .mp-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 30px;
  row-gap: 35px;
}

.mp-ecard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, .15);
}

.mp-ecard__thumb { position: relative; display: block; margin-bottom: 20px; }
.mp-ecard__ratio { position: relative; display: block; padding-bottom: 64%; overflow: hidden; }
.mp-ecard__ratio img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.mp-ecard__badge {
  position: absolute;
  top: 0;
  right: 0;
  margin: 20px;
  padding: .6em 1.2em;
  border-radius: 4px;
  background: #D02479;
  color: #fff;
  font-family: var(--mp-font-kit);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.mp-ecard__text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-top: 20px;
  padding: 0 30px;
}

.mp-ecard__title {
  margin: 0 0 25px;
  font-family: var(--mp-font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -.7px;
  color: #292929;
}
.mp-ecard__title a { color: inherit; text-decoration: underline; }

/* cards_read_more_alignment: READ MORE sits at the bottom of the card */
.mp-ecard__more {
  display: inline-block;
  align-self: flex-start;
  margin: auto 0 20px;
  font-family: var(--mp-font-ui);
  font-size: 12px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #D02479;
  text-decoration: underline;
}

.mp-block--post-grid .page-numbers { background: #fff; border-color: #e4e4e4; color: #292929; }
.mp-block--post-grid .page-numbers:hover,
.mp-block--post-grid .page-numbers.current { background: #D02479; border-color: #D02479; color: #fff; }

/* rail -------------------------------------------------------------------- */
.mp-rail { display: flex; flex-direction: column; }
.mp-rail .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mp-rail__search { display: flex; min-height: 50px; margin: 0; }
.mp-rail__input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0 16.67px;
  border: 0;
  border-radius: 0;
  background: #eceeef;
  color: #55595c;
  font-family: var(--mp-font-kit);
  font-size: 16px;
  line-height: 1.5;
}
.mp-rail__submit {
  display: inline-flex;
  flex: 0 0 50px;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #3146CB;
  color: #fff;
  cursor: pointer;
  transition: background-color .3s;
}
.mp-rail__submit:hover,
.mp-rail__submit:focus-visible { background: #3AA9EA; }

.mp-rail__title,
.mp-rail__heading {
  margin: 0;
  font-family: var(--mp-font-display);
  font-size: 22px;
  line-height: 1.3;
}

.mp-rail__panel {
  margin: 0 0 16px;
  padding: 32px;
  border-radius: 15px;
  background: linear-gradient(180deg, #D02479 0%, #f2295b 100%);
  color: #fff;
}
.mp-rail__title { font-weight: 500; color: #fff; }
.mp-rail__intro {
  margin: 0;
  font-family: var(--mp-font-ui);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
}

/* Elementor divider: 50px wide, 7px gap above and below, 1px solid */
.mp-rail__divider { display: block; width: 50px; padding-block: 7px; }
.mp-rail__divider::before { content: ''; display: block; border-top: 1px solid currentColor; }
.mp-rail__panel .mp-rail__divider { color: rgba(255, 255, 255, .17); }

.mp-rail__popular { padding: 32px; background: #F4F4F4; }
.mp-rail__heading { font-weight: 400; color: #000; }
.mp-rail__popular .mp-rail__divider { color: #3146CB; }

.mp-rail__posts {
  display: grid;
  row-gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mp-rail__post { display: flex; align-items: flex-start; gap: 14px; }
.mp-rail__link {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--mp-font-ui);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
  text-decoration: underline;
}
.mp-rail__thumb { flex: 0 0 25%; display: block; }
.mp-rail__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.mp-rail__cats {
  margin: 0;
  padding: 11px;
  list-style: none;
  background: linear-gradient(180deg, #D02479 0%, #f2295b 100%);
}
.mp-rail__cats li + li { margin-top: 11px; }
.mp-rail__cats a {
  display: flex;
  align-items: center;
  color: #FFFCFC;
  font-family: var(--mp-font-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: color .3s;
}
.mp-rail__cats a:hover,
.mp-rail__cats a:focus-visible { color: #3AA9EA; }
.mp-rail__cat-icon { display: inline-flex; flex: 0 0 30px; width: 30px; height: 30px; }
.mp-rail__cat-icon svg { width: 30px; height: 30px; }
.mp-rail__cat-name { padding-left: 18px; }

/* responsive -------------------------------------------------------------- */
@media (max-width: 1024px) {
  .mp-archive--railed .mp-archive__cols { grid-template-columns: 100%; }   /* live: both columns 100% on tablets */
  .mp-archive--railed .mp-rail { padding: 16px; }
  .mp-block--post-grid.mp-archive { padding-block: 48px; }
  .mp-archive--railed .mp-archive__main { padding: 16px; }
  .mp-block--post-grid .mp-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-rail__link { font-size: 13px; }
  .mp-rail__cats a { font-size: 15px; }
}
@media (max-width: 767px) {
  .mp-block--post-grid.mp-archive { padding-block: 32px; }
  .mp-archive--railed .mp-archive__cols { grid-template-columns: 100%; }
  .mp-archive--railed .mp-archive__main,
  .mp-archive--railed .mp-rail { padding: 16px 14px; }
  .mp-block--post-grid .mp-archive__grid { grid-template-columns: 1fr; }
  .mp-ecard__ratio { padding-bottom: 50%; }   /* Elementor Pro's mobile item ratio */
  .mp-rail__link { font-size: 12px; }
  .mp-rail__cats a { font-size: 14px; }
}

/* Tablets: the Popular Post widget takes Elementor Pro's tablet default of two
   columns (it sets one only for desktop), 14px apart */
@media (min-width: 768px) and (max-width: 1024px) {
  .mp-rail__posts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
}