/* ==========================================================================
   Course Archive — archive-courses.css
   Enqueued via functions.php on is_post_type_archive('courses') only.

   Depends on: course-styles.css (card styles + ALL CSS custom properties).
   Font Awesome 6 is also required (enqueued in functions.php).

   DO NOT declare a :root block here. All CSS custom properties (--cc-*)
   live in course-styles.css which is declared as a dependency and always
   loads first. Duplicating :root here causes the last-loaded value to win,
   which previously made --cc-amber inconsistent between the two files.

   The --cc-amber-featured token (#d97706, darker orange-amber) is defined
   in course-styles.css and consumed here for Featured / Pinned badge labels.
   ========================================================================== */

/* ── JS-controlled visibility ──────────────────────────────────────────────
   archive-courses.js uses class-based show/hide instead of the HTML
   `hidden` attribute. This prevents any CSS reset (Elementor, FluentForms,
   normalize.css) from overriding [hidden]{display:none}.
   The !important is intentional and necessary.
   ─────────────────────────────────────────────────────────────────────── */
.cc-hidden { display: none !important; }

/* ── FC / Elementor global text-colour bleed reset ─────────────────────────
   Same reset as single-course.css — scoped to .cc-archive-page so our
   heading/card colours win over FC global .fluent_com_wp_pages selectors.
   ─────────────────────────────────────────────────────────────────────────── */
.cc-archive-page h1, .cc-archive-page h2, .cc-archive-page h3,
.cc-archive-page h4, .cc-archive-page h5, .cc-archive-page h6,
.cc-archive-page p, .cc-archive-page span, .cc-archive-page a,
.cc-archive-page li, .cc-archive-page button, .cc-archive-page label,
.citichoice-modern-card h1, .citichoice-modern-card h2, .citichoice-modern-card h3,
.citichoice-modern-card p, .citichoice-modern-card span, .citichoice-modern-card a,
.citichoice-modern-card button {
  -webkit-text-fill-color: initial !important;
          text-fill-color: initial !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  background-image: none !important;
}

/* ── Layout container ────────────────────────────────────────────────────── */
.cc-archive-page {
	background: var(--cc-bg);
	min-height: 60vh;
}

