/* ==========================================================================
   WEB-FULLSTACK-LINKS.CSS
   Reusable "Explore by Technology" section (includes/web-fullstack-links.php)
   Prefix: wfl-   |   Uses global.css tokens; own accent per card.
   ========================================================================== */

.wfl-section { padding: 50px 0; background: var(--bg-main); }

.wfl-card {
  --wfl-solid: #0369A1;
  --wfl-grad: linear-gradient(135deg, #0EA5E9 0%, #0369A1 100%);
  display: block;
  height: 100%;
  position: relative;
  padding: 28px 26px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-top: 4px solid var(--wfl-solid);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: var(--transition);
}
.wfl-card--full {
  --wfl-solid: #3B5BDB;
  --wfl-grad: linear-gradient(135deg, #5C7CFA 0%, #364FC7 100%);
}
[data-theme="dark"] .wfl-card { --wfl-solid: #38BDF8; }
[data-theme="dark"] .wfl-card--full { --wfl-solid: #91A7FF; }

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

.wfl-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.wfl-card-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--wfl-grad); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
}
.wfl-card-label { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wfl-solid); }
.wfl-card-title { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); margin-bottom: 8px; }
.wfl-card-desc { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: 16px; }

.wfl-logos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.wfl-logos img {
  width: 38px; height: 38px; padding: 7px; object-fit: contain;
  background: var(--bg-section); border: 1px solid var(--border-color); border-radius: 10px;
}

.wfl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.wfl-tags span {
  font-size: 0.74rem; font-weight: 700; padding: 4px 11px; border-radius: 999px;
  color: var(--wfl-solid); border: 1px solid var(--wfl-solid); background: transparent;
}

.wfl-card-btn { font-size: 0.88rem; font-weight: 800; color: var(--wfl-solid); }
.wfl-card-btn i { transition: var(--transition); display: inline-block; }
.wfl-card:hover .wfl-card-btn i { transform: translateX(5px); }

@media (max-width: 767px) { .wfl-section { padding: 36px 0; } .wfl-card { padding: 22px 18px 20px; } }