@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

/* ── Wrapper ── */
.psp-wrap {
  --accent: #1e7de6;
  --bg:     #dceaf7;
  --card:   #ffffff;
  --title:  #1a1a1a;
  --text:   #4a5568;
  --r:      22px;

  font-family: 'Lato', sans-serif;
  background: var(--bg);
  border-radius: 28px;
  padding: 36px 28px 28px;
  position: relative;
  box-sizing: border-box;
}

/* ── Viewport ── */
.psp-viewport {
  overflow: hidden;
  position: relative;
}

/* ── Track ── */
.psp-track {
  display: flex;
  gap: 20px;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  align-items: stretch;
}

/* ═══════════════════════════════
   CARD — overflow visible so arrow
   is never clipped
═══════════════════════════════ */
.psp-card {
  background: var(--card);
  border-radius: var(--r);
  flex: 0 0 calc(33.333% - 14px);
  min-width: 240px;
  display: flex;
  flex-direction: column;
  overflow: visible;           /* ← key: never clip the arrow */
  box-shadow: 0 6px 28px rgba(20,60,120,.10);
  transition: transform .38s cubic-bezier(.4,0,.2,1),
              box-shadow .38s cubic-bezier(.4,0,.2,1);
  cursor: pointer;
  position: relative;
}
.psp-card:hover {
  transform: translateY(-7px) scale(1.015);
  box-shadow: 0 18px 48px rgba(20,60,120,.16);
}

/* ── Image container — clips only the photo ── */
.psp-img-wrap {
  position: relative;
  width: 100%;
  padding-top: 62%;
  flex-shrink: 0;
  border-radius: var(--r) var(--r) 0 0;
  overflow: hidden;            /* clips the photo */
}
.psp-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.psp-card:hover .psp-img-wrap img { transform: scale(1.06); }

/* no-image fallback */
.psp-img-wrap.no-img {
  background: linear-gradient(135deg,#c8dff7,#a8c8f0);
}

/* ═══════════════════════════════
   ARROW BUTTON
   — absolutely positioned on the CARD
     (not inside .psp-img-wrap)
   — top-right corner, half-outside image
═══════════════════════════════ */
.psp-arrow-link {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  background: var(--accent);
  border-radius: 50%;
  border: 3px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 20;
  box-shadow: 0 3px 14px rgba(30,125,230,.50);
  transition: background .22s, transform .22s, box-shadow .22s;
}
.psp-arrow-link:hover {
  background: #1561c0;
  transform: scale(1.12) rotate(-5deg);
  box-shadow: 0 6px 22px rgba(30,125,230,.60);
}
/* The SVG arrow inside the button */
.psp-arrow-link svg {
  width: 18px;
  height: 18px;
  stroke: #ffffff;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  display: block;
  flex-shrink: 0;
}

/* ── Card body ── */
.psp-body {
  padding: 18px 20px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--card);
  border-radius: 0 0 var(--r) var(--r);
  overflow: hidden;
}

/* Title — Lato 700, 20px, 35px line-height */
.psp-title {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 35px;
  letter-spacing: 0;
  text-transform: capitalize;
  color: var(--title);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Excerpt — Lato 400, 18px, 28px line-height */
.psp-excerpt {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
  color: var(--text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Nav buttons ── */
.psp-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.psp-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(30,125,230,.35);
  transition: background .22s, transform .22s, box-shadow .22s;
  flex-shrink: 0;
}
.psp-btn svg {
  width: 18px; height: 18px;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  display: block;
}
.psp-btn:hover:not(:disabled) {
  background: #1561c0;
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(30,125,230,.45);
}
.psp-btn:disabled {
  background: #b8cce4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ── Dots ── */
.psp-dots { display:flex; gap:7px; align-items:center; }
.psp-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #b8cce4;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .22s, transform .22s;
}
.psp-dot.active { background: var(--accent); transform: scale(1.45); }

/* ── Skeleton ── */
.psp-skel {
  background: var(--card);
  border-radius: var(--r);
  flex: 0 0 calc(33.333% - 14px);
  min-width: 240px;
  overflow: hidden;
}
.psp-skel-img {
  width: 100%; padding-top: 62%;
  background: linear-gradient(90deg,#e4eef8 25%,#cfe0f4 50%,#e4eef8 75%);
  background-size: 200% 100%;
  animation: psp-sh 1.4s infinite;
}
.psp-skel-body { padding: 18px 20px; }
.psp-skel-line {
  height: 14px; border-radius: 6px; margin-bottom: 11px;
  background: linear-gradient(90deg,#e4eef8 25%,#cfe0f4 50%,#e4eef8 75%);
  background-size: 200% 100%;
  animation: psp-sh 1.4s infinite;
}
.psp-skel-line.w80 { width:80%; }
.psp-skel-line.w60 { width:60%; }
.psp-skel-line.w95 { width:95%; }
@keyframes psp-sh {
  0%   { background-position:-200% 0; }
  100% { background-position: 200% 0; }
}

/* ── Card entrance ── */
.psp-card { animation: psp-up .45s both; }
.psp-card:nth-child(1) { animation-delay:.04s; }
.psp-card:nth-child(2) { animation-delay:.12s; }
.psp-card:nth-child(3) { animation-delay:.20s; }
@keyframes psp-up {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Responsive ── */
@media (max-width:880px) { .psp-card,.psp-skel { flex-basis:calc(50% - 10px); } }
@media (max-width:560px) {
  .psp-card,.psp-skel { flex-basis:100%; min-width:100%; }
  .psp-wrap { padding:24px 14px 20px; }
  .psp-title   { font-size:18px; line-height:30px; }
  .psp-excerpt { font-size:16px; line-height:26px; }
}