/* ============================================================
   Ni Source Technologies — Page-Specific Styles
   ============================================================ */

/* ─── HOME: Why Choose Us ─────────────────────────────────── */
.why-us-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

.why-us-card {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  transition: all var(--trans-base);
}

.why-us-card:hover {
  border-color: rgba(39,165,255,0.25);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.why-us-icon {
  width: 52px;
  height: 52px;
  background: var(--color-primary-pale);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--color-primary);
  flex-shrink: 0;
  transition: all var(--trans-base);
}

.why-us-card:hover .why-us-icon {
  background: var(--gradient-primary);
  color: white;
}

.why-us-content h4 {
  font-size: var(--text-base);
  font-weight: var(--fw-semi);
  color: var(--color-dark);
  margin-block-end: var(--space-2);
}

.why-us-content p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ─── HOME: Tech Partners Strip ───────────────────────────── */
.partners-strip {
  padding-block: var(--space-10);
  border-block: 1px solid var(--color-border);
  overflow: hidden;
}

.partners-track {
  display: flex;
  gap: var(--space-12);
  align-items: center;
  animation: marquee 30s linear infinite;
  width: max-content;
}

.partners-track:hover { animation-play-state: paused; }

.partner-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
  opacity: 0.35;
  filter: grayscale(100%);
  transition: all var(--trans-base);
  flex-shrink: 0;
}

.partner-logo:hover { opacity: 0.7; filter: none; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ─── ABOUT: Timeline ─────────────────────────────────────── */
.timeline {
  position: relative;
  padding-inline-start: var(--space-12);
}

.timeline::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 19px;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-primary), transparent);
}

.timeline-item {
  position: relative;
  padding-block-end: var(--space-10);
}

.timeline-dot {
  position: absolute;
  inset-inline-start: calc(-1 * var(--space-12) + 10px);
  inset-block-start: 4px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  border: 3px solid var(--color-white);
  box-shadow: 0 0 0 4px var(--color-primary-glass);
}

.timeline-year {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-block-end: var(--space-2);
}

.timeline-title {
  font-size: var(--text-lg);
  font-weight: var(--fw-semi);
  color: var(--color-dark);
  margin-block-end: var(--space-2);
}

.timeline-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* ─── ABOUT: Team Card ─────────────────────────────────────── */
.team-card {
  text-align: center;
  padding: var(--space-8);
  border-radius: var(--radius-2xl);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  transition: all var(--trans-slow);
}

.team-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

.team-avatar {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 3px solid var(--color-primary-pale);
  margin-inline: auto;
  margin-block-end: var(--space-4);
  transition: border-color var(--trans-base);
}

.team-card:hover .team-avatar { border-color: var(--color-primary); }

.team-avatar-placeholder {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: var(--fw-bold);
  color: white;
  margin-inline: auto;
  margin-block-end: var(--space-4);
}

.team-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--color-dark);
  margin-block-end: var(--space-1);
}

.team-role {
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: var(--fw-medium);
  margin-block-end: var(--space-4);
}

.team-bio {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-block-end: var(--space-5);
}

.team-social {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}

.team-social a {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--color-section-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  transition: all var(--trans-fast);
}

.team-social a:hover { background: var(--color-primary); color: white; }

/* ─── SERVICES: Process Steps ─────────────────────────────── */
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
  counter-reset: steps;
}

.process-step {
  padding: var(--space-8);
  border-radius: var(--radius-2xl);
  background: var(--color-section-bg);
  border: 1px solid var(--color-border);
  position: relative;
  counter-increment: steps;
  overflow: hidden;
}

.process-step::before {
  content: counter(steps, decimal-leading-zero);
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-5);
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: var(--fw-black);
  color: var(--color-primary);
  opacity: 0.07;
  line-height: 1;
}

.process-step-icon {
  font-size: 2rem;
  color: var(--color-primary);
  margin-block-end: var(--space-4);
}

