/* ----------------------------------------------------------------------------
 * Learning centre, v3 design system.
 *
 * Covers the 23 *_tutorial pages plus manufacturdemo / retaildemo /
 * distributerdemo. They share one layout: a left rail of numbered lessons
 * (.list-group.nav-tabs > .list-group-item) beside a video pane
 * (.bhoechie-tab-content), under a "Tutorial Videos" heading.
 *
 * Scoped under .v3-tut, a class added to each page's existing root
 * .container-fluid. That matters here: the pages lean on Bootstrap names
 * (.breadcrumb, .list-group, .list-group-item, .nav-tabs, .container) which
 * must not be restyled site-wide — the shared header and every other page use
 * them too.
 *
 * Tokens come from v3-shell.css (:root), loaded by views/partials/v3_head.php.
 * -------------------------------------------------------------------------- */

.v3-tut{
  font-family:var(--v3-body);background:var(--v3-paper);color:var(--v3-ink);
  margin-top:0!important;                  /* was inline margin-top:5rem */
  padding-block:clamp(32px,4.5vw,64px);
  font-size:17px;line-height:1.6;
}
.v3-tut *,.v3-tut *::before,.v3-tut *::after{box-sizing:border-box}
.v3-tut a:focus-visible{outline:3px solid var(--v3-lime);outline-offset:3px}

/* page heading */
.v3-tut > .container > h1{
  font-family:var(--v3-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(34px,4.6vw,58px)!important;line-height:.95;
  text-align:left!important;margin:0 0 28px;color:var(--v3-ink);text-wrap:balance;
}

/* breadcrumb */
.v3-tut .breadcrumb{
  background:transparent;padding:0;margin:0 0 18px;border-radius:0;
  font-family:var(--v3-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
}
.v3-tut .breadcrumb > li + li::before{content:"/";color:var(--v3-steel-2);padding:0 8px}
.v3-tut .breadcrumb a{color:var(--v3-steel)}
.v3-tut .breadcrumb a:hover{color:var(--v3-ink);text-decoration:none}

/* lesson rail */
.v3-tut .list-group.nav-tabs{
  border:1px solid var(--v3-rule);border-radius:6px;overflow:hidden;background:var(--v3-card);
}
.v3-tut .list-group-item{
  display:block;border:0;border-bottom:1px solid var(--v3-rule);border-radius:0!important;
  background:var(--v3-card);color:var(--v3-ink);
  font-family:var(--v3-body);font-weight:600;font-size:14.5px;line-height:1.4;
  padding:13px 16px;transition:background .15s ease,color .15s ease;
}
.v3-tut .list-group-item:last-child{border-bottom:0}
.v3-tut a.list-group-item:hover{background:var(--v3-paper);color:var(--v3-ink);text-decoration:none}
.v3-tut a.list-group-item.active,
.v3-tut a.list-group-item.active:hover,
.v3-tut a.list-group-item.active:focus{
  background:var(--v3-ink)!important;color:#f2f4ea!important;border-color:var(--v3-ink);
}
/* module name sits at the top of the rail */
.v3-tut .list-group-item.fst-hd{
  background:var(--v3-lime);color:var(--v3-ink);
  font-family:var(--v3-display);font-weight:800;text-transform:uppercase;
  font-size:24px;line-height:1;padding:16px;border-bottom:0;
}
.v3-tut .list-group-item.fst-hd:hover{background:var(--v3-lime);color:var(--v3-ink)}

/* video pane */
.v3-tut .bhoechie-tab-content{
  background:var(--v3-card);border:1px solid var(--v3-rule);border-radius:6px;
  padding:clamp(16px,2.2vw,26px);
}
.v3-tut .bhoechie-tab-content h2,
.v3-tut .bhoechie-tab-content h3{
  font-family:var(--v3-display);font-weight:800;text-transform:uppercase;
  font-size:26px;line-height:1.02;margin:0 0 14px;color:var(--v3-ink);
}
.v3-tut .bhoechie-tab-content p,
.v3-tut .bhoechie-tab-content li{color:var(--v3-steel);line-height:1.6;font-size:16px}
.v3-tut .bhoechie-ul,.v3-tut .bhoechieul,.v3-tut .list-group-ul{padding-left:20px;margin:12px 0}

/* keep embedded video 16:9 and inside its column */
.v3-tut .elementor-video,
.v3-tut .video-widget-container iframe,
.v3-tut .bhoechie-tab-content iframe{
  width:100%;aspect-ratio:16/9;height:auto;display:block;
  border:0;border-radius:4px;background:var(--v3-ink);
}
.v3-tut img{max-width:100%;height:auto}

@media (max-width:991px){
  /* the rail is a col-*-4 that becomes cramped; let it run full width above the video */
  .v3-tut .video-section{display:flex;flex-direction:column}
  .v3-tut .bhoechie-tab-menu,.v3-tut .bhoechie-tab{width:100%;float:none}
  .v3-tut .bhoechie-tab{margin-top:20px}
}
@media (max-width:600px){
  .v3-tut{font-size:16px}
  .v3-tut .list-group-item{font-size:14px;padding:12px 14px}
}
@media (prefers-reduced-motion:reduce){
  .v3-tut *{transition:none!important;animation:none!important}
}