/* Center course cards + mobile category scroller. Shared by ALL center pages.
   This file contains NO font imports or guessed brand red.
   Brand/font tokens are inherited from your site's main theme. */
.vc4-page .vc4-courses {background:var(--background-color,#fff);padding:65px 0 70px;border-top:1px solid #ededed;}
.vc4-page .vc4-courses [hidden] {display:none!important;}
.vc4-page .vc4-courses .vc4-course-title {font-family:var(--heading-font,inherit);color:var(--heading-color,inherit);}
.vc4-filter-area {margin:0 0 28px;}
.vc4-filter-shell {position:relative;min-width:0;}
.vc4-filters {display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-width:0;}
.vc4-filter {display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
 padding:10px 18px;border:1px solid #dedede;border-radius:999px;
 background:var(--surface-color,#fff);color:var(--default-color,#555);
 font:inherit;font-weight:500;line-height:1.35;white-space:nowrap;cursor:pointer;
 transition:background-color .15s ease,border-color .15s ease,color .15s ease;}
.vc4-filter:hover {color:var(--accent-color);border-color:var(--accent-color);}
.vc4-filter.is-active,.vc4-filter.is-active:hover {color:#fff;background:var(--accent-color);border-color:var(--accent-color);font-weight:600;}
.vc4-filter:focus-visible,.vc4-filter-scroll-arrow:focus-visible {outline:2px solid var(--accent-color);outline-offset:3px;}
.vc4-filter-scroll-arrow,.vc4-filter-hint {display:none;}
.vc4-page .vc4-course-card {display:block;height:100%;overflow:hidden;border-radius:20px;background:var(--surface-color,#fff);box-shadow:0 8px 30px rgba(0,0,0,.065);color:inherit;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease;}
.vc4-page .vc4-course-card:hover {transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.1);color:inherit;text-decoration:none;}
.vc4-course-photo {display:block;width:100%;aspect-ratio:1.66;overflow:hidden;background:#eee;}
.vc4-course-photo img {display:block;width:100%;height:100%;object-fit:cover;}
.vc4-course-bottom {display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:95px;padding:19px 23px 21px;}
.vc4-course-title {display:block;color:var(--heading-color,#222);font-size:20px;font-weight:700;line-height:1.3;margin:0 0 15px;}
.vc4-course-dots {display:flex;align-items:center;gap:4px;}
.vc4-course-dots i {display:block;width:8px;height:8px;border-radius:50%;background:var(--accent-color);}
.vc4-course-note {font-size:inherit;margin:26px 0 0;line-height:1.6;color:var(--default-color,#666);}

/* Mobile keeps the exact filter order. JS horizontally centers the selected
   (third) filter on initial load, with arrows and swipe hint in either direction. */
@media(max-width:991px) {
 .vc4-page .vc4-courses {padding-top:45px;padding-bottom:52px;}
 .vc4-filters {flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
    scroll-behavior:smooth;overscroll-behavior-x:contain;gap:10px;
    padding:3px 55px 11px 2px;scrollbar-width:none;-ms-overflow-style:none;}
 .vc4-filters::-webkit-scrollbar {display:none;}
 .vc4-filter {scroll-snap-align:center;}
 .vc4-filter-scroll-arrow {position:absolute;top:2px;bottom:10px;z-index:2;
    width:39px;align-items:center;justify-content:center;border:1px solid #e2e2e2;
    border-radius:50px;background:var(--surface-color,#fff);color:var(--accent-color);
    cursor:pointer;box-shadow:0 1px 9px rgba(0,0,0,.08);font-size:26px;line-height:1;}
 .vc4-filter-scroll-next {right:0;}
 .vc4-filter-scroll-prev {left:0;}
 .vc4-filter-scroll-arrow:not([hidden]) {display:flex;}
 .vc4-filter-hint:not([hidden]) {display:block;margin:5px 0 0;color:var(--default-color,inherit);
    font-size:.875em;line-height:1.5;opacity:.9;}
}
@media(max-width:575px) {
 .vc4-course-bottom {min-height:87px;padding:17px 18px;}
 .vc4-course-title {font-size:18px;}
}
@media(prefers-reduced-motion:reduce) {
 .vc4-page .vc4-course-card,.vc4-filter {transition:none;}
 .vc4-filters {scroll-behavior:auto;}
}