.courses-hero{padding:4.5rem 0;background:linear-gradient(120deg,var(--blue2),var(--blue));color:#fff}.courses-hero h1{margin:.4rem 0;color:#fff;font-size:clamp(2.8rem,6vw,5rem);font-weight:900;letter-spacing:-.04em}.courses-hero p{max-width:720px;margin:0;color:#fff;font-size:1.15rem;line-height:1.7}.courses-hero span{display:inline-flex;align-items:baseline;gap:.45rem;padding:.8rem 1rem;border:1px solid #ffffff35;border-radius:14px;background:#ffffff12}.courses-hero span strong{color:var(--orange);font-size:1.6rem}
.courses-filter{padding:1.5rem;border:1px solid #123b8f10;border-radius:20px;background:var(--light);box-shadow:0 12px 35px #123b8f0b}.courses-filter .form-control,.courses-filter .form-select{min-height:52px;border-color:#123b8f18;background-color:#fff}.courses-filter .form-control:focus,.courses-filter .form-select:focus{border-color:var(--blue);box-shadow:0 0 0 .2rem #123b8f18}.courses-input{position:relative}.courses-input i{position:absolute;top:50%;left:1rem;z-index:1;color:var(--blue);transform:translateY(-50%)}.courses-input .form-control{padding-left:2.7rem}.courses-filter .btn{min-height:52px}
.courses-results{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}.courses-results h2{margin:0;color:var(--blue2);font-size:1.6rem;font-weight:900}.courses-results p{margin:0;color:#52617a}.courses-results>a{color:var(--orange);font-weight:800}
.course-card{display:flex;height:100%;flex-direction:column;overflow:hidden;border:1px solid #123b8f0d;border-radius:22px;background:#fff;box-shadow:0 12px 36px #123b8f0d;transition:transform .3s,box-shadow .3s}.course-card:hover{transform:translateY(-8px);box-shadow:0 24px 52px #123b8f20}.course-card__media{position:relative;overflow:hidden;background:var(--light)}.course-card__media>img{display:block;width:100%;aspect-ratio:16/11;object-fit:cover;transition:transform .45s}.course-card:hover .course-card__media>img{transform:scale(1.045)}
.course-card__category{position:absolute;top:1rem;left:1rem;max-width:calc(100% - 5.5rem);padding:.45rem .7rem;border-radius:99px;background:var(--blue);box-shadow:0 5px 18px #123b8f35;color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.04em}.course-card__icon{position:absolute;right:1rem;bottom:0;display:grid;width:58px;height:58px;place-items:center;border:4px solid #fff;border-radius:16px 16px 0 0;background:var(--orange);color:#fff;transform:translateY(4px)}.course-card__icon svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}
.course-card__body{display:flex;flex:1;flex-direction:column;padding:1.5rem}.course-card h3{margin:0 0 .7rem;color:var(--blue2);font-size:1.3rem;font-weight:900}.course-card__description{min-height:48px;margin-bottom:1.2rem;color:#52617a;font-size:.9rem;line-height:1.65}.course-card__meta{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:0 0 1.3rem}.course-card__meta div{min-width:0;padding:.7rem;border-radius:11px;background:var(--light)}.course-card__meta dt{overflow:hidden;color:#52617a;font-size:.68rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.course-card__meta dt i{margin-right:.25rem;color:var(--orange)}.course-card__meta dd{margin:.2rem 0 0;overflow:hidden;color:var(--blue2);font-size:.8rem;font-weight:850;text-overflow:ellipsis;white-space:nowrap}.course-card__actions{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-top:auto}.course-card__actions .btn{display:grid;min-height:46px;place-items:center;padding:.6rem .5rem;font-size:.84rem}
.courses-empty{padding:4rem 1.5rem;border-radius:22px;background:var(--light);text-align:center}.courses-empty>i{display:grid;width:70px;height:70px;margin:0 auto 1rem;place-items:center;border-radius:50%;background:#f5822018;color:var(--orange);font-size:2rem}.courses-empty h3{color:var(--blue2);font-weight:900}.courses-empty p{color:#52617a}
@media(max-width:767px){.courses-hero{padding:3.5rem 0}.courses-results{display:block}.courses-results>a{display:inline-block;margin-top:.7rem}.courses-filter{padding:1rem}.course-card__body{padding:1.2rem}}
@media(max-width:390px){.course-card__actions{grid-template-columns:1fr}.course-card__meta{grid-template-columns:1fr}}