/* Progress.tz v3.1.1.12 — Shorts 2x2 grid + Load More placement */

/* This release intentionally overrides the legacy single-column home rule. */
.progress-shorts-grid-v31112{
  display:grid!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  overflow:visible!important;
  grid-auto-flow:row!important;
  grid-auto-columns:auto!important;
  align-items:stretch!important;
}

.progress-shorts-grid-v31112 > [data-short-card-v31112]{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
}

.progress-shorts-grid-v31112 > [data-short-card-v31112].pz-short-hidden-v31112{
  display:none!important;
}

/* Desktop + tablet: exactly two columns; the initial four cards make two rows. */
@media (min-width:700px){
  .progress-shorts-grid-v31112{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:20px!important;
  }

  .progress-shorts-grid-v31112 > [data-short-card-v31112]{
    grid-column:auto!important;
  }

  .progress-shorts-grid-v31112 .ps-media,
  .progress-shorts-grid-v31112 .feature-media,
  .progress-shorts-grid-v31112 .featured-media,
  .progress-shorts-grid-v31112 .media-wrap,
  .progress-shorts-grid-v31112 .short-media{
    aspect-ratio:4 / 3!important;
    height:auto!important;
    overflow:hidden!important;
  }

  .progress-shorts-grid-v31112 .ps-media img,
  .progress-shorts-grid-v31112 .ps-media video,
  .progress-shorts-grid-v31112 .feature-media img,
  .progress-shorts-grid-v31112 .feature-media video,
  .progress-shorts-grid-v31112 .featured-media img,
  .progress-shorts-grid-v31112 .featured-media video,
  .progress-shorts-grid-v31112 .media-wrap img,
  .progress-shorts-grid-v31112 .media-wrap video,
  .progress-shorts-grid-v31112 .short-media img,
  .progress-shorts-grid-v31112 .short-media video{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
}

/* Mobile: preserve the established one-card reading flow. */
@media (max-width:699px){
  .progress-shorts-grid-v31112{
    grid-template-columns:minmax(0,1fr)!important;
    gap:16px!important;
  }
}

/* CTA is a sibling after the Shorts grid, never inside or beside cards. */
.pz-shorts-load-more-v31112{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px 14px;
  margin:22px 0 10px;
  padding:0;
  clear:both;
}

.pz-shorts-load-more-btn-v31112{
  appearance:none;
  min-width:156px;
  min-height:46px;
  padding:11px 20px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--navy);
  color:#fff;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  transition:transform .18s ease,opacity .18s ease;
}

.pz-shorts-load-more-btn-v31112:hover{transform:translateY(-1px)}
.pz-shorts-load-more-btn-v31112:focus-visible{outline:3px solid color-mix(in srgb,var(--green) 55%,transparent);outline-offset:3px}
.pz-shorts-load-more-btn-v31112[disabled]{opacity:.62;cursor:default;transform:none}
.pz-shorts-load-more-count-v31112{font-size:12px;color:var(--muted);font-weight:700}

/* Keep the existing Shorts advertisement after the CTA rather than breaking the 2x2 card grid. */
.pz-shorts-inline-ad-v31112{
  width:100%;
  margin:14px 0 24px;
}
