/* ============================
   PC Courses – FULL STYLESHEET (clean)

   Pill styles now in pet-pills.css - Use .pet-pill with modifiers:
   - .pet-pill--format for overlay pills
   - .pet-pill--ribbon for "new" ribbons
   - .pet-pill--overlay .pet-pill--overlay-bottom-left for positioning

   NOTE: BEM Naming Migration (Phase 1)
   - New classes: .pet-courses-* (recommended)
   - Old classes: .pcc-* (deprecated, will be removed in v2.0)
   - Both work identically during transition period
   ============================ */

/* Toolbar styles now in filter-toolbar.css */

/* Card header/content spacing tweak to match site */
.pcc-card .entry-header,
.pcc-card .entry-content{ margin-bottom:0 !important; }

/* Loader (fullscreen, consistent with archives) */
.pcc-grid-wrap{ position:relative; padding-right:10px; padding-left:10px; }
.pcc-loading-overlay{
  position:fixed; inset:0; background:rgba(255,255,255,.65);
  backdrop-filter:blur(1px); opacity:0; pointer-events:none;
  transition:opacity .15s ease; z-index:var(--pet-z-loading, 100000);
}
.pcc-loading-overlay.is-visible{ opacity:1; pointer-events:all; cursor:progress; }
.pcc-loading-overlay.is-visible::after{
  content:""; position:absolute; top:50%; left:50%;
  width:36px; height:36px; margin:-18px 0 0 -18px; border-radius:50%;
  border:3px solid rgba(0,0,0,.2); border-top-color:rgba(0,0,0,.6);
  animation:pccspin .7s linear infinite;
}
@keyframes pccspin{ to{ transform:rotate(360deg); } }

/* Grid (BuddyBoss style columns) */
.pcc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--pet-grid-gap, 24px); }
.pcc-grid--related {
    gap:var(--pet-grid-gap, 24px) !important;
}
.pcc-grid .entry-title,
.pcm-row .entry-title,
.pcm-grid .entry-title{ text-align:left !important; margin:0 !important; }
.pcc-row__body .entry-title{ font-size: var(--pet-text-lg); }

@media (max-width:1024px){ .pcc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .pcc-grid{ grid-template-columns:1fr; } }

/* Card */
.pcc-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--pet-surface, #ffffff);
  border-radius:var(--pet-radius, 14px);
  border:var(--pet-border-width, 1px) solid var(--pet-border-color, rgba(26, 26, 46, 0.08));
  box-shadow:var(--pet-card-shadow); }

/* Force single-column when layout=list */
.pc-courses[data-layout="list"] .pcc-grid{ display:block !important; }

/* Image + overlay container */
.pcc-thumb{ position:relative; display:block; overflow:hidden; }
.pcc-thumb img{ display:block; width:100%; height:auto; position:relative; z-index:1; }

/* Overlay pills now use global pet-pills.css system - Use .pet-pill .pet-pill--ribbon or .pet-pill--format with .pet-pill--overlay positioning classes */

/* Legacy pill base styling - extends from pet-pills.css */
.pcc-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  line-height: 1;
  font-size: 0.75rem;
  padding: 0.30rem 0.55rem;
  border-radius: var(--pet-radius-full);
  background: rgba(218, 227, 240, 0.92);
  color: var(--pet-text-primary, #242833);
  border: 1px solid rgba(0, 0, 0, 0.08);
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.2s ease;
}

