/* ==========================================================================
   INTERNSHIPS-IN-MOHALI.CSS - selectors used exclusively on this page.
   Prefix: iim-
   Hero section reuses the shared .bl-hero* component from global.css
   (no page-specific hero CSS needed here).
   ========================================================================== */

/* ------------------------------------------------------------------------
   SECTION DIVIDER - thin gradient line + centered icon badge, used
   between the hero and the internship-types section so the two don't
   blend into one visual block. Same pattern as industrial-training-
   in-mohali.css but scoped to this page's own CSS file.
   ------------------------------------------------------------------------ */

.iim-section-divider {
  position: relative;
  height: 1px;
  max-width: 1100px;
  margin: 18px auto 38px;
  background: linear-gradient(90deg, transparent 0%, var(--border-color) 15%, var(--border-color) 85%, transparent 100%);
}

.iim-section-divider-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: var(--shadow-md);
  border: 4px solid var(--bg-main);
}

/* ------------------------------------------------------------------------
   INTERNSHIP TYPE CARDS
   Each card sets its type via [data-type="..."] which drives the
   --iim-solid / --iim-grad custom properties below, so every type
   reads with its own distinct accent color.
   ------------------------------------------------------------------------ */

.iim-type-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 32px 26px 26px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.iim-type-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.iim-type-number {
  position: absolute;
  top: -16px;
  left: 26px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--iim-grad, var(--gradient-primary));
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  border: 3px solid var(--bg-main);
}

.iim-type-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--iim-grad, var(--gradient-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

.iim-type-tag {
  display: inline-flex;
  align-self: flex-start;
  background: var(--iim-badge-bg, rgba(108, 99, 255, 0.12));
  color: var(--iim-solid, var(--primary));
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 12px;
}

.iim-type-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.3;
}

.iim-type-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 16px;
}

.iim-type-points {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  gap: 10px;
  flex-grow: 1;
}

.iim-type-points li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.iim-type-points i {
  color: var(--iim-solid, var(--primary));
  font-size: 0.9rem;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Type color mapping */
.iim-type-card[data-type="stipend"] {
  --iim-solid: #c48a00;
  --iim-grad: var(--gradient-gold);
  --iim-badge-bg: rgba(196, 138, 0, 0.12);
}

.iim-type-card[data-type="free"] {
  --iim-solid: #0077b6;
  --iim-grad: var(--gradient-cool);
  --iim-badge-bg: rgba(0, 119, 182, 0.12);
}

.iim-type-card[data-type="training"] {
  --iim-solid: #6C63FF;
  --iim-grad: var(--gradient-primary);
  --iim-badge-bg: rgba(108, 99, 255, 0.12);
}

/* Call / WhatsApp quick-action buttons - shown under every internship type */
.iim-type-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
}

.iim-type-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}

.iim-type-btn--call {
  background: var(--iim-grad, var(--gradient-primary));
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.iim-type-btn--call:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: #fff;
}

.iim-type-btn--whatsapp {
  background: #047e3d;
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.iim-type-btn--whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: #fff;
  filter: brightness(1.08);
}

@media (max-width: 767px) {
  .iim-type-card { padding: 28px 20px 20px; }
  .iim-type-actions { flex-direction: column; }
}

/* ------------------------------------------------------------------------
   COURSE CARDS (same course names/domains as industrial-training-in-
   mohali.php). Each card IS the link (no separate button) — left
   accent border instead of top border, a corner "Internship Available"
   tag, and internship-focused copy. Cards are forced pure white in
   light theme and pure black in dark theme (explicit override, not
   the shared --bg-card token, since only these cards need that look).
   Domain accent colors reuse the same site tokens as the industrial-
   training page for visual consistency across pages.
   ------------------------------------------------------------------------ */

.iim-course-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--iim-course-solid, var(--primary));
  border-radius: var(--radius-md);
  padding: 22px 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  text-decoration: none;
  cursor: pointer;
}

[data-theme="dark"] .iim-course-card {
  background: #000000;
}

.iim-course-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.iim-course-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  background: var(--iim-course-badge-bg, rgba(108, 99, 255, 0.12));
  color: var(--iim-course-solid, var(--primary));
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 10px;
}

.iim-course-internship-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #047e3d;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}

.iim-course-logo-chip {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 8px;
  margin-bottom: 14px;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.iim-course-logo-chip img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.iim-course-logo-chip--multi {
  width: auto;
  min-width: 46px;
  height: 46px;
  gap: 6px;
  padding: 6px 8px;
}

.iim-course-logo-chip--multi img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.iim-course-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--iim-course-grad, var(--gradient-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: #fff;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.iim-course-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.3;
}

.iim-course-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 16px;
  flex-grow: 1;
}

.iim-course-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--iim-course-solid, var(--primary));
  font-size: 0.82rem;
  font-weight: 700;
}

.iim-course-cta i {
  font-size: 0.78rem;
  transition: transform 0.25s ease;
}

.iim-course-card:hover .iim-course-cta i {
  transform: translateX(4px);
}

/* Domain color mapping - same brand colors used on industrial-training-in-mohali.php */
.iim-course-card[data-domain="java"] {
  --iim-course-solid: #EA2D2E;
  --iim-course-grad: linear-gradient(135deg, #EA2D2E 0%, #0074BD 100%);
  --iim-course-badge-bg: rgba(234, 45, 46, 0.12);
}

.iim-course-card[data-domain="python"] {
  --iim-course-solid: #306998;
  --iim-course-grad: linear-gradient(135deg, #306998 0%, #FFD43B 100%);
  --iim-course-badge-bg: rgba(48, 105, 152, 0.12);
}

.iim-course-card[data-domain="mern"] {
  --iim-course-solid: #47A248;
  --iim-course-grad: linear-gradient(135deg, #4FAA41 0%, #3FA037 100%);
  --iim-course-badge-bg: rgba(71, 162, 72, 0.12);
}

.iim-course-card[data-domain="testing"] {
  --iim-course-solid: #FF6B6B;
  --iim-course-grad: linear-gradient(135deg, #FF6B6B 0%, #ff8e53 100%);
  --iim-course-badge-bg: rgba(255, 107, 107, 0.12);
}

.iim-course-card[data-domain="webdesign"] {
  --iim-course-solid: #f5576c;
  --iim-course-grad: var(--gradient-warm);
  --iim-course-badge-bg: rgba(245, 87, 108, 0.12);
}

.iim-course-card[data-domain="digital"] {
  --iim-course-solid: #c9820f;
  --iim-course-grad: var(--gradient-gold);
  --iim-course-badge-bg: rgba(253, 160, 133, 0.16);
}

[data-theme="dark"] .iim-course-badge {
  filter: brightness(1.15);
}

@media (max-width: 767px) {
  .iim-course-card { padding: 18px 16px; }
}


/* PHP domain card colour */
.iim-course-card[data-domain="php"] {
  --iim-course-solid: #777BB3;
  --iim-course-grad: linear-gradient(135deg, #8993BE 0%, #4F5B93 100%);
  --iim-course-badge-bg: rgba(119, 123, 179, 0.14);
}