/* v21 responsive overrides for the "marketing-b" page group: scoped to its pages, loaded after every other stylesheet. */
/* Pages: /blogs (index, category, article), policy pages, /free-seo-resources, /events (+ detail), /tutors (+ profile),
   /bundles (+ view), /ebooks, /bootcamps, /live-classes and the 404 page.
   Rule: text, paddings and icons inside components scale with the component (container-type + cqi) and page-level
   text with the viewport (rem + vw). Every clamp() tops out at the value desktop (1200px+) had before, so nothing
   changes there. Scopes: .uos-mkb (addon pages, class on <main>), .blog-body / .uos-blog-head ~ .courses (blog),
   .uos-policy (policy pages), .uos-resources, .error-body (404). */

/* ------------------------------ addon pages (events, tutors, bundles, ebooks, bootcamps, live classes) ------------------------------ */
.uos-mkb{padding:clamp(16px,.5rem + 1.2vw,22px) 0 clamp(48px,2rem + 2.7vw,64px)}
.uos-mkb .uos-hero{padding:clamp(4px,.7vw,8px) 0 clamp(18px,1rem + .5vw,22px)}
.uos-mkb .uos-card,.uos-mkb .uos-feature{container-type:inline-size}
.uos-mkb .uos-card:not(.bc-card){padding:clamp(16px,.5rem + 1.2vw,22px)}
.uos-mkb .uos-feature{padding:clamp(16px,.5rem + 1.2vw,22px)}
.uos-mkb .uos-card-head h2,.uos-mkb .uos-card-head h3,.uos-mkb .uos-empty h3,.uos-mkb .uos-empty .uos-empty-title{font-size:clamp(15px,.95rem + .15vw,17px)}
.uos-mkb .uos-empty i{font-size:clamp(22px,1.5rem + .2vw,26px);width:clamp(54px,3.5rem + .5vw,62px);height:clamp(54px,3.5rem + .5vw,62px)}
.uos-mkb .uos-btn{font-size:clamp(13px,.78rem + .2vw,14px);padding:clamp(9px,.5rem + .2vw,10px) clamp(14px,.75rem + .55vw,18px)}
.uos-mkb .uos-btn-sm{font-size:clamp(12px,.72rem + .15vw,13px);padding:clamp(6px,.3rem + .25vw,7px) clamp(11px,.6rem + .3vw,13px)}
.uos-mkb .uos-btn-block{white-space:normal;text-align:center}
.uos-mkb .uos-chip{font-size:clamp(12px,.72rem + .15vw,13px);padding:clamp(6px,.3rem + .25vw,7px) clamp(11px,.5rem + .5vw,14px)}
.uos-mkb .uos-badge{font-size:clamp(11px,.6rem + .25vw,12px)}
.uos-mkb .uos-kv,.uos-mkb .uos-list-main strong{font-size:clamp(13px,.8rem + .1vw,14px)}
.uos-mkb a.uos-link{gap:.35em}

/* Events list */
.uos-events .ev-h2{font-size:clamp(1.0625rem,.95rem + .6vw,1.25rem);margin:0 0 12px}
.uos-events .ev-h2-past{margin-top:28px}
.uos-events .ev-head{display:flex;gap:clamp(10px,3.9cqi,12px);align-items:center}
.uos-events .ev-date{width:clamp(50px,18.5cqi,58px);text-align:center;border-radius:12px;background:var(--uos-primary-soft);color:var(--uos-primary);padding:6px 0;flex:0 0 auto}
.uos-events .ev-date-m{font-size:clamp(10px,3.5cqi,11px);font-weight:800;text-transform:uppercase}
.uos-events .ev-date-d{font-size:clamp(18px,7cqi,22px);font-weight:800;line-height:1}
.uos-events .ev-title{min-width:0}
.uos-events .ev-kind{font-weight:700}
.uos-events .uos-feature h3{margin:2px 0 0;font-size:clamp(15px,5.4cqi,17px);overflow-wrap:anywhere}
.uos-events .ev-badges{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap}
.uos-events .uos-list-main>a{padding:3px 0;margin:-3px 0}
.uos-events .uos-list-main strong{white-space:normal;overflow:visible;text-overflow:clip}