.process-step-title {
  font-size: var(--text-base);
  font-weight: var(--fw-semi);
  color: var(--color-dark);
  margin-block-end: var(--space-2);
}

.process-step-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ─── CAREERS: Job Listing ─────────────────────────────────── */
.job-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  background: var(--color-white);
  transition: all var(--trans-base);
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
}

.job-card:hover {
  border-color: rgba(39,165,255,0.3);
  box-shadow: var(--shadow-lg);
  transform: translateX(4px);
}

.job-card-logo {
  width: 56px;
  height: 56px;
  background: var(--gradient-primary);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 1.1rem;
  color: white;
  flex-shrink: 0;
}

.job-card-body { flex: 1; min-width: 0; }

.job-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block: var(--space-2) var(--space-3);
}

.job-meta-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.2rem 0.7rem;
  background: var(--color-section-bg);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.job-meta-tag i { font-size: 0.7rem; color: var(--color-primary); }

.job-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--color-dark);
  text-decoration: none;
  transition: color var(--trans-fast);
}

.job-title:hover { color: var(--color-primary); }

.job-urgent-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.15rem 0.6rem;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: var(--radius-full);
  font-size: 0.6rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-error);
  margin-inline-start: var(--space-3);
}

/* ─── CONTACT: Map & Info ──────────────────────────────────── */
.contact-info-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: all var(--trans-base);
  align-items: flex-start;
}

.contact-info-card:hover {
  border-color: rgba(39,165,255,0.25);
  box-shadow: var(--shadow-md);
}

.contact-info-icon {
  width: 48px;
  height: 48px;
  background: var(--color-primary-pale);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--color-primary);
  flex-shrink: 0;
}

.contact-info-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-block-end: var(--space-1);
}

.contact-info-value {
  font-size: var(--text-sm);
  color: var(--color-dark);
  font-weight: var(--fw-medium);
}

.map-container {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

.map-container iframe {
  width: 100%;
  height: 350px;
  border: none;
  display: block;
}

/* ─── BLOG: Article Content ────────────────────────────────── */
.article-content {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: 1.9;
}

.article-content h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-dark);
  margin-block: var(--space-8) var(--space-4);
  letter-spacing: -0.02em;
}

.article-content h3 {
  font-size: var(--text-2xl);
  font-weight: var(--fw-semi);
  color: var(--color-dark);
  margin-block: var(--space-6) var(--space-3);
}

.article-content p { margin-block-end: var(--space-5); }

.article-content ul, .article-content ol {
  padding-inline-start: var(--space-6);
  margin-block-end: var(--space-5);
}

.article-content li { margin-block-end: var(--space-2); }

.article-content blockquote {
  border-inline-start: 4px solid var(--color-primary);
  padding-inline-start: var(--space-6);
  margin-block: var(--space-6);
  font-style: italic;
  color: var(--color-text-secondary);
  font-size: var(--text-xl);
}

.article-content code {
  background: var(--color-section-bg);
  padding: 0.2em 0.5em;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--color-primary-dark);
}

/* ─── PORTFOLIO: Lightbox ──────────────────────────────────── */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 10);
  background: rgba(10,15,30,0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  opacity: 0;
  visibility: hidden;
  transition: all var(--trans-base);
}

.lightbox-overlay.open {
  opacity: 1;
  visibility: visible;
}

.lightbox-inner {
  position: relative;
  max-width: 900px;
  width: 100%;
  max-height: 90dvh;
  overflow-y: auto;
  background: var(--color-dark-2);
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(255,255,255,0.08);
  padding: var(--space-8);
}

.lightbox-close {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  cursor: pointer;
  color: white;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--trans-fast);
}

.lightbox-close:hover { background: rgba(239,68,68,0.6); }

/* ─── ADMIN VIEWS (shared light styles) ───────────────────── */
.admin-page-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-dark);
  margin-block-end: var(--space-2);
}

