/* ==========================================================================
   PECB Skills — catalog styles
   Competency cards & grid, search / topic tabs / sort toolbar, the single
   competency page (hero, stats, module outline), and trainer cards.
   Builds on the tokens in style.css; everything is scoped to .pecb-skills so
   the theme and Elementor cannot leak in.
   ========================================================================== */

/* ----------  Section shell  ---------- */
.pecb-skills .skills-section{ padding-block: var(--space-7); }

.pecb-skills .skills-intro{ margin-bottom: var(--space-6); max-width: 46rem; }
.pecb-skills .skills-intro h1{ font-size: var(--fs-2xl); }
.pecb-skills .skills-intro h2{ font-size: var(--fs-xl); }

.pecb-skills .screen-reader-text{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0 !important; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ----------  Toolbar: search + sort  ---------- */
.pecb-skills .skills-toolbar{
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.pecb-skills .skills-search{
  flex: 1 1 22rem;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.7rem var(--space-5);
  box-shadow: var(--shadow-sm);
  max-height: 46px;
}

.pecb-skills .skills-search .icon{
  width: 18px; height: 18px;
  color: var(--color-text-subtle);
  flex: none;
}

.pecb-skills .skills-search input{
  flex: 1;
  min-width: 0;
  border: 0 !important;
  outline: none;
  background: transparent;
  font-size: var(--fs-sm);
  padding: 0 !important;
}

.pecb-skills .skills-search input::placeholder{ color: var(--color-text-subtle); }

.pecb-skills .skills-sort{ flex: 0 0 auto; }

.pecb-skills .skills-sort select{
  appearance: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.7rem 2.4rem 0.7rem var(--space-5);
  font-size: var(--fs-sm);
  color: var(--color-text);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  min-height: 46px;
}

/* ----------  Topic tabs  ---------- */
.pecb-skills .skills-tabs{ margin-bottom: var(--space-5); }

/* ----------  Count / note row  ---------- */
.pecb-skills .skills-meta-row{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
    min-height: 1.4rem;
    padding-top: 40px;
    border-top: 1px solid var(--color-border);
    margin-top: 40px;
}

.pecb-skills .skills-count,
.pecb-skills .skills-note{
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.pecb-skills .skills-note{ color: var(--color-text-subtle); }

.pecb-skills .skills-empty{
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-muted);
}

/* ----------  Competency grid + card  ---------- */
.pecb-skills .comp-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--space-5);
}

.pecb-skills .comp-card{
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  box-shadow: 0 2px 6px -1px rgba(15, 26, 41, 0.06);
}

.pecb-skills .comp-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }

.pecb-skills .comp-card__media{
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  /* background: linear-gradient(135deg, #0b1f33, #0e3550); */
  overflow: hidden;
}