/* Legacy positioning classes for overlay pills */
.pcc-ribbon,
.pcc-format-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  line-height: 1;
  font-size: 0.75rem;
  padding: 0.30rem 0.55rem;
  border-radius: var(--pet-radius-full);
  border: 1px solid rgba(0, 0, 0, 0.08);
  text-decoration: none;
  white-space: nowrap;
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.pcc-ribbon {
  right: 10px;
  bottom: 10px;
  background: var(--pet-success-light, #d1fae5);
  color: rgb(24, 89, 68);
  font-weight: var(--pet-font-semibold, 600);
}
/* Slots pill overlay on course card images */
.pcc-slots-pill {
  top: 10px;
  right: 10px;
  background: rgba(30, 30, 30, 0.78);
  color: #fff;
  font-weight: var(--pet-font-semibold, 600);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-color: rgba(255, 255, 255, 0.12);
}

.pcc-slots-pill--urgent {
  background: rgba(180, 40, 30, 0.82);
  border-color: rgba(255, 255, 255, 0.18);
  animation: pcc-slots-blink 2.5s ease-in-out infinite;
}

@keyframes pcc-slots-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

.pcc-format-pill {
  left: 10px;
  bottom: 10px;
  background: rgba(218, 227, 240, 0.92);
  border-color: rgba(0, 0, 0, 0.08);
  color: #292524; /* Slate-800 - darker, more readable */
  backdrop-filter: saturate(180%) blur(8px);
}

/* Body/content */
.pcc-body{
  padding:var(--pet-card-padding, 1.5rem);
  display:flex; flex-direction:column; gap:1rem; flex:1 1 auto;
}

.pcc-features{ list-style:none; padding:0; margin:.25rem 0 0; display:grid; gap:.5rem; }
.pcc-features li{ display:flex; align-items:center; gap:.5rem; }

/* Price */
.pcc-price .fee{ font-weight:var(--pet-font-bold, 700); }
.pcc-price .worth, .pcc-row__price .worth{
  text-decoration:line-through; opacity:.7; margin-left:.35rem;
}
.pcc-price-message{
  font-size:var(--pet-font-size-sm, 0.875rem);
  font-weight:var(--pet-font-semibold, 600);
  color:var(--pet-text-secondary, #64748b);
}

/* Footer pinned to bottom of card */
.pcc-card .entry-footer{ margin-top:auto; display:flex; flex-direction:column; gap:.5rem; }

.pcc-cta-row{
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  gap:10px;
  margin-top:auto;
}

.pcc-card .pcc-cta-row .pet-button,
.pcc-card .pcc-cta-row .pet-button,
.pcc-card .pcc-cta-row .pet-blocks-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:.85rem 1.8rem;
  font-weight:var(--pet-font-bold, 700);
  line-height:1.1;
}

.pcc-cta-row .pet-button,
.pcc-cta-row .pet-button,
.pcc-cta-row .pet-blocks-button {
  display:inline-flex;
  align-items:center;
  width:100%;
  justify-content:center;
  font-weight:var(--pet-font-bold, 700);
  line-height:1.1;
  text-transform:none;
  letter-spacing:0.01em;
  background-image:none;
  box-shadow:var(--pet-blocks-cta-shadow, 0 10px 24px rgba(22,36,70,0.18));
}

.pcc-cta-row .pet-button--secondary,
.pcc-cta-row .pet-button--secondary {
  background:var(--pet-secondary);
  border-color:var(--pet-secondary);
  color:#ffffff;
}

/* List layout (generic course list items) */
.pcc-row{
  display:grid; grid-template-columns:96px 1fr auto; gap:10px; align-items:center; padding:12px 16px;
  background:#f9fafb;
  border:var(--pet-border-width, 1px) solid var(--pet-border-color, rgba(26, 26, 46, 0.08));
  border-radius:var(--pet-radius-sm, 8px);
  margin-bottom:10px !important; transition: box-shadow .25s ease;box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
.pcc-row:hover{ box-shadow:0 4px 32px 0 rgba(30,28,24,.12); }
.pcc-row__thumb img{ width:96px; height:72px; object-fit:cover; border-radius: var(--pet-radius-sm); display:block; }
.pcc-row__meta{ display:flex; gap:1rem; flex-wrap:wrap; opacity:.9; }
.pcc-row__aside{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.pcc-row__price{ font-weight:var(--pet-font-bold, 700); }

/* Toolbar responsive styles now in filter-toolbar.css */

/* Row list – modern variant enhancements */
.pcc-row--modern .pcc-row__thumb {
	position: relative;
	overflow: hidden;
}

.pcc-row--modern .pcc-instructor {
	margin: 0;
	font-size: 0.75rem;
	color: var(--pet-text-muted, #6b6a7a);
	font-weight: 500;
	line-height: 1.3;
}

.pcc-row--modern .pcc-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: rgba(0, 0, 0, 0.3);
	z-index: 5;
	border-radius: 0 0 var(--pet-radius-sm, 8px) var(--pet-radius-sm, 8px);
	overflow: hidden;
}

.pcc-row--modern .pcc-progress__fill {
	height: 100%;
	background: var(--pet-secondary, #e46e42);
	transition: width 0.3s ease;
}

.pcc-row--modern .pcc-progress--complete .pcc-progress__fill {
	background: var(--pet-success, #10b981);
}

.pcc-row--modern .pcc-progress__label {
	display: block;
	font-size: 0.6875rem;
	font-weight: var(--pet-font-semibold, 600);
	color: var(--pet-text-muted, #6b6a7a);
	margin-top: 0.15rem;
}

.pcc-row--modern .pcc-savings {
	display: inline-flex;
	align-items: center;
	padding: 0.15rem 0.4rem;
	background: var(--pet-success-light, #d1fae5);
	color: #065f46;
	font-size: 0.6875rem;
	font-weight: var(--pet-font-semibold, 600);
	border-radius: var(--pet-radius-full, 999px);
	line-height: 1;
	margin-left: 0.35rem;
}

.pcc-row__rating {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.8125rem;
	font-weight: var(--pet-font-semibold, 600);
	color: var(--pet-text-muted, #6b6a7a);
	margin-top: 0.15rem;
}

.pcc-row__rating .bb-icon-star-fill {
	color: #f59e0b;
	font-size: 0.875rem;
}

.pcc-row__rating-count {
	font-weight: 400;
	font-size: 0.75rem;
	opacity: 0.8;
}

/* ==========================================================================
   Promo Cards - Modern Gradient Glow Design
   ========================================================================== */
.pcc-card--promo {
  --promo-glow: rgba(var(--pet-primary-rgb, 26, 47, 91), 0.15);
  --promo-border: rgba(var(--pet-primary-rgb, 26, 47, 91), 0.2);
  --promo-bg-start: #f8faff;
  --promo-bg-end: #eef4ff;
  position: relative;
  background: linear-gradient(145deg, var(--promo-bg-start) 0%, var(--promo-bg-end) 100%);
  border: 1px solid var(--promo-border);
  border-radius: var(--pet-radius, 14px),
    0 1px 3px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pcc-card--promo:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 40px var(--promo-glow),
    0 4px 12px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Accent strip at top */
.pcc-card--promo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--pet-primary, #1A2F5B) 0%, var(--pet-secondary, #E07A50) 100%);
  z-index: 2;
}

.pcc-thumb--promo {
  position: relative;
  display: block;
  background: linear-gradient(135deg, #f5f0e8 0%, #ebe5d8 100%);
}

.pcc-thumb__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  background: transparent;
}

.pcc-thumb__media--illustration .pcc-icon,
.pcc-thumb__media--image .pcc-icon {
  font-size: 48px;
  line-height: 1;
  opacity: 0.85;
  color: var(--pet-primary, #1A2F5B);
}

/* Eyebrow badge - modern pill style */
.pcc-promo-eyebrow {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  left: 10px;
  bottom: 10px;
  background: rgba(218, 227, 240, 0.92);
  border-color: rgba(0, 0, 0, 0.08);
  color: #292524;
  backdrop-filter: saturate(180%) blur(8px);
}

/* Lead text */
.pcc-promo-lead {
  margin: 0;
  color: #3d4a5c;
  font-size: 0.925rem;
  line-height: 1.55;
}

/* Promo card title styling — matches .pcc-card--modern .entry-title */
.pcc-card--promo .entry-title {
  font-size: 1.0625rem;
  font-weight: var(--pet-heading-weight, 600);
  line-height: 1.35;
  margin: 0;
}

.pcc-card--promo .pcc-body {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
/* Feature list - modern styling */
.pcc-feature-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.pcc-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #44403c;
}

.pcc-feature-list li i {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--pet-primary, #1A2F5B);
  background: rgba(var(--pet-primary-rgb, 26, 47, 91), 0.1);
  border-radius: 50%;
  margin-top: 1px;
}

/* Compact feature list - inline with dot separators */
.pcc-feature-list--compact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  font-size: 0.8rem;
  color: var(--pet-text-secondary, #57534e);
}

.pcc-feature-list--compact li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.pcc-feature-list--compact li:not(:last-child)::after {
  content: '\00B7';
  margin: 0 0.4rem;
  opacity: 0.5;
  font-weight: var(--pet-font-bold, 700);
}

.pcc-feature-list--compact li i {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Promo card footer */
.pcc-card--promo .entry-footer {
  margin-top: auto;
  padding-top: 0.75rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Promo CTA row - modern button layout */
.pcc-card--promo .pcc-cta-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.pcc-card--promo .pcc-cta-row .pet-button,
.pcc-card--promo .pcc-cta-row .pet-button--primary {
  width: 100%;
  text-align: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: var(--pet-radius, 14px);
  font-weight: var(--pet-font-semibold, 600);
  font-size: 0.875rem;
  padding: 0.75rem 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.pcc-card--promo .pcc-cta-row .pet-button--primary {
  background: var(--pet-primary, #1A2F5B);
  border-color: var(--pet-primary, #1A2F5B);
  color: #fff;
  box-shadow: 0 4px 14px rgba(var(--pet-primary-rgb, 26, 47, 91), 0.3);
}

.pcc-card--promo .pcc-cta-row .pet-button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(var(--pet-primary-rgb, 26, 47, 91), 0.4);
}

.pcc-cta-row .pet-button,
.pcm-row__ctas .pet-button,
.pcc-cta-row .pet-button,
.pcm-row__ctas .pet-button,
.pcc-cta-row .pet-blocks-button,
.pcm-row__ctas .pet-blocks-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:var(--pet-blocks-cta-shadow, 0 10px 24px rgba(22,36,70,0.18));
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.pcc-cta-row .pet-button--primary,
.pcm-row__ctas .pet-button--primary,
.pcc-cta-row .pet-button--primary,
.pcm-row__ctas .pet-button--primary{
  background:var(--pet-primary);
  border-color:var(--pet-primary);
  color:#fff;
}
.pcc-cta-row .pet-button--primary:hover,
.pcm-row__ctas .pet-button--primary:hover,
.pcc-cta-row .pet-button--primary:hover,
.pcm-row__ctas .pet-button--primary:hover{
  transform:translateY(-1px);
  background:var(--pet-primary-dark, #162446);
  border-color:var(--pet-primary-dark, #162446);
  color:#fff;
}

.pcc-card .pet-button.pet-button--primary:hover,
.pcc-card .pet-button.pet-button--primary:focus-visible{
  background:var(--pet-primary-dark, #0f1e3b);
  border-color:var(--pet-primary-dark, #0f1e3b);
  color:#ffffff;
}

.pcc-cta-row .pet-button:hover,
.pcc-cta-row .pet-button:focus-visible{
  color:var(--pet-button-color, #fff);
}

.pcc-cta-row .pet-button--secondary,
.pcm-row__ctas .pet-button--secondary,
.pcc-cta-row .pet-button--secondary,
.pcm-row__ctas .pet-button--secondary{
  background:var(--pet-secondary);
  border-color:var(--pet-secondary);
  color:#fff;
}
.pcc-cta-row .pet-button--secondary:hover,
.pcm-row__ctas .pet-button--secondary:hover,
.pcc-cta-row .pet-button--secondary:hover,
.pcm-row__ctas .pet-button--secondary:hover{
  transform:translateY(-1px);
  background:var(--pet-secondary-dark, #c95c37);
  border-color:var(--pet-secondary-dark, #c95c37);
  color:#fff;
}

.pcc-card--promo .pcc-cta-row .pet-button:only-child,
.pcc-card--promo .pcc-cta-row .pet-button--primary:only-child{ grid-column:1 / -1; }

@media (max-width:380px){
  .pcc-card--promo .pcc-cta-row{ grid-template-columns:1fr; }
}
/* Promo card thumbnail images */
.pcc-thumb--promo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.pcc-thumb__media--illustration img.pcc-thumb__img {
  width: 100%;
  height: auto;
  display: block;
  background: linear-gradient(135deg, #f5f0e8 0%, #ebe5d8 100%);
}

/* Promo card placeholder thumb */
.pcc-thumb--placeholder {
  min-height: 120px;
  background: linear-gradient(135deg, #f5f0e8 0%, #ebe5d8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pcc-thumb--placeholder::after {
  content: '\2726';
  font-size: 2rem;
  color: var(--pet-primary, #1A2F5B);
  opacity: 0.25;
}

.pcc-cta-row .pet-blocks-button,
.pcm-row__ctas .pet-blocks-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:.85rem 1.8rem;
  border-radius: var(--pet-radius, 14px);
  font-weight:var(--pet-font-bold, 700);
  text-decoration:none;
  border:2px solid transparent;
  box-shadow:var(--pet-blocks-cta-shadow, 0 10px 24px rgba(22,36,70,0.18));
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

/* Empty state */
.pcc-empty{
  background:var(--pet-surface, #ffffff);
  border-radius:var(--pet-radius, 14px);
  padding:2rem;
  text-align:center;
}
.pcc-empty__chip{
  display:inline-block;
  background:#f0f3f6; padding:.25rem .55rem; border-radius: var(--pet-radius-full);
  cursor:pointer; font-size:.85rem; line-height:1; color:#002240;
}
.pcc-empty__chip:hover{ filter:brightness(.96); }

/* --- List view responsiveness polish (generic) --- */
.pcc-row__body{ min-width:0; }
.pcc-row__aside{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.pcc-row__price{ white-space:nowrap; }

@media (max-width:900px){
  .pcc-row{ grid-template-columns:88px 1fr; align-items:start; }
  .pcc-row__thumb img{ width:88px; height:66px; object-fit:cover; }
  .pcc-row__aside{ justify-content:flex-end; }
}
@media (max-width:640px){
  .pcc-row{ grid-template-columns:1fr; gap:.75rem; }
  .pcc-row__thumb{ order:1; }
  .pcc-row__thumb img{ width:100%; height:auto; aspect-ratio:16/9; border-radius: var(--pet-radius-sm); }
  .pcc-row__body{ order:2; }
  .pcc-row__aside{ order:3; justify-content:space-between; gap:.75rem; }
  .pcc-row__price{ flex:0 1 auto; }
  .pcc-row__aside .pet-button{ flex:1 1 100%; justify-content:center; }
}

/* =========================
   Mentorships — Grid & Rows
   ========================= */

/* 2-across mentorship grid (reuses card styles) */
.pcm-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--pet-grid-gap, 24px); padding-right: 10px;padding-left: 10px;}
/* collapse only on phones */
@media (max-width:680px){
  .pcm-grid{ grid-template-columns:1fr; }
}

/* Prevent grid items from enforcing an oversized intrinsic width */
.pcm-grid > * { min-width: 0; }             /* mentorship grid items */
.pcc-grid > * { min-width: 0; }             /* (optional) course grid items too */
.pcm-grid .entry-title { overflow-wrap:anywhere; word-break:break-word; } /* safety for long titles */

@media (min-width:680px) and (max-width:1024px){.pc-mentorships .pcm-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* Card tweaks */
.pcm-card .pcm-subtitle{ opacity:.85; margin-top:.15rem; font-size:.95rem; }

/* Block spacing */
.pc-mentorships{ padding-bottom:var(--pet-blocks-block-bottom-spacing); }

/* List container */
.pcm-list{ display:grid; gap:14px; }

/* Base row shell */
.pcm-row{
  display:grid; gap:14px; align-items:center;
  background:var(--pet-surface, #fff);
  border-radius:var(--pet-radius, 14px);
  border:var(--pet-border-width, 1px) solid var(--pet-border-color, #1a1a2e14);
  box-shadow:var(--pet-card-shadow);
}

.pc-mentorships .pcm-row.pcm-row--lg{
  display:grid;
  grid-template-columns:260px 1fr 240px;
  gap:20px; align-items:stretch; padding:18px;   /* stretch to remove bottom gaps */
  min-height:220px;
}
.pc-mentorships .pcm-row--lg .pcm-row__thumb{
  border-radius: var(--pet-block-radius); overflow:hidden; height:100%;
}
.pc-mentorships .pcm-row--lg .pcm-row__thumb img{
  width:100%; height:100%; object-fit:cover; object-position:right center; display:block;
}
.pc-mentorships .pcm-row--lg .pcm-row__body{ display:grid; gap:.5rem; }
.pc-mentorships .pcm-row--lg .pcm-row__bullets{
  list-style:none; margin:.25rem 0 0; padding:0; display:grid; gap:.15rem;
}
.pc-mentorships .pcm-row--lg .pcm-row__aside{
  display:flex; flex-direction:column; gap:.75rem; align-items:flex-start; text-align:left;    align-self:center;
}
.pc-mentorships .pcm-row--lg .pcm-aside__price{
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
}
.pc-mentorships .pcm-row--lg .pcc-row__price{ display:flex; gap:.5rem; align-items:baseline; }
.pc-mentorships .pcm-row--lg .pcm-row__ctas{
  display:flex; gap:.5rem; flex-wrap:wrap; justify-content:flex-start;
}
.pc-mentorships .pcm-row--lg .pcm-row__ctas .pet-button{ width:auto; padding:.45rem .95rem; }

@media (max-width:900px){
  .pc-mentorships .pcm-row.pcm-row--lg{ grid-template-columns:200px 1fr; }
  .pc-mentorships .pcm-row--lg .pcm-row__aside{
    grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; align-items:center; gap:.75rem; justify-content:space-between;    align-self:center;
  }
}
@media (max-width:640px){
  .pc-mentorships .pcm-row.pcm-row--lg{ grid-template-columns:1fr; }
  .pc-mentorships .pcm-row--lg .pcm-row__aside{ flex-direction:column; align-items:flex-start; }
  .pc-mentorships .pcm-row--lg .pcm-row__thumb img{ height:200px; }
}

/* Savings / status pills (shared) */
.pcc-price .save{ margin-left:.5rem; font-weight:var(--pet-font-semibold, 600); opacity:.9; }
.pcm-save{ font-size:.9rem; color: var(--pet-success, #10b981); font-weight:var(--pet-font-semibold, 600); }
.pcm-status-note{ margin:.25rem 0 0; }

/* ========================================
   PCM Status Notes

   Informational banners for course status.
   Designed to look distinct from buttons.
   ======================================== */
.pcm-note{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  line-height:1.35;
  font-size:.85rem;
  font-weight:500;
  padding:.5rem .75rem;
  border-radius: var(--pet-radius-sm);
  border:1px solid rgba(0,0,0,.08);
}

/* Icon pseudo-element for notes */
.pcm-note::before{
  font-family: bb-icons;
  font-weight:400;
  font-size:1rem;
  flex-shrink:0;
  line-height:1;
}

/* Color variants - Coordinated brand palette */
.pcm-note--closed{
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.18);
  color: #b91c1c;
}
.pcm-note--closed::before{ content: "\e828"; } /* times/x */

.pcm-note--waitlist{
  background: rgba(120,113,108, 0.08);
  border-color: rgba(120,113,108, 0.15);
  color: #57534e;
}
.pcm-note--waitlist::before{ content: "\e884"; } /* clock */

.pcm-note--soon{
  background: rgba(228, 110, 66, 0.1);
  border-color: rgba(228, 110, 66, 0.2);
  color: #9a4a2a;
}
.pcm-note--soon::before{ content: "\e884"; } /* clock */

.pcm-note--slots{
  background: rgba(31, 111, 219, 0.08);
  border-color: rgba(31, 111, 219, 0.18);
  color: #1B4B7A;
}
.pcm-note--slots::before{ content: "\e95d"; } /* users */

/* Slots card indicator — rich visual for course cards */
.pcm-slots-card{
  width: 100%;
  padding: .6rem .85rem;
  background: linear-gradient(135deg, #fdf8f0 0%, #fef6e8 100%);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--pet-radius-sm, 8px);
}
.pcm-slots-card__bar{
  height: 4px;
  background: rgba(245, 158, 11, 0.15);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: .4rem;
}
.pcm-slots-card__fill{
  height: 100%;
  background: #b45309;
  border-radius: 2px;
}
.pcm-slots-card__text{
  display: block;
  font-size: .8125rem;
  font-weight: var(--pet-font-semibold, 600);
  color: var(--pet-text-primary, #1a1a2e);
  text-align: center;
  line-height: 1.3;
}

/* Urgency escalation */
.pcm-slots-card--medium{
  background: linear-gradient(135deg, #fef6e8 0%, #fef0d4 100%);
  border-color: rgba(245, 158, 11, 0.4);
}
.pcm-slots-card--high{
  background: linear-gradient(135deg, #fef2f0 0%, #fee8e4 100%);
  border-color: rgba(220, 90, 60, 0.25);
}
.pcm-slots-card--high .pcm-slots-card__fill{ background: #c0392b; }
.pcm-slots-card--high .pcm-slots-card__text{ color: #7f1d1d; }

.pcm-slots-card--critical{
  background: linear-gradient(135deg, #fef2f0 0%, #fde8e4 100%);
  border-color: rgba(192, 57, 43, 0.3);
  animation: pcm-slots-pulse 2.5s ease-in-out infinite;
}
.pcm-slots-card--critical .pcm-slots-card__fill{ background: #a93226; }
.pcm-slots-card--critical .pcm-slots-card__text{ color: #7f1d1d; }

@keyframes pcm-slots-pulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(192,57,43,0); }
  50%{ box-shadow: 0 0 0 3px rgba(192,57,43,0.06); }
}

.pcm-note--booked{
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.18);
  color: #b91c1c;
}
.pcm-note--booked::before{ content: "\e828"; } /* x/times */

.pcm-note--cohort{
  background: rgba(120,113,108, 0.08);
  border-color: rgba(120,113,108, 0.15);
  color: #57534e;
}
.pcm-note--cohort::before{ content: "\e803"; } /* calendar */

/* Card-specific note styling - full width banner style */
.pcc-card .pcm-note{
  display:flex;
  width:100%;
  justify-content:center;
  text-align:center;
  font-weight:var(--pet-font-semibold, 600);
  padding:.6rem .85rem;
  border-radius: var(--pet-radius-sm);
  font-size:.875rem;
  line-height:1.35;
}
.pc-mentorships .pcm-status{
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
  margin:.35rem 0 0;
}
/* Status notes in card footer */
.pcc-card .entry-footer .pcm-status{
  display:grid;
  gap:.5rem;
  margin:0 0 .5rem;
}
.pcc-status-row{
  display:inline-flex;
  gap:.4rem;
  align-items:center;
  margin:.25rem 0 0;
}

.bb-single-course-sidebar .pc-mentorship-status{
  display:grid;
  gap:.5rem;
  margin:1rem 0 .75rem;
}
.bb-single-course-sidebar .pc-mentorship-status .pcm-note{
  width:100%;
  justify-content:center;
  text-align:center;
  font-weight:var(--pet-font-semibold, 600);
  padding:.6rem .85rem;
  border-radius: var(--pet-radius-sm);
  font-size:.9rem;
}

/* ========================================
   LearnDash Status Badges (Sidebar)

   Restyle LD status badges to match pcm-note design.
   These appear in course sidebar showing enrollment status.
   ======================================== */
.bb-single-course-sidebar .ld-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  width:100%;
  text-align:center;
  font-weight:var(--pet-font-semibold, 600);
  padding:.6rem .85rem;
  border-radius: var(--pet-radius-sm);
  font-size:.875rem;
  line-height:1.35;
  border:1px solid rgba(0,0,0,.08);
  text-transform:none;
  letter-spacing:normal;
  height:auto;
}

/* Icon pseudo-element for LD status */
.bb-single-course-sidebar .ld-status::before{
  font-family: bb-icons;
  font-weight:400;
  font-size:1rem;
  flex-shrink:0;
  line-height:1;
}

/* Not Enrolled - muted slate (matches waitlist) */
.bb-single-course-sidebar .ld-status.ld-status-incomplete,
.bb-single-course-sidebar .ld-status.ld-third-background{
  background: rgba(120,113,108, 0.08);
  border-color: rgba(120,113,108, 0.15);
  color: #57534e;
}
.bb-single-course-sidebar .ld-status.ld-status-incomplete::before,
.bb-single-course-sidebar .ld-status.ld-third-background::before{
  content: "\e828"; /* times/x */
}

/* In Progress - blue theme (matches brand) */
.bb-single-course-sidebar .ld-status.ld-status-progress,
.bb-single-course-sidebar .ld-status.ld-primary-background{
  background: rgba(31, 111, 219, 0.08);
  border-color: rgba(31, 111, 219, 0.18);
  color: #1B4B7A;
}
.bb-single-course-sidebar .ld-status.ld-status-progress::before,
.bb-single-course-sidebar .ld-status.ld-primary-background::before{
  content: "\e884"; /* clock - in progress */
}

/* Completed - green success */
.bb-single-course-sidebar .ld-status.ld-status-complete,
.bb-single-course-sidebar .ld-status.ld-secondary-background{
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.18);
  color: #047857;
}
.bb-single-course-sidebar .ld-status.ld-status-complete::before,
.bb-single-course-sidebar .ld-status.ld-secondary-background::before{
  content: "\e876"; /* checkmark */
}

/* Course closed status */
.bb-single-course-sidebar .ld-status.ld-text{
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.18);
  color: #b91c1c;
}
.bb-single-course-sidebar .ld-status.ld-text::before{
  content: "\e879"; /* lock */
}

.bb-single-course-sidebar .learndash_join_button .btn-advance{
  display:block;
  width:100%;
  border-radius: var(--pet-radius, 14px);
  padding:.7rem 1.1rem;
  font-weight:var(--pet-font-semibold, 600);
  text-align:center;
  transition:transform .18s ease, box-shadow .18s ease;
}
.bb-single-course-sidebar .learndash_join_button .btn-advance:not(:last-child){
  margin-bottom:.5rem;
}
.bb-single-course-sidebar .learndash_join_button .btn-advance:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(30,28,24,.14);
}
.bb-single-course-sidebar .learndash_join_button .ld-secondary-background{
  background:#18a365;
  color:#fff;
}
.bb-single-course-sidebar .learndash_join_button .ld-secondary-background:hover{
  background:#148957;
  color:#fff;
}

/* ---------- Small list (thumb | body | sidebar) ---------- */
.pc-mentorships .pcm-row.pcm-row--sm{
  display:grid;
  grid-template-columns:160px minmax(0,1fr) 420px;   /* tighter body; big enough aside */
  gap:16px;
  align-items:start;
  padding:16px;
}

/* Thumb: crop from the RIGHT so badges stay visible */
.pc-mentorships .pcm-row--sm .pcm-row__thumb{
  border-radius: var(--pet-block-radius); overflow:hidden;
}
.pc-mentorships .pcm-row--sm .pcm-row__thumb img{
  width:100%; height:110px; object-fit:cover; object-position:right center; display:block;
}

/* Body — show up to two bullets (your PHP limits to 2 already) */
.pc-mentorships .pcm-row--sm .pcm-row__bullets{
  list-style:none; margin:.35rem 0 0; padding:0; display:grid; gap:.3rem;
}
.pc-mentorships .pcm-row--sm .pcm-row__bullets li, .pc-mentorships .pcm-row--lg .pcm-row__bullets li{
  display:flex; align-items:center; gap:.4rem;
}

/* Aside — first row: price + status; second row: CTAs inline */
.pc-mentorships .pcm-row--sm .pcm-row__aside{
  display:grid;
  grid-template-columns:auto auto;   /* price | status */
  column-gap:.6rem;
  row-gap:.6rem;
  justify-content:end;
  align-items:center;
  text-align:right;
    align-self:center;
    
}
.pc-mentorships .pcm-row--sm .pcc-row__price{
  display:inline-flex; gap:.5rem; align-items:baseline; white-space:nowrap;
}
.pc-mentorships .pcm-row--sm .pcc-status-row{
  display:inline-flex; margin:0;
}
.pc-mentorships .pcm-row--sm .pcm-row__ctas{
  grid-column:1 / -1; display:flex; gap:.5rem; flex-wrap:wrap; justify-content:flex-end;
}
.pc-mentorships .pcm-row--sm .pcm-row__ctas .pet-button,
.pc-mentorships .pcm-row--sm .pcm-row__ctas .pet-button--primary{
  width:auto; padding:.45rem .95rem;
}

/* Responsive collapse for small list */
@media (max-width:900px){
  .pc-mentorships .pcm-row.pcm-row--sm{
    grid-template-columns: 140px minmax(0,1fr);
  }
.pc-mentorships .pcm-row--sm .pcm-row__aside{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; justify-content:space-between; }
}
@media (max-width:680px){
  .pc-mentorships .pcm-row.pcm-row--sm{
    grid-template-columns:1fr;            /* stack */
  }
  .pc-mentorships .pcm-row--sm .pcm-row__aside{
    justify-content:start; text-align:left;
    grid-template-columns:auto auto;
  }
  .pc-mentorships .pcm-row--sm .pcm-row__ctas{ justify-content:flex-start; }
  .pc-mentorships .pcm-row--sm .pcm-row__thumb img{
    height:180px; object-position:center center;
  }
}

/* Site-wide course grids only: keep 2-up between 801–991px */
@media (min-width:801px) and (max-width:991.98px){
  /* LearnDash Course Grid masonry */
  .ld-cg-wrap .masonry{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: var(--pet-grid-gap, 24px) !important;
  }
  .ld-cg-wrap .masonry > *{
    width: auto !important;
    margin: 0 !important;
  }

  /* PET grids — force grid display at tablet breakpoint */
  .pc-courses .pcc-grid,
  .pc-mentorships .pcm-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: var(--pet-grid-gap, 24px) !important;
  }
  .pc-courses .pcc-grid > *,
  .pc-mentorships .pcm-grid > *{
    width: auto !important;
    margin: 0 !important;
  }
}

/* Full-width section under content + sidebar */
.fr-related-courses{
  clear: both;              /* escape the two-column flow */
  width: 100%;
  padding: 2rem 0 3rem;
  background: var(--pet-surface, #ffffff);
}

/* Match site container width */
.fr-related-courses .fr-container{
  max-width: var(--pet-container-width, 1200px);
  margin: 0 auto;
  padding: 0 16px;          /* side breathing room */
}

/* Title spacing */
.fr-related__title{
  margin: 0 0 1rem;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  font-weight: var(--pet-heading-weight, 600);
}

/* Force a simple, fast 4-up grid (no Masonry) */
.fr-related-courses .pcc-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pet-grid-gap, 24px);
}

/* Make sure any Masonry sizer doesn’t create a skinny column */
.fr-related-courses .bb-masonry-sizer{ display:none !important; }

/* Keep cards tidy inside this context */
.fr-related-courses .pcc-card,
.fr-related-courses .pcc-row{
  margin: 0 !important;
}

/* Responsive steps */
@media (max-width: 1100px){
  .fr-related-courses .pcc-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 820px){
  .fr-related-courses .pcc-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .fr-related-courses .pcc-grid{ grid-template-columns: 1fr; }
}

/* Pills now use global pet-pills.css system */

/* === Related Courses (scoped) === */
.frc-block{ margin:40px 0 0; }
.frc-container{
  width:100%;
  max-width: var(--pet-container-width, 1200px);
  margin:0 auto;
  padding:0 16px;
}
.frc-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.frc-title{ margin:0; font-size:1.375rem; line-height:1.2; }
.frc-grid{
  display:grid;
  grid-template-columns: repeat(1, minmax(0,1fr));
  gap:16px;
}
@media (min-width:640px){ .frc-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width:1024px){ .frc-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* If pc-courses card styles are present, these simply reuse them.
   Otherwise add tiny fallbacks so layout doesn't collapse. */
.frc-grid .pcc-card{ border:var(--pet-border-width, 1px) solid var(--pet-border-color, rgba(26, 26, 46, 0.08)); border-radius:var(--pet-radius, 14px); overflow:hidden; background:var(--pet-surface, #fff); box-shadow:var(--pet-grid-card-shadow); }
.frc-grid .pcc-thumb img{ display:block; width:100%; height:auto; }
.frc-grid .pcc-body{ padding:12px; }
.frc-grid .entry-title{ font-size:1rem; line-height:1.3; margin:0; }

/* ==========================================================================
   Card Style Variants
   Choose via card_style attribute: default|compact|horizontal|minimal|badges|two-row
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Compact Style (.pcc-card--compact)
   Inline meta with dot separators, 4:3 thumbnail, ~40% shorter cards
   -------------------------------------------------------------------------- */
.pcc-card--compact {
	/* Compact card body */
}

.pcc-card--compact .pcc-thumb {
	aspect-ratio: 4 / 3;
}

.pcc-card--compact .pcc-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pcc-card--compact .pcc-body {
	padding: 16px 20px 18px;
	gap: 0.65rem;
}

.pcc-card--compact .entry-title {
	font-size: 1rem;
	line-height: 1.3;
}

/* Inline meta with dot separators */
.pcc-card--compact .pcc-features {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	font-size: 0.8rem;
	color: var(--pet-text-secondary, #57534e);
	margin: 0;
}

.pcc-card--compact .pcc-features li {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.pcc-card--compact .pcc-features li:not(:last-child)::after {
	content: '\00B7';
	margin: 0 0.4rem;
	opacity: 0.5;
	font-weight: var(--pet-font-bold, 700);
}

.pcc-card--compact .pcc-features li i,
.pcc-card--compact .pcc-features li .bb-icon {
	font-size: 0.85em;
	opacity: 0.7;
}

/* Price and CTA on same row */
.pcc-card--compact .entry-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	margin-top: auto;
}

.pcc-card--compact .pcc-cta-row {
	flex-direction: row;
	gap: 0.5rem;
	margin-top: 0;
}

.pcc-card--compact .pcc-cta-row .pet-button,
.pcc-card--compact .pcc-cta-row .pet-blocks-button {
	padding: 0.55rem 1rem;
	min-height: auto;
	font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   2. Horizontal Style (.pcc-card--horizontal)
   Side-by-side layout with square thumbnail
   -------------------------------------------------------------------------- */
.pcc-card--horizontal {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 0;
	flex-direction: row;
}

.pcc-card--horizontal .pcc-thumb {
	aspect-ratio: 1;
	border-radius: var(--pet-radius, 14px);
	overflow: hidden;
}

.pcc-card--horizontal .pcc-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pcc-card--horizontal .pcc-body {
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
}

.pcc-card--horizontal .entry-title {
	font-size: 0.95rem;
	line-height: 1.25;
	margin: 0;
}

.pcc-card--horizontal .entry-title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Inline meta */
.pcc-card--horizontal .pcc-features {
	display: inline;
	font-size: 0.8rem;
	color: var(--pet-text-secondary, #57534e);
	margin: 0;
}

.pcc-card--horizontal .pcc-features li {
	display: inline;
}

.pcc-card--horizontal .pcc-features li:not(:last-child)::after {
	content: ' \00B7 ';
	opacity: 0.5;
}

.pcc-card--horizontal .pcc-features li i,
.pcc-card--horizontal .pcc-features li .bb-icon {
	display: none;
}

/* Footer inline */
.pcc-card--horizontal .entry-footer {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: auto;
}

.pcc-card--horizontal .pcc-price {
	font-size: 0.9rem;
}

.pcc-card--horizontal .pcc-cta-row {
	flex-direction: row;
	margin-top: 0;
	gap: 0.5rem;
}

.pcc-card--horizontal .pcc-cta-row .pet-button,
.pcc-card--horizontal .pcc-cta-row .pet-blocks-button {
	padding: 0.4rem 0.85rem;
	min-height: auto;
	font-size: 0.8rem;
}

/* Hide pills in horizontal */
.pcc-card--horizontal .pcc-format-pill,
.pcc-card--horizontal .pcc-ribbon,
.pcc-card--horizontal .pcc-slots-pill {
	display: none;
}

/* Responsive: stack on mobile */
@media (max-width: 480px) {
	.pcc-card--horizontal {
		grid-template-columns: 1fr;
	}
	.pcc-card--horizontal .pcc-thumb {
		aspect-ratio: 16 / 9;
		border-radius: var(--pet-radius, 14px) 0 0;
	}
}

/* --------------------------------------------------------------------------
   3. Minimal Style (.pcc-card--minimal)
   Image-focused with overlay info, ultra-compact
   -------------------------------------------------------------------------- */
.pcc-card--minimal {
	position: relative;
	overflow: hidden;
}

.pcc-card--minimal .pcc-thumb {
	aspect-ratio: 16 / 10;
}

.pcc-card--minimal .pcc-thumb::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 50%);
	z-index: 2;
	pointer-events: none;
}

.pcc-card--minimal .pcc-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Overlay info on image */
.pcc-card--minimal .pcc-thumb .pcc-overlay-info {
	position: absolute;
	bottom: 10px;
	right: 12px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-weight: 600;
	font-size: 0.85rem;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.pcc-card--minimal .pcc-body {
	padding: 12px 16px;
	gap: 0.5rem;
}

.pcc-card--minimal .entry-title {
	font-size: 1rem;
	line-height: 1.3;
	margin: 0;
}

/* Hide features list in minimal */
.pcc-card--minimal .pcc-features {
	display: none;
}

/* Inline footer */
.pcc-card--minimal .entry-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.pcc-card--minimal .pcc-cta-row {
	flex-direction: row;
	margin-top: 0;
}

.pcc-card--minimal .pcc-cta-row .pet-button,
.pcc-card--minimal .pcc-cta-row .pet-blocks-button {
	padding: 0.5rem 1rem;
	min-height: auto;
	font-size: 0.85rem;
}

/* Hide format pill, keep ribbon */
.pcc-card--minimal .pcc-format-pill {
	display: none;
}

/* --------------------------------------------------------------------------
   4. Badges Style (.pcc-card--badges)
   Features shown as small colored badges
   -------------------------------------------------------------------------- */
.pcc-card--badges .pcc-body {
	padding: 16px 20px 20px;
	gap: 0.75rem;
}

.pcc-card--badges .entry-title {
	font-size: 1.05rem;
	line-height: 1.3;
}

/* Features as inline badges */
.pcc-card--badges .pcc-features {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}

.pcc-card--badges .pcc-features li {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.55rem;
	background: var(--pet-surface-muted, #f2efe8);
	border: var(--pet-border-width, 1px) solid var(--pet-border-color, #e7e5e4);
	border-radius: var(--pet-radius-full);
	font-size: 0.75rem;
	color: var(--pet-text-secondary, #57534e);
	white-space: nowrap;
}

.pcc-card--badges .pcc-features li i,
.pcc-card--badges .pcc-features li .bb-icon {
	font-size: 0.8em;
	color: var(--pet-primary, #1A2F5B);
	opacity: 0.8;
}

.pcc-card--badges .entry-footer {
	margin-top: auto;
}

/* --------------------------------------------------------------------------
   5. Two-row Meta Style (.pcc-card--two-row)
   Two rows of icon+text meta (3 per row)
   -------------------------------------------------------------------------- */
.pcc-card--two-row .pcc-body {
	padding: 18px 22px 22px;
	gap: 0.75rem;
}

.pcc-card--two-row .entry-title {
	font-size: 1.05rem;
	line-height: 1.3;
}

/* Two-row grid layout */
.pcc-card--two-row .pcc-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.4rem 0.75rem;
	margin: 0;
}

.pcc-card--two-row .pcc-features li {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8rem;
	color: var(--pet-text-secondary, #57534e);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pcc-card--two-row .pcc-features li i,
.pcc-card--two-row .pcc-features li .bb-icon {
	font-size: 0.9em;
	color: var(--pet-primary, #1A2F5B);
	opacity: 0.7;
	flex-shrink: 0;
}

.pcc-card--two-row .entry-footer {
	margin-top: auto;
}

/* Responsive: 2 columns on smaller screens */
@media (max-width: 480px) {
	.pcc-card--two-row .pcc-features {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   Grid adjustments for card styles
   ========================================================================== */

/* Horizontal cards work better in 2-column layouts */
.pc-courses[data-card-style="horizontal"] .pcc-grid {
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 900px) {
	.pc-courses[data-card-style="horizontal"] .pcc-grid {
		grid-template-columns: 1fr;
	}
}

/* Minimal cards can fit 4-up on wide screens */
@media (min-width: 1200px) {
	.pc-courses[data-card-style="minimal"] .pcc-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ==========================================================================
   6. Modern Style (.pcc-card--modern)
   SaaS education card — instructor, prominent ratings, savings badge,
   course progress bar, full-width CTA
   ========================================================================== */

/* --- Body layout --- */
.pcc-card--modern .pcc-body {
	padding: 1rem 1.25rem 1.25rem;
	gap: 0.625rem;
}

/* --- Entry header (tight stacking for title + instructor + rating) --- */
.pcc-card--modern .entry-header {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

/* --- Title (2-line clamp) --- */
.pcc-card--modern .entry-title {
	font-size: 1.0625rem;
	font-weight: var(--pet-heading-weight, 600);
	line-height: 1.35;
	margin: 0;
}

.pcc-card--modern .entry-title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Instructor --- */
.pcc-card--modern .pcc-instructor {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--pet-text-muted, #6b6a7a);
	font-weight: 500;
	line-height: 1.3;
}

/* --- Mini trust stats strip (rating + level + CPD hours) --- */
.pcc-card--modern .pcc-card-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 1px;
	background: var(--pet-border-color, rgba(26, 26, 46, 0.08));
	border: var(--pet-border-width, 1px) solid var(--pet-border-color, rgba(26, 26, 46, 0.08));
	border-radius: var(--pet-radius-sm, 8px);
	overflow: hidden;
}

.pcc-card-stats__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0.5rem 0.4rem;
	background: var(--pet-surface, #ffffff);
}

.pcc-card-stats__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--pet-text-primary, #1a1a2e);
	background: var(--pet-surface-muted, #f2efe8);
	border-radius: 50%;
	margin-bottom: 2px;
}

.pcc-card-stats__badge i {
	font-size: 0.75rem;
	color: var(--pet-primary, #1b2f5b);
}

.pcc-card-stats__badge .bb-icon-star-fill {
	color: var(--pet-star-active, #f59e0b);
}

.pcc-card-stats__value {
	font-size: 0.6875rem;
	font-weight: var(--pet-font-semibold, 600);
	color: var(--pet-text-primary, #1a1a2e);
	line-height: 1.2;
}

.pcc-card-stats__label {
	font-size: 0.5625rem;
	color: var(--pet-text-muted, #6b6a7a);
	line-height: 1.2;
}

/* --- Features (capped at 4 in PHP, tighter spacing) --- */
.pcc-card--modern .pcc-features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.4rem;
}

.pcc-card--modern .pcc-features li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--pet-text-secondary, #2d2b3a);
	line-height: 1.35;
}

.pcc-card--modern .pcc-features li i,
.pcc-card--modern .pcc-features li .bb-icon {
	flex-shrink: 0;
	font-size: 0.9375rem;
	color: var(--pet-primary, #1b2f5b);
	opacity: 0.65;
}

/* --- Footer (stats + separator + price + progress + CTA) --- */
.pcc-card--modern .entry-footer {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

/* Price row — divider between stats and price */
.pcc-card--modern .pcc-price {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
	padding-top: 0.625rem;
	border-top: 1px solid var(--pet-border-color, rgba(26, 26, 46, 0.08));
}

.pcc-card--modern .pcc-price .fee {
	font-size: 1.35rem;
	font-weight: var(--pet-font-bold, 700);
	color: var(--pet-text-primary, #1a1a2e);
	line-height: 1;
}

.pcc-card--modern .pcc-price .worth {
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: line-through;
	color: var(--pet-text-muted, #6b6a7a);
	line-height: 1;
	margin-left: 0;
	opacity: 1;
}

/* Savings badge */
.pcc-card--modern .pcc-savings {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.5rem;
	background: var(--pet-success-light, #d1fae5);
	color: #065f46;
	font-size: 0.75rem;
	font-weight: var(--pet-font-semibold, 600);
	border-radius: var(--pet-radius-full, 999px);
	line-height: 1;
}

/* --- Course progress bar (inside .pcc-thumb, matching video-progress-bar) --- */
.pcc-card--modern .pcc-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: rgba(0, 0, 0, 0.3);
	z-index: 5;
	border-radius: 0 0 var(--pet-radius-sm, 8px) var(--pet-radius-sm, 8px);
	overflow: hidden;
}

.pcc-card--modern .pcc-progress__fill {
	height: 100%;
	background: var(--pet-secondary, #e46e42);
	transition: width 0.3s ease;
}

.pcc-card--modern .pcc-progress--complete .pcc-progress__fill {
	background: var(--pet-success, #10b981);
}

.pcc-card--modern .pcc-progress__label {
	display: block;
	font-size: 0.75rem;
	font-weight: var(--pet-font-semibold, 600);
	color: var(--pet-text-muted, #6b6a7a);
}

/* --- CTA button (full-width) --- */
.pcc-card--modern .pcc-cta-row {
	flex-direction: column;
}

.pcc-card--modern .pcc-cta-row .pet-button,
.pcc-card--modern .pcc-cta-row .pet-blocks-button {
	width: 100%;
	justify-content: center;
	min-height: 46px;
	font-size: 0.9375rem;
	font-weight: var(--pet-font-semibold, 600);
	border-radius: var(--pet-radius, 14px);
}

/* --- Hover lift --- */
.pcc-card--modern {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pcc-card--modern:hover {
	transform: translateY(-2px);
	box-shadow: var(--pet-shadow, 0 8px 24px rgba(30, 28, 24, 0.06));
}

/* --- Mentorship modern overrides --- */

/* Status notes (slots/cohort/waitlist) inside modern mentorship footer */
.pcc-card--modern .pcm-status {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Secondary CTA buttons (mentorship can have 2 CTAs) */
.pcc-card--modern .pcc-cta-row a + a {
  min-height: 40px;
  font-size: 0.8125rem;
}

/* ==========================================================================
   Enrolled State Button Variants
   For course cards showing user progress/completion/renewal status
   ========================================================================== */

/* Completed state - green success */
.pcc-card .pet-button--success,
.pcc-row .pet-button--success {
	background: var(--pet-success, #22c55e);
	border-color: var(--pet-success, #22c55e);
	color: #ffffff;
}

.pcc-card .pet-button--success:hover,
.pcc-row .pet-button--success:hover {
	background: var(--pet-success-hover, #16a34a);
	border-color: var(--pet-success-hover, #16a34a);
	color: #ffffff;
	transform: translateY(-1px);
}

/* Renewal warning - orange (expiring soon) */
.pcc-card .pet-button--warning,
.pcc-row .pet-button--warning {
	background: var(--pet-warning, #f59e0b);
	border-color: var(--pet-warning, #f59e0b);
	color: #ffffff;
}

.pcc-card .pet-button--warning:hover,
.pcc-row .pet-button--warning:hover {
	background: var(--pet-warning-hover, #d97706);
	border-color: var(--pet-warning-hover, #d97706);
	color: #ffffff;
	transform: translateY(-1px);
}

/* Renewal urgent - red (expired) */
.pcc-card .pet-button--urgent,
.pcc-row .pet-button--urgent {
	background: var(--pet-error, #dc2626);
	border-color: var(--pet-error, #dc2626);
	color: #ffffff;
}

.pcc-card .pet-button--urgent:hover,
.pcc-row .pet-button--urgent:hover {
	background: var(--pet-error-hover, #b91c1c);
	border-color: var(--pet-error-hover, #b91c1c);
	color: #ffffff;
	transform: translateY(-1px);
}

/* Renewal status notes - shown below button */
.pcc-renewal-note {
	display: block;
	font-size: var(--pet-text-xs, 0.75rem);
	margin-top: 6px;
	text-align: center;
	font-weight: 500;
}

.pcc-renewal-note--expiring {
	color: var(--pet-warning, #f59e0b);
}

.pcc-renewal-note--expired {
	color: var(--pet-error, #dc2626);
	font-weight: var(--pet-font-semibold, 600);
}

/* List row specific adjustments */
.pcc-row .pcc-renewal-note {
	text-align: right;
	margin-top: 4px;
}

@media (max-width: 640px) {
	.pcc-row .pcc-renewal-note {
		text-align: left;
	}
}