.admin-page-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table th {
  text-align: start;
  padding: var(--space-3) var(--space-4);
  border-block-end: 2px solid var(--color-border);
  font-weight: var(--fw-semi);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.data-table td {
  padding: var(--space-4);
  border-block-end: 1px solid var(--color-border);
  vertical-align: middle;
}

.data-table tr:last-child td { border-block-end: none; }
.data-table tr:hover td { background: var(--color-section-bg); }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.2rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  text-transform: capitalize;
}

.status-new         { background: rgba(39,165,255,0.1); color: var(--color-primary); }
.status-contacted   { background: rgba(139,92,246,0.1); color: var(--color-purple); }
.status-in_progress { background: rgba(245,158,11,0.1); color: var(--color-warning); }
.status-closed      { background: rgba(16,185,129,0.1); color: var(--color-success); }
.status-spam        { background: rgba(239,68,68,0.1);  color: var(--color-error); }
.status-published   { background: rgba(16,185,129,0.1); color: var(--color-success); }
.status-draft       { background: rgba(100,116,139,0.1); color: var(--color-gray-500); }
.status-shortlisted { background: rgba(16,185,129,0.1); color: var(--color-success); }
.status-rejected    { background: rgba(239,68,68,0.1); color: var(--color-error); }
.status-hired       { background: rgba(139,92,246,0.1); color: var(--color-purple); }

/* ─── CONTACT: CAPTCHA & Sending Overlay ──────────────────── */
.captcha-wrapper {
  transition: border-color var(--trans-base), box-shadow var(--trans-base);
}
.captcha-wrapper:focus-within {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(39, 165, 255, 0.15);
}

.sending-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-2xl);
  z-index: 50;
  animation: fadeInOverlay 0.3s ease forwards;
}

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

.sending-overlay-content {
  text-align: center;
  max-width: 380px;
  width: 100%;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sending-spinner-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
  margin-block-end: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sending-spinner {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.sending-plane-icon {
  font-size: 1.8rem;
  color: var(--color-primary);
  animation: planeFloat 2s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes planeFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-6px) rotate(5deg); }
}

.sending-status-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-dark);
  margin-block-end: var(--space-2);
}

.sending-status-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-block-end: var(--space-6);
  line-height: 1.5;
}

.sending-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  text-align: start;
}

.sending-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  background: var(--color-section-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
}

.sending-step.active {
  color: var(--color-dark);
  border-color: var(--color-primary);
  background: var(--color-primary-pale);
  font-weight: var(--fw-medium);
}

.sending-step.completed {
  color: var(--color-success);
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.05);
}

