.mdc-grid,
.mdc-carousel{
  --mdc-columns:3;
  --mdc-slides:3;
  --mdc-gap-x:18px;
  --mdc-gap-y:18px;
  --mdc-peek:0px;
  --mdc-card-bg:#fff;
  --mdc-accent:#f2b817;
  --mdc-title:#20210c;
  --mdc-text:#4e4c44;
  --mdc-meta:#b77d00;
  --mdc-button-bg:#ffc21c;
  --mdc-button-text:#111;
  --mdc-border:#dfe5e9;
  --mdc-nav-offset:12px;
  --mdc-dot:#d8d8d8;
  --mdc-dot-active:#ffc21c;
  --mdc-dot-size:8px;
}

.mdc-grid{
  display:grid;
  grid-template-columns:repeat(var(--mdc-columns),minmax(0,1fr));
  column-gap:var(--mdc-gap-x);
  row-gap:var(--mdc-gap-y);
}

.mdc-card{
  background:var(--mdc-card-bg);
  border:1px solid var(--mdc-border);
  border-radius:18px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
  transition:transform .2s ease,box-shadow .2s ease;
}

.mdc-card__image-link{display:block;position:relative;overflow:hidden}
.mdc-card__image{display:block;width:100%;height:240px;object-fit:cover}
.mdc-card__image-placeholder{height:240px;background:linear-gradient(135deg,#f4f5f5,#eceeee);display:block}
.mdc-card__badge{position:absolute;top:16px;left:16px;padding:7px 11px;border-radius:999px;background:var(--mdc-button-bg);color:var(--mdc-button-text);font-size:12px;font-weight:700;line-height:1}
.mdc-card__accent{height:4px;background:var(--mdc-accent);flex:0 0 auto}
.mdc-card__body{padding:22px 18px 18px;display:flex;flex-direction:column;flex:1}
.mdc-card__title{margin:0 0 12px;color:var(--mdc-title);font-size:18px;line-height:1.3;font-weight:700}
.mdc-card__title a{color:inherit;text-decoration:none}
.mdc-card__excerpt{margin:0;color:var(--mdc-text);font-size:14px;line-height:1.65}
.mdc-card__footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:20px;border-top:1px solid rgba(100,100,100,.12)}
.mdc-card__duration{display:inline-flex;align-items:center;gap:6px;color:var(--mdc-meta);white-space:nowrap;font-size:13px;font-weight:500}
.mdc-card__duration svg{width:15px;height:15px;display:block;stroke:currentColor;fill:none;stroke-width:1.8}
.mdc-card__button{display:inline-flex;align-items:center;justify-content:center;background:var(--mdc-button-bg);color:var(--mdc-button-text);text-decoration:none;font-weight:700;font-size:13px;line-height:1;padding:13px 18px;border-radius:8px;white-space:nowrap;transition:transform .18s ease,filter .18s ease}
.mdc-card__button:hover,.mdc-card__button:focus{color:var(--mdc-button-text);filter:brightness(.96);transform:translateY(-1px)}

/* Carousel mode */
.mdc-carousel{
  position:relative;
  width:100%;
}

.mdc-carousel__viewport{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}

.mdc-carousel__viewport::-webkit-scrollbar{display:none}
.mdc-carousel[data-mouse-drag="yes"] .mdc-carousel__viewport{cursor:grab}
.mdc-carousel.is-dragging .mdc-carousel__viewport{cursor:grabbing;scroll-behavior:auto;user-select:none}

.mdc-carousel__track{
  display:flex;
  align-items:stretch;
  gap:var(--mdc-gap-x);
  width:max-content;
  min-width:100%;
}

.mdc-carousel__track .mdc-card{
  flex:0 0 auto;
  width:calc(100% - var(--mdc-peek));
  max-width:none;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

.mdc-carousel__nav{
  appearance:none;
  -webkit-appearance:none;
  position:absolute;
  top:50%;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  margin:0;
  transform:translateY(-50%);
  border:1px solid #dfe5e9;
  border-radius:50%;
  background:#fff;
  color:#171717;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  cursor:pointer;
  transition:opacity .2s ease,transform .2s ease,background .2s ease,color .2s ease;
}

.mdc-carousel__nav:hover,
.mdc-carousel__nav:focus-visible{transform:translateY(-50%) scale(1.04)}
.mdc-carousel__nav:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.mdc-carousel__nav:disabled{opacity:.32;cursor:not-allowed;transform:translateY(-50%)}
.mdc-carousel__nav svg{width:48%;height:48%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mdc-carousel__nav--prev{inset-inline-start:var(--mdc-nav-offset)}
.mdc-carousel__nav--next{inset-inline-end:var(--mdc-nav-offset)}

.mdc-carousel__dots{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}

.mdc-carousel__dot{
  appearance:none;
  -webkit-appearance:none;
  width:var(--mdc-dot-size);
  height:var(--mdc-dot-size);
  padding:0;
  border:0;
  border-radius:999px;
  background:var(--mdc-dot);
  cursor:pointer;
  transition:width .2s ease,background .2s ease,transform .2s ease;
}
.mdc-carousel__dot:hover{transform:scale(1.15)}
.mdc-carousel__dot.is-active{background:var(--mdc-dot-active);width:calc(var(--mdc-dot-size) * 2.4)}
.mdc-carousel__dot:focus-visible{outline:2px solid var(--mdc-dot-active);outline-offset:3px}

@media(max-width:767px){
  .mdc-card__image,.mdc-card__image-placeholder{height:220px}
  .mdc-carousel__nav{width:38px;height:38px}
}

@media(prefers-reduced-motion:reduce){
  .mdc-card,.mdc-card__button,.mdc-carousel__nav,.mdc-carousel__dot{transition:none}
  .mdc-carousel__viewport{scroll-behavior:auto}
}

/* Whole-card course link */
.mdc-card--clickable{
  cursor:pointer;
}

.mdc-card--clickable:focus-visible{
  outline:2px solid var(--mdc-accent);
  outline-offset:3px;
}

.mdc-card--clickable:hover{
  transform:translateY(-2px);
}

.mdc-carousel.is-dragging .mdc-card--clickable{
  cursor:grabbing;
}