.pecb-skills .comp-card__cover{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: var(--space-4);
  text-align: center;
  color: #8f959c;
  background-color: #1f2328;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 14px),
    linear-gradient(135deg, #2a2e33 0%, #1c1f23 100%);
}

.pecb-skills .comp-card__cover-icon{
  display: inline-flex;
  width: 2rem;
  height: 2rem;
}

.pecb-skills .comp-card__cover-icon svg{ width: 100%; height: 100%; }

.pecb-skills .comp-card__cover-label{
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: #8f959c;
}

.pecb-skills .comp-card__flag{
  display: none !important;
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 0.825rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.pecb-skills .comp-card__flag--trial{ background: var(--color-ink); color: var(--color-text-invert); }

.pecb-skills .comp-card__body{
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  flex: 1;
}

.pecb-skills .comp-card__topic{
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.pecb-skills .comp-card__title{
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.35;
}

.pecb-skills .comp-card__title a:hover{ color: var(--color-accent); }

.pecb-skills .comp-card__meta{
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.pecb-skills .comp-card__link{
  margin-top: auto;
  padding-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-ink);
}

.pecb-skills .comp-card__link:hover{ color: var(--color-accent); }

.pecb-skills .skills-arrow{
  width: 15px; height: 15px;
  transition: transform var(--dur) var(--ease);
}

.pecb-skills .comp-card__link:hover .skills-arrow,
.pecb-skills .skills-cta__link:hover .skills-arrow{ transform: translateX(3px); }

/* ----------  "Explore all" / "Meet all" CTA  ---------- */
.pecb-skills .skills-cta{
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

.pecb-skills .skills-cta__link{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--color-ink);
}

.pecb-skills .skills-cta__link:hover{ color: var(--color-accent); }


/* Apply same look as pecb-btn-white to existing .skills-cta__link */
.pecb-skills .skills-cta__link{
  border-radius: 999px !important;
  padding: 4px 10px !important;
  height: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  overflow: hidden !important;
  position: relative !important;
  width: fit-content !important;
  background: #fff !important;
  color: #0d1b2a !important;
  border: 1px solid #d9dee5 !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  transition: all .3s ease !important;
}

/* Make room for left icon */
.pecb-skills .skills-cta__link{
  padding-left: 48px !important;
  padding-right: 14px !important;
}

/* Icon bubble from existing svg */
.pecb-skills .skills-cta__link .skills-arrow{
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 14px !important;
  height: 14px !important;
  color: #0d1b2a !important;
  z-index: 2 !important;
  transition: left .35s ease !important;
}

/* Circle behind icon */
.pecb-skills .skills-cta__link::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #f3f6fa !important;
  transition: left .35s ease !important;
  z-index: 1 !important;
}

/* Keep text above bg */
.pecb-skills .skills-cta__link{
  z-index: 0;
}
.pecb-skills .skills-cta__link > *:not(.skills-arrow){
  position: relative;
  z-index: 2;
}

/* Hover: icon bubble goes right, text shifts left */
.pecb-skills .skills-cta__link:hover::before{
  left: calc(100% - 34px) !important;
}
.pecb-skills .skills-cta__link:hover .skills-arrow{
  left: calc(100% - 24px) !important; /* 34 bubble - 14 icon centered */
}

/* text side swap feeling */
.pecb-skills .skills-cta__link:hover{
  padding-left: 14px !important;
  padding-right: 46px !important;
}

/* more left padding for icon bubble */
.pecb-skills .skills-cta__link::before{
  left: 6px !important;   /* was 0 */
}

.pecb-skills .skills-cta__link .skills-arrow{
  left: 16px !important;  /* was 10 */
}

/* keep end position aligned on hover */
.pecb-skills .skills-cta__link:hover::before{
  left: calc(100% - 40px) !important; /* 34px bubble + 6px inset */
}

.pecb-skills .skills-cta__link:hover .skills-arrow{
  left: calc(100% - 30px) !important; /* center 14px icon inside bubble */
}

/* ----------  Pagination (centered, with worded steps)  ----------
   overrides.css pins .pagination to flex-end with !important, so the centered
   catalog variant has to answer in kind. */
.pecb-skills .skills-pagination{ justify-content: center !important; }
.pecb-skills .skills-pagination .pagination__step{ padding-inline: var(--space-4) !important; }
.pecb-skills .skills-pagination .pagination__gap{ border-color: transparent !important; cursor: default !important; }
.pecb-skills .skills-pagination button[disabled]{ opacity: 0.45; cursor: not-allowed !important; }
.pecb-skills .skills-pagination .pagination__gap[disabled]{ opacity: 1; }

/* ==========================================================================
   Single competency
   ========================================================================== */
.pecb-skills .skills-breadcrumbs{ padding-block: var(--space-5) 0; }

/* The page reads as a stack of white panels on a tinted ground. */

.pecb-skills .comp-panel{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

/* ----------  Two-column shell  ----------
   The aside stretches to the row height (no align-items: start) so the card
   inside it has somewhere to stick to. */
.pecb-skills .comp-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 23rem;
  gap: var(--space-5);
  padding-block: var(--space-5) var(--space-7);
}


.pecb-skills .comp-layout__main{
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.pecb-skills .comp-layout__aside{ min-width: 0; }

.pecb-skills .comp-aside__inner{
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.pecb-skills .comp-aside__login{
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: calc(var(--space-2) * -1);
}

.pecb-skills .comp-aside__login a{ color: var(--color-ink); font-weight: 600; text-decoration: underline; }
.pecb-skills .comp-aside__login a:hover{ color: var(--color-accent); }

/* ----------  Hero panel  ---------- */
.pecb-skills .comp-badges{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.pecb-skills .comp-badge{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text);
  background: var(--color-bg-alt);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.7rem;
}

/* The certificate a competency leads to — the one badge that earns a colour. */
.pecb-skills .comp-badge--cert{
  color: var(--color-warning-ink);
  background: var(--color-warning-soft);
}

.pecb-skills .comp-badge svg{ width: 13px; height: 13px; flex: none; }


.pecb-skills .comp-hero__title{ font-size: var(--fs-2xl); margin-bottom: var(--space-4); }

.pecb-skills .comp-hero__desc{
  color: var(--color-text-muted);
  max-width: 58rem;
}

/* Rating: the stars round to whole marks, the number beside them is exact. */
.pecb-skills .comp-rating{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.pecb-skills .comp-rating__stars{ display: inline-flex; gap: 2px; }

.pecb-skills .comp-rating__star{ display: inline-flex; color: var(--color-border-strong); }
.pecb-skills .comp-rating__star.is-on{ color: var(--color-accent); }
.pecb-skills .comp-rating__star svg{ width: 15px; height: 15px; }

.pecb-skills .comp-rating__value{ font-size: var(--fs-sm); font-weight: 700; color: var(--color-ink); }

/* ----------  Free-during-trial notice  ---------- */
.pecb-skills .comp-notice{
  display: flex;
  gap: var(--space-3);
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
}

.pecb-skills .comp-notice__icon{
  display: inline-flex;
  flex: none;
  color: var(--color-warning);
  margin-top: 1px;
}

.pecb-skills .comp-notice__icon svg{ width: 20px; height: 20px; }

.pecb-skills .comp-notice__title{
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-warning-ink);
  margin-bottom: var(--space-1);
}

.pecb-skills .comp-notice__body{
  font-size: var(--fs-sm);
  color: var(--color-warning-ink);
  opacity: 0.85;
}

/* ----------  Course overview  ---------- */
.pecb-skills .comp-overview__title{ font-size: var(--fs-lg); }

.pecb-skills .comp-overview__title + *{ margin-top: var(--space-4); }
.pecb-skills .comp-overview > * + .comp-overview__title{ margin-top: var(--space-7); }

.pecb-skills .comp-overview__text{ color: var(--color-text-muted); }
.pecb-skills .comp-overview__lead{ font-size: var(--fs-sm); color: var(--color-text-muted); }
.pecb-skills .comp-overview__lead + .comp-checklist{ margin-top: var(--space-3); }

.pecb-skills .comp-overview {
  display: none !important;
}

.pecb-skills .comp-checklist{
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pecb-skills .comp-checklist li{
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.pecb-skills .comp-checklist svg{
  width: 18px; height: 18px;
  flex: none;
  margin-top: 1px;
  color: var(--color-accent);
}

/* ----------  Competency content (module outline)  ---------- */
.pecb-skills .comp-content__head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.pecb-skills .comp-content__title{ font-size: var(--fs-md); font-weight: 700; }
.pecb-skills .comp-content__meta{ font-size: var(--fs-sm); color: var(--color-text-muted); }

.pecb-skills .outline-list{ display: flex; flex-direction: column; gap: var(--space-3); }

.pecb-skills .outline-row{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.pecb-skills .outline-row__head{
  width: 100%;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: background var(--dur) var(--ease);
  border-radius: 0;
}

.pecb-skills .outline-row__head:hover{ background: var(--color-bg-soft); }

/* An open module keeps its header tinted so the lessons below read as its own. */
.pecb-skills .outline-row__head[aria-expanded="true"]{ background: var(--color-bg-alt); }

.pecb-skills .outline-row__num{
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

.pecb-skills .outline-row__title{ font-weight: 700; color: var(--color-ink); font-size: var(--fs-sm); }

.pecb-skills .outline-row__meta{
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.pecb-skills .outline-row__chev{
  display: inline-flex;
  color: var(--color-text-muted);
  transition: transform var(--dur) var(--ease);
}

.pecb-skills .outline-row__chev svg{ width: 16px; height: 16px; }
.pecb-skills .outline-row__head[aria-expanded="true"] .outline-row__chev{ transform: rotate(180deg); }

.pecb-skills .outline-row__body{ padding: 0 var(--space-5); }

.pecb-skills .outline-row__desc{
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  padding-top: var(--space-4);
}

.pecb-skills .capsule-list{ display: flex; flex-direction: column; }

.pecb-skills .capsule{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  font-size: var(--fs-sm);
}

.pecb-skills .capsule + .capsule{ border-top: 1px solid var(--color-border); }

.pecb-skills .capsule__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  color: var(--color-text-subtle);
}

.pecb-skills .capsule__icon svg{ width: 14px; height: 14px; }

.pecb-skills .capsule__title{ color: var(--color-text-muted); }

.pecb-skills .capsule__meta{
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.pecb-skills .capsule__flag{
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-success);
  background: var(--color-success-soft);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.45rem;
}

.pecb-skills .outline-row__assessment{
  margin-top: var(--space-2);
  padding: var(--space-3) 0 var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
}

.pecb-skills .capsule-list + .outline-row__assessment{ margin-top: 0; }
.pecb-skills .capsule-list:last-child{ padding-bottom: var(--space-4); }

/* ----------  Trainer panel + chip  ---------- */
.pecb-skills .comp-trainer__title{ font-size: var(--fs-md); font-weight: 700; }

.pecb-skills .comp-trainer__note{
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
}

.pecb-skills .trainer-chip{
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  width: min(24rem, 100%);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  margin-bottom: var(--space-2);
}

.pecb-skills .trainer-chip:hover{ border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }

.pecb-skills .trainer-chip__photo{
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  flex: none;
}

.pecb-skills .trainer-chip__body{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pecb-skills .trainer-chip__name{ font-size: var(--fs-sm); font-weight: 700; color: var(--color-ink); }

.pecb-skills .trainer-chip__role{
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  font-weight: 500;
}

.pecb-skills .trainer-chip__meta{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.pecb-skills .trainer-chip__meta .skills-play{ width: 14px; height: 14px; }
.pecb-skills .trainer-chip .skills-chevron{ color: var(--color-text-subtle); }
.pecb-skills .trainer-chip:hover .skills-chevron{ color: var(--color-ink); }

/* ----------  Sidebar: facts card  ---------- */
.pecb-skills .comp-facts:empty{ display: none; }

.pecb-skills .comp-facts__media{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}

.pecb-skills .comp-facts__list{
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pecb-skills .comp-facts__list li{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.pecb-skills .comp-facts__icon{ display: inline-flex; flex: none; color: var(--color-text-muted); }
.pecb-skills .comp-facts__icon svg{ width: 18px; height: 18px; }

/* ----------  Sidebar: purchase card (the store product widget lives inside) ---------- */
.pecb-skills .comp-buy:empty{ display: none; }

/* ----------  Sidebar: subscription card  ----------
   The one card on the page with a solid outline: it is the primary offer. */
.pecb-skills .comp-sub{
  border: 2px solid var(--color-ink);
  box-shadow: var(--shadow-sm);
}

.pecb-skills .comp-sub__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.pecb-skills .comp-sub__title{ font-size: var(--fs-md); font-weight: 700; }

.pecb-skills .comp-sub__badge{
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-success);
  background: var(--color-success-soft);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.6rem;
  white-space: nowrap;
}

.pecb-skills .comp-sub__note{
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.pecb-skills .comp-sub__list{
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-5);
}

.pecb-skills .comp-sub__list li{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}

.pecb-skills .comp-sub__check{
  width: 20px; height: 20px;
  flex: none;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-success-soft);
  color: var(--color-success);
}

.pecb-skills .comp-sub__cta{
  width: 100%;
  border-radius: var(--radius-md);
  padding-block: 0.9rem;
  font-size: var(--fs-base);
}

.pecb-skills .comp-sub__cta:hover .skills-arrow{ transform: translateX(3px); }

/* ----------  Responsive  ----------
   The sidebar keeps sticking down to tablet width; below that the columns
   stack and a sticky card would cover the content it belongs to. */
@media (max-width: 1100px){
  .pecb-skills .comp-layout{ grid-template-columns: minmax(0, 1fr) 19rem; }
}

@media (max-width: 900px){
  .pecb-skills .comp-layout{ grid-template-columns: minmax(0, 1fr) 17.5rem; gap: var(--space-4); }
  .pecb-skills .comp-panel{ padding: var(--space-4); }
}

@media (max-width: 767px){
  .pecb-skills .comp-layout{ grid-template-columns: minmax(0, 1fr); }
  .pecb-skills .comp-aside__inner{ position: static; }
  .pecb-skills .comp-hero__title{ font-size: var(--fs-xl); }
  .pecb-skills .outline-row__head{ grid-template-columns: 1.25rem minmax(0, 1fr) auto; row-gap: var(--space-1); }
  .pecb-skills .outline-row__meta{ grid-column: 2; }
  .pecb-skills .outline-row__chev{ grid-column: 3; grid-row: 1; }
}

/* ==========================================================================
   Trainers
   ========================================================================== */
.pecb-skills .trainer-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-5);
}

.pecb-skills .trainer-card{
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  box-shadow: 0 2px 6px -1px rgba(15, 26, 41, 0.06);
}

.pecb-skills .trainer-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pecb-skills .trainer-card:hover .trainer-card__link{ color: var(--color-accent); }

/* The photo sits inset in the card frame instead of bleeding to its edges, so
   it carries a radius of its own. */
.pecb-skills .trainer-card__photo{
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--color-bg-alt);
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
  overflow: hidden;
}

.pecb-skills .trainer-card__photo img{ width: 100%; height: 100%; object-fit: cover; }
.pecb-skills .trainer-card__placeholder{ display: block; width: 100%; height: 100%; background: var(--color-bg-alt); }

.pecb-skills .trainer-card__body{
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-5) var(--space-4);
  flex: 1;
}

.pecb-skills .trainer-card__name{ font-size: var(--fs-md); font-weight: 700; }
.pecb-skills .trainer-card__name a:hover{ color: var(--color-accent); }

.pecb-skills .trainer-card__role{ font-size: var(--fs-sm); font-weight: 400; color: var(--color-text-muted);}

/* Footer: count on the left, profile link on the right, ruled off from the
   body across the full width of the card. */
.pecb-skills .trainer-card__foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

.pecb-skills .trainer-card__count{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.pecb-skills .skills-play{ width: 18px; height: 18px; flex: none; }

.pecb-skills .trainer-card__link{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
}

.pecb-skills .trainer-card__link:hover{ color: var(--color-accent); }

.pecb-skills .skills-chevron{
  width: 14px; height: 14px;
  flex: none;
  transition: transform var(--dur) var(--ease);
}

.pecb-skills .trainer-card__link:hover .skills-chevron{ transform: translateX(3px); }

/* ----------  Single trainer profile  ---------- */
.pecb-skills .trainer-profile{
  display: grid;
  grid-template-columns: 18rem minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

.pecb-skills .trainer-profile__aside{
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

.pecb-skills .trainer-profile__photo{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.pecb-skills .trainer-profile__name{ font-size: var(--fs-2xl); }
.pecb-skills .trainer-profile__role{ font-weight: 500; color: var(--color-accent-blue); margin-top: var(--space-2); }

.pecb-skills .trainer-profile__heading{
  font-size: var(--fs-lg);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.pecb-skills .trainer-profile__bio{ color: var(--color-text-muted); }

/* ==========================================================================
   Skeletons (space-reserving placeholders)
   ========================================================================== */
.pecb-skills .skeleton{
  display: block;
  background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 37%, #eef2f7 63%);
  background-size: 400% 100%;
  animation: pecb-skills-shimmer 1.3s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.pecb-skills .comp-card.is-skeleton .comp-card__media{ border-radius: 0; }

/* The skeleton footer is one bar in a row of its own, so the shared line
   margin would push the ruled row taller than the real card's. */
.pecb-skills .trainer-card.is-skeleton .trainer-card__foot .skeleton--line{ margin-bottom: 0; }

.pecb-skills .skeleton--line{ height: 2rem; width: 80%; margin-bottom: var(--space-3); }
.pecb-skills .skeleton--xs{ width: 45%; height: 1rem; }
.pecb-skills .skeleton--sm{ width: 75%; height: 2rem; }
.pecb-skills .skeleton--lg{ width: 85%; height: 10rem; }
.pecb-skills .skeleton--title{ width: 70%; height: 5rem; }
.pecb-skills .skeleton--photo{ width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-md); }

@keyframes pecb-skills-shimmer{
  0%{ background-position: 100% 50%; }
  100%{ background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce){
  .pecb-skills .skeleton{ animation: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px){
  .pecb-skills .comp-hero__inner{ grid-template-columns: minmax(0, 1fr); }
  .pecb-skills .comp-buy{ position: static; }
  .pecb-skills .comp-trainer__inner{ grid-template-columns: 12rem minmax(0, 1fr); }
  .pecb-skills .trainer-profile{ grid-template-columns: 14rem minmax(0, 1fr); }
}

@media (max-width: 767px){
  .pecb-skills .comp-grid,
  .pecb-skills .trainer-grid{ grid-template-columns: 1fr; }
  .pecb-skills .skills-toolbar{ flex-direction: column; align-items: stretch; }
  .pecb-skills .skills-sort select{ width: 100%; }
  .pecb-skills .comp-trainer__inner,
  .pecb-skills .trainer-profile{ grid-template-columns: minmax(0, 1fr); }
  .pecb-skills .comp-trainer__photo img,
  .pecb-skills .trainer-profile__photo{ max-width: 16rem; }
  .pecb-skills .outline-row__head{ grid-template-columns: auto minmax(0, 1fr) auto; row-gap: var(--space-2); }
  .pecb-skills .outline-row__meta{ grid-column: 2 / 3; }
  .pecb-skills .comp-stats{ gap: var(--space-5); }
  .pecb-skills .comp-trainer{ padding: var(--space-4); border-radius: 16px;}
}

/* ==========================================================================
   Carousel — the popular-competency and latest-trainer strips
   One horizontally scrolling track with scroll-snap: the arrows nudge it by a
   single card, and the fractional --per-view leaves the next card half visible
   so the strip reads as scrollable without a scrollbar.
   ========================================================================== */
/* Full-bleed strips. A carousel reads as scrollable only when the row runs
   past the edge of the screen, so these two sections break out of whatever
   container the page drops them into and keep just a gutter. --pecb-vw is
   the viewport width without the scrollbar, published by initFullBleed();
   100vw is the fallback for a stylesheet running without JS. */
/* --carousel-inset lines the strip up with the page: the first card, the
   heading and the arrows all start where a 1200px container would, and the
   row then runs on past the right edge. Below 1200px the max() collapses to
   a plain gutter. The percentage resolves against .container, which is the
   full-bleed width, so only .container's own children may use it. */
.pecb-skills.skills-section--full{
  --carousel-inset: max(var(--space-5), (100% - var(--container)) / 2);
  width: var(--pecb-vw, 100vw);
  max-width: var(--pecb-vw, 100vw);
  margin-inline: calc(50% - var(--pecb-vw, 100vw) / 2);
}

.pecb-skills.skills-section--full > .container{
  max-width: none;
  padding-inline: 0;
}

.pecb-skills.skills-section--full .skills-intro{ padding-inline: var(--carousel-inset); }

.pecb-skills .skills-carousel{
  --carousel-gap: var(--space-5);
  --per-view: 3;
  --gaps: 2;
  --card-max: none;
}

.pecb-skills .skills-carousel--comp{ --per-view: 3.5; --gaps: 3; --card-max: 400px; }
.pecb-skills .skills-carousel--trainer{ --per-view: 4.5; --gaps: 4; --card-max: 325px; }

.pecb-skills .skills-carousel__nav{
  padding-inline: var(--carousel-inset, 0);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* display:flex above beats the UA [hidden] rule, so hiding needs saying. */
.pecb-skills .skills-carousel__nav[hidden]{ display: none; }

.pecb-skills .skills-carousel__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.pecb-skills .skills-carousel__btn:hover:not([disabled]){
  border-color: var(--color-ink);
  box-shadow: var(--shadow-sm);
}

.pecb-skills .skills-carousel__btn[disabled]{ opacity: 0.35; cursor: default; }

.pecb-skills .skills-carousel__btn svg{ width: 18px; height: 18px; }
.pecb-skills .skills-carousel__btn--prev svg{ transform: rotate(180deg); }

/* A row with somewhere to go says so under the pointer; one that fits its
   container is not a drag target and keeps the ordinary cursor. */
.pecb-skills .skills-carousel.is-draggable .skills-carousel__track{ cursor: grab; }

.pecb-skills .skills-carousel.is-dragging .skills-carousel__track{
  cursor: grabbing;
  /* Belt and braces to the preventDefault() on pointerdown: a drag that starts
     over a card title must not paint a text selection across the row. */
  user-select: none;
  -webkit-user-select: none;
}

.pecb-skills .skills-carousel__track{
  display: flex;
  gap: var(--carousel-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* The cards lift and cast a shadow on hover; the padding keeps that inside
     the scroll box instead of letting overflow-x clip it. */
  padding-block: 6px 10px;
  padding-inline: var(--carousel-inset, 0) var(--space-5);
  /* Snap to the inset edge, not to the padding box, so a card lands where
     the first one starts rather than sliding under the gutter. */
  scroll-padding-inline-start: var(--carousel-inset, 0);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pecb-skills .skills-carousel__track::-webkit-scrollbar{ display: none; }

.pecb-skills .skills-carousel__track > *{
  flex: 0 0 calc((100% - var(--gaps) * var(--carousel-gap)) / var(--per-view));
  max-width: var(--card-max);
  min-width: 290px;
  scroll-snap-align: start;
}

/* An empty/error message is the only child: let it fill the track. */
.pecb-skills .skills-carousel__track > .skills-empty{ flex: 1 1 100%; max-width: none; }

@media (prefers-reduced-motion: reduce){
  .pecb-skills .skills-carousel__track{ scroll-behavior: auto; }
}

@media (max-width: 1280px){
  .pecb-skills .skills-carousel--comp{ --per-view: 2.5; --gaps: 2; }
  .pecb-skills .skills-carousel--trainer{ --per-view: 3.5; --gaps: 3; }
}

@media (max-width: 960px){
  .pecb-skills .skills-carousel--comp{ --per-view: 1.5; --gaps: 1; }
  .pecb-skills .skills-carousel--trainer{ --per-view: 2.5; --gaps: 2; }
}

@media (max-width: 767px){
  .pecb-skills .skills-carousel--comp,
  .pecb-skills .skills-carousel--trainer{ --per-view: 1; --gaps: 0; }
  .pecb-skills.skills-section--full{ --carousel-inset: var(--space-4); }
}