/* ── Related articles ──
   A plain card grid. Everything is a variable so the Elementor controls drive it. */

.pra{
  --pra-cols:2;
  --pra-gap:22px;
  --pra-ink:var(--ps-black,#111111);
  --pra-muted:#5a5a66;
  --pra-accent:var(--ps-purple,#6F00FF);
  --pra-rule:var(--ps-rule,#DEDEDE);
  --pra-radius:var(--ps-radius,10px);

  font-family:"Lexend",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:400;
  letter-spacing:-.05em;
  color:var(--pra-ink);
}
.pra *{font-family:inherit;letter-spacing:inherit;box-sizing:border-box}

.pra-grid{
  display:grid;
  grid-template-columns:repeat(var(--pra-cols),minmax(0,1fr));
  gap:var(--pra-gap);
}

.pra .pra-card{
  display:flex;flex-direction:column;gap:9px;
  text-decoration:none!important;
  color:var(--pra-ink)!important;
  min-width:0;
}
.pra-thumb{display:block;overflow:hidden;border-radius:var(--pra-radius);line-height:0}
.pra-thumb img{width:100%;height:auto;display:block;transition:transform .25s ease}
.pra .pra-card:hover .pra-thumb img{transform:scale(1.03)}

.pra-body{display:flex;flex-direction:column;gap:5px;min-width:0}
.pra-title{font-weight:700;line-height:1.3;transition:color .15s ease}
:where(.pra-title){font-size:1.02rem}
.pra .pra-card:hover .pra-title{color:var(--pra-accent)}

.pra-date{color:var(--pra-accent);font-weight:600}
:where(.pra-date){font-size:.8rem}
.pra-excerpt{color:var(--pra-muted);line-height:1.55}
:where(.pra-excerpt){font-size:.86rem}

.pra-empty{color:var(--pra-muted);margin:0;text-align:center}
.pra-empty p{margin:0}
.pra-empty p + p{margin-top:.6em}
:where(.pra-empty){font-size:.9rem}

.pra-pager{
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  margin-top:26px;padding-top:18px;
  border-top:1px solid var(--pra-rule);
}
.pra .pra-page{
  border:1px solid var(--pra-rule);
  border-radius:var(--ps-pill,99px);
  padding:8px 18px;
  color:var(--pra-ink)!important;
  text-decoration:none!important;
  font-weight:600;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
:where(.pra-page){font-size:.82rem}
.pra .pra-page:hover{
  background:var(--pra-accent);
  border-color:var(--pra-accent);
  color:#fff!important;
}
.pra-count{color:var(--pra-muted)}
:where(.pra-count){font-size:.8rem}

/* Columns come from the widget's responsive control, which writes --pra-cols
   per breakpoint. Nothing here overrides it. */
.pra-item{min-width:0}

.pra-more{display:flex;justify-content:center;margin-top:26px;position:relative}
.pra-more.is-auto .pra-more-btn{display:none}
.pra-more.is-auto.is-loading::after{
  content:"";
  width:22px;height:22px;
  border:2px solid var(--pra-rule);
  border-top-color:var(--pra-accent);
  border-radius:50%;
  animation:pra-spin .7s linear infinite;
}
@keyframes pra-spin{to{transform:rotate(360deg)}}

.pra .pra-more-btn{
  border:1px solid var(--pra-rule);
  border-radius:var(--ps-pill,99px);
  background:none;
  padding:10px 22px;
  font:inherit;font-size:.84rem;font-weight:600;
  color:var(--pra-ink);
  cursor:pointer;appearance:none;box-shadow:none;
  transition:background .15s ease,color .15s ease,border-color .15s ease
}
.pra .pra-more-btn:hover{
  background:var(--pra-accent);border-color:var(--pra-accent);color:#fff
}
.pra .pra-more-btn[disabled]{opacity:.6;cursor:default}

/* sits below the last row, so it trips before the reader reaches the end */
.pra-sentinel{position:absolute;bottom:0;left:0;width:1px;height:1px}