/* Shared course cards and rails, used by catalog, homepage and PDP. */
.catalog-card h3,.catalog-card p{margin:0}
.catalog-rating-chip{display:flex;align-items:center;gap:4px;border-radius:4px;background:var(--cando-neutral-0);padding:2px 6px}
.catalog-rating-chip img{width:16px;height:16px}
.catalog-rail{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:0;scroll-padding-inline:2px}
.catalog-rail>.catalog-card{flex:0 0 min(302px,100%);scroll-snap-align:start}
.catalog-card{--catalog-card-border:#e2e2e8;--catalog-card-mode-background:#808390;min-width:0;border:1px solid var(--catalog-card-border);border-top:6px solid var(--cando-primary-800);border-radius:8px;overflow:hidden;background:var(--cando-background-surface);display:flex;flex-direction:column}
.catalog-card-media{position:relative;display:flex;align-items:center;justify-content:center;height:140px;flex-shrink:0;background:var(--cando-primary-0);padding:40px 24px 12px;color:var(--cando-primary-800)}
.catalog-card-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.catalog-card-media--image::after{content:"";position:absolute;inset:0;background:rgba(116,116,116,.44)}
.catalog-card-media__label{font-size:18px;line-height:28px;text-align:center;font-weight:var(--cando-font-weight-bold);overflow-wrap:anywhere}
.catalog-card-badge{position:absolute;inset-inline-start:16px;top:16px;z-index:1;background:var(--cando-neutral-0);color:var(--cando-text-secondary);padding:4px 12px;border-radius:4px;font-size:12px;line-height:18px}
.catalog-card-body{padding:16px;display:flex;flex-direction:column;flex:1}
.catalog-card-details{display:flex;flex-direction:column;gap:8px;flex:1}
.catalog-card-badges{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:26px}
.catalog-card-modes{display:flex;flex-wrap:wrap;gap:4px}
.catalog-card-modes span{font-size:12px;line-height:18px;padding:4px 12px;border-radius:4px;background:var(--catalog-card-mode-background);color:var(--cando-text-on-primary)}
.catalog-card-popular{font-size:12px;line-height:18px;padding:4px 12px;border-radius:4px;background:var(--cando-brand-50);color:var(--cando-brand-800)}
.catalog-card .catalog-card-details h3{font-size:16px;line-height:26px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.catalog-card h3 a:hover,.catalog-card-bottom a:hover{text-decoration:underline}
.catalog-card-summary{font-size:14px;line-height:22px;color:var(--cando-text-tertiary);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;height:19.5px}
.catalog-card-teacher{display:flex;align-items:center;gap:6px;min-height:32px;font-size:12px;line-height:18px;color:var(--cando-text-tertiary)}
.catalog-card-avatar{position:relative;display:block;flex:0 0 32px;width:32px;height:32px;border:2px solid var(--cando-background-surface);border-radius:50%;overflow:hidden}
.catalog-card-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.catalog-card-avatar--figma img{position:absolute;width:100%;height:134.38%;left:-.27%;top:-1.49%;object-fit:fill}
.catalog-card-bottom{border-top:1px solid var(--cando-border-disabled);padding-top:8px;margin-top:auto;min-height:37px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px;font-size:12px;line-height:18px}
.catalog-card-rating{display:flex;align-items:center;gap:4px;font-size:12px;line-height:18px;color:var(--cando-text-tertiary)}
.catalog-card-price{display:flex;align-items:center;gap:6px;white-space:nowrap}
.catalog-card-price strong{font-size:18px;line-height:28px}
.catalog-card-price>span{font-size:12px;line-height:18px;color:var(--cando-text-disabled)}
.catalog-card-bottom>span{color:var(--cando-text-tertiary)}
.catalog-card-bottom a{display:inline-flex;align-items:center;gap:4px;color:var(--cando-primary-700);flex-shrink:0}
.catalog-card-bottom .nav-icon{width:16px;height:16px}
/* RTL: previous is on the right, next on the left; group sits below the rail's left edge. */
.catalog-rail-controls{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.catalog-rail-controls button{width:40px;height:40px;border:0;border-radius:50%;padding:8px;display:grid;place-items:center;background:rgba(217,217,217,.3);cursor:pointer}
.catalog-rail-controls button:hover:not(:disabled){background:var(--cando-neutral-50)}
.catalog-rail-controls button:disabled{opacity:.35;cursor:default}
@media(pointer:coarse){.catalog-rail-controls button{width:44px;height:44px}}
@media(prefers-reduced-motion:no-preference){.catalog-rail{scroll-behavior:smooth}}
.catalog-rail-pagination{display:none}
@media(max-width:1279px){
 .catalog .catalog-rail-controls{display:none}
 .catalog .catalog-rail-pagination{display:flex;direction:ltr;justify-content:center;align-items:center;margin-top:8px;padding:10px 16px}
 .catalog-rail-pagination button{width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent url('../images/catalog/dot-inactive.svg') center/8px 8px no-repeat;cursor:pointer}
 .catalog-rail-pagination button[aria-current=page]{background-image:url('../images/catalog/dot-active.svg');background-size:12px 12px}
}