.sending-step .step-dot {
  width: 8px;
  height: 8px;
  background: var(--color-text-muted);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.sending-step.active .step-dot {
  background: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(39, 165, 255, 0.25);
  animation: pulseDot 1s alternate infinite;
}

.sending-step.completed .step-dot {
  background: var(--color-success);
  box-shadow: none;
}

@keyframes pulseDot {
  0% { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(1.2); opacity: 1; }
}

/* Success State Styles */
.sending-overlay.success-state .sending-spinner {
  border-color: var(--color-success);
  border-top-color: var(--color-success);
  animation: none;
}

.sending-overlay.success-state .sending-plane-icon {
  color: var(--color-success);
  animation: successScale 0.5s ease-out forwards;
}

@keyframes successScale {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ============================================================
   Responsive — Tablet (≤ 768 px)
   ============================================================ */
@media (max-width: 768px) {

  /* ── Blog Listing ── */
  .blog-card-img-wrap { height: 200px; }
  .blog-card-body     { padding: var(--space-5); }
  .blog-card-title    { font-size: var(--text-lg); }
  .blog-card-meta     { gap: var(--space-2); font-size: var(--text-xs); }
  .blog-card-footer   { flex-wrap: wrap; gap: var(--space-3); }

  /* Category filter tabs — horizontal scroll on small screens */
  .filter-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-block-end: var(--space-2);
    scrollbar-width: none;
  }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tab { white-space: nowrap; }

  /* ── Blog Single ── */
  .article-content {
    font-size: var(--text-base);
    line-height: 1.8;
  }
  .article-content h2 {
    font-size: var(--text-2xl);
    margin-block: var(--space-6) var(--space-3);
  }
  .article-content h3 {
    font-size: var(--text-xl);
    margin-block: var(--space-5) var(--space-3);
  }
  .article-content blockquote {
    font-size: var(--text-base);
    padding-inline-start: var(--space-4);
  }

  /* Hero title on blog single */
  .page-hero-title { font-size: var(--text-4xl) !important; }

  /* Author / meta bar wraps nicely */
  .page-hero .flex,
  .page-hero [style*="display:flex"] { flex-wrap: wrap; gap: var(--space-3); }

  /* Tags row */
  .tech-badge { font-size: var(--text-xs); padding: 0.2rem 0.6rem; }

  /* ── Job Cards ── */
  .job-card { flex-direction: column; gap: var(--space-4); }
  .job-card-logo { width: 44px; height: 44px; font-size: 0.9rem; }
  .job-title { font-size: var(--text-base); }

  /* ── Contact Info Cards ── */
  .contact-info-card { flex-direction: column; align-items: flex-start; gap: var(--space-3); }

  /* ── Team Cards ── */
  .team-card { padding: var(--space-6); }

  /* ── Map ── */
  .map-container iframe { height: 260px; }

  /* ── Timeline ── */
  .timeline { padding-inline-start: var(--space-8); }

  /* ── Process Steps ── */
  .process-steps { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Responsive — Phone (≤ 480 px)
   ============================================================ */
@media (max-width: 480px) {

  /* ── Blog Listing ── */
  .blog-card-img-wrap { height: 180px; }
  .blog-card-body     { padding: var(--space-4); }
  .blog-card-footer   { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .blog-card-footer .btn { width: 100%; text-align: center; }

  /* ── Blog Single ── */
  .page-hero-title { font-size: var(--text-3xl) !important; }
  .page-hero { padding-block: var(--space-10) !important; }

  .article-content { font-size: var(--text-sm); }
  .article-content h2 {
    font-size: var(--text-xl);
    margin-block: var(--space-5) var(--space-2);
  }
  .article-content h3 {
    font-size: var(--text-lg);
  }
  .article-content ul,
  .article-content ol { padding-inline-start: var(--space-5); }

  /* Featured image rounded corners smaller on phone */
  .article-content > div:first-child,
  [style*="border-radius:var(--radius-2xl)"] { border-radius: var(--radius-xl) !important; }

  /* Share row stacks */
  [style*="display:flex;align-items:center;gap:var(--space-4)"] {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  /* ── Blog Sidebar ── */
  .col-lg-4 { margin-block-start: var(--space-8); }

  /* ── Job Cards ── */
  .job-card { padding: var(--space-4); }
  .job-card-meta { gap: var(--space-2); }
  .job-meta-tag { font-size: 0.65rem; padding: 0.15rem 0.5rem; }

  /* ── Contact ── */
  .contact-info-card { padding: var(--space-4); }
  .contact-info-icon { width: 40px; height: 40px; font-size: 1rem; }
  .map-container iframe { height: 220px; }

  /* ── Team Cards ── */
  .team-avatar,
  .team-avatar-placeholder { width: 72px; height: 72px; font-size: 1.5rem; }

  /* ── Process Steps ── */
  .process-steps { grid-template-columns: 1fr; }

  /* ── Why-Us Grid ── */
  .why-us-card { flex-direction: column; gap: var(--space-3); }

  /* ── General page-hero ── */
  .page-hero-subtitle { font-size: var(--text-base) !important; }
  .page-hero-label    { font-size: var(--text-xs); }
}