/* ==========================================================================
   Skills section, inbithaq look — theme 33 (brandseducation) only.
   Loaded by udemy_theme/home_page.blade.php, which only theme 33 renders.
   Every rule is nested under .cp-skills (the Section 6 <section>), so nothing
   here can reach another block of this page or any other tenant.
   Values copied from resources/assets/css/theme_css/master.css
   (.unlockHead h2/h3, .childtablinks, .cta-button.primary) — the rules
   inbithaq's homepage section renders with.
   ========================================================================== */

.cp-skills {
  --cp-gold: #C69A47;
  --cp-gold-dark: #a9823a;
  --cp-ink: #0f1820;
  --cp-pill-line: #757575;
  padding: 40px 0 60px;
}

/* Intro: small gold kicker, big centred statement (master.css .unlockHead). */
.cp-skills h2 {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  color: #a435f0;
  text-align: center;
}
.cp-skills h2 + .section__sub {
  max-width: 1000px;
  margin: 0 auto 40px;
  font-size: 32px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--cp-ink);
  text-align: center;
}

.cp-skills .tab:hover, .cp-skills .tab:focus-visible {
    background: #a435f0 !important;
    border-color: #a435f0 !important;
    color: #fff;
   }

/* Pill row: wraps instead of scrolling, centred (master.css .childtablinks). */
.cp-skills .tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  overflow: visible;
  border-bottom: 0;
  margin: 0 0 30px;
}
.cp-skills .tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  max-width: 100%;
  padding: 12px 24px;
  box-sizing: border-box;
  border: 1px solid var(--cp-pill-line);
  border-radius: 50px;
  background: #fff;
  color: var(--cp-pill-line);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  white-space: normal;          /* long Arabic names wrap inside the pill */
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.cp-skills .tab:hover,
.cp-skills .tab:focus-visible {
  background: #a435f0;
  border-color: #a435f0;
  color: #fff;
}
.cp-skills .tab.is-active {
  background: #a435f0;
    border-color: #a435f0;
    color: #fff;
}

/* A panel with fewer cards than slots keeps card width; it does not stretch. */
.cp-skills .carousel__track { justify-content: flex-start; }
.cp-skills .carousel__arrow {  background: #1c1d28; }
.cp-skills .carousel__arrow:hover { background: #1c1d28;  }

/* Per-panel "see all" link, centred under the cards. */
.cp-skills .skill-panel { text-align: center; }
.cp-skills .skill-panel .carousel { text-align: start; }
.cp-skills .skill-panel .link { color: #a435f0; }

/* Centred gold CTA (master.css .cta-section / .cta-button.primary). */
.cp-skills .cp-skills__cta {
  text-align: center;
  margin-top: 36px;
}
.cp-skills .cp-skills__cta a {
  display: inline-block;
  padding: 16px 24px;
  border-radius: 12px;
  background: #a435f0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.cp-skills .cp-skills__cta a:hover { background: var(--cp-gold-dark); color: #fff; }

@media (max-width: 575px) {
  .cp-skills { padding: 28px 0 40px; }
  .cp-skills h2 { font-size: 20px; }
  .cp-skills h2 + .section__sub { font-size: 22px; margin-bottom: 24px; }
  .cp-skills .tabs { gap: 10px; }
  .cp-skills .tab { min-height: 44px; padding: 10px 16px; font-size: 14px; }
}