/* ==========================================================================
   BRANDS-SPECIALIZATIONS-1 (2026-10-02) — theme 33 (brandseducation) only.
   1) The "Specializations" panel of /explore/coursecategory  (#cpSpecz, inside .cp-explore)
   2) The detail page /specialization/{slug}                  (.sz-page)
   Layout taken from Edraak's specialization cards; colours are the BRANDS tokens
   (tokens.css: --purple #497e9f, --purple-dark, --purple-tint). Nothing outside
   these two roots is styled here.
   ========================================================================== */

.cp-explore #cpSpecz,
.sz-page {
  --sz-primary: var(--purple, #497e9f);
  --sz-primary-dark: var(--purple-dark, #3a657f);
  --sz-tint: var(--purple-tint, #edf2f5);
  --sz-title: #0F1820;
  --sz-muted: #5b6670;
  --sz-border: #e4e6ea;
  --sz-orange-bg: #FFEFD1;
  --sz-orange: #BF8316;
}

/* ---------- Panel + sections ---------- */
.cp-explore #cpSpecz[hidden] { display: none !important; }
.cp-explore #cpSpecz .sz-section { margin: 0 0 40px; }
.cp-explore #cpSpecz .sz-section .headerContainer { position: relative; margin-bottom: 20px; }
.cp-explore #cpSpecz .sz-empty { padding: 24px 4px; color: #555; }

/* ---------- Card ---------- */
.sz-card {
  display: flex; gap: 32px; align-items: stretch;
  background: #fff; border-radius: 12px; box-shadow: 0 2px 14px rgba(15, 24, 32, .08);
  padding: 32px; margin: 0 0 24px; box-sizing: border-box;
}
.sz-card[hidden] { display: none !important; }
.sz-card__info { flex: 0 0 35%; max-width: 35%; display: flex; flex-direction: column; min-width: 0; }
.sz-card__courses { flex: 1 1 65%; min-width: 0; display: flex; flex-direction: column; }

.sz-card__title { margin: 0 0 12px; font-size: 20px; line-height: 1.4; font-weight: 700; color: var(--sz-title); }
.sz-card__title a { color: inherit !important; text-decoration: none; }
.sz-card__title a:hover { color: var(--sz-primary) !important; }

.sz-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14px; font-weight: 700; color: var(--sz-primary); }
.sz-stats__item { display: inline-flex; align-items: center; gap: 6px; }
.sz-stats__dot { color: #b8c2ca; }
.sz-stats svg { width: 18px; height: 18px; flex: none; }

.sz-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.sz-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; line-height: 1.2; font-weight: 700; border-radius: 24px; padding: 6px 12px; white-space: nowrap;
}
.sz-badge svg { width: 14px; height: 14px; flex: none; }
.sz-badge--type { background: var(--sz-tint); color: var(--sz-primary-dark); }
.sz-badge--level { background: var(--sz-orange-bg); color: var(--sz-orange); }
.sz-badge--weeks { background: #fff; color: var(--sz-muted); border: 1px solid var(--sz-border); }

.sz-btn {
  box-sizing: border-box; max-width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: flex-start; margin-top: auto;
  padding: 14px 50px; border: 2px solid var(--sz-primary-dark); border-radius: 8px; background: transparent;
  color: var(--sz-primary-dark) !important; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none !important;
  cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.sz-btn:hover, .sz-btn:focus-visible { background: var(--sz-primary-dark); color: #fff !important; }
.sz-btn svg { width: 16px; height: 16px; }
.sz-btn--solid { background: var(--sz-primary); border-color: var(--sz-primary); color: #fff !important; }
.sz-btn--solid:hover, .sz-btn--solid:focus-visible { background: var(--sz-primary-dark); border-color: var(--sz-primary-dark); }
.sz-btn[disabled] { opacity: .6; cursor: default; }
.sz-btn[hidden] { display: none !important; }
.sz-page .sz-empty { margin: 0; color: #555; }

/* ---------- Course mini-cards + carousel ---------- */
.sz-track { min-width: 0; }
.sz-track:not(.owl-loaded) { display: flex; gap: 16px; overflow: hidden; }
.sz-track:not(.owl-loaded) > .sz-course { flex: 0 0 calc((100% - 32px) / 3); }
.sz-course { display: block; text-decoration: none !important; color: var(--sz-title) !important; }
.sz-course__img {
  display: block; width: 100%; aspect-ratio: 180 / 112; border-radius: 8px; overflow: hidden;
  background: linear-gradient(135deg, var(--sz-primary) 0%, var(--sz-primary-dark) 100%);
}
.cp-explore #cpSpecz .sz-course__img img,
.sz-page .sz-course__img img {
  width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover; display: block; margin: 0 !important;
}
.sz-course__title {
  margin: 10px 0 8px; font-size: 14px; line-height: 1.4; font-weight: 700; color: var(--sz-title);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em;
}
.sz-course__pill {
  display: inline-block; font-size: 12px; font-weight: 600; line-height: 1.2; padding: 5px 10px; border-radius: 24px;
  background: var(--sz-tint); color: var(--sz-primary-dark);
}

.sz-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; padding-top: 16px; }
.sz-nav[hidden] { display: none !important; }
.sz-nav button {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: #E9ECEF; color: var(--sz-title); cursor: pointer; box-shadow: none;
  transition: background-color .15s ease, opacity .15s ease;
}
.sz-nav button:hover:not([disabled]) { background: #DDE2E6; }
.sz-nav button[disabled] { opacity: .4; cursor: default; }
.sz-nav button:focus-visible { outline: 2px solid var(--sz-primary); outline-offset: 2px; }
.sz-nav svg { width: 18px; height: 18px; display: block; }

/* ---------- Skeleton ---------- */
@keyframes szShimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.sz-skel {
  display: block; border-radius: 6px;
  background: linear-gradient(90deg, #eef0f2 0%, #f7f8f9 40%, #eef0f2 80%); background-size: 800px 100%;
  animation: szShimmer 1.2s linear infinite;
}
.sz-card--skel .sz-skel--title { height: 22px; width: 80%; margin-bottom: 14px; }
.sz-card--skel .sz-skel--line { height: 14px; width: 60%; margin-bottom: 12px; }
.sz-card--skel .sz-skel--btn { height: 48px; width: 220px; margin-top: auto; border-radius: 8px; }
.sz-card--skel .sz-skel--img { aspect-ratio: 180 / 112; border-radius: 8px; }
.sz-card--skel .sz-skel-row { display: flex; gap: 16px; }
.sz-card--skel .sz-skel-row > * { flex: 1 1 0; }
@media (prefers-reduced-motion: reduce) { .sz-skel { animation: none; } }

/* ---------- RTL ---------- */
[dir="rtl"] .sz-nav svg, html[lang="ar"] .sz-nav svg,
[dir="rtl"] .sz-btn svg, html[lang="ar"] .sz-btn svg { transform: scaleX(-1); }
html[lang="ar"] .sz-card, [dir="rtl"] .sz-card { direction: rtl; }
/* The theme sets .exploCenter to ltr; the course track keeps Owl's own rtl mode instead. */

/* ---------- Tablet: info above, 2 courses ---------- */
@media (max-width: 991.98px) {
  .sz-card { flex-direction: column; gap: 24px; padding: 24px; }
  .sz-card__info, .sz-card__courses { flex: 1 1 auto; max-width: 100%; }
  .sz-track:not(.owl-loaded) > .sz-course { flex-basis: calc((100% - 16px) / 2); }
  .sz-btn { margin-top: 0; }
}
/* ---------- Phone: 1.2 courses, full-width button ---------- */
@media (max-width: 575.98px) {
  .sz-card { padding: 20px; border-radius: 12px; }
  .sz-card__title { font-size: 18px; }
  .sz-btn { align-self: stretch; width: 100%; padding: 14px 20px; }
  .sz-track:not(.owl-loaded) > .sz-course { flex-basis: 80%; }
}

/* ==========================================================================
   Detail page
   ========================================================================== */
.sz-page { padding: 32px 0 64px; background: var(--gray-bg, #f6f7f9); }
.sz-page .sz-wrap { max-width: var(--max-w, 1340px); margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.sz-hero {
  display: flex; gap: 32px; align-items: center; background: #fff; border-radius: 12px; padding: 32px;
  box-shadow: 0 2px 14px rgba(15, 24, 32, .08); margin-bottom: 24px;
}
.sz-hero__media { flex: 0 0 42%; max-width: 42%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  background: linear-gradient(135deg, var(--sz-primary) 0%, var(--sz-primary-dark) 100%);
  display: flex; align-items: center; justify-content: center; }
.sz-hero__media img { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover; display: block; }
.sz-hero__letter { font-size: 56px; font-weight: 700; color: #fff; opacity: .92; text-transform: uppercase; }
.sz-hero__body { flex: 1 1 auto; min-width: 0; }
.sz-hero__crumb { font-size: 13px; color: var(--sz-muted); margin: 0 0 10px; }
.sz-hero__crumb a { color: var(--sz-primary) !important; text-decoration: none; }
.sz-hero h1 { margin: 0 0 12px; font-size: 28px; line-height: 1.3; font-weight: 700; color: var(--sz-title); }
.sz-hero__lead { margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: var(--sz-muted); }
.sz-hero__price { margin: 0 0 16px; font-size: 22px; font-weight: 700; color: var(--sz-title); display: flex; align-items: center; gap: 6px; }
.sz-hero__price svg { width: 20px; height: 20px; }
.sz-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sz-hero__actions .sz-btn { margin-top: 0; }
.sz-hero__note { font-size: 13px; color: var(--sz-muted); margin: 10px 0 0; }
.sz-msg { margin: 12px 0 0; font-size: 14px; font-weight: 600; }
.sz-msg--ok { color: #1c6b62; }
.sz-msg--err { color: #b42318; }
.sz-msg a { color: var(--sz-primary) !important; text-decoration: underline; }

.sz-block { background: #fff; border-radius: 12px; padding: 32px; box-shadow: 0 2px 14px rgba(15, 24, 32, .08); margin-bottom: 24px; }
.sz-block h2 { margin: 0 0 16px; font-size: 22px; font-weight: 700; color: var(--sz-title); }
.sz-block__text { font-size: 15px; line-height: 1.7; color: #2b2b3c; white-space: pre-line; }

.sz-list { list-style: none; margin: 0; padding: 0; counter-reset: sz; }
.sz-list li { display: flex; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--sz-border); }
.sz-list li:first-child { border-top: 0; padding-top: 0; }
.sz-list__num {
  flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--sz-tint); color: var(--sz-primary-dark);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.sz-list .sz-course__img { flex: 0 0 140px; width: 140px; }
.sz-list__body { flex: 1 1 auto; min-width: 0; }
.sz-list__title { display: block; font-size: 16px; font-weight: 700; color: var(--sz-title) !important; text-decoration: none; margin-bottom: 6px; }
.sz-list__title:hover { color: var(--sz-primary) !important; }
.sz-list__link { font-size: 14px; font-weight: 600; color: var(--sz-primary) !important; text-decoration: none; white-space: nowrap; }

@media (max-width: 991.98px) {
  .sz-hero { flex-direction: column; align-items: stretch; padding: 24px; }
  .sz-hero__media { flex: none; max-width: 100%; width: 100%; }
}
@media (max-width: 575.98px) {
  .sz-page { padding-top: 16px; }
  .sz-hero h1 { font-size: 22px; }
  .sz-hero__actions .sz-btn { width: 100%; }
  .sz-block { padding: 20px; }
  .sz-list li { flex-wrap: wrap; }
  .sz-list .sz-course__img { flex-basis: 100%; width: 100%; order: -1; }
  .sz-list__link { width: 100%; }
}

/* ==========================================================================
   PREVIEW STYLING (2026-10-02) — values taken from specializations-preview.html
   (the approved design). Explore panel only (#cpSpecz); overrides the rules above.
   ========================================================================== */
.cp-explore #cpSpecz {
  --sz-primary: #4A7A9C; --sz-primary-dark: #4A7A9C; --sz-title: #0F1820; --sz-text: #24343F; --sz-border: #e6e9ec;
}
.cp-explore #cpSpecz .sz-section .headerContainer { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 4px 0 18px; padding: 0 !important; }
.cp-explore #cpSpecz .sz-section .headerContainer .sectionTitle { flex: 1 1 auto; min-width: 0; }
.cp-explore #cpSpecz .speclcorsingMain > .headerContainer .sectionTitle { font-size: 26px; font-weight: 600; color: var(--sz-title); margin: 0; }
.cp-explore #cpSpecz .speclcorsingMain > .headerContainer .ctaText {
  position: static; transform: none; order: 2; color: var(--sz-title) !important; font-size: 15px; font-weight: 600; text-decoration: none;
}
.cp-explore #cpSpecz .sz-card { padding: 30px; gap: 28px; margin-bottom: 26px; border-radius: 12px; box-shadow: 0 2px 14px rgba(15, 24, 32, .08); }
.cp-explore #cpSpecz .sz-card__info { flex: 0 0 36%; max-width: 36%; }
.cp-explore #cpSpecz .sz-card__title { font-size: 20px; font-weight: 800; color: var(--sz-title); margin-bottom: 12px; }
.cp-explore #cpSpecz .sz-stats { gap: 8px; font-size: 14px; font-weight: 700; color: var(--sz-primary); margin-bottom: 14px; }
.cp-explore #cpSpecz .sz-stats svg { width: 16px; height: 16px; }
.cp-explore #cpSpecz .sz-stats__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--sz-primary); font-size: 0; line-height: 0; color: transparent; display: inline-block; }
.cp-explore #cpSpecz .sz-badges { gap: 8px; margin-bottom: 0; }
.cp-explore #cpSpecz .sz-badge { font-size: 12px; font-weight: 700; border-radius: 24px; padding: 7px 13px; gap: 6px; }
.cp-explore #cpSpecz .sz-badge--type { background: rgba(73, 126, 159, .12); color: #3a657f; }   /* theme tint + --purple-dark */
.cp-explore #cpSpecz .sz-badge--level { background: #FFEFD1; color: #BF8316; }
.cp-explore #cpSpecz .sz-badge--level svg { display: none; }
.cp-explore #cpSpecz .sz-badge--level::before { content: ""; width: 9px; height: 9px; background: #BF8316; transform: rotate(45deg); display: inline-block; flex: none; }
.cp-explore #cpSpecz .sz-badge--weeks { background: #fff; border: 1px solid var(--sz-border); color: var(--sz-text); }
.cp-explore #cpSpecz .sz-badge--weeks svg { width: 13px; height: 13px; color: var(--sz-primary); }
.cp-explore #cpSpecz .sz-btn {
  margin-top: 60px; align-self: flex-start; border: 2px solid var(--sz-primary); color: var(--sz-primary) !important; background: #fff;
  border-radius: 8px; padding: 13px 44px; font-size: 15px; font-weight: 700; transition: .2s;
}
.cp-explore #cpSpecz .sz-btn:hover, .cp-explore #cpSpecz .sz-btn:focus-visible { background: var(--sz-primary); color: #fff !important; }
.cp-explore #cpSpecz .sz-course__img {
  aspect-ratio: auto; height: 112px; border-radius: 8px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; box-sizing: border-box;
  color: #fff; font-weight: 800; font-size: 13px; line-height: 1.3;
}
.cp-explore #cpSpecz .sz-course__img:has(img) { padding: 0; }
.cp-explore #cpSpecz .sz-course__img::after {
  content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, .12); right: -30px; bottom: -50px; pointer-events: none;
}
.cp-explore #cpSpecz .sz-course__img:has(img)::after { display: none; }
.cp-explore #cpSpecz .sz-course__img img { position: absolute; inset: 0; }
.cp-explore #cpSpecz .sz-course__label { position: relative; z-index: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cp-explore #cpSpecz .sz-course__title { font-size: 14px; font-weight: 700; color: var(--sz-title); margin: 10px 0 12px; line-height: 1.35; min-height: 38px; }
.cp-explore #cpSpecz .sz-course__pill { background: rgba(73, 126, 159, .12); color: #3a657f; font-size: 12px; font-weight: 700; border-radius: 24px; padding: 7px 13px; }
.cp-explore #cpSpecz .sz-nav { gap: 10px; padding-top: 20px; }
.cp-explore #cpSpecz .sz-nav button { width: 40px; height: 40px; background: #eceef0; color: var(--sz-title); }
.cp-explore #cpSpecz .sz-nav button[disabled] { opacity: .4; }
@media (max-width: 991.98px) {
  .cp-explore #cpSpecz .sz-card__info { flex: 1 1 auto; max-width: 100%; }
  .cp-explore #cpSpecz .sz-btn { margin-top: 22px; }
}
@media (max-width: 575.98px) {
  .cp-explore #cpSpecz .sz-btn { align-self: stretch; text-align: center; padding: 13px 20px; }
  .cp-explore #cpSpecz .speclcorsingMain > .headerContainer .sectionTitle { font-size: 21px; }
}