/* Event detail */
.uos-event-detail .ev-cover{width:100%;max-height:300px;object-fit:cover}
.uos-event-detail .ev-body{padding:clamp(16px,2.95cqi,22px)}
.uos-event-detail .ev-h1{font-size:clamp(1.375rem,1.1rem + 1.2vw,1.75rem);margin:0 0 6px}
.uos-event-detail .ev-summary{font-size:clamp(15px,.9rem + .15vw,16px)}
.uos-event-detail .ev-kv{grid-template-columns:clamp(64px,29cqi,80px) 1fr;margin-bottom:14px}
.uos-event-detail .ev-note{font-size:12px;margin:8px 0 0}

/* Tutors list */
.uos-tutors .tb-tutor-head{gap:clamp(10px,3.8cqi,12px)}
.uos-tutors .tb-tutor-head img{width:clamp(48px,17.7cqi,56px);height:clamp(48px,17.7cqi,56px)}
.uos-tutors .tb-tutor-head h3{font-size:clamp(15px,5.4cqi,17px)}

/* Tutor profile */
.uos-tutor-profile .tb-name{font-size:clamp(1.25rem,1.05rem + .8vw,1.5rem);margin:0}
.uos-tutor-profile .tb-day{container-type:inline-size;padding:clamp(8px,.35rem + .4vw,10px)}
.uos-tutor-profile .tb-day h4{font-size:clamp(13px,9.2cqi,14px)}
.uos-tutor-profile .tb-slot span{font-size:clamp(12px,8.5cqi,13px);padding:5px clamp(7px,5.9cqi,9px)}
.uos-tutor-profile .uos-alert a{display:inline-block;padding:6px 0;margin:-6px 0}

