/* Illustrated course cards: home "Explore Popular Courses" + the All Courses page */
.popular-courses { position: relative; isolation: isolate; overflow: hidden; padding: clamp(48px, 6vw, 88px) 22px clamp(56px, 6vw, 92px); color: #14243a; line-height: 1.5;
    background: radial-gradient(ellipse at 8% 5%, rgba(4, 182, 201, .08), transparent 27%), radial-gradient(ellipse at 96% 65%, rgba(255, 112, 87, .07), transparent 24%), linear-gradient(180deg, #f7fbff 0%, #fff 100%); }
.popular-courses::before, .popular-courses::after { content: ""; position: absolute; z-index: -1; width: 230px; height: 230px; border: 1px solid rgba(6, 182, 201, .13); border-radius: 50%; pointer-events: none; }
.popular-courses::before { top: -140px; left: -95px; box-shadow: 0 0 0 24px rgba(6, 182, 201, .025), 0 0 0 48px rgba(6, 182, 201, .02); }
.popular-courses::after { right: -130px; bottom: -155px; box-shadow: 0 0 0 26px rgba(255, 112, 87, .025), 0 0 0 52px rgba(255, 112, 87, .02); }
.popular-courses .pc-container { width: min(1200px, 100%); margin: 0 auto; }
.popular-courses .pc-heading { max-width: 720px; margin: 0 auto 30px; text-align: center; }
.popular-courses .pc-heading .pc-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 11px; color: #e2593a; font-size: 12px; letter-spacing: .16em; font-weight: 800; text-transform: uppercase; }
.popular-courses .pc-eyebrow::before, .popular-courses .pc-eyebrow::after { content: ""; width: 24px; height: 2px; border-radius: 99px; background: #f37053; opacity: .75; }
.popular-courses .pc-heading h2 { margin: 0; color: #102a49; font-size: clamp(28px, 3.5vw, 42px); line-height: 1.15; letter-spacing: -.03em; font-weight: 800; }
.popular-courses .pc-heading h2 span { color: #079cb1; }
.popular-courses .pc-heading .pc-intro { max-width: 610px; margin: 14px auto 0; color: #5f7186; font-size: clamp(14px, 1.4vw, 16px); line-height: 1.7; }
.popular-courses .pc-tabs { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin: 28px 0 30px; }
.popular-courses .pc-tab { appearance: none; border: 1px solid #dbe6f0; background: rgba(255, 255, 255, .9); color: #4b5e75; border-radius: 999px; padding: 9px 15px; min-height: 40px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.popular-courses .pc-tab:hover { transform: translateY(-1px); border-color: #8bd9e1; color: #087b8d; }
.popular-courses .pc-tab[aria-pressed="true"] { color: #fff; background: #082f58; border-color: #082f58; box-shadow: 0 8px 18px rgba(8, 47, 88, .16); }
.popular-courses .pc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.popular-courses .pc-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e5edf5; border-radius: 19px; background: #fff; box-shadow: 0 10px 34px rgba(18, 47, 78, .055); transition: transform .24s, box-shadow .24s, border-color .24s; }
.popular-courses .pc-card:hover { transform: translateY(-5px); border-color: #c8e9ee; box-shadow: 0 18px 42px rgba(18, 47, 78, .12); }
.popular-courses .pc-card[hidden] { display: none !important; }
.popular-courses .pc-art { position: relative; display: flex; height: 174px; flex: 0 0 174px; overflow: hidden; align-items: center; justify-content: center; isolation: isolate; }
.popular-courses .pc-art::before { content: ""; position: absolute; width: 190px; height: 190px; right: -35px; top: -104px; border: 1px solid rgba(255, 255, 255, .23); border-radius: 50%; box-shadow: 0 0 0 18px rgba(255, 255, 255, .07), 0 0 0 38px rgba(255, 255, 255, .045); z-index: -1; }
.popular-courses .pc-art::after { content: ""; position: absolute; left: -22px; bottom: -75px; width: 155px; height: 155px; border: 1px solid rgba(255, 255, 255, .17); border-radius: 50%; z-index: -1; }
.popular-courses .pc-art img { width: min(88%, 290px); height: 140px; object-fit: contain; filter: drop-shadow(0 10px 13px rgba(0, 0, 0, .12)); transition: transform .3s; }
.popular-courses .pc-card:hover .pc-art img { transform: scale(1.03); }
.popular-courses .art-label { position: absolute; top: 14px; left: 16px; padding: 5px 9px; color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; }
.popular-courses .pc-art.red { background: linear-gradient(135deg, #8f1020 0%, #d51f32 56%, #f04d3c 100%); }
.popular-courses .pc-art.ruby { background: linear-gradient(135deg, #710e2d 0%, #c51028 53%, #ed5b4a 100%); }
.popular-courses .pc-art.design { background: linear-gradient(135deg, #2a1b67 0%, #7736b9 54%, #ea5c89 100%); }
.popular-courses .pc-art.python { background: linear-gradient(135deg, #063a72 0%, #087fbc 54%, #23c2ce 100%); }
.popular-courses .pc-art.network { background: linear-gradient(135deg, #065f4b 0%, #079b83 58%, #64cb91 100%); }
.popular-courses .pc-art.mern { background: linear-gradient(135deg, #172a58 0%, #3158a5 52%, #1ab4b2 100%); }
.popular-courses .pc-art.mobile { background: linear-gradient(135deg, #04503f 0%, #078a75 55%, #2bc3a1 100%); }
.popular-courses .pc-art.cloud { background: linear-gradient(135deg, #05445c 0%, #087d95 55%, #24b7c4 100%); }
.popular-courses .pc-art.security { background: linear-gradient(135deg, #24155c 0%, #5b3fb0 55%, #8f6ee0 100%); }
.popular-courses .pc-art.office { background: linear-gradient(135deg, #6d4306 0%, #b97813 55%, #e7a93a 100%); }
.popular-courses .pc-art.marketing { background: linear-gradient(135deg, #8d300c 0%, #e66f3d 55%, #f6a04d 100%); }
.popular-courses .pc-card-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 20px 21px 18px; }
.popular-courses .pc-category { margin: 0 0 8px; color: #067d8d; font-size: 11px; line-height: 1.4; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.popular-courses .pc-card h3 { margin: 0; font-size: 18px; line-height: 1.38; letter-spacing: -.01em; font-weight: 800; }
.popular-courses .pc-card h3 a { color: #142b48; text-decoration: none; }
.popular-courses .pc-card h3 a:hover { color: #087b96; }
.popular-courses .pc-description { min-height: 56px; margin: 10px 0 16px; color: #66768a; font-size: 14px; line-height: 1.65; }
.popular-courses .pc-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding: 13px 0 15px; border-top: 1px solid #edf1f6; }
.popular-courses .pc-meta-item { display: inline-flex; align-items: center; gap: 7px; color: #5f7186; font-size: 13px; font-weight: 600; white-space: nowrap; }
.popular-courses .pc-meta-item svg { width: 16px; height: 16px; flex: 0 0 auto; color: #f37053; }
.popular-courses .pc-price { color: #0c3158; font-size: 16px; font-weight: 800; white-space: nowrap; }
.popular-courses .pc-card-actions { display: flex; align-items: center; gap: 10px; }
.popular-courses .pc-details { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 9px; min-height: 43px; padding: 10px 13px; border: 1px solid #d8e8f0; border-radius: 11px; color: #0a456d; background: #f6fbfe; font-size: 13px; font-weight: 800; text-decoration: none; transition: .2s; }
.popular-courses .pc-details:hover { color: #fff; background: #087b96; border-color: #087b96; }
.popular-courses .pc-details svg { width: 15px; height: 15px; }
.popular-courses .pc-apply { min-height: 43px; padding: 0 16px; border: 0; border-radius: 11px; color: #fff; background: #f37053; font-size: 13px; font-weight: 800; cursor: pointer; transition: background .2s; }
.popular-courses .pc-apply:hover { background: #e2593a; }
.popular-courses .pc-footer { display: flex; justify-content: center; margin-top: 34px; }
.popular-courses .pc-all-courses { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 13px 23px; border-radius: 999px; color: #fff; background: linear-gradient(100deg, #082c55, #087d99); box-shadow: 0 10px 24px rgba(8, 44, 85, .17); text-decoration: none; font-size: 14px; font-weight: 800; transition: transform .2s, box-shadow .2s; }
.popular-courses .pc-all-courses:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 15px 30px rgba(8, 44, 85, .23); }
.popular-courses .pc-all-courses svg { width: 17px; height: 17px; }
.popular-courses .pc-empty { grid-column: 1 / -1; text-align: center; color: #66768a; padding: 30px 0; }
.popular-courses .pc-empty[hidden] { display: none; }
.popular-courses .pc-toolbar { display: flex; justify-content: center; margin: 0 0 26px; }
.popular-courses .pc-search { display: flex; align-items: center; gap: 9px; width: min(420px, 100%); height: 46px; padding: 0 14px; background: #fff; border: 1px solid #dbe6f0; border-radius: 12px; box-shadow: 0 6px 18px rgba(18, 47, 78, .05); }
.popular-courses .pc-search svg { width: 18px; height: 18px; color: #8da0b0; flex: 0 0 auto; }
.popular-courses .pc-search input { border: 0; outline: 0; width: 100%; min-width: 0; background: transparent; color: #102a49; font: inherit; font-size: 14px; }
.popular-courses .pc-search:focus-within { border-color: #06b6c9; }
.popular-courses .pc-count { text-align: center; color: #66768a; font-size: 13px; margin: -12px 0 22px; }
.popular-courses.pc-page { padding-top: clamp(40px, 5vw, 70px); }
.popular-courses a:focus-visible, .popular-courses button:focus-visible { outline: 3px solid #06b6c9; outline-offset: 3px; }
@media (max-width: 991px) { .popular-courses .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; } .popular-courses .pc-art { height: 165px; flex-basis: 165px; } }
@media (max-width: 600px) {
    .popular-courses { padding: 44px 15px 58px; }
    .popular-courses .pc-heading { margin-bottom: 22px; }
    .popular-courses .pc-heading .pc-eyebrow { font-size: 11px; letter-spacing: .12em; }
    .popular-courses .pc-tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 8px; margin: 23px -1px 21px; }
    .popular-courses .pc-tab { flex: 0 0 auto; padding: 8px 13px; font-size: 12px; }
    .popular-courses .pc-grid { grid-template-columns: minmax(0, 1fr); }
    .popular-courses .pc-art { height: 160px; flex-basis: 160px; }
    .popular-courses .pc-card h3 { font-size: 17px; }
    .popular-courses .pc-description { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .popular-courses .pc-card, .popular-courses .pc-tab, .popular-courses .pc-details, .popular-courses .pc-all-courses, .popular-courses .pc-art img { transition: none !important; } }