/* =========================
   NA BOX ICON (MODULAR SLOT)
   - Use .na-box-icon as an icon "slot"/wrapper
   - Works for:
       A) <img class="na-box-icon" ...>
       B) <div class="na-box-icon"><svg>...</svg></div>
       C) <div class="na-box-icon"><img ...></div>
========================= */

.na-box-icon {
  /* default size; override via .small / .large */
  --na-icon-size: 80px;

  width: var(--na-icon-size);
  height: auto;                 /* IMPORTANT: avoid phantom gaps for SVG wrappers */

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto 12px;

  /* enables currentColor for inline SVG */
  color: var(--na-icon-color);

  transition: transform 0.15s ease;
}

/* Media sizing (supports wrapper usage + direct img/svg usage) */
.na-box-icon > svg,
.na-box-icon > img,
img.na-box-icon,
svg.na-box-icon {
  width: var(--na-icon-size);
  height: var(--na-icon-size);
  display: block;
}

/* Image specifics */
.na-box-icon > img,
img.na-box-icon {
  object-fit: contain;
  object-position: center;
}

/* SVG specifics (filled icons) */
.na-box-icon > svg path,
svg.na-box-icon path {
  fill: currentColor;
}

/* Hover */
.na-box:hover .na-box-icon {
  transform: scale(1.05);
}

/* Size modifiers */
.na-box-icon.small { --na-icon-size: 64px; }
.na-box-icon.large { --na-icon-size: 96px; }



/* =========================
   COURSE LEVEL (BATTERY ICON)
   custom made SVG with .bat-bar segments
========================= */

.battery-icon {
  width: 30px;
  height: 30px;
  display: block;
  transition: transform 0.2s ease;
}

/* default (empty bars) */
.bat-bar {
  fill: #cbd5e1;
}

/* fill based on level wrapper class */
.course-icon--beginner .bat-bar--1 {
  fill: currentColor;
}

.course-icon--intermediate .bat-bar--1,
.course-icon--intermediate .bat-bar--2 {
  fill: currentColor;
}

.course-icon--advanced .bat-bar {
  fill: currentColor;
}

.course-card:hover .battery-icon {
  transform: translateY(-1px);
}



/* =========================
   OFFICIAL TECH LOGOS (SVG/IMG)
   e.g. python logo or other official icons
========================= */

.tech-logo {
  width: 28px;
  height: 28px;
  display: block;
  transition: transform 0.2s ease;
}

.course-card:hover .tech-logo {
  transform: translateY(-1px);
}



/* =========================
   DB ICON (SQL custom SVG)
========================= */

.db-icon {
  width: 28px;
  height: 28px;
  display: block;
  transition: transform 0.2s ease;
}

/* color for SQL icon variant */
.course-icon--sql,
.course-icon.course-icon--sql {
  color: #475569;
}

.course-card:hover .course-icon--sql {
  transform: translateY(-1px);
}