/* ============================================================
   learndirect — Explore Our Online Courses carousel
   Agreed design + Apple-exact tile sizing. Scoped to #ld-courses-carousel.
   ============================================================ */
#ld-courses-carousel{
  --ldc-navy:#0a1f44;
  --ldc-ink:#16213a;
  --ldc-muted:#5b6577;
  --ldc-green:#1f9d55;
  --ldc-radius:20px;
  padding:40px 0 40px;
  font-family:'Poppins','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ldc-ink);
  -webkit-font-smoothing:antialiased;
}
#ld-courses-carousel *{box-sizing:border-box;}

#ld-courses-carousel{--ldc-container:1366px;--ldc-gutter:15px;}
#ld-courses-carousel .ldc-head{max-width:var(--ldc-container);margin:0 auto;padding:0 var(--ldc-gutter);text-align:center;}
#ld-courses-carousel .ldc-eyebrow{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ldc-green);margin-bottom:10px;}
#ld-courses-carousel .ldc-title{font-size:40px;font-weight:700;color:var(--ldc-navy);letter-spacing:-.01em;line-height:1.1;margin:0;}
#ld-courses-carousel .ldc-sub{font-size:17px;color:var(--ldc-muted);margin-top:12px;max-width:560px;margin-left:auto;margin-right:auto;}

/* Carousel viewport is bounded to the page container (1366px) so tiles live
   within the same left/right borders as the rest of the homepage. Tiles peek
   at the container's inner edges, not the screen edges. */
#ld-courses-carousel .ldc-viewport{max-width:var(--ldc-container);margin:28px auto 0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
#ld-courses-carousel .ldc-viewport::-webkit-scrollbar{display:none;}
/* Small leading/trailing pad so the centred first tile shows a partial
   neighbour at each container edge (Apple-style peek within the border). */
#ld-courses-carousel .ldc-track{display:flex;gap:22px;padding:0 var(--ldc-gutter);justify-content:flex-start;}

/* Card (desktop: shorter so the whole section fits one screen) */
#ld-courses-carousel .ldc-cardwrap{flex:0 0 300px;scroll-snap-align:center;display:flex;flex-direction:column;}
#ld-courses-carousel .ldc-card{
  position:relative;width:100%;aspect-ratio:5/7;border-radius:var(--ldc-radius);
  overflow:hidden;text-decoration:none;color:#fff;display:block;
  box-shadow:0 12px 32px rgba(10,31,68,.14);background:#dfe3ea;
  transition:transform .35s ease, box-shadow .35s ease;
}
#ld-courses-carousel .ldc-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(10,31,68,.20);}
#ld-courses-carousel .ldc-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;}
#ld-courses-carousel .ldc-scrim{position:absolute;inset:0;display:block;}

#ld-courses-carousel .ldc-content{position:absolute;left:0;right:0;bottom:0;padding:22px 22px;z-index:2;text-align:center;display:block;}
#ld-courses-carousel .ldc-cat{display:block;font-size:22px;font-weight:700;line-height:1.15;letter-spacing:-.01em;margin-bottom:8px;}
#ld-courses-carousel .ldc-desc{display:block;font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.92);margin-bottom:12px;min-height:54px;}
#ld-courses-carousel .ldc-price{display:block;font-size:15px;font-weight:600;color:#fff;margin-bottom:6px;}
#ld-courses-carousel .ldc-price b{font-size:19px;color:#fff;}
#ld-courses-carousel .ldc-accent{font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:16px;}
#ld-courses-carousel .ldc-dot{width:7px;height:7px;border-radius:50%;display:inline-block;}
#ld-courses-carousel .ldc-cta{display:inline-block;background:#fff;color:var(--ldc-navy);font-size:14px;font-weight:600;padding:11px 24px;border-radius:9999px;text-decoration:none;}

/* Controls */
#ld-courses-carousel .ldc-controls{max-width:var(--ldc-container);margin:24px auto 0;padding:0 var(--ldc-gutter);display:flex;align-items:center;justify-content:center;gap:28px;position:relative;}
#ld-courses-carousel .ldc-dots{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
#ld-courses-carousel .ldc-dot-nav{width:8px;height:8px;border-radius:9999px;background:#c4cad6;transition:all .3s;}
#ld-courses-carousel .ldc-dot-nav.active{width:26px;background:var(--ldc-navy);}
#ld-courses-carousel .ldc-arrows{display:flex;gap:12px;}
#ld-courses-carousel .ldc-arrow{width:44px;height:44px;border-radius:9999px;border:none;background:#fff;box-shadow:0 4px 14px rgba(10,31,68,.12);color:var(--ldc-navy);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;}

/* Credit terms */
#ld-courses-carousel .ldc-terms{max-width:var(--ldc-container);margin:40px auto 0;padding:0 var(--ldc-gutter);}
#ld-courses-carousel .ldc-terms p{font-size:12px;line-height:1.6;color:#86909f;margin:0;}
#ld-courses-carousel .ldc-terms .ast{margin-right:2px;}
#ld-courses-carousel .ldc-terms b{font-weight:600;color:#6b7585;}
#ld-courses-carousel .ldc-terms a{color:#6b7585;text-decoration:underline;}

/* Mobile (Apple-exact: 73.8vw tile, 13.1vw peek, 13px gap) */
@media (max-width:767px){
  #ld-courses-carousel{padding:36px 0 40px;}
  #ld-courses-carousel .ldc-head{padding:0 20px;}
  #ld-courses-carousel .ldc-title{font-size:27px;}
  #ld-courses-carousel .ldc-sub{font-size:15px;}
  #ld-courses-carousel .ldc-track{padding:0 13.1vw;gap:13px;}
  #ld-courses-carousel .ldc-cardwrap{flex:0 0 73.8vw;}
  #ld-courses-carousel .ldc-cat{font-size:20px;}
  #ld-courses-carousel .ldc-controls{padding:0 20px;justify-content:center;}
  #ld-courses-carousel .ldc-arrows{display:none;}
  #ld-courses-carousel .ldc-terms{padding:0 20px;margin-top:28px;}
  #ld-courses-carousel .ldc-terms p{font-size:11px;line-height:1.65;}
}