.cc-container {
	max-width: 1240px;
	margin:    0 auto;
	padding:   0 32px;
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════════════════ */
.cc-hero {
	background:    var(--cc-white);
	border-bottom: 1px solid var(--cc-border);
	padding:       60px 0 0;
	position:      relative;
	overflow:      hidden;
}

.cc-hero::before {
	content:  '';
	position: absolute;
	inset:    0;
	background:
		radial-gradient(ellipse 55% 80% at 90% -10%, rgba(0,128,246,.07) 0%, transparent 65%),
		radial-gradient(ellipse 35% 50% at 0%  110%, rgba(0,108,207,.05) 0%, transparent 65%);
	pointer-events: none;
}

.cc-hero-inner {
	display:         flex;
	align-items:     flex-end;
	justify-content: space-between;
	gap:             32px;
	padding-bottom:  48px;
}

.cc-hero-copy { max-width: 580px; }

.cc-eyebrow {
	display:        inline-flex;
	align-items:    center;
	gap:            7px;
	font-size:      11px;
	font-weight:    700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color:          var(--cc-primary);
	background:     rgba(0,128,246,.08);
	padding:        5px 13px;
	border-radius:  var(--cc-radius-pill);
	margin-bottom:  18px;
}

.cc-eyebrow::before {
	content:       '';
	display:       block;
	width:         6px;
	height:        6px;
	background:    var(--cc-primary);
	border-radius: 50%;
}
.cc-eyebrow-back {
	color:           inherit;
	text-decoration: none;
	display:         inline-flex;
	align-items:     center;
	gap:             5px;
	transition:      opacity .2s ease;
}
.cc-eyebrow-back:hover {
	opacity: .75;
}
/* On tag archive the eyebrow has no ::before dot */
.taxonomy-course-tag .cc-eyebrow::before {
	display: none;
}

.cc-hero-title {
	font-size:         clamp(30px, 3.8vw, 46px);
	font-weight:       800;
	color:             var(--cc-dark) !important;
	-webkit-text-fill-color: var(--cc-dark) !important;
	background-image:  none !important;
	background-clip:   initial !important;
	-webkit-background-clip: initial !important;
	line-height:       1.1;
	letter-spacing:    -.025em;
	margin:            0 0 14px;
}

.cc-title-accent { color: var(--cc-primary); }

.cc-hero-sub {
	font-size:   16px;
	color:       var(--cc-body);
	line-height: 1.7;
	max-width:   500px;
	margin:      0;
}

/* Stats */
.cc-hero-stats {
	display:    flex;
	gap:        36px;
	flex-shrink: 0;
}

.cc-stat { text-align: right; }

.cc-stat-num {
	display:        block;
	font-size:      28px;
	font-weight:    800;
	color:          var(--cc-dark);
	line-height:    1;
	letter-spacing: -.02em;
}

.cc-stat-star {
	font-size:      16px;
	color:          var(--cc-amber);     /* bright amber — from course-styles.css */
	vertical-align: middle;
	margin-left:    2px;
}

.cc-stat-lbl {
	display:     block;
	font-size:   12px;
	color:       var(--cc-muted);
	margin-top:  4px;
	font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════════════════
   STICKY FILTER BAR
══════════════════════════════════════════════════════════════════════════ */
.cc-filter-bar {
	background:    var(--cc-white);
	border-bottom: 1px solid var(--cc-border);
	position:      sticky;
	top:           0;
	z-index:       200;
	box-shadow:    0 1px 0 var(--cc-border);
}

.cc-filter-inner {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	height:          64px;
	gap:             16px;
}

/* Tabs */
.cc-tabs {
	display:       flex;
	align-items:   center;
	gap:           3px;
	background:    var(--cc-bg);
	border:        1px solid var(--cc-border);
	border-radius: 10px;
	padding:       4px;
}

.cc-tab {
	font-family:  inherit;
	font-size:    13.5px;
	font-weight:  500;
	padding:      8px 18px;
	border-radius: 7px;
	border:       none;
	background:   transparent;
	color:        var(--cc-muted);
	cursor:       pointer;
	transition:   all .18s ease;
	white-space:  nowrap;
	line-height:  1;
}

.cc-tab:hover { color: var(--cc-dark); background: rgba(0,0,0,.04); }

.cc-tab.active {
	background:  var(--cc-primary);
	color:       #fff;
	font-weight: 600;
	box-shadow:  0 2px 8px rgba(0,128,246,.32);
}

/* Right side */
.cc-filter-right {
	display:     flex;
	align-items: center;
	gap:         14px;
}

.cc-results-label {
	font-size:   13px;
	color:       var(--cc-muted);
	font-weight: 500;
	white-space: nowrap;
}

/* Search */
.cc-search-wrap {
	position: relative;
	display:  flex;
	align-items: center;
}

/* Search icon — always inside the wrapper, never moves */
.cc-archive-page .cc-search-wrap svg,
.cc-filter-bar    .cc-search-wrap svg {
	position:   absolute;
	left:       12px;
	top:        50%;
	transform:  translateY(-50%);
	color:      var(--cc-muted);
	pointer-events: none;
	flex-shrink: 0;
	z-index:    2;
	/* Hard dimensions prevent theme resets from resizing the icon */
	width:      15px !important;
	height:     15px !important;
	min-width:  15px;
	min-height: 15px;
}

/* Input — explicit left padding clears the icon at all breakpoints.
   !important beats Blocksy's global input reset (padding: 0). */
.cc-archive-page .cc-search-input,
.cc-filter-bar    .cc-search-input {
	font-family:  inherit;
	font-size:    14px;
	/* 12px icon-left + 15px icon-width + 13px gap = 40px */
	padding:      9px 14px 9px 40px !important;
	border:       1.5px solid var(--cc-border) !important;
	border-radius: var(--cc-radius-sm);
	background:   var(--cc-bg);
	color:        var(--cc-dark);
	outline:      none;
	width:        240px;
	line-height:  normal;
	transition:   border-color .2s, box-shadow .2s, background .2s;
	-webkit-appearance: none;
	appearance:   none;
	box-shadow:   none !important; /* reset Blocksy inset shadow */
}

.cc-archive-page .cc-search-input::placeholder,
.cc-filter-bar    .cc-search-input::placeholder { color: var(--cc-muted); }

.cc-archive-page .cc-search-input:focus,
.cc-filter-bar    .cc-search-input:focus {
	border-color: var(--cc-primary) !important;
	box-shadow:   0 0 0 3px rgba(0,128,246,.11) !important;
	background:   var(--cc-white);
}

/* ══════════════════════════════════════════════════════════════════════════
   CATEGORY DESCRIPTION STRIP (hero section)
══════════════════════════════════════════════════════════════════════════ */
.cc-cat-desc-strip {
	display:    flex;
	gap:        20px;
	margin-top: 20px;
	flex-wrap:  wrap;
}

.cc-cat-desc-item {
	display:     flex;
	align-items: baseline;
	gap:         8px;
	font-size:   13px;
	color:       var(--cc-body);
	line-height: 1.5;
	max-width:   380px;
}

.cc-cat-desc-label {
	font-weight:  700;
	color:        var(--cc-dark);
	white-space:  nowrap;
	flex-shrink:  0;
}

.cc-cat-desc-label::after { content: ':'; }

/* ══════════════════════════════════════════════════════════════════════════
   MAIN CONTENT
══════════════════════════════════════════════════════════════════════════ */
.cc-main {
	padding: 56px 0 100px;
}

/* ── Section separators ──────────────────────────────────────────────────── */
.cc-group {
	margin-bottom: 72px;
}

.cc-group:last-child { margin-bottom: 0; }

.cc-group-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             16px;
	margin-bottom:   28px;
	padding-bottom:  20px;
	border-bottom:   2px solid var(--cc-border);
	position:        relative;
}

.cc-group-header::after {
	content:       '';
	position:      absolute;
	bottom:        -2px;
	left:          0;
	width:         48px;
	height:        2px;
	background:    var(--cc-primary);
	border-radius: 2px;
}

.cc-group-title {
	font-size:         clamp(20px, 2.2vw, 26px);
	font-weight:       800;
	color:             var(--cc-dark) !important;
	-webkit-text-fill-color: var(--cc-dark) !important;
	background-image:  none !important;
	background-clip:   initial !important;
	-webkit-background-clip: initial !important;
	letter-spacing:    -.02em;
	margin:            0;
	line-height:       1.2;
}
.cc-group-title-link {
	color:           inherit;
	text-decoration: none;
	border-bottom:   2px solid transparent;
	transition:      border-color .2s ease, color .2s ease;
}
.cc-group-title-link:hover,
.cc-group-title-link:focus {
	color:           var(--cc-primary, #0057ff);
	border-color:    var(--cc-primary, #0057ff);
	outline:         none;
}

.cc-group-desc {
	font-size:   14px;
	color:       var(--cc-muted);
	margin:      4px 0 0;
	line-height: 1.5;
}

.cc-group-pill-wrap {
	display:    flex;
	gap:        6px;
	flex-shrink: 0;
}

.cc-group-pill {
	font-size:      11px;
	font-weight:    700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding:        5px 12px;
	border-radius:  var(--cc-radius-pill);
}

.cc-pill-boot  { background: rgba(0,128,246,.1);  color: var(--cc-primary); }
.cc-pill-skill { background: rgba(5,150,105,.1);  color: var(--cc-green);  }

/* ══════════════════════════════════════════════════════════════════════════
   FEATURED (BOOTCAMP) CARD
══════════════════════════════════════════════════════════════════════════ */
.cc-featured-card {
	display:               grid;
	grid-template-columns: 450px 1fr;
	background:            var(--cc-white);
	border-radius:         18px;
	border:                1px solid var(--cc-border);
	overflow:              hidden;
	box-shadow:            var(--cc-shadow-sm);
	transition:            box-shadow .3s ease, transform .3s ease, border-color .3s;
}

.cc-featured-card:hover {
	box-shadow:   var(--cc-shadow-blue);
	transform:    translateY(-3px);
	border-color: rgba(0,128,246,.25);
}

/* Both columns need min-width:0 — default min-width:auto lets grid items
   overflow into the adjacent column. */
.cc-feat-image,
.cc-feat-body {
	min-width: 0;
}

/* Image panel — stretches to the full card height.
   NO aspect-ratio here: combining aspect-ratio + align-self:stretch
   causes the browser to widen the column beyond the track width. */
.cc-feat-image {
	position:   relative;
	overflow:   hidden;
	background: var(--cc-dark);
	align-self: stretch;  /* fills the card height driven by the text column */
	min-height: 260px;    /* floor so the image is never tiny on short cards  */
}

.cc-feat-thumb {
	position:        absolute;
	inset:           0;
	width:           100%;
	height:          100%;
	object-fit:      cover;
	object-position: center center;
	display:         block;
	transition:      transform .5s ease;
}

.cc-featured-card:hover .cc-feat-thumb { transform: scale(1.03); }

.cc-feat-placeholder {
	position:        absolute;
	inset:           0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      linear-gradient(135deg, var(--cc-dark) 0%, #0f172a 55%, var(--cc-primary) 140%);
}

.cc-feat-placeholder span {
	font-size:      72px;
	font-weight:    900;
	color:          rgba(255,255,255,.18);
	letter-spacing: 4px;
}

/* Price pill overlay — same visual as .card-price-pill */
.cc-price-pill {
	position:      absolute;
	bottom:        16px;
	left:          16px;
	background:    var(--cc-white);
	border-radius: 10px;
	padding:       8px 12px;
	box-shadow:    0 4px 20px rgba(0,0,0,.18);
	display:       flex;
	flex-direction: column;
	align-items:   flex-start;
	gap:           1px;
}

.cc-price-pill .woocommerce-Price-currencySymbol {
	font-size:   inherit;
	font-weight: inherit;
}

.cc-price-pill .woocommerce-Price-amount {
	font-size:   18px;
	font-weight: 800;
	color:       var(--cc-dark);
	line-height: 1;
	display:     inline-flex;
	align-items: baseline;
	gap:         1px;
}

.cc-price-pill del {
	display:         block;
	line-height:     1;
}
.cc-price-pill del .woocommerce-Price-amount,
.cc-price-pill del .woocommerce-Price-amount * {
	text-decoration: line-through;
}
.cc-price-pill del .woocommerce-Price-amount {
	font-size:   11px;
	font-weight: 500;
	color:       var(--cc-muted);
	opacity:     .85;
}

.cc-price-pill ins {
	text-decoration: none;
	display:         block;
	background:      none;
	line-height:     1;
}
.cc-price-pill ins .woocommerce-Price-amount {
	font-size:   18px;
	font-weight: 800;
	color:       var(--cc-dark);
}

.cc-price-pill .woocommerce-Price-amount:only-child {
	color: var(--cc-green);
}

/* Body panel */
.cc-feat-body {
	padding:        36px 36px 32px;
	display:        flex;
	flex-direction: column;
}

.cc-cat-static {
	position:      static !important;
	display:       inline-block;
	width:         fit-content;
	margin-bottom: 14px;
	background:    rgba(0,128,246,.1);
	color:         var(--cc-primary);
	border-radius: 4px;
	font-size:     11px;
	font-weight:   700;
	padding:       4px 10px;
}

.cc-feat-title {
	font-size:         clamp(24px, 2.8vw, 38px);
	font-weight:       700;
	color:             var(--cc-dark) !important;
	-webkit-text-fill-color: var(--cc-dark) !important;
	background-image:  none !important;
	background-clip:   initial !important;
	-webkit-background-clip: initial !important;
	line-height:       1.15;
	letter-spacing:    -.03em;
	margin:            0 0 8px;
}

.cc-feat-subtitle {
	font-size:   18px;
	color:       var(--cc-body);
	font-weight: 600;
	margin:      0 0 12px;
	line-height: 1.5;
}

.cc-feat-excerpt {
	font-size:   14.5px;
	color:       var(--cc-body);
	line-height: 1.7;
	margin:      0 0 22px;
	flex:        1;
}

/* Meta chips — mirrors .card-meta-chips */
.cc-feat-meta {
	display:       flex;
	flex-wrap:     wrap;
	gap:           8px;
	margin-bottom: 28px;
}

.cc-meta-chip {
	display:       inline-flex;
	align-items:   center;
	gap:           5px;
	font-size:     12.5px;
	color:         var(--cc-body);
	font-weight:   500;
	background:    var(--cc-bg);
	border:        1px solid var(--cc-border);
	padding:       5px 11px;
	border-radius: var(--cc-radius-pill);
	white-space:   nowrap;
}

.cc-meta-chip i       { color: var(--cc-primary); font-size: 11px; }
.cc-meta-rating i     { color: var(--cc-amber); }      /* bright amber for stars */
.cc-meta-salary i     { color: var(--cc-green); }

.cc-rating-count {
	color:       var(--cc-muted);
	font-weight: 400;
	font-size:   11.5px;
}

/* Featured card footer */
.cc-feat-footer {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             12px;
	padding-top:     20px;
	border-top:      1px solid var(--cc-border);
	margin-top:      auto;
	flex-wrap:       wrap;
}

.cc-feat-ctas {
	display:     flex;
	align-items: center;
	gap:         10px;
}

/* Buttons */
.cc-btn-primary {
	display:         inline-flex;
	align-items:     center;
	gap:             7px;
	font-family:     inherit;
	font-size:       14px;
	font-weight:     600;
	padding:         11px 22px;
	background:      var(--cc-primary);
	color:           #fff;
	border:          none;
	border-radius:   var(--cc-radius-sm);
	cursor:          pointer;
	text-decoration: none;
	transition:      background .2s, transform .15s, box-shadow .2s;
	box-shadow:      0 2px 8px rgba(0,128,246,.28);
	white-space:     nowrap;
}

.cc-btn-primary:hover {
	background:      var(--cc-primary-h);
	transform:       translateY(-1px);
	box-shadow:      0 4px 16px rgba(0,128,246,.38);
	color:           #fff;
	text-decoration: none;
}

.cc-btn-primary i { font-size: 12px; }

.cc-btn-ghost {
	display:         inline-flex;
	align-items:     center;
	gap:             7px;
	font-family:     inherit;
	font-size:       13.5px;
	font-weight:     500;
	padding:         10px 18px;
	background:      transparent;
	color:           var(--cc-body);
	border:          1.5px solid var(--cc-border);
	border-radius:   var(--cc-radius-sm);
	cursor:          pointer;
	text-decoration: none;
	transition:      all .2s;
	white-space:     nowrap;
}

.cc-btn-ghost:hover {
	border-color:    var(--cc-primary);
	color:           var(--cc-primary);
	background:      rgba(0,128,246,.04);
	text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   SKILL-FOCUS GRID
══════════════════════════════════════════════════════════════════════════ */
.cc-sf-label {
	font-size:      11px;
	font-weight:    700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color:          var(--cc-muted);
	margin:         0 0 20px;
	display:        flex;
	align-items:    center;
	gap:            12px;
}

.cc-sf-label::after {
	content:    '';
	flex:       1;
	height:     1px;
	background: var(--cc-border);
}

.cc-courses-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   24px;
}

/* Wrap injected around each standard card.
   display:contents makes the inner card itself the grid item — no extra box. */
.cc-card-wrap {
	display: contents;
}

/* Entry animation when a group becomes visible */
.cc-group[data-visible="1"] .citichoice-modern-card {
	animation: ccFadeUp .45s ease both;
}

@keyframes ccFadeUp {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Stagger for grid children */
.cc-courses-grid > .cc-card-wrap:nth-child(1) .citichoice-modern-card { animation-delay: .04s; }
.cc-courses-grid > .cc-card-wrap:nth-child(2) .citichoice-modern-card { animation-delay: .09s; }
.cc-courses-grid > .cc-card-wrap:nth-child(3) .citichoice-modern-card { animation-delay: .14s; }
.cc-courses-grid > .cc-card-wrap:nth-child(4) .citichoice-modern-card { animation-delay: .19s; }
.cc-courses-grid > .cc-card-wrap:nth-child(5) .citichoice-modern-card { animation-delay: .24s; }
.cc-courses-grid > .cc-card-wrap:nth-child(6) .citichoice-modern-card { animation-delay: .29s; }

/* ══════════════════════════════════════════════════════════════════════════
   EMPTY STATES
══════════════════════════════════════════════════════════════════════════ */
.cc-empty-global,
.cc-empty-filtered {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	text-align:      center;
	padding:         80px 32px;
	color:           var(--cc-muted);
}

.cc-empty-filtered[hidden] { display: none !important; }

.cc-empty-global svg,
.cc-empty-filtered svg { margin-bottom: 20px; opacity: .35; }

.cc-empty-global h3,
.cc-empty-filtered h3 {
	font-size:   20px;
	font-weight: 700;
	color:       var(--cc-dark);
	margin:      0 0 8px;
}

.cc-empty-global p,
.cc-empty-filtered p {
	font-size: 14px;
	margin:    0 0 20px;
}

/* ══════════════════════════════════════════════════════════════════════════
   FILTER TRANSITIONS
══════════════════════════════════════════════════════════════════════════ */
.cc-group { transition: opacity .2s ease; }
.cc-group[hidden] { display: none !important; }

.cc-featured-wrap { transition: opacity .2s ease; }
.cc-sf-wrap       { transition: opacity .2s ease; }

/* When a group has only one type showing, remove the bottom margin gap */
.cc-featured-wrap[hidden] + .cc-sf-wrap { margin-top: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
	.cc-courses-grid { grid-template-columns: repeat(2, 1fr); }
	.cc-featured-card { grid-template-columns: 400px 1fr; }
}

@media (max-width: 900px) {
	.cc-featured-card { grid-template-columns: 1fr; }
	/* Stacked: image goes back to natural 16:9 ratio */
	.cc-feat-image { aspect-ratio: 16 / 9; min-height: 0; align-self: auto; }
	.cc-feat-body  { padding: 24px; }
}

@media (max-width: 768px) {
	.cc-container { padding: 0 20px; }

	.cc-hero       { padding: 40px 0 0; }
	.cc-hero-inner { flex-direction: column; align-items: flex-start; padding-bottom: 32px; }

	.cc-hero-stats { flex-direction: row; gap: 24px; }
	.cc-stat       { text-align: left; }

	/* Filter bar — keep everything on one row, tighter spacing */
	.cc-filter-inner { height: auto; flex-wrap: wrap; padding: 10px 0; gap: 8px; }
	.cc-search-input { width: 160px; }

	/* Tabs — NOT shrunk on mobile; font/padding intentionally kept at
	   desktop values so labels remain fully legible on small screens. */

	.cc-main { padding: 36px 0 64px; }

	.cc-group-header { flex-direction: column; align-items: flex-start; gap: 10px; }
	.cc-group-pill-wrap { order: -1; }

	.cc-courses-grid { grid-template-columns: 1fr; }

	/* Meta chips — no wrapping, horizontal scroll */
	.cc-feat-meta {
		flex-wrap:                nowrap;
		overflow-x:               auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width:          none;
		gap:                      6px;
		margin-bottom:            16px;
		padding-bottom:           4px;
	}
	.cc-feat-meta::-webkit-scrollbar { display: none; }
	.cc-meta-chip {
		flex-shrink: 0;
		font-size:   11.5px;
		padding:     4px 9px;
	}

	/* Footer row — never stack */
	.cc-feat-footer {
		flex-direction: row;
		align-items:    center;
		justify-content: space-between;
		flex-wrap:      nowrap;
		gap:            8px;
	}
	.cc-feat-ctas { flex-shrink: 0; }

	.cc-btn-primary { font-size: 13px; padding: 9px 16px; }

	.delivery-badges { flex-wrap: nowrap; gap: 4px; }
	.badge-online,
	.badge-physical  { font-size: 10px; padding: 3px 7px; }
}

@media (max-width: 480px) {
	.cc-stat-num   { font-size: 22px; }
	.cc-hero-title { font-size: 26px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PINNED / FEATURED HERO STRIP
══════════════════════════════════════════════════════════════════════════ */
.cc-pinned-section {
	margin-bottom:  64px;
	padding-bottom: 64px;
	border-bottom:  2px dashed var(--cc-border);
	position:       relative;
}

.cc-pinned-header {
	display:     flex;
	align-items: center;
	gap:         12px;
	margin-bottom: 24px;
}

/* Featured/Pinned label — uses --cc-amber-featured (darker orange-amber)
   so it reads as "warm highlight" rather than the bright star-rating amber */
.cc-pinned-label {
	display:        inline-flex;
	align-items:    center;
	gap:            7px;
	font-size:      11px;
	font-weight:    700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color:          var(--cc-amber-featured);
	background:     rgba(217,119,6,.1);
	padding:        6px 14px;
	border-radius:  var(--cc-radius-pill);
	border:         1px solid rgba(217,119,6,.2);
}

.cc-pinned-label i { font-size: 10px; }

/* Stack of pinned cards — each full-width, spaced */
.cc-pinned-stack {
	display:        flex;
	flex-direction: column;
	gap:            24px;
}

/* Golden accent border for pinned cards */
.cc-pinned-stack .cc-featured-card {
	border-color: rgba(217,119,6,.3);
	box-shadow:   var(--cc-shadow-sm), 0 0 0 1px rgba(217,119,6,.15);
}

.cc-pinned-stack .cc-featured-card:hover {
	border-color: rgba(217,119,6,.5);
	box-shadow:   var(--cc-shadow-blue), 0 0 0 1px rgba(217,119,6,.2);
}

/* Featured badge in hero strip */
.cc-cat-featured {
	background:  rgba(217,119,6,.12) !important;
	color:       var(--cc-amber-featured) !important;  /* darker orange-amber */
	display:     inline-flex !important;
	align-items: center;
	gap:         5px;
}

.cc-cat-featured i { font-size: 10px; }

/* Multiple bootcamp cards stacked in a tag group */
.cc-featured-wrap {
	display:        flex;
	flex-direction: column;
	gap:            20px;
	margin-bottom:  32px;
}

/* "Also featured" inline indicator inside a tag group card */
.cc-badge-row {
	display:     flex;
	align-items: center;
	gap:         8px;
	margin-bottom: 14px;
	flex-wrap:   wrap;
}

.cc-badge-row .cc-cat-static {
	margin-bottom: 0 !important;
}

.cc-also-featured {
	display:        inline-flex;
	align-items:    center;
	gap:            5px;
	font-size:      10px;
	font-weight:    700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color:          var(--cc-amber-featured);   /* darker orange-amber */
	background:     rgba(217,119,6,.1);
	padding:        3px 9px;
	border-radius:  var(--cc-radius-pill);
}

.cc-also-featured i { font-size: 9px; }

/* ── Filter / Search active state ──────────────────────────────────────────
   When cc-filtering class is on #cc-groups-wrap (set by JS when a tab filter
   or search query is active), group headers and sf sub-labels are hidden so
   the user sees a clean flat list of matching courses. */
.cc-filtering .cc-group-header { display: none !important; }
.cc-filtering .cc-sf-label     { display: none !important; }

/* Give groups a small gap when in filtering mode so cards breathe */
.cc-filtering .cc-group {
    padding-top: 0;
    margin-bottom: 0;
}
.cc-filtering .cc-courses-grid {
    margin-top: 0;
}
.cc-filtering .cc-featured-wrap {
    margin-top: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HOMEPAGE SHORTCODE STYLES
   [cc_bootcamp_courses] / [cc_skillfocus_courses]
══════════════════════════════════════════════════════════════════════════════ */
.cc-hp-section-head {
	display:         flex;
	align-items:     flex-end;
	justify-content: space-between;
	gap:             24px;
	margin-bottom:   40px;
	flex-wrap:       wrap;
}
.cc-hp-section-copy { flex: 1; min-width: 0; }
.cc-hp-section-copy .cc-eyebrow { margin-bottom: 14px; }
.cc-hp-title {
	font-size:     clamp(24px, 3vw, 36px);
	font-weight:   800;
	color:         var(--cc-dark) !important;
	-webkit-text-fill-color: var(--cc-dark) !important;
	background-image: none !important;
	background-clip: initial !important;
	-webkit-background-clip: initial !important;
	letter-spacing: -.03em;
	line-height:   1.15;
	margin:        0 0 10px;
}
.cc-hp-subtitle { font-size: 15px; color: var(--cc-muted); line-height: 1.65; max-width: 520px; margin: 0; }
.cc-hp-view-all {
	display:         inline-flex;
	align-items:     center;
	gap:             7px;
	font-size:       14px;
	font-weight:     700;
	color:           var(--cc-dark);
	border:          1.5px solid var(--cc-border, #e2e8f0);
	border-radius:   8px;
	padding:         11px 22px;
	white-space:     nowrap;
	flex-shrink:     0;
	transition:      border-color .2s ease, color .2s ease;
	text-decoration: none;
}
.cc-hp-view-all:hover { border-color: var(--cc-primary, #0057ff); color: var(--cc-primary, #0057ff); }
.cc-hp-section + .cc-hp-section { margin-top: 72px; }
@media (max-width: 640px) {
	.cc-hp-section-head { flex-direction: column; align-items: flex-start; }
}

/* ── Course-category taxonomy archive — same rules as course-tag ──────────── */
.taxonomy-course-category .cc-eyebrow::before { display: none; }