/* Bundles list */
.uos-bundles .bd-card{padding:0;overflow:hidden}
.uos-bundles .bd-cover{height:clamp(120px,41.6cqi,150px);display:flex;align-items:center;justify-content:center;color:#fff;font-size:clamp(28px,9.5cqi,34px)}
.uos-bundles .bd-body{padding:clamp(12px,4.45cqi,16px);display:flex;flex-direction:column;gap:8px;flex:1}
.uos-bundles .bd-kicker{font-weight:700;text-transform:uppercase;font-size:clamp(10px,3.1cqi,11px)}
.uos-bundles .uos-feature h3{margin:0;font-size:clamp(16px,5cqi,18px)}
.uos-bundles .bd-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.uos-bundles .bd-was,.uos-bundles .bd-view{font-size:13px}

/* Bundle view */
.uos-bundle-view .bd-hero{height:clamp(150px,29.2cqi,220px);display:flex;align-items:center;justify-content:center;color:#fff;font-size:clamp(40px,7.2cqi,54px)}
.uos-bundle-view .bd-hero-body{padding:clamp(16px,2.95cqi,22px)}
.uos-bundle-view .bd-h1{font-size:clamp(1.375rem,1.1rem + 1.2vw,1.75rem);margin:0 0 6px}
.uos-bundle-view .bd-lead{font-size:clamp(15px,.9rem + .15vw,16px)}
.uos-bundle-view .bd-row{display:flex;gap:clamp(10px,2cqi,14px);align-items:center;padding:12px 0;border-bottom:1px solid var(--uos-border)}
.uos-bundle-view .bd-row-img{width:clamp(64px,12.1cqi,86px);height:auto;aspect-ratio:86/56;object-fit:cover;border-radius:10px;flex:0 0 auto}
.uos-bundle-view .bd-row-main{flex:1;min-width:0}
.uos-bundle-view .bd-row-main strong{white-space:normal;overflow:visible;text-overflow:clip}
.uos-bundle-view .bd-row-main strong a{display:inline-block;padding:3px 0;margin:-3px 0}
.uos-bundle-view .bd-row-desc{font-size:13px}
.uos-bundle-view .bd-row-price{text-align:right;flex:0 0 auto}
.uos-bundle-view .bd-kv{grid-template-columns:clamp(96px,47.2cqi,130px) 1fr;margin-bottom:16px}
.uos-bundle-view .bd-note{font-size:12px;margin:8px 0 0}
.uos-bundle-view .bd-note-lg{margin-top:10px}
.uos-bundle-view .bd-note-0{font-size:13px;margin:0}
.uos-bundle-view .bd-orders{font-size:13px}

/* Ebooks */
.uos-ebooks .eb-search{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.uos-ebooks .eb-search-input{flex:1 1 200px;min-width:0}
.uos-ebooks .eb-search .uos-btn{flex:0 0 auto}
/* on a narrow card the button moves under the field so the placeholder is not cut off */
@container (max-width:320px){.uos-ebooks .eb-search-input{flex-basis:100%}.uos-ebooks .eb-search .uos-btn{flex:1 1 100%;justify-content:center}}
.uos-ebooks .eb-grid{gap:clamp(12px,1.6vw,18px)}
.uos-ebooks .eb-card{container-type:inline-size;padding:clamp(8px,1.2vw,12px)}
.uos-ebooks .eb-cover{font-size:clamp(28px,22cqi,40px)}
.uos-ebooks .eb-card h3{font-size:clamp(13px,8.2cqi,15px)}
.uos-ebooks .eb-meta{font-size:clamp(11px,6.5cqi,12px)}
.uos-ebooks .eb-price{font-size:clamp(14px,8.7cqi,16px)}
.uos-ebooks .eb-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap}

/* Bootcamps */
.uos-bootcamps .bc-card-body{padding:clamp(14px,5cqi,18px)}
.uos-bootcamps .bc-card-body h3{font-size:clamp(16px,5cqi,18px)}
.uos-bootcamps .bc-sum{margin:0;font-size:14px}
.uos-bootcamps .bc-meta{font-size:clamp(12px,3.65cqi,13px)}
.uos-bootcamps .bc-price strong{font-size:clamp(18px,6.1cqi,22px)}
.uos-bootcamps .bc-thumb{font-size:clamp(28px,9.5cqi,34px)}

/* Live classes */
.uos-live-classes .lc-heading{font-size:clamp(1.0625rem,.95rem + .6vw,1.25rem)}
.uos-live-classes .lc-class{gap:clamp(12px,2.2cqi,16px)}
.uos-live-classes .lc-date{flex-basis:clamp(52px,8.8cqi,64px)}
.uos-live-classes .lc-date strong{font-size:clamp(20px,3.3cqi,24px)}
.uos-live-classes .lc-date span,.uos-live-classes .lc-date small{font-size:clamp(10px,1.55cqi,11px)}
.uos-live-classes .lc-main h3{font-size:clamp(16px,2.5cqi,18px)}

/* ------------------------------ blog: index, category, article ------------------------------ */
/* The Bootstrap row gutter (negative margins) spilled 12px past the glass panel's edge inside an overflow:hidden box;
   clip paints exactly the same without making the panel a scroll container. */
.blog-body .courses-card,.uos-blog-head ~ .courses .courses-card{overflow:clip}
/* The page panel had a border but no padding, so article text, the comment form and the sidebar search sat on its edge. */
.blog-body>.container>.courses-card,.uos-blog-head ~ .courses>.container>.courses-card{padding:clamp(14px,.4rem + 1.5vw,28px)}
.blog-body .courses-card-body,.uos-blog-head ~ .courses .courses-card-body{container-type:inline-size}
/* the blog index cards are inline-block links; a size container needs a block box or it shrinks to zero width */
.uos-blog-head ~ .courses .blogCard{display:block}
/* card thumbnails sat in a 261px box (a course-card rule) with a fixed 200px height, so they stopped short of the card's right edge */
.blog-body .blogCard .courses-card-image{width:100%}
.blog-body .blogCard .courses-card-image img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.uos-blog-head ~ .courses .blogCard .courses-text{padding:12px clamp(16px,8.7cqi,30px)}
.blog-body .courses-card .blogCard .courses-text{padding:clamp(12px,4.8cqi,16px)}
.blog-body .courses-card .blogCard .courses-text>h5{font-size:clamp(16px,6cqi,20px);line-height:1.4}
.uos-blog-head ~ .courses .blogCard .courses-text>.h5{font-size:clamp(15px,5.25cqi,18px)}
.uos-blog-head ~ .courses .blogCard .courses-text>p{font-size:clamp(14px,4.65cqi,16px)}
.blog-body .courses-card .blogCard .courses-text>p{font-size:clamp(14px,4.8cqi,16px)}
/* author and category/date share one row; on a narrow card the date wraps under the author instead of touching it */
.blog-body .blogCard .courses-price,.uos-blog-head ~ .courses .blogCard .courses-price{flex-wrap:wrap;gap:4px 12px}
/* sidebar: the search button was a 12x2px box with an absolutely placed icon */
.blog-body .search-bar .search-btn,.uos-blog-head ~ .courses .search-bar .search-btn{top:0;left:0;bottom:0;width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;padding:0;margin:0;color:var(--uos-muted);z-index:2;border-radius:9px 0 0 9px;cursor:pointer}
.blog-body .search-bar .search-btn i,.uos-blog-head ~ .courses .search-bar .search-btn i{position:static;font-size:18px;color:inherit;cursor:pointer}
.blog-body .right-section .categories>a,.uos-blog-head ~ .courses .right-section .categories>a{display:inline-flex;align-items:center;min-height:44px;margin-top:8px!important}
.blog-body .right-section .categories ul li a,.uos-blog-head ~ .courses .right-section .categories ul li a{display:inline-block;padding:6px 0;margin:-6px 0}
.blog-body .right-section .post a,.uos-blog-head ~ .courses .right-section .post a{display:block;min-height:28px}
.blog-body .right-section h4{font-size:clamp(1.0625rem,.95rem + .6vw,1.25rem)}
/* article */
.blog-body .profile-img>a{display:inline-flex;align-items:center;min-height:28px}
.blog-body .top h3{font-size:clamp(1.375rem,1.1rem + 1.2vw,2rem)}
.blog-body .top h4{font-size:clamp(1.125rem,1rem + .5vw,1.375rem)}
.blog-body .left-tag h3{font-size:clamp(1.0625rem,.95rem + .6vw,1.25rem)}
.blog-body .left-tag a{display:inline-flex;align-items:center;min-height:36px}

/* ------------------------------ policy pages (privacy, terms, refunds, cookies) ------------------------------ */
.uos-policy .mk-prose{font-size:clamp(1rem,.98rem + .1vw,1.04rem)}
.uos-policy .mk-prose h2{font-size:clamp(1.25rem,1.05rem + .55vw,1.45rem)}
.uos-policy .mk-prose h3{font-size:clamp(1.0625rem,1rem + .3vw,1.15rem)}

/* ------------------------------ free SEO resources ------------------------------ */
.uos-resources .uhub-h2{font-size:clamp(1.0625rem,.95rem + .45vw,1.25rem)}
.uos-resources .uhub-chips a{font-size:clamp(14px,.8rem + .3vw,16px);padding:0 clamp(14px,.7rem + .6vw,18px)}
.uos-resources .rs-list{gap:clamp(10px,1vw,12px)}
.uos-resources .rs-list li{container-type:inline-size}
.uos-resources .rs-list a{font-size:clamp(15px,4.85cqi,16px)}
.uos-resources .rs-list span{font-size:clamp(.85rem,4.45cqi,.92rem)}
.uos-resources .rs-list small{font-size:clamp(.72rem,3.8cqi,.78rem)}
.uos-resources .rs-foot{margin-top:28px}
/* Blog sidebar category links: the legacy style.css fixes them at 16px. */
.blog-body .right-section .categories ul li a{font-size:clamp(.9375rem,.9rem + .2vw,1rem)}