.page-courses .hero{
  min-height:auto;
  padding:160px 0 88px;
}
.page-courses .hero-copy{
  max-width:760px;
}
.page-courses .hero-edge{
  background:var(--white);
}

.catalogue{
  background:var(--white);
}
.catalogue-live{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
}
.catalogue-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.catalogue-grid[data-count="1"]{
  grid-template-columns:minmax(0,720px);
}
.catalogue-grid[data-count="2"]{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.catalogue-card{
  height:100%;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  padding:32px 28px 28px;
  box-shadow:0 16px 40px rgba(16,42,67,.06);
}
.catalogue-card__meta,
.catalogue-card__stats{
  list-style:none;
  margin:0;
  padding:0;
}
.catalogue-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}
.catalogue-card__meta li{
  background:var(--soft);
  color:var(--deep-green);
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:7px 10px;
  border-radius:99px;
}
.catalogue-card h3{
  font-size:28px;
  line-height:1.15;
  margin-bottom:12px;
  overflow-wrap:anywhere;
}
.catalogue-card>p{
  color:var(--slate);
  font-size:15px;
  margin-bottom:0;
}
.catalogue-card__stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 12px;
  border-block:1px solid var(--border);
  padding:20px 0;
  margin:24px 0 0;
}
.catalogue-card__stats strong,
.catalogue-card__stats span{
  display:block;
}
.catalogue-card__stats strong{
  font:800 18px/1.2 Manrope,Inter,sans-serif;
  color:var(--navy);
}
.catalogue-card__stats span{
  font-size:10px;
  color:var(--slate);
  margin-top:4px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
}
.catalogue-card__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-top:auto;
  padding-top:24px;
}
.catalogue-card__price{
  margin:0;
  font:800 24px/1 Manrope,Inter,sans-serif;
  color:var(--navy);
}
.catalogue-card .button{
  flex:0 0 auto;
}

.catalogue-card--skeleton{
  min-height:320px;
  gap:16px;
}
.catalogue-card--skeleton span{
  display:block;
  border-radius:10px;
  background:linear-gradient(90deg,var(--soft),#f4f8f6,var(--soft));
  background-size:200% 100%;
  animation:catalogue-shimmer 1.4s ease-in-out infinite;
}
.catalogue-card--skeleton span:nth-child(1){width:42%;height:22px}
.catalogue-card--skeleton span:nth-child(2){width:86%;height:34px}
.catalogue-card--skeleton span:nth-child(3){width:100%;height:68px}
.catalogue-card--skeleton span:nth-child(4){width:54%;height:22px;margin-top:auto}

@keyframes catalogue-shimmer{
  0%{background-position:100% 0}
  100%{background-position:-100% 0}
}

.catalogue-state{
  grid-column:1/-1;
  max-width:640px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  padding:42px 36px;
  box-shadow:0 16px 40px rgba(16,42,67,.06);
}
.catalogue-state h3{
  font-size:30px;
  margin-bottom:12px;
}
.catalogue-state p{
  color:var(--slate);
  font-size:16px;
  margin-bottom:22px;
}

.page-courses .education{
  background:var(--soft);
}
.page-courses .education-grid{
  grid-template-columns:1fr;
  gap:0;
  max-width:640px;
}
.page-courses .education-panel{
  padding:64px 72px;
}

.page-courses a:focus-visible,
.page-courses button:focus-visible{
  outline:3px solid var(--lime);
  outline-offset:3px;
}

@media (max-width:980px){
  .catalogue-grid,
  .catalogue-grid[data-count="1"],
  .catalogue-grid[data-count="2"]{
    grid-template-columns:1fr;
  }
  .page-courses .hero{
    padding:138px 0 72px;
  }
  .page-courses .hero h1{
    font-size:clamp(36px,8vw,56px);
  }
  .page-courses .education-panel{
    padding:54px 44px;
  }
}

@media (max-width:620px){
  .page-courses .education-panel{
    padding:38px 24px;
  }
  .catalogue-card{
    padding:26px 22px 22px;
  }
  .catalogue-card h3{
    font-size:24px;
  }
  .catalogue-card__footer{
    align-items:stretch;
  }
  .catalogue-card .button{
    width:100%;
  }
  .catalogue-state{
    padding:32px 22px;
  }
  .page-courses .hero h1{
    font-size:36px;
  }
}

@media (prefers-reduced-motion:reduce){
  .catalogue-card--skeleton span{
    animation:none;
  }
}